目前有哪些製作 Material Design 風格網頁的庫?

想做一個Material Design 風格的網頁,現有的庫有很多,哪一種比較好?


  1. Material Design Lite Google官方提供的框架
  2. Materialize 構建響應式應用和網站的前端框架, 類似bootstrap, SASS 版本
  3. Materual-UI React組件 兩套獨立的風格可以選擇-黑色和亮色
  4. MUI CSS 輕量級
  5. Polymer Google的另一款產品
  6. Ionic Material Ionic混合式手機應用框架的擴展庫
  7. Material Foundation 有一套獨立的組件可以快速的搭建基礎元素。
  8. Surface 只有一個CSS文件,非常輕量
  9. Essence 基於React和React Native的CSS框架
  10. LumX 實現響應式的web應用
  11. Paper Theme for Bootstrap 模擬Material Design ,對使用bootstrap的人來說是個不錯的選擇
  12. Material Design for Bootstrap 為Bootstrap而生 , 增加了一些新的樣式和一些JavaScript,還有一些jQuery的插件。
  13. Angular Material 支持AngularJS
  14. Material 完美的將Bootstrap和MDL融合在一起
  15. Phonon 致力於hybrid移動應用開發
  16. Framework7 構建hybrid這類應用

參考文章 Top 15 - Material Design框架和類庫(譯)


Google官方的Material Design Lite,Google官方的演示站可能自帶被牆屬性。

官網:Material Design Lite

GitHub:google/material-design-lite · GitHub


推薦一個 http://materialup.com


mui.min.css

很小的一個UI庫,效果卻很全。

python版本web項目的demo如下:

python/mis at master · top/python · GitHub


國人做的mdui

https://www.mdui.org

個人認為算是做的最用心的一個了,中文友好,相對來說也非常簡單。雖然說動畫還需要一點點小改善,但是我認為這是除了谷歌mdc以外最值得用的了。

沒有設計師約束就大膽用吧


angular/material · GitHub


bootstrap有一個material design的實現。地址 http://fezvrasta.github.io/bootstrap-material-design/#about


來個VUE版的。目前在用,問題還是有一些的,不過代碼量不多,寫的很清晰,可以自己改

Vue Material


谷歌設計風格的bootstrap整套模板-極簡、優雅震撼你的視覺 自己在用的


https://github.com/Dogfalo/materialize

https://github.com/FezVrasta/bootstrap-material-design

這兩個是我目前看到的最好看的了,手機恢復沒有圖


推薦閱讀:

如何看待web開發前端框架QUICK UI?
CSS3 中存在哪些重要的概念?
如何判斷一個APP頁面是否是H5頁面?
怎麼理解CSS中vertical-align這個屬性?
想從零開始學習 HTML5 和 CSS,請問有沒有比較好的建議?比如學習什麼語言,有沒有好的書或者教程推薦等等?

TAG:前端開發 | HTML | CSS | MaterialDesign |