MDL---Material Design Lite框架推荐
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, 可以尝试一下:
技术细节和浏览器支持
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框架推荐的更多相关文章
- Material Design Lite,简洁惊艳的前端工具箱。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- 超实用!9个目前流行的MATERIAL DESIGN前端框架
http://www.uisdc.com/material-design-frameworks-top-9 谷歌推出的Material Design风格已见有一些APP UI采用,视觉和交互体验都很棒 ...
- 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...
- Materialize和Material Design Lite的区别
Material Design Lite是google官方库,Materialize是第三方 Material Design Lite不依赖jquery,Materialize依赖jquery Mat ...
- 轻量级 Material Design 前端框架 MDUI (纯html,css,与css框架跟react vue不冲突)
MDUI 是一个轻量级的 Material Design 前端框架,对照着 Material Design 文档进行开发,争取 1:1 实现 Material Design 中的组件. 多主题支持 M ...
- Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...
- Material UI – Material Design CSS 框架
Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...
- Material Design Lite,简洁惊艳的前端工具箱 之 容器组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
随机推荐
- jQuery动态表格插件 AppendGrid
AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...
- Chrome浏览器桌面通知提示设置
版本 24.0.1312.56 m 老版本23.* 桌面通知,也可以由用户在Chrome浏览器中自定义:板手 -> 选项 -> 高级选项 –> 通知 (管理例外情况…).
- 五种I/O模型和select函数简介
一.五种I/O模型 1.阻塞I/O 我们在前面所说的I/O模型都是阻塞I/O,即调用recv系统调用,如果没有数据则阻塞等待,当数据到来则将数据从内核空间(套接口缓冲区)拷贝到用户空间(recv函数提 ...
- python标准库介绍——27 random 模块详解
==random 模块== "Anyone who considers arithmetical methods of producing random digits is, of cour ...
- spring 中 AOP 功能
1 PointCut 由 ClassFilter 和 MethodMatcher 构成,通过 ClassFilter 定位到类上,通过 MethodMatcher 定位到方法. 2 Spring 支持 ...
- 从github上下载项目到eclipse
第一步:把代码下载到本地的仓库中 到github后选择自己想下载的项目,拷贝它的URL,图示如下: 进入eclipse中 点击后如下: 继续 按照图片指示继续(大白菜next教程) fin ...
- 生产环境JAVA进程高CPU占用故障排查
问题描述:生产环境下的某台tomcat7服务器,在刚发布时的时候一切都很正常,在运行一段时间后就出现CPU占用很高的问题,基本上是负载一天比一天高. 问题分析:1,程序属于CPU密集型,和开发沟通过, ...
- Solr4:配置Data Import,从数据库直接创建索引
1. 要求 将数据库中的数据直接创建到Solr索引中去.先做全部索引,然后定期做增量索引. 2. 环境 Solr4.4版本,Tomcat7.0版本,Oracle 11g,已经配置好Tomcat与Sol ...
- 解决fonts.googleapis.com不能访问,导致网页打不开
最近,访问linode.com网站,突然发现网速好慢,老是打不开网页.分析一下网页才知道,原来使用了fonts.googleapis.com 打不开的原因就很明显了,咋办呢?百度啊,百度,最后,终于找 ...
- hdoj 1027 Ignatius and the Princess II 【逆康托展开】
Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ( ...