原本寫這篇文章想圍繞著 CSS 框架來的镶摘，但因為目前界內(nèi)比較流行并遍地開花的主要還是 JS+CSS 模式的框架，并且自己靠著一點 JS 功底，就想專門針對 CSS，所以最后來個大鍋亂燉都大致聊聊导犹。下面的框架也沒有什么先后順序之分，我想到啥就寫啥啦羡忘。
Bootstrap
首先說 Bootstrap谎痢，估計你也猜到會先說或者一定會有這個( 呵呵了 )，這是說明它的強大之處卷雕，擁有框架一壁江山的勢氣舶得。自己剛入道的時候本著代碼任何一個字母都得自己敲出來擋我者廢的決心，來讓自己成長爽蝴。結果受到周圍各種基友的引誘開始了 Bootstrap 旅程。本人雖然是個設計+前端的萬里有一的人才纫骑，但是老天只讓我會用 PS 和各種設計工具卻不給我跟設計妹子一樣的審美蝎亚，所以這也是我最初選擇 Bootstrap 的原因之一，它讓我做出來的東西好歹能在妹子面前裝個逼先馆，不過時間長了難免覺得 Bootstrap 美的讓人煩躁发框， 但好在它的每個版本都會有很大的改變，不會讓人覺得自己做的網(wǎng)站會跟很多網(wǎng)站撞臉煤墙。Bootstrap 的用法及其簡單( 這也可能就是 Bootstrap 作者閱攻城士無數(shù)梅惯，了解他們痛的結果 )宪拥，以至于是個小前端都可以快速上手，幾乎沒什么學習成本铣减。
官網(wǎng)：http://getbootstrap.com/
中文官網(wǎng)：http://www.bootcss.com/
Github：https://github.com/twbs/bootstrap/
總結：Bootstrap 最大的優(yōu)勢就是它非常流行她君，流行就代表你有問題就有很多人幫你解決問題，就代表裝逼它就是利器葫哗，還有就是界面比較和諧缔刹，容易上手，關注它的童鞋應該發(fā)現(xiàn)最新 V4 版也開始支持 FlexBox 布局劣针，這是非常好的升級體驗校镐。 劣勢是 class 命名不夠語義化，并且各種縮寫捺典，以至于我離了文檔就是個菜鸟廓，最近開始整混合 APP，選框架的時候首選就是它襟己，但之前搞 PC 一直沒注意引谜，后來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來稀蟋，Bootstrap 好小煌张，小到我只好選擇別的框架。
AUI
AUI2.0的重新架構充分站在項目開發(fā)的角度上,以解決布局樣式為重點,組件模塊化為輔助進行全面優(yōu)化調(diào)整,可以說2.0版本的AUI更合適項目的開發(fā)退客。
Github：https://github.com/liulangnan/aui
官網(wǎng)：http://www.auicss.com/
總結：這個框架對我來說有個優(yōu)點就是純 CSS 框架骏融，自己以前也就用過 Pure，自己有點 JS 能力萌狂，如果不是復雜的效果档玻，找個純 CSS 框架自己隨便改改就可以，而現(xiàn)在 CSS3 也已經(jīng)能夠做到動畫茫藏，效率误趴、質(zhì)量、高效全兼顧务傲，所以還是選擇了這種 CSS 框架凉当。有一點覺得不滿的是這框架的文檔真的好那什么，說好的高大上呢售葡。
Amaze?UI
Amaze UI 是一個移動優(yōu)先的跨屏前端框架看杭。... Amaze UI 以移動優(yōu)先(Mobile first)為理念,從小屏逐步擴展到大屏,最終實現(xiàn)所有屏幕適配,適應移動互聯(lián)潮流。但其實我就是看中它能解決國內(nèi)瀏覽器存在的跨屏適配和兼容性問題挟伙。
官網(wǎng)：http://amazeui.org/
Github：https://github.com/amazeui/amazeui
總結：Amaze?UI?總的來說就是加入更多符合中國市場特性的元素楼雹，框架對跨屏、適配都做了的比較好的處理并且準備一了一系列的常用的網(wǎng)頁組件，為減少搞兼容贮缅、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻榨咐。，框架還對中文排版優(yōu)化谴供，兼容中國本土主流瀏覽器块茁、輕量化，不僅適用于桌面端憔鬼，還更更適合移動端龟劲、包含一些封裝好的Widgets。不過自也就我感覺?Amaze?UI?文檔是否有點太那什么了轴或，比如?"人們不會在乎jQuery的那點流量昌跌。"，說實的在這真沒啥照雁，不過我從來不會說出來(?哈哈?)蚕愤，代碼和設計上感覺沒太多突出的點。
Frozen?UI
專注于移動web的UI框架,基于騰訊手機QQ規(guī)范... FrozenUI提供的CSS組件是目前QQ會員前端開發(fā)組所用的通用樣式庫饺蚊。
Github：https://github.com/frozenui/frozenui
官網(wǎng)：http://frozenui.github.io/
總結：如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了萍诱，或者原生的火雞們拿去嵌套在應用中做前端開發(fā)，這個框架對 android 2.3 +污呼、ios 4.0 + 做了兼容裕坊，或者拿來做 Web App 也是極好的選擇，劣勢的話從 UI 層面就可以看到了燕酷，誰讓它是出生在QQ會員前端的呢籍凝。
WeUI
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設計,令用戶的使用感知更加統(tǒng)一。
Github：https://github.com/weui/weui
DEMO：http://weui.github.io/weui/
總結：看完微信設計團隊設計的這套?DEMO苗缩，二話不說如果要做微信公眾饵蒂，這個二話不說必然是首選了〗囱龋框架不好的地方簡而言之就是框架本身應該就沒考慮過讓用戶用到非微信的場景之下退盯。
SUI
"SUI?是一套基于bootstrap開發(fā)的前端組件庫，同時它她也是一套設計規(guī)范泻肯。通過SUI渊迁，可以非常方便的設計和實現(xiàn)精美的頁面"。?果然還是直接引用官方給的枯燥無味廣告要節(jié)省自己的腦細胞(?囧…?)灶挟，當然了就像廣告說的宫纬，如果你之前用過?Bootstrap，?那么可以輕松轉向?SUI膏萧，這可能就是淘寶給前端屌絲們的福利了。
Github：https://github.com/sdc-alibaba/sui
官網(wǎng)：http://sui.taobao.org/sui/docs/index.html
MUI
曾經(jīng)一直使用?Android?系統(tǒng)的我，后來見到?IOS榛泛，果斷移情別戀了蝌蹂，不知道為什么蘋果每次調(diào)整系統(tǒng)我都特別喜歡，后來一段時間因為缺設計我專門模仿?IOS?系統(tǒng)做?UI曹锨，但始終不能夠做到很好孤个，無意間就發(fā)現(xiàn)了?MUI?這個框架，這個框架給我的吸引之處就是它的?UI?是以?IOS?為主體設計的沛简，當然它也補充了android特有UI樣式齐鲤。并且MUI官方聲稱用來開發(fā)深入以后發(fā)現(xiàn)拿它做?APP?還能夠提高用戶使用流暢度，然后便試著更深入的了解和使用一段時間椒楣。
官網(wǎng)：http://dev.dcloud.net.cn/mui/
Github：https://github.com/dcloudio/mui
Star：2,450
總結：就像之前說的這個框架是以兩大系統(tǒng)為參照來封裝UI組件给郊，框架自身還有一個較為活躍的社區(qū)，不太好的地方這也是我特別關注的一點捧灰，關于開發(fā)應用的流暢度淆九，我當然知道這是?H5?目前的劣勢，但是看到官網(wǎng)給的描述毛俏，還是抱著期待的心理試試看能否提升炭庙，然而它其實還是需要是借助?Webview來提升，而不是框架本身煌寇。
Semantic?UI
倒數(shù)第三個是 Semantic UI焕蹄，接觸這個框架還是因為 Bootstrap，Semantic UI 剛上線 github 就受到大量開發(fā)者的關注阀溶，以至于很多人拿它倆對比各種挑刺各種夸腻脏，是好是壞不能單憑別人三句四句就抬起手指開始贊，用了以后感覺 UI 上跟 Bootstrap 沒太多的區(qū)別淌哟，不過代碼命名規(guī)范上卻相差甚大迹卢，本人認為 Semantic UI 是不是就想做的不一樣，它的命名全是采用復合的方式徒仓，類名特別的離散腐碱，用的時候你得很小心自己擴展或者新增的 class 命名與它的類名沖突。
官網(wǎng)：http://www.semantic-ui.cn/
Github：https://github.com/semantic-org/semantic-ui/
中文網(wǎng)：http://www.semantic-ui-cn.com/
Foundation
Foundation 算是框架界的元老啦掉弛，都說框架去的早症见，而這個框架一直到現(xiàn)在依然這么的熱門，如果你比較介意 Bootstrap 開發(fā)撞臉的尷尬事情殃饿，那么你可以考慮使用 Foundation 谋作。即使你使用預定義的 UI 元素, 也不會與其他網(wǎng)站太像，就像官方說的給開發(fā)者更靈活的框架體驗乎芳。
官網(wǎng)：http://foundation.zurb.com/
Github：https://github.com/zurb/foundation-sites
UiKit
UIkit是YOOtheme團隊開發(fā)的遵蚜，在許多WordPress主題中都有應用(也就是如果你是個 WordPress 愛好者帖池，那么這個框架應該比較適合深究)，并且框架能夠通過GUI編輯器和手動編輯吭净，所以它提供了一個靈活睡汹、強大的自定義機制〖叛常框架借助LESS囚巴、jQuery、normalize.css及FontAwesome開源項目的獨有特點友扰，整合成了這么一款輕量級彤叉、模塊化的前端框架。
官網(wǎng)：http://www.getuikit.com/
Github：https://github.com/uikit/uikit
Pure
這個框架是我在做管理系統(tǒng)時接觸的村怪，選擇使用也是因為框架小巧秽浇，并且是純 CSS，沒有太多的牽扯实愚，好用來與其他框架快速結合使用兼呵。
官網(wǎng)：http://purecss.io/
Github：https://github.com/yahoo/pure/
一個基于 Bootstrap 深度定制開源前端實踐方案，幫助你快速構建現(xiàn)代跨屏應用腊敲。
ZUI
官網(wǎng)：http://zui.sexy/
Github:https://github.com/easysoft/zui
拼圖前端框架
拼圖跨屏響應式布局前端開發(fā)CSS框架击喂。拼圖是優(yōu)秀的響應式前端CSS開源框架，國內(nèi)前端框架先驅(qū)及領導者碰辅，自動適應手機懂昂、平板、電腦等設備没宾，讓前端開發(fā)像游戲般快樂凌彬、簡單、靈活循衰。
官網(wǎng)：http://www.pintuer.com/
框架節(jié)約了我們的時間铲敛，讓我們在最短的時間做出最好的效果，從前的我会钝，傻傻的自己寫css代碼真的感覺有點傻伐蒋，我感覺只有站在巨人的肩膀，應該能做出更優(yōu)秀的作品迁酸。
本文轉載自：www.shaofee.com
