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

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

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

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

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

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

MDL并非首个Material Design的HTML/CSS/JS实现,除了MDL之外还有 Materialize 与 Material 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

Google将Material Design带到CSS、HTML与JavaScript上
更多相关文章
  • Quantum OS:基于Material Design的Linux操作系统
    一个新的Linux操作系统试图将Google的Material Design设计理念带到桌面上,Linux发行版数量有望加1.新操作系统最初被命名为 Quartz OS,但因与苹果OS X图形技术相冲突而重命名为Quantum OS.开发者计划使用Qt 5和QML开发桌面shell和应用程序,应用程 ...
  • iOS 版 Google Play Music 换上 Material Design,同场加推 iPad 版
    整合了 Beats Music 的 Apple 音乐服务尚未推出,Google 当然要在 iOS 上做多点来吸引用户吧.在最新版的 iOS Google Play Music app 当中,一个最明显的改动就是换上了 Material Design 新衣过农历新年吧.同时,他们也有另一个大举动,就是 ...
  • YouTube统一PC端与移动端用户界面风格,采用Material Design设计语言
    YouTube正在重新设计PC端的网页视频播放器,试图统一其与移动端的用户界面风格.新版播放器的设计遵循了Google目前的设计语言Material Design.原先独立于视频播放界面的纯黑条块,被重新设计为直接覆盖在视频画面的透明条块,控制条上的功能键也颇似Material Design按钮的设 ...
  • 一加氢 OS正式登场:Material Design、本地化、艺术性
    自一加手机推出以来,大家都知道其搭载的系统共有国内的 ColorOS 和海外的 CM 特制版两个版本(原因大家都懂).不过,在跟 Cyanogen 闹僵以后,一加就开始着手打造属于自己的 Android 定制 OS.四月初的时候,专为中国以外使用者而设的「氧 OS(Oxygen OS)」已经正式上线 ...
  • Material Design 总体概述
    Material Design是Google io开发者大会推出的新的设计语言,Material Design不像Android过去采用的Holo风格那样深沉,增加或修改了阴影动画功能,使其更加跳动和富有活力.Android L 开发者预览版包含了支持Material Design的Apps.Mat ...
  • 谷歌Material Design UI 为什么这么美设计即功能
    Google I/O 2014发布了全新的设计语言Material Design(卡片式材料设计),它是迄今为止最受欢迎的视觉设计语言之 一,利用了分层的卡片式设计.使用更多的空白和层次排版结构,经历了几年的迭代和提炼,来为手机.平板电脑.台式机和“其他平台”提供更一致.兼具外观和 功能的“外观和感 ...
  • Google I/O大会上给Android开发者的福利说,这个包能在Android设备2.1以上实现Material Design的设计.官方文档看不懂啊,有人用过这个写过标题栏沉浸的Demo吗???求一个Demo,不要在用5.0开发的,就用这个包.?谢谢大神 能兼容2.1以上是指让开发者能在5.0 ...
  • Android 50 Material Design 的Ripple波纹效果怎么默认全局实现
    注:ide是ADT23 新手求问~ 很喜欢Material Design 的Ripple波纹效果 创建项目的时候 Minimum Required SDK 选择API 11: Android 3.0 就这样,这样的话各种按钮什么的控件都有水波纹效果 然而把Minimum Required SDK选择 ...
一周排行