Google releases Material Design Lite, a web framework for making Material Design-style websites

Google Developers, the team at Google which creates tools and learning materials for developers to take advantage of, has released a front-end web framework for building sites to the Material Design specification.

The new framework, called Material Design Lite (MDL), includes Material Design-style components – like buttons, checkboxes, input fields, custom typography, and more – as well as a responsive grid and breakpoints (i.e. what happens when the window gets too narrow to display all elements side-by-side) that adhere to the Material Design adaptive UI guidelines. Google’s guidelines for how an app or website using Material Design reflows content at different screen sizes and as a screen resizes in real-time make for visual consistency across a range of devices of all shapes and sizes. The company says MDL is tailored towards websites heavy on text, like blogs and marketing pages.

Anyone who has used the Bootstrap web framework will understand MDL right away. Bootstrap is a similar framework of design and user interface tools that was originally created by developers at Twitter who sought consistency in the product interface’s developed by all the different teams within the company.

Google already has a set of Material Design components available for developers to add to their websites in its Polymer web library, but what’s different is that MDL is a whole package focused on bringing the company’s beautiful new design and UI language to the web. Whereas Polymer merely tacks on Material Design components to its greater library that can be used individually or together to create a Material Design-style site, MDL is a collection of all the specific typography, breakpoint widths, animations, and more to create websites true to the specification. Polymer is a much larger framework designed for extending the HTML web language by making it easier to create reusable components – similar to how there are tags specifically designed for formatting text as large and bold.

Those who don’t need all the extra functionality of Polymer and merely want to create a Material Design website will feel very comfortable with MDL. The company in its Medium post announcing the framework says that the “Lite” in MDL comes from several goals, including the goal for MDL to have “few dependencies, making it easy to install and use.” In this light, the other goals Google had with MDL were making it lightweight – it comes in at ~27KB zipped – and narrow-focused. MDL enables Material Design styling for websites. That’s it, nothing more. In case you need inspiration, the company has a page up with templates built using MDL.