Material Design前端框架推荐和应用

Material Design的介绍和理论知识这里不做介绍,这里只讲应用。如果你对Material Design还不是很了解可以先看我的另外一篇文章:Material Design入门介绍和学习资料推荐 Material Design的前...
Material Design的介绍和理论知识这里不做介绍,这里只讲应用。如果你对Material Design还不是很了解可以先看我的另外一篇文章:


Material Design的前端框架

这里推荐几个比较优秀的Material Design的前端框架,可以很容易方便的应用到你的项目当中


materialize


materialize是基于Material Design设计响应式前端框架。你可以像使用Bootstrap一样去使用它。它提供了css和scss的样式文件,还有Material Design icons和Roboto font。无疑materialize是令人印象深刻的Material Design实现框架之一。



Material UI React组件库


Material UI是基于Material Design设计React组件库。这个库十分的强将如果你使用React就行开发那么请选择它吧。



Angular Material


Angular看起来是像Material Design的兄弟很好的实现了这个标准。因为google内部很多项目都是使用Angular的。如果你用的是Angular那么你最好的选择就是它。



Material Design for Bootstrap


Material Design for Bootstrap是一个Bottstrap V3的Material Design主题。你只需要引入对应文件原来的页面就变成了Material Design风格。


Material Design Lite


Material Design Lite是Material Design的官方实现。他不依赖于任何框架,旨在优化跨设备使用,适度降低体验在旧的浏览器上。MDL遵循着BEM约定,保持类名的一致性、隔离性和表述性。BEM会导致类名暴涨,根据最初的反馈,MDL就中招了,针对于一个简单的卡片,它需要17个不同的类名,而这却是Material Design中的一个基本概念。想不依赖于任何其他框架的人可以选择这个。


MUI


MUI是Material Design的一个轻量级的实现。如果你要在移动端使用比较合适。


Ionic Material


Ionic Material是给Ionic无缝的Material Design主题。使用Ionic的就选择这个吧


总体对比


框架名称
大小(without gzip)
github星数
依赖
支持平台
materialize
js:128kb css:108 KB
18205
jquery
Chrome 35+, Firefox 31+, Safari 7+, IE 10+
Material UI
按需加载
15954
React
同React
Angular Material
js:299kb css:213KB
13421
Angular
同Angular
Material Design for Bootstrap
js:5.33kb css:92.1 KB
15274
Bootstrap
同Bootstrap
Material Design Lite
js:299kb css:213KB
20486
Internet Explorer 11,Safari 8,Mobile Safari 8,Chrome,Edge,Firefox,Opera
MUI
js:16kb css:41KB
2225
IE10+,Latest Stable: Firefox, Chrome, Safari,iOS 6+
Ionic Material
js:11.3kb css:68.1KB
2420
Ionic
同Ionic


通过上面的对比我想你肯定很容易选择出适合自己的Material Design的框架了。



对于前端人员我们可以怎么应用Material Design?

毫无疑问Material Design对我们的用户体验十分有帮助,那我们可以在哪里使用它呢


  • 后台系统 (pc,移动都可以) 可以参考后台模板中提供的第6个模板
  • 用户网站 (pc,移动都可以)
  • webapp
  • hybrid app 比如通过Ionic Material
  • 发表于 2017-02-22 16:44
  • 阅读 ( 627 )
  • 分类:互联网

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
不写代码的码农
mni_Ya

28 篇文章

作家榜 »

  1. mni_Ya 28 文章
  2. qtb000 4 文章
  3. we 1 文章
  4. NEVER SETTLE 0 文章
  5. pengzhiqiang 0 文章
  6. 搁浅 0 文章
  7. 游荡在大马路上的大马猴 0 文章
  8. MGeek 0 文章