Google Material Design Lite) (MDL) aims to enable material design look and feel for websites. Material design is a visual language that is standard on Android and that Google is proposing cross-platform.
According to Google, MDL meets three requirements that qualify it as “lite”:
- it has few dependencies, which makes it easy to install and use
- it is framework-agnostic, allowing developers to integrate it within any of the available front-end tool chains
- it is relatively small in code size
- it has a narrow focus, implementing the material design guidelines, and is not a comprehensive frameworks.
This is how you declare a basic raised button with ripple:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Button </button>
MDL is not the first HTML/CSS/JS implementation of material design, and alternatives such as Materialize and Material Bootstrap are also available. The main advantage that MDL brings over those community efforts, says Google, is that it was developed “in close collaboration with the Material Design and Chrome UX teams and undergoes regular reviews for spec compliance”.
Before MDL, Polymer was the canonical implementation of material design for CSS/JS. Compared to MDL, Polymer has, though, a larger scope that goes beyond the visual domain by including data communication components as well as non-material-design components.
At the moment, MDL is not optimized nor supports the use of individual components, e.g. a button. Still, for developers wanting to use just a reduced number of MDL components, it is possible to tailor a custom MDL distribution by commenting out undesidered components from material-design-lite.css and undesired scripts from the Gulpfile an then running gulp.
MDL follows the BEM convention to make class names consistent, isolated, and expressive. Google also details (https://github.com/google/material-design-lite/wiki/Understanding-BEM) what guidelines they have followed in applying BEM for MDL. On the downside, BEM can lead to exploding class names and according to intial feedback, MDL seems to be prone to it by requiring seventeen different class names for a simple card, a basic concept in material design.
Google says that MDL works in all modern browsers (Chrome, Firefox, Opera, Microsoft Edge) and Safari, while it degrades gracefully on browsers like IE9, and suggests to reference their CDN in order to include MDL in a website, but it is also possible to download it or import it via npm or Bower.