大鍋亂燉之十大HTML 5前端框架

來源:php-z
  作為一名在前端死纏爛打 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
  Star:93,112
  總結:Bootstrap 最大的優勢就是它非常流行,流行就代表你有問題就有很多人幫你解決問題,就代表裝逼它就是利器,還有就是界面比較和諧,容易上手,關注它的童鞋應該發現最新 V4 版也開始支持 FlexBox 布局,這是非常好的升級體驗。劣勢是 class 命名不夠語義化,并且各種縮寫,以至于我離了文檔就是個菜,最近開始整混合 APP,選框架的時候首選就是它,但之前搞 PC 一直沒注意,后來搞混合右鍵屬性看它的時候,瞬間一陣涼風襲來,Bootstrap 好小,小到我只好選擇別的框架。
  AUI
  第二個是最近剛起來的 AUI,雖然作者聲稱是專為 APICloud 開發者設計的一套 UI 框架,但實際它還是解決了很多移動前端開發的普遍問題,是主要面向混合開發的 CSS 框架。看起來作者比較猖狂,各種高級 CSS3 遍地使用,這讓我也不得不去查查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性,哈哈了一頓激動從前輩手上大膽認識了幾個好東西,并且框架還提供了聊天界面、計數列表等組件,解決了很多復雜的讓我罵娘的布局,現在可以直接拿走就用。
  官網:http://www.auicss.com/
  Github:https://github.com/liulangnan/aui
  作者: 流浪男
  Star:92
  總結: 這個框架對我來說有個優點就是純 CSS 框架,自己以前也就用過 Pure,自己有點 JS 能力,如果不是復雜的效果,找個純 CSS 框架自己隨便改改就可以,而現在 CSS3 也已經能夠做到動畫,效率、質量、高效全兼顧,所以還是選擇了這種 CSS 框架。有一點覺得不滿的是這框架的文檔真的好那什么,說好的高大上呢。
  Amaze UI
  第三個介紹的是「鵝妹子 UI」,最初使用它是因為本尊遇到了一個愛糾結細節設計師。有一次她跟我的字體較上真了,結果一句頂萬句的 BOOS 夸了她,我只好根據她的想法去解決,結果最后找到了 Amaze UI 框架 (我不介意你叫我懶淫),按照官方的話說就是「基于社區開源項目構建的一個跨屏前端框架,以移動優先,從小屏到大屏,最終實現所有屏幕適配,適應移動互聯潮流」。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。
  官網:http://amazeui.org/
  Github:https://github.com/amazeui/amazeui
  所屬公司: 云適配 & nbsp;
  Star:6710
  總結:Amaze UI 總的來說加入更多符合中國市場特性的元素,框架對跨屏、適配都做了比較好的處理并且準備了一系列的常用網頁組件,為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。框架還對中文排版優化,兼容中國本土主流瀏覽器、輕量化,不僅適用于桌面端,更適合移動端。
  Frozen UI
  有段時間看到 QQ 瞬間高大上了,后來四處打聽,原來 QQ 客服端也用了混合開發,其中 QQ 會員前端用的是 Frozen UI,并且這套框架開源,欣喜若狂耐不住心里的寂寞直接上手試了一遍,初體驗感覺基礎樣式效果簡單色調清爽,有個比較活躍的社區所以組件什么的也比較豐富。
  官網:http://frozenui.github.io/
  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 會員前端的呢。
  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,這可能就是淘寶給前端屌絲們的福利了。
  官網:http://sui.taobao.org/sui/docs/index.html
  Github:https://github.com/sdc-alibaba/sui
  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 主題中都有應用 (也就是如果你是個 & nbsp;WordPress 愛好者,那么這個框架應該比較適合深究),并且框架能夠通過 GUI 編輯器和手動編輯,所以它提供了一個靈活、強大的自定義機制。框架借助 LessjQuery、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
  介紹完畢,估計你應該看出來了,我使用框架真的也就是遇到了需求,才選擇了某個框架,所以框架之間并沒有什么好與特好之分,只能說你的需求是什么,這個框架合適不合適你去用,各種框架用起來也都大致差不多,會用一個其他的上手也就都變得簡單容易上手,我覺得能寫框架的人都是世外高人。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容

  • Bootstrap 首先說 Bootstrap,估計你也猜到會先說或者一定會有這個( 呵呵了 ),這是說明它的強大...
    老王談編程閱讀 867評論 0 2
  • 作為一個前端程序猿,下面這些站會讓你眼前一亮。 amazeui框架組建豐富 http://amazeui.org...
    歐巴冰冰閱讀 8,875評論 18 303
  • 大部分的后端會很很鄙視前端。我也不知道為什么,可能大部分人都會覺得腳本語言根本不算語言。 大多人 會叫我們切圖仔,...
    小黑的眼閱讀 3,380評論 0 15
  • 孩子,你滿月了。 孕中40周的等待,生產時2天3夜媽媽在疼痛中的煎熬,產后1個月的日夜不休,這個過程很好,卻一點也...
    橙長印記閱讀 280評論 0 0
  • 知識究竟是什么,知識能給我們帶來什么?學習知識的過程怎么做? 所謂知識一是指導我們做出更好...
    小瑞Stephanie閱讀 342評論 1 0