首页 >> HTML+CSS >> Google将Material Design引入CSS,HTML和JavaScript

Google将Material Design引入CSS,HTML和JavaScript

287865 2021-02-28 0
浏览次数288

Google Material Design Lite)(MDL)旨在为网站提供材料设计外观。材料设计是Android上的标准语言,也是Google提出的跨平台语言。

根据Google的说法,MDL符合三项要求,可使其成为“精简版”:

它几乎没有依赖关系,这使得安装和使用变得容易
它与框架无关,允许开发人员将其集成到任何可用的前端工具链中
它的代码大小相对较小
它的重点很狭窄,执行的是材料设计指南,而不是一个全面的框架。
这是您声明带有波纹的基本凸起按钮的方式:

Button

MDL并不是材料设计的第一个HTML / CSS / JS实现,并且还提供了Materialize和Material Bootstrap等替代方案。Google说,MDL带来了这些社区努力的主要优势在于,它是“与Material Design和Chrome UX团队紧密合作开发的,并定期接受有关规范合规性的审查”。

在MDL之前,Polymer是CSS / JS的材料设计的规范实现。与MDL相比,Polymer具有更大的范围,它不仅包括数据通信组件,还包括非材料设计组件,从而超出了视觉范围。

目前,MDL尚未优化,也不支持使用单个组件(例如按钮)。不过,对于只希望使用减少数量的MDL组件的开发人员而言,可以通过material-design-lite.css从Gulpfilean运行中注释掉不需要的组件和不需要的脚本来定制自定义MDL分发gulp。

MDL遵循BEM约定,以使类名一致,独立和可表达。Google还详细介绍了(https://github.com/google/material-design-lite/wiki/Understanding-BEM)在将BEM应用于MDL时遵循的准则。不利的一面是,BEM可能导致类名激增,并且根据初始反馈,MDL倾向于通过为简单卡(材料设计中的基本概念)要求17个不同的类名来实现此目的。

谷歌表示,MDL可在所有现代浏览器(Chrome,Firefox,Opera,Microsoft Edge)和Safari中使用,而在IE9之类的浏览器中会优雅地降级,并建议引用其CDN以便将MDL包含在网站中。可以通过npm或Bower下载或导入它。

全部评论:0