layuicss
layui（諧音：類UI) 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都通過精心雕琢，很是適合界面的快速開發。layui 首個版本發佈於2016年金秋，她區別於那些基於 MVVM 底層的 UI 框架，卻並不是逆道而行，而是信奉返璞歸真之道。準確地說，她更可能是爲服務端程序員量身定作，你無需涉足各類前端工具的複雜配置，只需面對瀏覽器自己，讓一切你所須要的元素與交互，從這裏信手拈來。html
Bootstrapandroid
首先說 Bootstrap，估計你也猜到會先說或者必定會有這個( 呵呵了 )，這是說明它的強大之處，擁有框架一壁江山的勢氣。本身剛入道的時候本着代碼任何一個字母都得本身敲出來擋我者廢的決心，來讓本身成長。結果受到周圍各類基友的引誘開始了 Bootstrap 旅程。本人雖然是個設計+前端的萬里有一的人才，可是老天只讓我會用 PS 和各類設計工具卻不給我跟設計妹子同樣的審美，因此這也是我最初選擇 Bootstrap 的緣由之一，它讓我作出來的東西好歹能在妹子面前裝個逼，不過期間長了不免以爲 Bootstrap 美的讓人煩躁， 但好在它的每一個版本都會有很大的改變，不會讓人以爲本身作的網站會跟不少網站撞臉。Bootstrap 的用法及其簡單( 這也可能就是 Bootstrap 做者閱攻城士無數，瞭解他們痛的結果 )，以致因而個小前端均可以快速上手，幾乎沒什麼學習成本。ios
官網：http://getbootstrap.com/git
Github：https://github.com/twbs/bootstrap/程序員
做者：Mark Otto 和Jacob Thornton Star：93,112github
總結：Bootstrap 最大的優點就是它很是流行，流行就表明你有問題就有不少人幫你解決問題，就表明裝逼它就是利器，還有就是界面比較和諧，容易上手，關注它的童鞋應該發現最新 V4 版也開始支持 FlexBox 佈局，這是很是好的升級體驗。 劣勢是 class 命名不夠語義化，而且各類縮寫，以致於我離了文檔就是個菜，最近開始整混合 APP，選框架的時候首選就是它，但以前搞 PC 一直沒注意，後來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來，Bootstrap 好小，小到我只好選擇別的框架。bootstrap
AUI瀏覽器
第三個是最近剛起來的AUI，雖然做者聲稱是專爲APICloud開發者設計的一套UI框架，但實際它仍是解決了不少移動前端開發的廣泛問題，是主要面向混合開發的 CSS 框架。看起來做者比較猖狂，各類高級 CSS3 遍地使用，這讓我也不得不去查查這些個 CSS3 的兼容性。不負衆望果真選的都是兼容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，而且框架還提供了聊天界面、計數列表等組件，解決了不少複雜的讓我罵孃的佈局，如今能夠直接拿走就用。
Github：https://github.com/liulangnan/aui
做者：流浪男 Star：92
總結：這個框架對我來講有個優勢就是純 CSS 框架，本身之前也就用過 Pure，本身有點 JS 能力，若是不是複雜的效果，找個純 CSS 框架本身隨便改改就能夠，而如今 CSS3 也已經可以作到動畫，效率、質量、高效全兼顧，因此仍是選擇了這種 CSS 框架。有一點以爲不滿的是這框架的文檔真的好那什麼，說好的高大上呢。
Amaze UI
第二個介紹的是妹子UI，最初使用它是由於本尊遇到了一個愛糾結細節設計士，有一次她跟個人字體較上真了，結果一句頂萬句的 BOOS 誇了她，我只好根據她的想法去解決，結果最後找到了Amaze UI 框架( 我不介意你叫我懶淫 )，按照官方的話說就是 "基於社區開源項目構建的一個跨屏前端框架，以移動優先，從小屏到大屏，最終實現全部屏幕適配，適應移動互聯潮流" 。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。
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
做者： 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
做者： 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
做者：流浪男 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 命名與它的類名衝突。
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，沒有太多的牽扯，好用來與其餘框架快速結合使用。
Github：https://github.com/yahoo/pure/
Bulma
Bulma是一個基於Flexbox的現代化的CSS框架,設計的初衷就是移動優先(MobileFirst),模塊化設計,能夠輕鬆用來實現各類簡單或者複製的內容佈局,自己不依賴任何JavaScript庫。但能夠配合任何JS框架（jQuery、Vue、React等），作出想要的動態效果。