The Google team just released another tool to help developers create Web interfaces that adhere to the company's Material Design visual language.
The company is going strong on the path it set out more than a year ago, reinforcing its dedication to its design language, more than Microsoft ever did with Modern UI (former Metro UI).
This new tool is called Material Design Lite (or just MDL) and is a collection of HTML, CSS, and JS files, specifically designed for creating Web interfaces, with support for a lite architecture, very few dependencies, and responsive layouts.
Material Design Lite is packed full of templates and components
The JS part is written in vanilla JS, the CSS code is also available in SCSS, and the HTML part heavily uses Web Components where possible.
The framework also includes pre-built templates and components, along with the possibility of using custom color palettes wherever needed.
Some of the pre-built components include the likes of buttons, menus, badges, sliders, toggles, tables, tooltips, card layouts, and a few more others.
The entire code of the first version of Material Design Lite weights around 27kb, and that's quite small compared to the contained functionality.
The MDL framework should work in all modern browsers, and because it uses CSS3 flexbox in some places, IE10 is the earlier most supported version. But don't worry, the framework is also designed to degrade gracefully to HTML & CSS components for older browsers, or when problems arise with newer engines.
Material Design Lite supersedes the Web Starter Kit
There are, of course, a few other UI frameworks that were developed around Google's Material Design guidelines, like Materialize, Material Design for Bootstrap, Material Framework, LumX, Material-UI, MUI, Leaf, and a few more, but MDL was developed by the official Material Design and Chrome UX teams, so the company recommends it above other solutions.
A few years back, Google also released Web Starter Kit, a framework built on Material Design as well, but this should be considered the next step of evolution in creating Material Design websites.
"MDL is an evolutionary step from the styleguide provided in Web Starter Kit," says the Google team.
Material Design Lite as a whole reminds us of the Polymer Starter Kit, a collection of Polymer elements that can be easily deployed to create Polymer-powered websites, and the Google devs also reassured developers that MDL can easily work together with Polymer applications and where other Paper elements have been used.
The fact that Google not only releases better Web technologies but also puts in the time to simplify the developer's workflow for deploying them is why the company is revered amongst programmers, on the same level as the open-source behemoths like the Apache and Linux Foundations are.
