2014年5個最流行前端框架對比

當今時代眾多CSS的前端框架紛湧而至，但真正的優秀的卻屈指可數。

在這篇文章中我們將對我認為最好的五個框架進行比較，每個框架都有自己優缺點和特定的應用領域，這允許你根據特定專案的需求選擇合適的框架。比如，如果你的專案比較簡單，你就不需要複雜的框架，此外，許多選項是模組化的，這允許你僅使用你需要的元件,或者混合使用不同框架的元件。

我們要討論的框架都是基於其在github上的人氣展示的，首先說最流行的，當然是：Bootstrap。

（註意：下麵的一些資訊在未來的幾周和幾月後就過時了，如：GitHub 上的評分(Stars)和版本數，因此如果你是在這篇文章釋出很久以後閱讀的話，你需要留意這一點。此外，還要註意框架大小是否將必要的CSS和JS檔案最小化。）

1. Bootstrap

Bootstrap 在當今流行的各種框架中是無可爭議的老大。鑒於其每天仍在增長的巨大人氣，可以肯定，這個美妙的工具絕對不會讓你失望，它也不會在你成功建立網站前就離你而去。

• 建立者: Mark Otto and Jacob Thornton.

• 釋出: 2011

• 當前版本: 3.3.1

• 人氣: 在Github上有75,000+ stars

• 描述: “Bootstrap是最流行的的 HTML, CSS和 JavaScript 響應式開發框架 ，web上開發的第一個移動專案.”

• 核心概念/原則: RWD 和移動優先

• 框架大小: 145 KB

• 前處理器: Less 和 Sass

• 響應式: Yes

• 模組化: Yes

• 開始模板/佈局: Yes

• 圖示設定: Glyphicons Halflings set

• 附加/外掛: 沒有捆綁外掛,但許多第三方外掛可用.

• 獨特的元件: Jumbotron

• 檔案: 良好

• 定製: 基本的GUI定製器。不幸的是,你需要手動輸入的顏色值,因為沒有可用的顏色選擇器。

• 瀏覽器支援： Firefox, Chrome, Safari, IE8+ (你需要 Respond.js for IE8)

• 許可證: MIT

Notes on Bootstrap

Bootstrap 的主要優點是它非常流行。從技術上講，它並不一定比這次列出來的其他框架好，但它提供的資源(文章和教程、第三方外掛和擴充套件、主題開發者等等)比其他四個框架的總和還要多。簡而言之，Bootstrap無處不在。這是人們繼續選擇它的主要原因。

（註意：“獨特的元件”的意思是，相比這裡提到的其他框架是獨一無二的。）

2. Foundation by ZURB

Foundation是這幾個框架中第二大的，在像ZURB一樣實力雄厚的公司支援下，這個框架確實很強大，是的，就是foundation。畢竟， Foundation已經在很多大型網站上投入使用，包括 Facebook, Mozilla, Ebay, Yahoo!和國家地理等等。

• 建立者: ZURB

• 釋出: 2011

• 當前版本:5.4.7

• 人氣: 在Github上有18,000+ stars

• 描述: “世界上最優秀的響應式前端框架”

• 核心概念/原則: RWD 、手機優先、語意的

• 框架大小: 326KB

• 前處理器: Sass

• 響應式: Yes

• 模組化: Yes

• 開始模板/佈局: Yes

• 圖示設定: Foundation Icon Fonts

• 附加/外掛: yes

• 獨特的元件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

• 檔案: 良好，還有許多額外的資源是可用的。

• 定製: 沒有GUI編輯器,只能手工定製。

• 瀏覽器支援： Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+

• 許可證: MIT

Notes on Foundation

Foundation 是一個提供業務支援、培訓和諮詢真正專業的框架。它還提供了很多資源幫助你更快和更容易學習和使用框架。

3. Semantic UI

Semantic UI 經過多年的努力，致力於能夠以更語意化的方式構建網站。它使用自然語言的原則，使程式碼更可讀，更容易理解。

• 建立者: Jack Lukic

• 釋出:2013

• 當前版本:1.2.0

• 人氣: 在Github上有12,900+ stars

• 描述: “基於自然語言有效原則的UI元件框架”

• 核心概念/原則: 語意，標簽的矛盾性、響應式

• 框架大小: 552KB

• 前處理器: Less

• 響應式: Yes

• 模組化: Yes

• 開始模板/佈局: No

• 圖示設定: Font Awesome

• 附加/外掛: yes

• 獨特的元件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.

