首页 > 代码库 > 如何设计自己的UI套件
如何设计自己的UI套件
如何设计自己的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前缀怎么写。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。