最受歡迎的幾個Web前端框架

身為前端開發程式設計師，學會運用一個好的web前端框架是很重要的一件事情，一個好的web前端框架，會讓你的工作效率大大增加，也會讓你的開發變得很順利。這篇文章，我們將介紹2017年當下最值得你關注的前端開發框架，每一個框架都擁有獨特的樣式，幫助創建網格佈局，按鈕，表單或其他頁面元素。希望能幫助大家。

Bootstrap

幾乎每個開發人員都知道來自Twitter的開發框架-bootstrap。 它可能是最老牌的前端UI框架之一，最早版本發佈於2011年。 它包含了一套完成的SASS類別庫，可以幫助自訂UI和JS元件，方便的來開發各種導航，進度，按鈕，麵包屑導航等等

最近的一個版本Bootstrap4目前正在開發過程中，應該很快的發布。 對於bootstrap3來說，將會是一個很大的改變。

Foundation6

Foundation類別庫已經有些年頭了，最近將有一個大的版本更新，並且類別庫被分解成兩個主要的類別庫： 網站開發類別庫和郵件開發類別庫

它提供了一個最小化的UI框架，可以用來開發任何佈局類型，並且完全的掌控各種頁面的相關組件，比如， 響應式選單，輸入框，標籤頁等等

它同時提供了一個可以方便的瀏覽UI元件的網站。 並且支援主流的web開發工具，例如，Grunt/Gulp，npm和SASS/compass等等

#Petal

最新的CSS相關web開發框架，基於LESS 。

這個類別庫非常簡單，目前版本0.6。但是是一個完全可以應用在實際開發中去的框架。擁有非常清楚的文檔，例如，網格，字體，按鈕，輸入等等

Petal的開發團隊不是很大，但是有非常高的產出。相信2017年中會成為一個擁有一席之地的知名框架

Pure CSS

#Pure CSS擁有模組化的設計。 擁有非常多的針對不同元件的小型類別庫，例如，表單，網格，圖表，導航按鈕等等

你可以自由的選擇使用多少類別庫。 基礎類別庫使用了Normalize及其其它的簡單重置CSS來創建統一的UI介面效果。但是你可以加入自訂的Grid來節約開發時間

所有的類別庫都可以使用工具來融合並且最小化。而團隊提供了一個簡單指導來幫助創建擴展類別

個人覺得Pure將會成為類似Bootstrap一樣成功的框架。雖然在許多部落格中並沒有大量提到，但是絕對在你的最佳框架中，它應該有一席之地

#Semantic UI

這個框架目前是2.2版本，擁有許多典型的特性，例如，網格，類型，顏色和輸入等

它提供了自訂的主題，擁有超過3000的不同主題類型。並且提供了模擬Google，Amazon，Twitter等網站風格的主題，你也可以方便的克隆並且編輯

#你可以從現成的佈局中選擇並且作為自己的開發模板。 Semantic UI有許多自訂的元素，你會發現這些設計都非常的與眾不同

Milligram

極簡設計風格的類別庫，如果你尋找超小類庫的話，它是個非常不錯選擇，只有壓縮後2kb大小

非常簡單漂亮的項目，目前版本1.3，穩定並且可以進行實際的開發。你可以使用npm，Yarn，Bower等安裝，但需要Normalize，所以你需要包含這個類別庫

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

唯一不是很友善的就是文件。當然，如果你能使用好文檔的話，使用Milligram將是非常簡單的一件事

Vital CSS

另外一個極簡的UI框架，支援SASS ，學習極為簡單

元件頁面介紹了你需要了解的全部內容。如果你需要一個超簡單的CSS框架來開發新的專案的話，它絕對可以滿足你的需求，如果你想深入了解，可以參考一下這篇來自Vital CSS開發團隊的部落格

Skeleton

響應式，超輕量級且超簡單的框架。提供了開發新網站必備的基礎架構

包含一些基礎的樣式，但是沒有太炫的內容。實際上你可以快速簡單的修改框架來滿足自己的需求

Skeleton是最穩定且小的框架。這裡有個演示頁面。

UI Kit

一個功能豐富的前端類別庫。 擁有很多的可選文件和資料夾，CSS是樣式，images是圖標，js是javascript

插入頁面後，每一個js都可以關聯到DOM元素和元件，這讓你方便的和其它類別庫整合，例如，vue或react

同時也可以使用這個類別庫來設定和建立UI元件。文件頁麵包含了許多範例幫助你常見網站

Materialize

Google的material design已經成為了他們產品的標準。慢慢的影響了web設計世界，例如Materialize

這個免費的開源框架將material設計帶到了下一個層次，最簡單的方式來創建純material風格的頁面，無需自己編碼

提供了純CSS的類別定義，javascript類別庫和元件。你可以在這裡看到一些實際例子。

這幾款web前端框架各有各的優勢，總有一個適合大家，希望這篇文章能幫助到你，讓你的工作更有效率。

相關推薦：

二十個功能強大的PHP框架

全球php開發框架排行榜

#實用web前端JS與UI框架簡介

php開發的時候你們都用什麼前端框架?

#第一次接觸神奇的前端框架vue.js