• 檔案: 非常好。Semantic提供了一個很好的組織檔案,還有一個提供入門指南,定製和建立主題單獨的網站,。

• 定製: 沒有GUI定製器,只能手工定製。

• 瀏覽器支援：Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10

• 許可證: MIT

Notes on Semantic UI

Semantic 是這裡討論的最創新和功能最全面的框架。在框架的總體結構和命名約定方面，也以清晰的邏輯和語意類超過了別的框架。

4. Pure by Yahoo!

Pure是一個輕量級的、模組化的框架，以純CSS編寫，它包括很多元件，你可以根據需要聯合或獨立使用它們。

• 建立者: Yahoo

• 釋出: 2013

• 當前版本: 0.5.0

• 人氣: 在Github上有9,900+ stars

• 描述: “您可以在每一個web專案中使用的一組小的和響應式的CSS模組”

• 核心概念/原則:SMACSS,極簡的.

• 框架大小: 18 KB

• 前處理器: None

• 響應式: Yes

• 模組化: Yes

• 開始模板/佈局: Yes

• 圖示設定: 沒有，可以使用Font Awesome替代

• 附加/外掛: None

• 獨特的元件:None

• 檔案: 良好

• 定製: 基本的GUI定製器。

• 瀏覽器支援：Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x

• 許可證: MIT

Notes on Pure

Pure只提供一個基本的風格，使你的專案有一個乾凈的開始。對於工作中不需要一個全功能的框架只需要有特定的元件的人來說是最理想的。

5. UIkit by YOOtheme

UIkit 是一個簡潔的框架，它易於使用，易於定製元件。雖然它不像其它競爭對手一樣受歡迎，但它提供了相同的功能和質量。

• 建立者: YOOtheme

• 釋出: 2013

• 當前版本: 2.13.1

• 人氣: 在Github上有3,800+ stars

• 描述: “一個輕量級的和模組化的前端框架,用於快速開發和功能強大的web介面。”

• 核心概念/原則:RWD, 手機優先.

• 框架大小: 118 KB

• 前處理器: Less, Sass

• 響應式: Yes

• 模組化: Yes

• 開始模板/佈局: Yes

• 圖示設定: Font Awesome

• 附加/外掛: Yes

• 獨特的元件: Article, Flex, Cover, HTML Editor

• 檔案: 良好

• 定製: 優秀的GUI定製器。

• 瀏覽器支援： Chrome, Firefox, Safari, IE9+

• 許可證: MIT

Notes on UIkit

UIkit已經成功的在許多WordPress 主題上使用，它提供了一個靈活、強大的定製化機制，也可以透過GUI定製器進行手動操作。

哪一個框架更適合你？

最後，在選擇合適的框架方面，讓我給你一些意見，這裡有一些重要的事情需要註意：

這個框架有足夠的人氣嗎？更大的普及意味著更多的人參與這個專案，因此，會有更多來自社群的教程和文章，更多真實的案例/網站，更多第三方擴充套件，與相關web開發產品更好地結合。巨大的人氣也意味著框架不太會過時，畢竟一個有著巨大群體使用的框架是不太可能被放棄的。

這個框架還在持續積極開發嗎?一個好的框架是需要結合最新的網路技術不斷升級的，特別是關於移動方面的技術。

這個框架已經成熟了嗎？如果一個框架尚未在實際專案和測試中使用，那麼你可以隨意玩，但依賴它做專業專案就不太明智了。

這個框架提供良好的檔案嗎？良好的檔案總是能為你的學習過程提供便利。

這個框架的特異性程度有多高？這裡的要點是，相比一個特異程度高的框架，使用一個更通用的框架要容易得多。在大多數情況下,最好選擇一個最小風格的框架，因為它更容易定製。相比重寫或改寫現有的規則，新增新的CSS規則是更方便和高效的流程。另外,如果你在現有框架的頭部新增新規則，那麼你將可能會留下一些不被使用的規則，這將增加不必要的CSS檔案的大小。

最後,如果你仍然不確定，可以採用混搭方式。如果一個特定的框架不滿足您的需要，您可以從兩個或兩個以上的專案來混合元件。例如，你可以從一個框架得到較小的CSS樣式基礎從另一個框架得到一個優秀的柵格系統，再從第三個框架獲得更複雜的元件。模組化萬歲!:)

你的想法是什麼呢？這些框架有什麼優點和缺點是這裡沒有提到的呢？你認為還有其他問題是應該被列出來的嗎？在下麵的討論中可以讓我們獲悉。

原文出處： www.sitepoint.com

譯文出處： 伯樂線上 – kinolee