Top 15 - Material Design框架和類庫(譯)

_Material design_是Google開發的，目的是爲了統一公司的web端和手機端的產品風格。它是基於不少的原則，好比像合適的動畫，響應式，以及顏色和陰影的使用。完整的指南詳情請看這裏（http://www.google.com/design/spec/material-design/introduction.html）
雖然Google的設計看起來主要是應用在Android上的應用，可是也是個很好的機會應用到web和hybrid應用。爲了幫助使用者更好的建立Material design風格的web工程，有不少的框架和類庫已經實現了相應的組件和樣式。下面就是咱們推薦的Top 15!

Material Design Lite

Material Design Lite是Google官方提供的框架，你能夠常常的更新最近版原本知道其踐行的標準。它看起來很是棒，很容易使用，而且沒有其它的依賴。
<!--more-->

Materialize

這是一個用於構建響應式應用和網站的前端框架。它真的很是容易上手，特別是對於那些熟悉相似Bootstrap框架的人們。很是酷的是SASS版本，能夠容許用戶選擇組件引入。

Materual-UI

Material-UI是基於Material Design設計的一套豐富的React組件。這是一個實現的很是漂亮的類庫包括CSS樣式和動畫。有兩套獨立的風格能夠選擇-黑色和亮色

MUI CSS

在咱們這份榜單中最輕量的一款，沒有任何的依賴並且僅僅12kb的gzip包，包括所有的CSS和JS。提供React支持，經過SASS文件能夠自定義，爲了幫助寫出適用於電子郵件的HTML,MUI包括了一個郵件CSS庫，並容許使用內聯。

Polymer

Polymer是Google的另一款產品。一個類庫用來構建快速可複用的web組件應用到你的項目中。Polymer提供可使用的元素有不少(https://elements.polymer-project.org/)，分紅了7類。其中的一個叫作Paper,所有是Material Design的組件。

Ionic Material

這是一個對Ionic混合式手機應用框架的擴展庫。它增長了新的樣式類，方法來達到Ionic的Material化，而並無改變用Ionic開發應用的方式。

Material Foundation

Zurb出品的是另一個流行的框架用來構建響應式的網站和應用。這是一套獨立的組件能夠快速的搭建基礎元素。它看起來很是不錯可是沒有不少關鍵的Material Design的組件。

Surface

兩個星期的親身體驗，Surface是一個CSS框架，實現了不少經典的Material UI組件，而沒有使用任何的JavaScript並且不須要任何編程語言。僅一個css文件，很是輕量，易於使用。

Essence

Essence是一個基於React和React Native的CSS框架。它容許開發者快速的構建很是漂亮的web和mobile交互的應用，實現擬物化設計標準。可使用npm安裝整個類庫，或者只加載你使用的模塊。

LumX

Angular.js-like框架提供了許多流暢動畫的CSS和JavaScript組件。Lumx的佈局和樣式是基於Bourbon，動畫庫使用很流行的Velocity.js。通過這些框架的整合，Lumx是一個實現不少功能的工具，來實現響應式的web應用。

Paper Theme for Bootstrap

不少人在Boostwatch上實現了不少炫酷的Bootstrap樣式風格，包括一個模擬Material Design的叫Paper。它沒有實現全部的擬物化設計組件，但對於一些使用Bootstrap的人確實一個很是不錯的選擇，由於他們不用改變任何東西（除了加載樣式）來實現一個很是流行的應用。

Material Design for Bootstrap

另一個可供選擇的也是爲Bootstrap而生的。這是一個活躍的樣式更新的前端框架，爲了達到Google的設計標準，增長了一些新的樣式和一些JavaScript，還有一些jQuery的插件。另外Github上的項目有超過14000個star。

Angular Material

AngularJS是一個很是流行的web開發開源框架。由Google得一個團隊維護，因此不出意外的他們有本身的Material Design工具包。如今爲止，它只支持Angular 1，但對第二版本的支持也接近完成。

Material

你能夠認爲Material是一個UI層的框架，它完美的將Bootstrap和MDL融合在一塊兒 - 它和Bootstrap很是類似(幾乎同樣的grid和HTML)，在一些Material組件中比較重要的像卡片[http://daemonite.github.io/material/ui-card.html]和彈出日期[http://daemonite.github.io/material/ui-picker.html]選擇。大部分傳統的Material Design的元素均可以在這裏找到。

Phonon

Phonon致力於hybrid移動應用開發。到目前爲止它僅60kb大小，並且不依賴於任何第三方的插件，它能夠很輕量的被用來建立Cordova和PhoneGap應用。Phonton的UI組件看起來很是接近Material Design的理念。

Framework7

Framework7是爲了構建hybrid這類應用。它讓開發者很快的構建web應用而且看起來和操做上很是接近IOS和Android.爲了達到這樣的效果它提供兩種風格-一種爲Apple設備，另一種提供Material Design組件風格樣式。

額外紅利: Material Icons

這裏的圖標集基本都是Google在web,Android和IOS用到的。這裏有大量的圖標可供選擇，並且還在持續的增長。它是徹底免費而且能夠很是容易的經過Google Fonts或其它方式來實現。

結語：

這裏提供的大部分插件和框架有不少類似的組件和特性。這取決於開發人員根據他們自身的狀況和項目來決定選擇如何使用。但願這些能幫助你作出正確的選擇。

最後推薦一下咱們本身作的站立辦公桌__Li-Desk__

若是你對站立辦公感興趣,能夠關注咱們的微信公衆號__[狸木匠]__進行購買

點擊當即購買 站式辦公桌【Li-Desk】查看商品詳情介紹