December 9, 2016

353 words 2 mins read

Material Design Lite

Material Design Lite

Material Design Lite (MDL) is a library of components for web developers based on Google's Material Design Philosophy. MDL is now unmaintained and replaced with the new MDC-Web (Material Design Component).

Material Design Lite:

Material Design is a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.

The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.

The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more.


Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

Material is a methaphor, a system for uniting style, and motion under a consistent set of principles..

Material Design Lite is built to provide a lightweight and basic set of Material Design components and templates for web sites. The project does not intend to provide structures to create all possible UX needs, but to provide a low-friction Material Design implementation you can build on.

Even within Material Design itself, cards specifically, it is unfeasible to provide every combination in a seamless manner. When you find something not provided, such as dropdowns in the drawer, you may need to code your own component.

The team is committed to providing a great experience to developers while staying true to the promise of lite.


It’s an implementation of the Material Spec targeted at content sites. Only 27KB gzipped. How? Vanilla CSS, HTML & JS!

comments powered by Disqus