十個前端UI優秀框架
最近需要一些前端框架,於是在網上整理了一些感覺不錯的前端框架,有pc端和移動端,為了方便日後自己先記錄下來了...
Bootstrap
首先說 Bootstrap，估計你也猜到會先說或者一定會有這個( 呵呵了 )，這是說明它的強大之處，擁有框架一壁江山的勢氣。自己剛入道的時候本著代碼任何一個字母都得自己敲出來擋我者廢的決心，來讓自己成長。結果受到周圍各種基友的引誘開始了 Bootstrap 旅程。本人雖然是個設計+前端的萬裏有一的人才，但是老天只讓我會用 PS 和各種設計工具卻不給我跟設計妹子一樣的審美，所以這也是我最初選擇 Bootstrap 的原因之一，它讓我做出來的東西好歹能在妹子面前裝個逼，不過時間長了難免覺得 Bootstrap 美的讓人煩躁， 但好在它的每個版本都會有很大的改變，不會讓人覺得自己做的網站會跟很多網站撞臉。Bootstrap 的用法及其簡單( 這也可能就是 Bootstrap 作者閱攻城士無數，了解他們痛的結果 )，以至於是個小前端都可以快速上手，幾乎沒什麽學習成本。
官網：http://getbootstrap.com/
Github：https://github.com/twbs/bootstrap/
作者：Mark Otto 和Jacob Thornton Star：93,112
總結：Bootstrap 最大的優勢就是它非常流行，流行就代表你有問題就有很多人幫你解決問題，就代表裝逼它就是利器，還有就是界面比較和諧，容易上手，關註它的童鞋應該發現最新 V4 版也開始支持 FlexBox 布局，這是非常好的升級體驗。 劣勢是 class 命名不夠語義化，並且各種縮寫，以至於我離了文檔就是個菜，最近開始整混合 APP，選框架的時候首選就是它，但之前搞 PC 一直沒註意，後來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來，Bootstrap 好小，小到我只好選擇別的框架。
AUI
第三個是最近剛起來的AUI，雖然作者聲稱是專為APICloud開發者設計的一套UI框架，但實際它還是解決了很多移動前端開發的普遍問題，是主要面向混合開發的 CSS 框架。看起來作者比較猖狂，各種高級 CSS3 遍地使用，這讓我也不得不去查查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，並且框架還提供了聊天界面、計數列表等組件，解決了很多復雜的讓我罵娘的布局，現在可以直接拿走就用。
Github：https://github.com/liulangnan/aui
官網：http://www.auicss.com/
作者：流浪男 Star：92
總結：這個框架對我來說有個優點就是純 CSS 框架，自己以前也就用過 Pure，自己有點 JS 能力，如果不是復雜的效果，找個純 CSS 框架自己隨便改改就可以，而現在 CSS3 也已經能夠做到動畫，效率、質量、高效全兼顧，所以還是選擇了這種 CSS 框架。有一點覺得不滿的是這框架的文檔真的好那什麽，說好的高大上呢。
Amaze UI
第二個介紹的是妹子UI，最初使用它是因為本尊遇到了一個愛糾結細節設計士，有一次她跟我的字體較上真了，結果一句頂萬句的 BOOS 誇了她，我只好根據她的想法去解決，結果最後找到了Amaze UI 框架( 我不介意你叫我懶淫 )，按照官方的話說就是 "基於社區開源項目構建的一個跨屏前端框架，以移動優先，從小屏到大屏，最終實現所有屏幕適配，適應移動互聯潮流" 。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。
官網：http://amazeui.org/
Github：https://github.com/amazeui/amazeui
所屬公司：雲適配 Star：6710
總結：Amaze UI 總的來說就是加入更多符合中國市場特性的元素，框架對跨屏、適配都做了的比較好的處理並且準備一了一系列的常用的網頁組件，為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。，框架還對中文排版優化，兼容中國本土主流瀏覽器、輕量化，不僅適用於桌面端，還更更適合移動端、包含一些封裝好的Widgets。不過自也就我感覺 Amaze UI 文檔是否有點太那什麽了，比如 “人們不會在乎jQuery的那點流量。”，說實的在這真沒啥，不過我從來不會說出來( 哈哈 )，代碼和設計上感覺沒太多突出的點。
Frozen UI
有段時間看到 QQ 瞬間高大上了，後來四處打聽，原來 QQ 客服端也用了 混合開發，其中QQ會員前端用的是 Frozen UI，並且這套框架開源，欣喜若狂耐不住心裏的寂寞直接上手試了一遍，初體驗感覺基礎樣式效果簡單色調清爽，有個比較活躍的社區所以組件什麽的也比較豐富。
Github：https://github.com/frozenui/frozenui
官網：http://frozenui.github.io/
作者： QQVIP FD Team Star：1,067
總結：如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了，或者原生的火雞們拿去嵌套在應用中做前端開發，這個框架對 android 2.3 +、ios 4.0 + 做了兼容，或者拿來做 Web App 也是極好的選擇，劣勢的話從 UI 層面就可以看到了，誰讓它是出生在QQ會員前端的呢。
Frozen UI
第三個是Frozen UI，有段時間看到 QQ 瞬間高大上了，後來四處打聽，原來 QQ 客服端也用了 HTML 混合開發，其中QQ會員前端就是用的 Frozen UI，並且這套框架開源，欣喜若狂耐不住心裏的寂寞直接上手三下五除二試了一遍就開始試用，初體驗的就是基礎樣式效果簡單色調清爽，有個比較活躍的社區所以組件什麽的也比較豐富。
Github：https://github.com/frozenui/frozenui
官網：http://frozenui.github.io/
作者： QQVIP FD Team Star：1,067
總結：如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了，或者原生的火雞們拿去嵌套在應用中做前端開發，並且這個框架對 android 2.3 +、ios 4.0 + 做了兼容，或者拿來做 Web app 也是極好的選擇，不過要是放在微信裏比這更合適的 WeUI 框架更是首選了，劣勢的話從 UI 層面就可以看到了，誰讓它是出生在QQ會員前端的呢。
WeUIi
第四個是WeUI和同 FrozenUI都屬於 差不多的 WeUi了，也是一個比較專一的框架，WeUI應該說比FrozenUI前者更專一，話說連個官網都不搞，所有答疑都在 gitHub Issues 解決了，這個框架極其簡單，體積當然就不用說了，模塊也就 7 個左右，不過體量雖然小做的卻不錯，口碑看 star 就夠了，框架從 16/1/23 發版至今 github star 超過 7K,不過也不排除用戶沒地方發泄所以都跑到 git 上來，哈哈。
Github：https://github.com/weui/weui
DEMO：http://weui.github.io/weui/
Star：7,129
總結：看完微信設計團隊設計的這套 DEMO，二話不說如果要做微信公眾，這個二話不說必然是首選了。框架不好的地方簡而言之就是框架本身應該就沒考慮過讓用戶用到非微信的場景之下。
SUI
“SUI 是一套基於bootstrap開發的前端組件庫，同時它她也是一套設計規範。通過SUI，可以非常方便的設計和實現精美的頁面”。 果然還是直接引用官方給的枯燥無味廣告要節省自己的腦細胞( 囧… )，當然了就像廣告說的，如果你之前用過 Bootstrap， 那麽可以輕松轉向 SUI，這可能就是淘寶給前端屌絲們的福利了。。
Github：https://github.com/sdc-alibaba/sui
官網：http://sui.taobao.org/sui/docs/index.html
Star：120
AUI
第六個是最近剛起來的最近剛起來的 AUI，雖然作者聲稱是專為APICloud開發者設計的一套UI框架，但實際它還是解決了很多移動前端開發的普遍問題，是它主要面向混合開發的 CSS 框架。，所以看起來作者比較猖狂，各種高級 CSS3 遍地使用，這也使得我不得不去查查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，並且框架還提供了聊天界面、計數列表等組件，解決了很多復雜的讓我罵娘的布局，現在可以直接拿走就用。
Github：https://github.com/liulangnan/aui
官網：http://www.auicss.com/
作者：流浪男 Star：92
總結：這個框架對我來說有個優點就是純 CSS 框架，自己以前也就用過 Pure，自己有點 js 能力，如果不是復雜的效果自己找個純 CSS 框架自己隨便改改就能達到效果，而現在 CSS3 也已經能夠做到各種動畫，效率、質量、高效各種一頓考慮所以還是選擇了這種 CSS 框架。而一直覺得不滿的是這框架的文檔真的好那什麽，說好的高大上呢。
MUI
曾經一直使用 Android 系統的我，後來見到 IOS，果斷移情別戀了，不知道為什麽蘋果每次調整系統我都特別喜歡，後來一段時間因為缺設計我專門模仿 IOS 系統做 UI，但始終不能夠做到很好，無意間就發現了 MUI 這個框架，這個框架給我的吸引之處就是它的 UI 是以 IOS 為主體設計的，當然它也補充了android特有UI樣式。並且MUI官方聲稱用來開發深入以後發現拿它做 APP 還能夠提高用戶使用流暢度，然後便試著更深入的了解和使用一段時間。
官網：http://dev.dcloud.net.cn/mui/
Github：https://github.com/dcloudio/mui
Star：2,450
總結：就像之前說的這個框架是以兩大系統為參照來封裝UI組件，框架自身還有一個較為活躍的社區，不太好的地方這也是我特別關註的一點，關於開發應用的流暢度，我當然知道這是 H5 目前的劣勢，但是看到官網給的描述，還是抱著期待的心理試試看能否提升，然而它其實還是需要是借助 Webview來提升，而不是框架本身。
Semantic UI
倒數第三個是 Semantic UI，接觸這個框架還是因為 Bootstrap，Semantic UI 剛上線 github 就受到大量開發者的關註，以至於很多人拿它倆對比各種挑刺各種誇，是好是壞不能單憑別人三句四句就擡起手指開始贊，用了以後感覺 UI 上跟 Bootstrap 沒太多的區別，不過代碼命名規範上卻相差甚大，本人認為 Semantic UI 是不是就想做的不一樣，它的命名全是采用復合的方式，類名特別的離散，用的時候你得很小心自己擴展或者新增的 class 命名與它的類名沖突。
官網：http://www.semantic-ui.cn/
Github：https://github.com/semantic-org/semantic-ui/
Foundation
Foundation 算是框架界的元老啦，都說框架去的早，而這個框架一直到現在依然這麽的熱門，如果你比較介意 Bootstrap 開發撞臉的尷尬事情，那麽你可以考慮使用 Foundation 。即使你使用預定義的 UI 元素, 也不會與其他網站太像，就像官方說的給開發者更靈活的框架體驗。
官網：http://foundation.zurb.com/
Github：https://github.com/zurb/foundation-sites
Star：22,736
UiKit
UIkit是YOOtheme團隊開發的，在許多WordPress主題中都有應用(也就是如果你是個 WordPress 愛好者，那麽這個框架應該比較適合深究)，並且框架能夠通過GUI編輯器和手動編輯，所以它提供了一個靈活、強大的自定義機制。框架借助LESS、jQuery、normalize.css及FontAwesome開源項目的獨有特點，整合成了這麽一款輕量級、模塊化的前端框架。
官網：http://www.getuikit.com/
Github：https://github.com/uikit/uikit
作者：YOOtheme Star：6,372
Pure
終於最後一個了，我和你一樣好開森 (～￣▽￣)～)，這個框架是我在做管理系統時接觸的，選擇使用也是因為框架小巧，並且是純 CSS，沒有太多的牽扯，好用來與其他框架快速結合使用。
官網：http://purecss.io/
Github：https://github.com/yahoo/pure/
介紹完畢，估計你應該看出來了，我使用框架真的也就是遇到了需求，才選擇了某個框架，所以框架之間並沒有什麽好與特好之分，只能說你的需求是什麽，這個框架合適不合適你去用，各種框架用起來也都大致差不多，會用一個其他的上手也就都變得簡單容易上手，我覺得能寫框架的人都是室外高仁。
十個前端UI優秀框架