前几天Google推出新的前端UI框架Material Design Lite (MDL)，让人眼前一亮。Bootstrap作为大而全的老牌前端UI框架，其泛滥的使用早就让人审美疲劳，偶尔换换口味也不错。我一直以来都比较喜欢的Google的设计风格，卡片式的栅格系统使内容的呈现非常简洁，而细节处动画提升了整体品质。经过一天时间我把Q平台从Bootstrap换到MDL，大致总结如下：

• MDL与Bootstrap设计理念相差不大，不需要什么学习曲线
• 跟Bootstrap相比，MDL的组件仍然单薄，不适合大型项目

下面是一些需要注意的地方：

MDL的栅格系统跟Bootstrap很像，也是分成十二列。mdl-grid类就像row，而mdl-cell则对应于col-x-y。但不同之处在于，MDL的栅格系统使用flex属性来控制内部块，首先兼容性略差，但是终于解决了不同列等高的问题。如果不需要等高，则要添加mdl-cell--top选项。这些选项在官方文档里只是一略而过，并没有详说，因此可能会碰到不少坑。

MDL的内容核心似乎是它的“卡片”系统。这个卡片类似于Bootstrap中的Panel，但是有更多的格式。经过设计师的设计，这些卡片的文字和图片呈现看起来都很舒服。这也是这类UI框架的核心价值所在。

MDL在一些看起来没那么重要的组件上下了很多工夫，并明白为什么。官方文档上甚至用了整个篇幅来介绍它的文字输入。MDL的导航栏有好几种选择，设计得都非常精美好用，而且比Bootstrap的导航要简洁很多。MDL的所有类名都有mdl-的前缀，这样可以减轻CSS全局命名冲突的问题，这一点要比Bootstrap想得周到。MDL还有一个奇葩的功能，就是可以直接在CSS类中选择背景和文字颜色，甚至还有透明度，比如mdl-color--indigo-900。

MDL还有一些小bug。就连自己的官网上有时候底部会出现莫名的白条，或者导航栏错位等等。

MDL的组件太少，竟然连<select>下拉菜单也没有。而且我个人觉得MDL在很多地方只是给了一个大致的模板，而并没有细化。比如说MDL没有Bootstrap中十分好用的hide类，也无法像Bootstrap那样轻松地把文字pull-left或者pull-right，另外我找了半天也没找到如何把内容居中。MDL没有Modal。强调这一点的主要目的在于，我们使用这类UI框架一般都是在个人的小项目上，而在这些小项目上，精力主要都放在数据、逻辑和后台等方面，而不是放在前端的设计上，所以我一般都尽量避免添加自己的CSS。从这个角度看来，Bootstrap以其大而全的库完胜MDL，在添加更多的组件之前，MDL的使用比较受限。

不知道Google对这个库的未来打算怎样，如果以后会有更多可用组件的话，我会强烈考虑使用MDL来作为个人项目的前端框架。