代码改变世界

如何设计自己的UI套件

2014-07-27 15:05  king0222  阅读(271)  评论(0)  编辑  收藏  举报

如何设计自己的UI套件

作为一名前端开发攻城师，你经常需要为了制作一个网站而去制定一套统一风格的UI组件，或者说需要制作一套比较通用的UI套件。在任何时候我们需要使用的时候能够轻松的拿来就能使用。因此，在设计UI套件之初，我们需要制定简单的命名规则，或者有一定的规律，便于记忆，也便于他人方便使用。

UI套件中应该包含我们常用的一些UI组件，比如导航条，按钮，下拉菜单，分页条等。导航、分页、按钮是每个网站都必然会用到的，因此这几个东西也成为UI套件中必不可少的几个组件。在开始完成我们的UI套件之前，我们可能需要有一个UI套件设计图，根据审美标准来形成我们的UI套件所希望形成的最终模样。我们就能根据那样一份设计稿来逐步完善我们的UI套件。当然这样一个UI设计稿并非必须，如果你喜欢边写代码边设计也不会有什么问题（如果条件允许的话）。

接下来我们需要一个html页面来显示我们开发过程中的实现组件，这个hmtl页面只需要简单实现即可，如果你关注github上对于前端的最新动态的话，你可以直接使用HTML5 boilerplate来作为html模板。

 1 <!DOCTYPE html>
 2 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 3 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 4 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 6     <head>
 7         <meta charset="utf-8">
 8         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9         <title></title>
10         <meta name="description" content="">
11         <meta name="viewport" content="width=device-width, initial-scale=1">
12 
13         <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
14 
15         <link rel="stylesheet" href="css/normalize.css">
16         <link rel="stylesheet" href="css/main.css">
17         <!-- 在这里添加您自定义的css样式文件, kit.css -->
18         <link rel="stylesheet" type="text/css" href="css/kit.css">
19         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
20     </head>
21 ... ...

在body中添加少量标签，以盛放我们需要实现的UI组件。

<body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div id="content">
            <ul class="ui-main-menu">
                <li><a href="" class="current">first</a></li>
                <li><a href="">second</a></li>
                <li><a href="">third</a></li>
                <li><a href="">forth</a></li>
                <li><a href="">fifth</a></li>
            </ul>
        </div>
... ...

当然你最好先把整个页面布局先写好，以便这个html页面看起来能比较美观...,现在我们在页面中添加了主导航的布局代码，类名称根据该组件的用途命名为ui-main-menu。

