INTRO

material design相比不会陌生, 现在的移动端基本遵循了这个设计规范, 微软退出过一个残次品universal design(花了半个月时间赶出来的规范)也是借鉴了MD的思想, 官网如下:

getmdl.io -vanilla CSS,HTML和JS中的组件和模板库

早在2014年,Google就发布了material design 规范,目标是为所有设备外形提供良好设计和精美UI的指南。谷歌自己当然也推出了符合这一规范的前端web框架爱: Material Design Lite(MDL)。

MDL可以轻松地为您的网站添加材料设计外观。MDL的“Lite”部分来自几个关键设计目标:MDL具有很少的依赖性,使其易于安装和使用。它与框架无关,这意味着MDL可以与任何快速变化的前端工具链环境一起使用。MDL在代码大小方面的开销很低(约27KB gzip),而且关注点很窄 - 为网站提供了材料设计样式。

MDL是使用Polymer构建的Paper元素的补充实现。Paper元素是完全封装的组件,可以单独使用或组合在一起以创建材料设计风格的站点,并支持更高级的用户交互。也就是说,MDL可以与Polymer元素对应物一起使用。

和其他UI框架一样, 它是开箱即用的模板

MDL针对内容很重的网站进行优化,例如营销页面,文本文章和博客。我们构建了响应式模板,以显示可以使用MDL创建的站点范围。这些能激发您构建外观漂亮的网站。

DEMO

博客:

内容网站:

管理系统:

独立文章:

ABOUT

对MD的实现有无数种, 在web领域就有数十种开源框架基于material来实现的, 国内有一个MDUI的框架个人认为对md的实现非常完美, 同时在兼容性上超越了MDL, 可以尝试一下:

https://www.mdui.org/

技术细节和浏览器支持

MDL包含丰富的组件,包括材料设计按钮,文本字段,工具提示,微调器等等。它还包括响应网格和断点.

完整的MDL体验适用于所有现代常青浏览器(Chrome,Firefox,Opera,Microsoft Edge)和Safari.

其他

MDL的核心是Lite, 即精简, 比mdui要小很多,也快很多, 但是缺点是很多地方需要polyfill来兼容, 甚至是firefox.

谷歌一直在与设计师合作,不断发展材料设计,为网络构建额外的思维。这包括处理响应式模板,高性能排版和徽章等缺失组件的解决方案。

MDL建立在您已经知道并每天使用的Web核心技术的基础上 - CSS,HTML和JS。通过在项目中采用MDL,您可以访问权威且高度策划的Web材料设计实现。

我迫不及待地想要使用MDL来构建的美丽,现代,响应迅速的blog网站: 欢迎关注我用mdl实现的的个人主页;

jinhengyu.github.io

MDL---Material Design Lite框架推荐的更多相关文章

  1. Material Design Lite,简洁惊艳的前端工具箱。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  2. 超实用!9个目前流行的MATERIAL DESIGN前端框架

    http://www.uisdc.com/material-design-frameworks-top-9 谷歌推出的Material Design风格已见有一些APP UI采用,视觉和交互体验都很棒 ...

  3. 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

    在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

  4. Materialize和Material Design Lite的区别

    Material Design Lite是google官方库,Materialize是第三方 Material Design Lite不依赖jquery,Materialize依赖jquery Mat ...

  5. 轻量级 Material Design 前端框架 MDUI (纯html,css,与css框架跟react vue不冲突)

    MDUI 是一个轻量级的 Material Design 前端框架,对照着 Material Design 文档进行开发,争取 1:1 实现 Material Design 中的组件. 多主题支持 M ...

  6. Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...

  7. Material UI – Material Design CSS 框架

    Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...

  8. Material Design Lite,简洁惊艳的前端工具箱 之 容器组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  9. Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

随机推荐

  1. 关于android.view.WindowLeaked(窗体泄露)的解决方案

    虽然是小问题一个,但也困扰了我一段时间,现在记下来,给自己做个备忘,也可以给其他人一个参考 view plaincopy to clipboardprint? 01-08 01:49:27.874:  ...

  2. zabbix客户端安装和配置(linux)

    zabbix源码安装客户端 # tar -xvf zabbix-.tar.gz # mv zabbix- zabbix # cd zabbix # ./configure --prefix=/usr/ ...

  3. 自己定义View学习之12/7(进度条之混合模式)

    今天重点内容是我们学习自己定义view里面的混合模式.事实上我们的画布就跟photoshop一样.是个图层关系,一层盖着一层.这样就导致有非常多种覆盖模式,这就是我们今天的主题."混合模式& ...

  4. lcx.exe内网转发命令教程 + LCX免杀下载

    作者: 小健 本机: lcx -listen 2222 3333 2222为转发端口,3333为本机任意未被占用的端口 肉鸡:lcx -slave 119.75.217.56 2222 127.0.0 ...

  5. .Net程序猿玩转Android开发---(11)页面跳转

    在不论什么程序开发中,都会遇到页面之间跳转的情况,Android开发也不例外.这一节,我们来认识下Android项目中如何进行页面跳转.页面跳转分为有參数和无參数页面跳转,已经接受还有一个页面的返回值 ...

  6. JavaScript与DOM(上)

    本来像自己写一篇的...结果看到了Tom uncle的这篇..总结的确实很赞,其他文章也非常好推荐 转载自:http://www.cnblogs.com/TomXu/archive/2011/12/1 ...

  7. unity, 让主角头顶朝向等于地面法线(character align to surface normal)

    计算过程如下: 1,通过由主角中心raycast一条竖直射线获得主角所在处地面法线,用作主角的newUp. 注:一定要从主角中心raycast,而不要从player.transform.positio ...

  8. linux安装php环境,yum安装php环境

    用yum来管理安装Apache PHP Mysql的基本安装.1. 安装Apahce, PHP, Mysql, 以及php连接mysql库组件.yum -y install httpd php mys ...

  9. JS实现随机数生成算法示例代码

    JS实现随机数生成算法的方法有很多,本文为大家介绍一个比较不错的方法. 1, var MT = []; var index = 0; function initialize_generator(see ...

  10. 基于FPGA的异步FIFO设计

    今天要介绍的异步FIFO,可以有不同的读写时钟,即不同的时钟域.由于异步FIFO没有外部地址端口,因此内部采用读写指针并顺序读写,即先写进FIFO的数据先读取(简称先进先出).这里的读写指针是异步的, ...