作為一名前端開(kāi)發(fā)程序員，學(xué)會(huì )運用一個(gè)好的web前端框架是很重要的一件事情，一個(gè)好的web前端框架，會(huì )讓你的工作效率大大增加，也會(huì )讓你的開(kāi)發(fā)變得很順利。本篇文章，我們將介紹2017年當下最值得你關(guān)注的前端開(kāi)發(fā)框架，每一個(gè)框架都擁有獨特的樣式，幫助創(chuàng )建網(wǎng)格布局，按鈕，表單或者其他頁(yè)面元素。希望能幫助到大家。

 

Bootstrap

幾乎每個(gè)開(kāi)發(fā)人員都知道來(lái)自Twitter的開(kāi)發(fā)框架-bootstrap。 它可能是最老牌的前端UI框架之一，最早版本發(fā)布于2011年。 它包含了一套完成的SASS類(lèi)庫，可以幫助自定義UI和JS組件，方便的來(lái)開(kāi)發(fā)各種導航，進(jìn)度，按鈕，面包屑導航等等

最近的一個(gè)版本Bootstrap4目前正在開(kāi)發(fā)過(guò)程中，應該很快的發(fā)布。 對于bootstrap3來(lái)說(shuō)，將是一個(gè)很大的改變。

Foundation6

Foundation類(lèi)庫已經(jīng)有些年頭了，最近將有一個(gè)大的版本更新，并且類(lèi)庫被分解成兩個(gè)主要的類(lèi)庫： 網(wǎng)站開(kāi)發(fā)類(lèi)庫和郵件開(kāi)發(fā)類(lèi)庫

它提供了一個(gè)最小化的UI框架，可以用來(lái)開(kāi)發(fā)任何布局類(lèi)型，并且完全的掌控各種頁(yè)面的相關(guān)組件，比如， 響應式菜單，輸入框，標簽頁(yè)等等

它同時(shí)提供了一個(gè)可以方便的瀏覽UI組件的網(wǎng)站。 并且支持主流的web開(kāi)發(fā)工具，例如，Grunt/Gulp，npm和SASS/compass等等

Petal

最新的CSS相關(guān)web開(kāi)發(fā)框架，基于LESS。

這個(gè)類(lèi)庫非常簡(jiǎn)單，目前版本0.6。但是是一個(gè)完全可以應用到實(shí)際開(kāi)發(fā)中去的框架。擁有非常清楚的文檔，例如，網(wǎng)格，字體，按鈕，輸入等等

Petal的開(kāi)發(fā)團隊不是很大，但是有非常高的產(chǎn)出。相信2017年中會(huì )成為一個(gè)擁有一席之地的知名框架

Pure CSS

Pure CSS擁有模塊化的設計。 擁有非常多的針對不同組件的小型類(lèi)庫，例如，表單，網(wǎng)格，圖表，導航按鈕等等

你可以自由的選擇使用多少類(lèi)庫。 基礎類(lèi)庫使用了Normalize及其其它的簡(jiǎn)單重置CSS來(lái)創(chuàng )建統一的UI界面效果。但是你可以添加自定義的Grid來(lái)節約開(kāi)發(fā)時(shí)間

所有的類(lèi)庫都可以使用工具來(lái)融合并且最小化。并且團隊提供了一個(gè)簡(jiǎn)單指導來(lái)幫助創(chuàng )建擴展類(lèi)

個(gè)人覺(jué)得Pure將會(huì )成為類(lèi)似Bootstrap一樣成功的框架。雖然在很多博客中并沒(méi)有大量提到，但是絕對在你的最佳框架中，它應該有一席之地

Semantic UI

這個(gè)框架目前是2.2版本，擁有很多典型的特性，例如，網(wǎng)格，類(lèi)型，顏色和輸入等

它提供了自定義的主題，擁有超過(guò)3000的不同主題類(lèi)型。并且提供了模擬Google，Amazon，Twitter等網(wǎng)站風(fēng)格的主題，你也可以方便的克隆并且編輯

你可以從現成的布局中選擇并且作為自己的開(kāi)發(fā)模板。Semantic UI擁有很多自定義的元素，你會(huì )發(fā)現這些設計都非常的與眾不同

Milligram

極簡(jiǎn)設計風(fēng)格的類(lèi)庫，如果你尋找超小類(lèi)庫的話(huà)，它是個(gè)非常不錯選擇，只有壓縮后2kb大小

非常簡(jiǎn)單漂亮的項目，目前版本1.3，穩定并且可以進(jìn)行實(shí)際的開(kāi)發(fā)。你可以使用npm，Yarn，Bower等安裝，但需要Normalize，所以你需要包含這個(gè)類(lèi)庫

使用CSS壓縮工具，可以將它合并到一起，用以節約Http請求次數

唯一不是很友好的就是文檔。當然，如果你能使用好文檔的話(huà)，使用Milligram將是非常簡(jiǎn)單的一件事

Vital CSS

另外一個(gè)極簡(jiǎn)的UI框架，支持SASS，學(xué)習極其簡(jiǎn)單

組件頁(yè)面介紹了你需要了解的全部?jì)热?。如果你需要一個(gè)超簡(jiǎn)單的CSS框架來(lái)開(kāi)發(fā)新的項目的話(huà)，它絕對可以滿(mǎn)足你的需求，如果你想深入了解，可以參考一下這篇來(lái)自Vital CSS開(kāi)發(fā)團隊的博客

Skeleton

響應式，超輕量級并且超簡(jiǎn)單的框架。提供了開(kāi)發(fā)新網(wǎng)站必備的基礎架構

包含一些基礎的樣式，但是沒(méi)有太炫的內容。實(shí)際上你可以快速簡(jiǎn)單的修改框架來(lái)滿(mǎn)足自己的需求

Skeleton是最穩定并且小型的框架。這里有個(gè)演示頁(yè)面。

UI Kit

一個(gè)功能豐富的前端類(lèi)庫。 擁有很多的可選文件和文件夾，CSS是樣式，images是圖標，js是javascript

插入頁(yè)面后，每一個(gè)js都可以關(guān)聯(lián)到DOM元素和組件，這讓你方便的和其它類(lèi)庫整合，例如，vue或者react

同時(shí)也可以使用這個(gè)類(lèi)庫來(lái)設置和創(chuàng )建UI組件。文檔頁(yè)面包含了很多例子幫助你常見(jiàn)網(wǎng)站

Materialize

Google的material design已經(jīng)成為了他們產(chǎn)品的標準。慢慢的影響了web設計世界，例如Materialize

這個(gè)免費的開(kāi)源框架將material設計帶到了下一個(gè)層次，最簡(jiǎn)單的方式來(lái)創(chuàng )建純material風(fēng)格的頁(yè)面，無(wú)需自己編碼

提供了純CSS的類(lèi)定義，javascript類(lèi)庫和組件。你可以在這里看到一些實(shí)際例子。

這幾款web前端框架各有各的優(yōu)勢，總有一個(gè)適合大家，希望本篇文章能幫助到你，讓你的工作更加高效率。