打开我们的kit.css文件，来实现其代码：

 

 1 .ui-main-menu {
 2     padding: 0;
 3     list-style-type: none;
 4     overflow: hidden;
 5     border: 1px solid transparent;
 6     background: #1e5799; /* Old browsers */ /* FF3.6+ */
 7     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
 8     background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
 9     background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
10     background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
11     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
12 
13 }
14 
15 .ui-main-menu li {
16     float: left;
17 }
18 
19 .ui-main-menu a {
20     display: block;
21     padding: 12px 22px 10px;
22     font-size: 14px;
23     line-height: 14px;
24     font-weight: bold;
25     text-decoration: none;
26     text-transform: uppercase;
27     opacity: .75;
28     -webkit-transition:all .3s ease-out;
29             transition:all .3s ease-out;
30 }
31 
32 .ui-main-menu a:hover {
33     opacity: 1;
34     color: #fff;
35     background: #228dad; /* Old browsers */
36     background: -moz-linear-gradient(top,  #228dad 0%, #2989d8 49%, #2467bf 50%, #2691ef 51%, #86cdf9 100%); /* FF3.6+ */
37     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#228dad), color-stop(49%,#2989d8), color-stop(50%,#2467bf), color-stop(51%,#2691ef), color-stop(100%,#86cdf9)); /* Chrome,Safari4+ */
38     background: -webkit-linear-gradient(top,  #228dad 0%,#2989d8 49%,#2467bf 50%,#2691ef 51%,#86cdf9 100%); /* Chrome10+,Safari5.1+ */
39     background: -o-linear-gradient(top,  #228dad 0%,#2989d8 49%,#2467bf 50%,#2691ef 51%,#86cdf9 100%); /* Opera 11.10+ */
40     background: -ms-linear-gradient(top,  #228dad 0%,#2989d8 49%,#2467bf 50%,#2691ef 51%,#86cdf9 100%); /* IE10+ */
41     background: linear-gradient(to bottom,  #228dad 0%,#2989d8 49%,#2467bf 50%,#2691ef 51%,#86cdf9 100%); /* W3C */
42     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#228dad', endColorstr='#86cdf9',GradientType=0 ); /* IE6-9 */
43 
44 }

当你做到这里的时候，你老板走过来了，他希望网站能有一个换肤的功能，这个时候你会发现若是按照现在的代码来看的话，要想实现换肤就不得不重新写一套css。这样必定是相当费时费力的。一个解决方案便是将与主题相关的一些属性拆分出来写，例如color, background等。

所以我们上面的代码需要修改为：

 1 .ui-main-menu {
 2     padding: 0;
 3     list-style-type: none;
 4     overflow: hidden;
 5     border: 1px solid transparent;
 6     
 7 }
 8 
 9 .ui-main-menu li {
10     float: left;
11 }
12 
13 .ui-main-menu a {
14     display: block;
15     padding: 12px 22px 10px;
16     font-size: 14px;
17     line-height: 14px;
18     font-weight: bold;
19     text-decoration: none;
20     text-transform: uppercase;
21     opacity: .75;
22     -webkit-transition:all .3s ease-out;
23             transition:all .3s ease-out;
24 }
25 
26 .ui-main-menu a:hover {
27     opacity: 1;
28     color: #fff;
29     
30 }
31 
32 
33 /* sky theme*/
34 .ui-sky .ui-main-menu{
35     background: #1e5799; /* Old browsers */ /* FF3.6+ */
36     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
37     background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
38     background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
39     background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
40     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
41 
42 }
43 .ui-sky .ui-main-menu a:hover{
44     background: #228dad; /* Old browsers */
45     background: -moz-linear-gradient(top,  #228dad 0%, #2989d8 49%, #2467bf 50%, #2691ef 51%, #86cdf9 100%); /* FF3.6+ */
46     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#228dad), color-stop(49%,#2989d8), color-stop(50%,#2467bf), color-stop(51%,#2691ef), color-stop(100%,#86cdf9)); /* Chrome,Safari4+ */
47     background: -webkit-linear-gradient(top,  #228dad 0%,#2989d8 49%,#2467bf 50%,#2691ef 51%,#86cdf9 100%); /* Chrome10+,Safari5.1+ */
48     background: -o-linear-gradient(top,  #228dad 0%,#2989d8 49%,#2467bf 50%,#2691ef 51%,#86cdf9 100%); /* Opera 11.10+ */
49     background: -ms-linear-gradient(top,  #228dad 0%,#2989d8 49%,#2467bf 50%,#2691ef 51%,#86cdf9 100%); /* IE10+ */
50     background: linear-gradient(to bottom,  #228dad 0%,#2989d8 49%,#2467bf 50%,#2691ef 51%,#86cdf9 100%); /* W3C */
51     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#228dad', endColorstr='#86cdf9',GradientType=0 ); /* IE6-9 */
52 }

在使用ui-sky主题的时候，只需要在html布局的根节点上添加该类名即可，若更换为其他主题也是类似的。这是一个简单的主导航UI组件的实现，其他的组件实现也是类似的，在制作其他组件的时候需要注意一点，就是在有可重用的地方，应该尽可能的重用代码，例如：

.ui-main-menu, .ui-pagination {
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    border: 1px solid transparent;
    
}

.ui-main-menu li, .ui-pagination li {
    float: left;
}

.ui-main-menu a {
... ...

 另外再次推荐一款比较实用的插件，autoprefixer可以帮助我们更轻松的写css代码，而无需老是去记忆各个浏览器版本的css前缀怎么写。