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

 

Bootstrap

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

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

Foundation6

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

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

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

Petal

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

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

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

Pure CSS

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

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

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

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

Semantic UI

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

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

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

Milligram

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

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

使用CSS壓縮工具，可以將它合并到一起，用以節(jié)約Http請(qǐng)求次數(shù)

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

Vital CSS

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

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

Skeleton

響應(yīng)式，超輕量級(jí)并且超簡(jiǎn)單的框架。提供了開發(fā)新網(wǎng)站必備的基礎(chǔ)架構(gòu)

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

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

UI Kit

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

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

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

Materialize

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

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

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

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