原本是想介紹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，前端框架的更換風險小，有更多地小白鼠，不，實際用戶以後才更利於這個框架被用於生產環境中。