BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Google将Material Design带到CSS、HTML与JavaScript上

| 作者 Sergio De Simone 关注 18 他的粉丝 ,译者 张龙 关注 14 他的粉丝 发布于 2015年7月13日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

Google Material Design Lite(MDL)旨在将Material Design感官带到网站上。Material Design是一种视觉语言,是Android的标准,同时也是Google提出的跨平台解决方案。

根据Google所述,MDL满足如下几个条件,而这正是 “Lite”这一名字的由来:

  • 依赖很少,这使得安装和使用变得很简单
  • 不依赖于其他框架,这样开发者就可以将其集成到任何现有的前端工具链中
  • 代码量相对来说不太大
  • 非常聚焦,实现了Material Design原则,并且不是一个大而全的框架

如下代码展示了如何声明一个带有涟漪的凸起按钮:

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Button </button> 

MDL并非首个Material Design的HTML/CSS/JS实现,除了MDL之外还有MaterializeMaterial Bootstrap等。根据Google所述,相比于那些由社区推进的项目来说,MDL的主要优势在于它的开发“与Material Design和Chrome UX团队保持了密切的协作,而且经过了定期的审查以保持与规范的兼容性”。

在MDL之前,Polymer是面向CSS/JS的Material Design的标准实现。相比于MDL,Polymer所涵盖的范围更大,它超出了视觉领域,包含了数据通信组件以及非Material Design组件。

目前,MDL并未进行过优化,也不支持单个组件的使用,比如说按钮。如果开发者想要使用少量的MDL组件,那么他可以对其进行裁剪来实现自定义的MDL,方式是将不需要的组件从material-design-lite.css中注释掉,将不需要的脚本从Gulpfile中注释掉,然后再次运行gulp

MDL遵循着BEM约定,保持类名的一致性、隔离性和表述性。Google还详细介绍了(https://github.com/google/material-design-lite/wiki/Understanding-BEM)在将BEM应用到MDL时所遵循的指导原则。遗憾的是,BEM会导致类名暴涨,根据最初的反馈,MDL就中招了,针对于一个简单的卡片,它需要17个不同的类名,而这却是Material Design中的一个基本概念。

Google表示MDL可以使用在所有现代浏览器中(Chrome、Firefox、Opera、Microsoft Edge及Safari),同时还能在IE9等浏览器上实现优雅降级;此外,Google还建议引用他们的CDN,从而在网站中包含进MDL,不过也可以直接下载或是通过npm以及Bower引入。

查看英文原文:Google Brings Material Design to CSS, HTML, and JavaScript

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT