如今出現(xiàn)了大量的CSS前端框架，但真正優(yōu)秀的框架只有少數(shù)幾個。

本文將會比較其中五個最佳的框架。每個框架都有自己的優(yōu)點和缺點，以及具體的應(yīng)用領(lǐng)域，你可以根據(jù)自己的具體項目需求進行選擇。此外，許多選項都是模塊化的，允許你僅使用所需的組件，甚至可以混合使用來自不同框架的組件。

本文依據(jù)各個框架的GitHub流行度來順序介紹。

Bootstrap

Bootstrap是目前可用框架中無可爭議的領(lǐng)導(dǎo)者。其人氣日益增長，你可以放心的選擇這個框架，而不必擔心項目會失敗，因為具有廣泛使用基礎(chǔ)的框架，不太可能被拋棄。

• 創(chuàng)作者： Mark Otto 和 Jacob Thornton.

• 發(fā)行： 2011

• 當前版本： 3.3.7

• 人氣： GitHub上有111,000顆星

• 說明： “Bootstrap是最流行的HTML，CSS和JavaScript框架，用于在網(wǎng)絡(luò)上開發(fā)響應(yīng)式、移動的Web項目。

• 核心概念/原則： RWD和移動端優(yōu)先。

• 框架大?。?154 KB

• 預(yù)處理器： Less和Sass

• 響應(yīng)式布局：是

• 模塊化：是

• 啟動模板/布局：是

• 圖標集： Glyphicons Halflings設(shè)置

• 附加/附件：無捆綁，許多第三方插件可用。

• 獨特組件： Jumbotron

• 文檔資源：良好

• 自定制：基本GUI定制器。但是你需要手動輸入顏色值，因為沒有顏色選擇器可用。

• 瀏覽器支持： Firefox，Chrome，Safari，IE8 （您需要IE8的Respond.js）

• 許可證： MIT

Bootstrap 說明

Bootstrap的廣泛流行是它的優(yōu)勢所在。在技術(shù)上，它不一定比列表中的其它框架更好，但它提供了比其它四個框架更多的資源（文章和教程、第三方插件和擴展、主題構(gòu)建器等）。簡而言之，Bootstrap 無處不在，這是人們繼續(xù)選擇的主要原因。

Foundation

Foundation是排在第二名的框架。ZURB這樣堅實的公司一直支持著Foundation，所以這個框架有強大的基礎(chǔ)。Foundation現(xiàn)已用于許多大型網(wǎng)站，包括Facebook，Mozilla，Ebay，Yahoo！和國家地理等。

• 創(chuàng)作者： ZURB

• 發(fā)行： 2011

• 當前版本： 6.3.1

• 人氣： GitHub上有25,400顆星

• 說明： “世界上最先進的響應(yīng)式前端框架”

• 核心概念/原則： RWD，移動端優(yōu)先，語義。

• 框架大?。?197.5 KB

• 預(yù)處理器： Sass

• 響應(yīng)式布局：是

• 模塊化：是

• 啟動模板/布局：是

• 圖標集： 基礎(chǔ)圖標字體

• 額外/附加組件：是

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

• 文檔資源：良好，還有許多額外資源。

• 自定制：基本的GUI定制程序，類似于Bootstrap定制工具。

• 瀏覽器支持： Chrome，F(xiàn)irefox，Safari，IE9 ; iOS，Android，Windows Phone 7

• 許可證：MIT

Foundation 說明

Foundation是一個真正的專業(yè)框架，提供業(yè)務(wù)支持、培訓(xùn)和咨詢。它還提供了許多資源來幫助你更快更輕松地學(xué)習(xí)和使用該框架。

Semantic UI

Semantic UI是一個語義化設(shè)計的前端開源框架。它利用自然語言原理，從而使代碼更加可讀和可理解。

• 創(chuàng)作者： Jack Lukic

• 發(fā)行： 2013

• 當前版本： 2.2

• 人氣： GitHub上有34,762顆星

• 說明： “基于自然語言原則的UI組件框架”。

• 核心概念/原則：Semantic, tag ambivalence, responsive。

• 框架大?。?806 KB

• 預(yù)處理器：少

• 響應(yīng)式布局：是

• 模塊化：是

• 啟動模板/布局：是，并提供了一些基本的入門模板

• 圖標集： Font Awesome

• 額外/附加組件：否

• 獨特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。

• 文檔資源：非常好，Semantic提供了一個非常有組織的文檔，另外還有一個單獨的網(wǎng)站提供入門指南、自定義和創(chuàng)建主題。

• 自定義：沒有GUI定制器，只有手動定制。

• 瀏覽器支持： Firefox，Chrome，Safari，IE10 （僅IE9瀏覽器前綴），Android 4，Blackberry 10

• 許可證：MIT

Semantic UI 說明

