2017年最佳Web前端框架賞鑒

構建和開發前端最重要的基礎工作就是選擇一個高效並且符合需求的web前端框架，一個合理並且高效開發的框架並不僅僅降低你的時間成本，同時也會給你持續開發的信心和樂趣。

在這篇分享中，我們將介紹2017年當下最值得你關注的前端開發框架，每一個框架都擁有獨特的樣式，幫助創建網格布局，按鈕，表單或者其他頁面元素

最重要的一句話 - 不管你選擇哪種框架，都會大大好過你自己從頭開發自己的基礎框架，現代web開發從來就不缺優秀的前端開發框架

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類庫和組件。你可以在這裡看到一些實際例子。

小編總結

這裡我們介紹了一些免費的UI框架可以幫助你輕快好省的開發網站和移動應用，希望大家能夠通過本文的閱讀了解一些高效的開發框架，相信各位讀者在自己的開發過程中也發現並且挖掘了很多UI框架，希望大家可以留言交流~

如果你現在在學前端或者工作是前端，歡迎加入我們大前端交流學習裙：六二三九六六八零六

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！