Google MDL Brings Material Design Spec to Websites

In an effort to bring the material design specification to websites, Google has announced Material Design Lite (MDL). Google released the material design specification last year to create a visual language for users to create a consistent UI across all device form factors. MDL uses CSS, HTML, and JavaScript to apply the material design look and feel to websites. The "Lite" concept stems from its limited dependencies which makes the framework simple to install and use.

MDL remains framework agnostic as the landscape of front-end tools continues to change rapidly. MDL's code size (roughly 27KB zipped) cuts down on overhead. MDL was designed with a narrow purpose (i.e. material design for websites), so feature tweaks and updates should be dynamic and quick. MDL is optimized for content-rich sites (e.g. text articles, blogs, marketing spreads, etc.). To demonstrate, Google built an array of responsive templates for view.

To get started, those interested can visit the get MDL site. Alternatively, developers can test one of Google's examples on CodePen. MDL includes a host of rich components: design buttons, text-fields, tooltips, spinners, and more. Its responsive grid and breakpoints conform to new material design adaptive UI guidelines.

MDL was designed to work across the landscape of modern browsers (i.e. Chrome, Firefox, Opera, Microsoft Edge, and Safari). However, in CSS-only broswers (e.g. IE9), MDL will degrade. Google has published a FAQ section for common questions. However, Google encourages developers to reach out to the developer team on GitHub or Stack Overflow with specific questions and comments. 

Be sure to read the next Design article: Autodesk Announces New Forge Platform APIs and Forge Fund Investments