Semantic是這里所討論的所有框架中，最具創(chuàng)新性和全功能的框架。其框架的總體結(jié)構(gòu)、類中清晰邏輯的命名約定方式和語義方面也超過了其它框架。

Pure

Pure是一種輕量級的模塊化框架，采用純CSS編寫，具有可根據(jù)需要一起使用或單獨使用的組件。

• 創(chuàng)作者：雅虎

• 發(fā)行： 2013

• 當前版本： 0.6.2

• 流行度： GitHub上有16,637顆星

• 說明： “一套小而靈活的CSS模塊，能夠在每個Web項目中使用?！?/p>

• 核心概念/原則： SMACSS，極簡主義。

• 框架大?。?16 KB

• 預(yù)處理：無

• 響應(yīng)式布局：是

• 模塊化：是

• 啟動模板/布局：是

• 圖標集：無。可以改用Font Awesome。

• 額外/附加組件：無

• 獨特組件：無

• 文檔資源：很好

• 自定義：基本GUI皮膚生成器

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

• 許可證： Yahoo! Inc. BSD

Pure 說明

Pure為你的項目提供了一個干凈的開始，只提供基本框架。對于不需要全功能框架但僅包含在其工作中的特定組件的人來說，pures是一個理想的選擇。

UIkit

UIkit是一個易于使用和自定義的組件的簡潔集合。雖然它不像其它框架那樣受歡迎，但它提供了相同的功能和質(zhì)量。

• 創(chuàng)造者： YOOtheme

• 發(fā)行： 2013

• 當前版本： 3.0.0

• 人氣：GitHub GitHub上有9,422顆星

• 說明： “用于開發(fā)快速而強大的Web界面的輕量級和模塊化的前端框架”。

• 核心概念/原則： RWD，移動端優(yōu)先

• 框架大?。?326.9 KB（如果包含uikit-icons.min.js與SVG圖標相關(guān)的功能，則為384.4 KB ）

• 預(yù)處理器：少，Sass

• 響應(yīng)式布局：是

• 模塊化：是

• 啟動模板/布局：是

• 圖標集： UIkit自帶SVG圖標系統(tǒng)和類庫，其中包含越來越多的大綱圖標。

• 額外/附加組件：是

• 獨特的組件：Article, Flex, Cover, HTML Editor

• 文件：好

• 自定義：高級GUI定制程序僅在版本2（以前的版本）中可用

• 瀏覽器支持： Chrome，F(xiàn)irefox，Safari，IE9

• 許可證：MIT

UIkit 說明

UIkit成功應(yīng)用在許多WordPress主題中。它提供了靈活和強大的手動定制機制（以前版本的框架還提供了高級GUI定制程序）。

什么是最適合你的框架？

在選擇框架時，可以從以下幾個方面考慮：

• 所選的框架有足夠的人氣嗎？更多的人氣意味著更多的人參與項目，也意味著有更多的教程和社區(qū)文章、更多的實例和網(wǎng)站、更多的第三方擴展、更好的相關(guān)的Web產(chǎn)品可與其集成。受歡迎程度也意味著框架更具前瞻性，因為具有更大社區(qū)的框架不太可能被拋棄。

• 框架是否正在積極發(fā)展？一個好的框架需要不斷地使用最新的web技術(shù)，特別是在移動端方面。

• 框架是否達到成熟？如果一個特定的框架在現(xiàn)實項目中還沒有被使用和測試，那么將其用于你的專業(yè)項目，可能不是一個明智的選擇。

• 框架是否提供了良好的文檔？為了方便學(xué)習(xí)過程，總是需要良好的文檔。

• 框架的特異性是什么？這里的要點是，與具有高級別特異性的框架相比，更通用的框架更容易使用。在大多數(shù)情況下，最好選擇一個應(yīng)用最小樣式的框架，因為它更容易自定義。與重寫現(xiàn)有的CSS規(guī)則相比，添加新的CSS規(guī)則是一個更方便有效的做法。

如果你還不確定使用哪個框架，那么可以采用混合搭配的方式。當某個特定的框架不能滿足你的需求時，可以混合使用兩個或多個項目的組件。

最后值得一提的是，現(xiàn)在Flexbox和Grid Layout在主流瀏覽器的最新版本中得到很好的支持，比以往任何時候都更容易構(gòu)建復(fù)雜的布局。這可能會鼓勵更多的開發(fā)人員放棄前端框架，從頭開始編寫他們自己想要的布局。

前端開發(fā)工具介紹：

Wijmo是一款用TypeScript編寫的新一代JavaScript/HTML5控件集。在全球率先支持AngularJS，并提供性能卓越、零依賴的FlexGrid表格控件和圖表等多個控件，是構(gòu)建企業(yè)應(yīng)用程序的全套控件集。

原文鏈接：https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/

轉(zhuǎn)載請注明出自：葡萄城控件