原本是想介绍Semantic-UI的，但若是只介绍这个框架，没什么内容，框架相关feature站点上有不须要说，HTML/CSS这种标记语言/样式表在使用层面也没什么好讨论的，因此干脆列出本身经常使用的几个前端框架，算是作个阶段性总结。css
本文的核心是侧重于HTML/CSS的框架，JS框架或以JS为核心的框架不讨论(好比YUI)；多屏已经是既定事实，虽然不是全部开发都要考虑自适应，但有自适应功能至少说明了这框架短时间内不会被淘汰，因此不带自适应功能的框架不讨论(好比flaminwork)；非开源、不可商用，或是须要付费的框架不讨论(好比easyframework)。html
先说Bootstrap，这两年都在用它，现在Bootstrap有点烂大街了，不免有些审美疲劳。但想一想在Bootstrap这种框架出现以前，程序员作的界面实在是惨不忍睹，现在至少升级成“还能看”的级别了，因此“泛滥”这个问题是瑕不掩瑜的。平时开发个小工具用它来作界面，写个底层脚本用它来作文档界面，工做环境中也能够用来作原型或是布局，谁都看得懂没什么学习成本。整体来讲，这个框架对于互联网的美化实在是功不可没。
前端
Bootstrap的优势是拿来就能用，节省时间，不须要作什么定制，也不适合作定制——最多改改颜色，若是对自适应有定制需求能够考虑用Foundation来替代。这个框架我最初是用来写产品原型的(这个用途如今已经被Bootstrap替代了)，结果到3.0版Foundation更改Title为“全世界最早进的前端自适应框架”(most advanced responsive front-end framework in the world)，是否最早进有待商榷，但它在自适应方面的定制性确实比Bootstrap好，Bootstrap有的控件它都有。程序员
我没在生产环境中用过Foundation，12年6月它由原型工具转型成前端框架时，Bootstrap已经很流行了，有Twitter作技术后盾，不太可能说服程序员转向Foundation。如今的4.0版本用Zepto替换了jQuery，若是项目中在用Zepto能够考虑用它代替Bootstrap。bootstrap
接下来才是本文的重点——Semantic-UI。Bootstrap很通用，兼容性很好，甚至能兼容低版本的IE，Semantic-UI则更Geek，有很多CSS3的特性，好比Shape和Reveal就颇有趣。从界面设计风格来讲，Semantic比Bootstrap(2)更扁平化：前端框架
这些特性都很fancy，但我如今用Semantic-UI替换Boostrap，主要是由于它的JS插件(Modules)更容易操做，视图(Views)中的评论(Comment)和动态信息(Feed)实在是帮了大忙，反正我须要用到的Bootstrap功能它都有，因而欢乐的更换了Semantic-UI。架构
以上框架适合擅长实现功能(前端的js以及后台相关交互)但不擅长设计的程序员，用以上框架能够快速作出一个不错的Web界面。另外一种场景是本身会设计，或是由专业设计师出设计，再转成HTML/CSS，上述框架就过重了，不少功能用不上。框架
这种状况我一般只须要框架来作布局(Grid)，10年写过一篇文章介绍网页设计多用960px宽度的缘由，当时还在用960gs，但自适应的需求960gs知足不了，就用了一段时间的lessfreamwork。最近960gs的做者开发了unsemantic，因而又换成了unsemantic。在编写自适应网页时，要根据设备的不一样加载不一样的css文件，unsemantic都替你切分好了，省时省力。less
最后得说说Topcoat，能够认为 Smantic-UI–unsemantic = Topcoat。有时候只须要一个单页面，甚至都不须要导航条，我是用Topcoat+布局类框架来作的。Topcoat可让各种页面元素更美观，纯css实现，文件小，更灵活也更容易定制。工具
以上，再次强调本文的目的是布道用，在开发我的项目的程序员们能够考虑尝试Semantic-UI，前端框架的更换风险小，有更多地小白鼠，不，实际用户以后才更利于这个框架被用于生产环境中。