10大H5前端架構，讓你開發不愁

作為一名在前端死纏爛打6年而且懶到不行的攻城獅，這幾年閱過非常多從知名到非常知名的前端架構。本來想拿15-20個架構來分享一下，但在跟幾個前輩讨教寫文章的技巧時果斷被無情的打擊了，是以這裡我還是低調的僅僅拿出10個架構來個大鍋亂炖，湊夠字數也就全劇終了。以下的架構也沒有什麼先後順序之分，我想到啥就寫啥啦(

作為前端，我一向都這麼的任性 ^_^ )。

Bootstrap

首先說 Bootstrap，預計你也猜到會先說或者一定會有這個( 呵呵了 )，這是說明它的強大之處。擁有架構一壁江山的勢氣。

自己剛入道的時候本着代碼不論什麼一個字母都得自己敲出來擋我者廢的決心，來讓自己成長。

結果受到周圍各種基友的引誘開始了 Bootstrap 旅程。本人盡管是個設計+前端的萬裡有一的人才，可是老天僅僅讓我會用 PS 和各種設計工具卻不給我跟設計妹子一樣的審美，是以這也是我最初選擇 Bootstrap 的原因之中的一個，它讓我做出來的東西好歹能在妹子面前裝個逼，隻是時間長了難免認為 Bootstrap 美的讓人煩躁，但好在它的每一個版本号都會有非常大的改變，不會讓人認為自己做的站點會跟非常多站點撞臉。

Bootstrap 的使用方法及其簡單( 這也可能就是 Bootstrap 作者閱攻城士無數，了解他們痛的結果)，以至于是個小前端都能夠高速上手，差點兒沒什麼學習成本。

官網：http://getbootstrap.com/

Github：https://github.com/twbs/bootstrap/

作者：Mark Otto 和Jacob Thornton   

總結：Bootstrap

最大的優勢就是它很流行，流行就代表你有問題就有許多人幫你解決這個問題。就代表裝逼它就是利器。還有就是界面比較和諧，easy上手。關注它的童鞋應該發現最新 V4 版也開始支援 FlexBox 布局，這是很好的更新體驗。

劣勢是 class 命名不夠語義化，而且各種縮寫，以至于我離了文檔就是個菜。近期開始整混合 APP，選架構的時候首選就是它，但之前搞 PC 一直沒注意，後來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來。Bootstrap 好小。小到我僅僅好選擇别的架構。

Amaze UI

第二個介紹的是妹子UI。最初使用它是由于本尊遇到了一個愛糾結細節設計士，有一次她跟我的字型較上真了。結果一句頂萬句的BOOS 誇了她，我僅僅好依據她的想法去解決，結果最後找到了Amaze UI 架構( 我不介意你叫我懶淫)，依照官方的話說就是“基于社群開源項目建構的一個跨屏前端架構，以移動優先。從小屏到大屏。終于實作全部螢幕适配，适應移動互聯潮流”。

但事實上我就是看中它能解決國内浏覽器存在的跨屏适配和相容性問題。

官網：http://amazeui.org/

Github：https://github.com/amazeui/amazeui

所屬公司：雲适配  

總結：Amaze UI 總的來說增加很多其它符合中國市場特性的元素，架構對跨屏、适配都做了比較好的處理而且準備了一系列的經常使用網頁元件，為降低搞相容、适配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。架構還對中文排版優化，相容中國本土主流浏覽器、輕量化，不僅适用于桌面端，更适合移動端。

AUI

第三個是近期剛起來的AUI，盡管作者聲稱是專為APICloud開發人員設計的一套UI架構。但實際它還是攻克了非常多移動前端開發的普遍問題，是主要面向混合開發的 CSS 架構。看起來作者比較猖狂，各種進階 CSS3 遍地使用，這讓我也不得不去查查這些個 CSS3 的相容性。

不負衆望果然選的都是相容不錯的屬性。哈哈了一頓激動從前輩手上大膽認識了幾個好東西，而且架構還提供了聊天界面、計數清單等元件，攻克了非常多複雜的讓我罵娘的布局，如今能夠直接拿走就用。

Github：https://github.com/liulangnan/aui

官網：http://www.auicss.com/

作者：流浪男   

總結：這個架構對我來說有個長處就是純 CSS 架構。自己曾經也就用過 Pure，自己有點 JS 能力。假設不是複雜的效果，找個純 CSS 架構自己随便改改就行，而如今 CSS3 也已經可以做到動畫。效率、品質、高效全兼顧，是以還是選擇了這樣的 CSS 架構。有一點認為不滿的是這架構的文檔真的好那什麼，說好的高大上呢。

Frozen UI

有段時間看到 QQ 瞬間高大上了，後來四處打聽。原來 QQ 客服端也用了混合開發，當中QQ會員前端用的是 Frozen UI，而且這套架構開源。欣喜若狂耐不住心裡的寂寞直接上手試了一遍，初體驗感覺基礎樣式效果簡單色調清爽，有個比較活躍的社群是以元件什麼的也比較豐富。

Github：https://github.com/frozenui/frozenui

官網：http://frozenui.github.io/

作者： QQVIP FD Team 

總結：假設拿

Frozen UI 配合一些如 APICloud 用來做混合 APP感覺就太酷了，或者原生的火雞們拿去嵌套在應用中做前端開發。這個架構對 android 2.3 +、ios 4.0 + 做了相容。或者拿來做 Web App 也是極好的選擇。劣勢的話從 UI 層面就能夠看到了，誰讓它是出生在QQ會員前端的呢。

WeUI

WeUI和 FrozenUI都屬于比較專一的架構，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

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/

Star：13,592

介紹完成。預計你應該看出來了，我使用架構真的也就是遇到了需求。才選擇了某個架構，是以架構之間并沒有什麼好與特好之分，僅僅能說你的需求是什麼，這個架構合适不合适你去用，各種架構用起來也都大緻差點兒相同，會用一個其它的上手也就都變得簡單easy上手，我認為能寫架構的人都是室外高人。