細數2014年5個最流行的前端框架
原文 http://www.uisdc.com/2014-5-popular-frontend-frameworks
@寸志 ：現如今快要被各種各樣的 CSS 前端框架給淹沒了，真做的不錯的其實也就那么幾個。本文將對比五個我認為是現在最好的框架。這些框架每一個都有自己的優缺點和適用的應用類型， 你需要根據自己的需要來選擇不同的框架。
例如，如果你的項目簡單，就不需要使用一個復雜的框架。又或者，很多框架都是模塊化的，你可以只是用你需要的模塊，或者把不同框架的模塊混到一起使用。
跟上潮流，來個響應式網站： 《重磅來襲！設計師不應該錯過的響應式設計框架》
我將要介紹的這些框架的順序與它們在 GitHub 的流行程度有關。自然，就是從最流行的 Bootstrap 說起。
提示：在接下的幾周或者幾個月內，下面的一些信息很可能會過時。比如 GitHub 上的 star 數、版本號等等。如果你在文章發布很久之后來讀本文的話，一定別忘了這一點。還有，下面這些框架的大小指的是經過壓縮的必要的 CSS 和 JavaScript 文件大小。
Bootstrap 無疑地是目前這些類庫的領跑者。它非常流行，流行程度還在一天天的增加。這個令人贊嘆的工具集不會讓你失望的，在你構建成功站點之路上少不了它。
- 作者： Mark Otto 和 Jacob Thornton
- 發布時間：2011年
- 最新版本：3.3.
- 流行程度：GitHub 上 75,000+ 的 star
- 介紹：“Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，可用來開響應式的移動有限的 Web 項目。”
- 核心理念/原則：響應式 與移動優先
- 框架大小：145 KB
- 預處理器： Less 和 Sass
- 響應式：是
- 模塊化：是
- 上手模塊/布局：是
- 字體圖標：大半 Glyphicon 圖標
- 插件/擴展： 無，不過有大量的第三方插件
- 特色組件： 超大屏設計
- 文檔： 完善
- 自定義： 基礎的 GUI 自定義；不過你需要手動輸入顏色值，因為不支持顏色選擇器
- 瀏覽器支持： Firefox、Chrome、Safari、IE8+ （IE8 的話需要使用 Respond.js ）
- 開源協議： MIT
Bootstrap 使用心得
Bootstrap 最大的優勢就是它非常流行。從技術上講，它并不是比其他在列框架要優秀。只是它有很多資源（文章、教程、第三方插件和擴展以及主題構造器等等），比起其他 四個框架合到一起還要多。簡單地講，Bootstrap 就是無處不在。這也是大家繼續使用它的原因。
提示:當我說“特色”的組件，這種特色就是針對目前列出的這些框架而言的。
Foundation 是這個領域的第二大玩家。擁有像 ZURB 這樣的公司在背后支持，不得不說它確實有一個非常堅實的基礎。總之，Foundation 被很多大的網站采用。包括 非死book、Mozilla、Ebay、Yahoo 以及 National Geographic 等等。
- 作者： ZURB
- 發布時間： 2011
- 最新版本： 5.4.7
- 流行程度： GitHub 上 18,000+ 的 star
- 介紹： “世界上最先進的響應式前端框架”
- 核心理念/原則： 響應式、移動優先、語義化
- 框架大小： 326 KB
- 預處理器： Sass
- 響應式： 是
- 模塊化： 是
- 上手模塊/布局： 是
- 字體圖標： Foundation 字體圖標
- 插件/擴展： 有
- 特色組件： Icon Bar、Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables
- 文檔： 完善，還有很多其他資源
- 自定義： 無 GUI 的自定義工具，需要自己手動修改
- 瀏覽器支持： Chrome、Firefox、Safari、IE9+；iOS、Android、Windows Phone 7+
- 開源協議： MIT
Foundation 使用心得
Foundation 的確是一個非常專業的框架，有商業的支持、培訓以及外包。它同時還提供很多資源，幫助你更加快速更加容易地學習和使用這個框架。
Semantic UI 一直在努力讓網站建設更加語義化。它利用了自然語言的原則，使得代碼更容易讀更容易理解。
- 作者： Jack Lukic
- 發布時間： 2013
- 最新版本： 1.2.0
- 流行程度： GitHub 上 12,900+ 的 star
- 介紹：“一個 UI 模塊框架，基于來自自然語言的一些有用的原則。”
- 核心理念/原則： 語義化、tag ambivalence、響應式
- 框架大小： 552 KB
- 預處理器： Less
- 響應式： 是
- 模塊化： 是
- 上手模塊/布局： 無
- 字體圖標： Font Awesome
- 插件/擴展： 無
-
特色組件： Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、Dimmer
Rating、Shape - 文檔： 非常好。Semantic 有組織良好的文檔，外加一個 單獨網站 提供指南，幫助用戶快速上手，自定義和創建主題。
- 自定義： 無 GUI 的自定義工具，需手動修改
- 瀏覽器支持： Firefox、Chrome、Safari、IE10+ (IE9需要prefix支持)、Android 4、Blackberry 10
- 開源協議： MIT
Semantic UI 使用心得
在這些框架中，Semantic 是最具革命性特性最全的框架。為了讓樣式邏輯清晰，語義化，整個框架的結構以及命名約定都要優于其他框架。
Pure 是一個輕量的、模塊化的框架——使用純 CSS 編寫的——根據你的需要，可以組合或者分開使用 Pure 的模塊。
- 作者： Yahoo
- 發布時間： 2013
- 當前版本： 0.5.0
- 流行程度： GitHub 上 9,900+ 的 star
- 介紹： “一系列小的，響應式的 CSS 模塊，可以用在你的每一個項目中。”
- 核心理念/原則： SMACSS 、極簡主義
- 框架大小： 18 KB
- 預處理器： 無
- 響應式： 是
- 模塊化： 是
- 上手模塊/布局： 有
- 字體圖標： 無，你可以使用 Font Awesome
- 插件/擴展： 無
- 特色組件： 無
- 文檔： 好
- 自定義： 基礎的 GUI 皮膚構造工具
- 瀏覽器支持： 最新的Firefox、Chrome、Safari； IE7+、iOS 6.x、7.x；Android 4.x
- 開原協議： Yahoo! Inc. BSD
Pure 使用心得
Pure 只提供一套極簡的樣式，便于你從零開始你的項目。對于那些不需要一個全棧框架，只需要某些組件的加入到他們自己的項目中的用戶來講，這個框架非常符合。
UIkit 包含了一些列簡潔的易用的便于自定義的組件。盡管它沒有其他在列的框架流行，但是它提供了相當的功能和質量。
- 作者： YOOtheme
- 發布時間： 2013
- 當前版本： 2.13.1
- 流行程度： GitHub 上 3,800+ 的 star
- 介紹： “輕量的，模塊化的前端框架，可用來快速構建強大的網頁界面”
- 核心理念/原則： 響應式、移動優先
- 框架大小： 118 KB
- 預處理器： Less、Sass
- 響應式： 是
- 模塊化： 是
- 上手模塊/布局： 是
- 字體圖標： Font Awesome
- 插件/擴展： 有
- 特色組件： Article、Flex、Cover、HTML Editor
- 文檔： 好
- 自定義： 高級的 GUI 自定義工具
- 瀏覽器支持： Chrome, Firefox, Safari, IE9+
- 開原協議： MIT
UIkit 使用心得
UIkit 在WordPress 主題 中很成功。它提供了強大靈活的自定義機制，可以手動修改或者使用它的提供的 GUI 自定義工具來實現。
如何選擇框架？
最后，我來給一些選擇框架的建議。下面是一些選擇框架需要注重的點:
- 這個框架足夠流行嗎？流行意味著有更多的人參與到項目中來，因此，社區中有更多的文章和教程，現實中更多的示例和網站，會有更多的第三方擴展，當然能夠更好地與現實的web開發項目結合。極其流行意味著這個框架經得住未來的考驗；
- 擁有龐大社區的框架最不可能被拋棄；
- 框架是否還在活躍地開發中？一個優秀的框架需要不斷地提升自己，緊跟最新 Web 技術的發展，尤其對于移動來說；
- 這個框架是否已經成熟？如果某個框架還沒有在真實項目中充分地使用和測試，只可能試著玩玩，如果用到專業的項目中的話并不是一個明智的選擇；
- 框架是否有完善的文檔？最后好能有完善的文檔，這樣可以加快學習的進程；
- 框架的詳細程度如何？這里核心的點在于一個更通用的框架更容易使用，比較于那些詳細程度很高的框架而言。在很多情況下，最好的就是選擇一個有 最少樣式的框架，因為這樣的話比較容易自定義。添加新的 CSS 規則要比比對復寫現有的樣式規則方便多了。而且，如果你在已有的樣式上添加新的樣式，你最終獲得的就是無用的樣式規則，這將會增加 CSS 文件的大小。
最后，如果你還是不確定，你可以采用一種混合搭配的方式。如果某個框架無法滿足你的需求，你可以混用一些來自其他框架來的組件。例如，你可以使用某個框架的精簡的 CSS 基礎樣式，使用來自另外一個框架的柵格系統，以及從第三個框架更為復雜的模塊。模塊化萬歲！:)
你怎么看的？這些框架還有哪些策略或者弱點在這里沒有提到的？還有哪些框架你覺得應該列舉在這里？你可以在下面回復給我們。