Google將Material Design帶到CSS、HTML與JavaScript上
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之外還有 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