Google unveils Material Design Lite

Ben Moss.
July 07, 2015
Google unveils Material Design Lite.

Yesterday Google announced the release of Material Design Lite. Not, as the name might imply, a streamlined version of Material Design; rather, a framework for easily implementing Material Design on websites. In the year since Google unveiled Material Design at I/​O 2014, it has changed Google’s not-inconsiderable output beyond recognition. Everything from Google Drive to Android OS sports Material Design’s minimal(ish) style. Even Google’s flagship search page has adopted Material Design elements. One of the chief stumbling blocks for widespread adoption of Material Design principles beyond Google’s own products, has been competing styles imposed by frameworks. There have been several community-driven attempts to rationalize Material Design and, for example, Bootstrap; Material Design Lite is an attempt to provide a Google-sanctioned implementation.

Material Design can replace many parts of Bootstrap. However, it does not intend to feature-match everything Bootstrap offers. Instead MDL intends to implement the components specified by the Material Design specification. This allows it to provide the most comprehensive and accurate solution available. — getmdl​.io/faq

How do I use Material Design Lite?

A code implementation of Material Design (MD), Material Design Lite (MDL) is a small (around 27Kb gzipped) library of components for use on web pages and web apps. It’s written in Sass using BEM, and can be downloaded from GitHub then modified for your own purposes. Or you can, as per Google’s stated preference, import the full framework from Google’s CDN. You can cherry-pick elements to integrate with your designs, or if you are looking for a really simple option, Google have provided a theme customizer which allows you to make (very) minor changes to the framework before you use it. 

What’s included in Material Design Lite?


’s component library features MD versions of common UI elements such as check boxes, text input fields, and buttons. There are also MD UI elements such as cards, sliders, spinners, and tabs. MDL also includes five templates: a blog, the android​.com skin, a dashboard, a text-heavy web page, and a standalone article page: template-1 template-2 template-3 template-4 template-5

Browser support for Material Design Lite


will, according to Google, work in modern evergreen browsers (Chrome, Firefox, Opera, Microsoft Edge) and Safari”. Subtle swipe at Apple aside, this means that we can expect it to work in the last two major versions of all notable browsers. MDL has been optimized to support content heavy sites. Its core aims are browser portability, device independence, and graceful degradation. The first two aims are in line with responsive design best practices, and although graceful degradation has been supplanted by progressive enhancement in the last few years, legacy support means graceful degradation is an important feature. MDL includes a Cutting the mustard” test which has to be passed before MDL’s JavaScript enhancements are applied to the framework. Older browsers, like IE9, will fail the test and be served a CSS-only version. Antique browsers, like IE8, won’t even fully support the CSS-only version. There is for example, use of Flexbox that neither IE8 or IE9 can cope with; however MDL’s graceful degradation means that even IE8 should display some of the framework correctly.

Issues with Material Design Lite

Numerous UX issues crop up with MD, and naturally MDL inherits them all. For example one of the most distinctive elements of MD, the floating button, is frequently positioned inconsistently, and on mobile often requires an extra knuckle in your thumb to tap it. [pullquote]MDL feels like a framework with an agenda[/pullquote] Broadly speaking MDL is well built, however there are some questionable approaches; it is, for example, yet another framework that relies on JavaScript for layout. MDL even extends into typography, which is where things get really sticky. The default font is Roboto, and although you can change this, I’m not confident that the majority of users will do so. CSS frameworks like Bootstrap, and Foundation, have always included visual elements. They have not however, been as distinct as MDL. MDL takes a step further than most frameworks by delivering a complete visual style; MDL feels like a framework with an agenda.

Should you use Material Design Lite?


is the way that Google thinks the majority of websites should be built. And whilst there is absolutely no suggestion that Google will enforce this way of building, they certainly could if they chose to; Google wants to ensure that search results it serves to customers are fast, clean, user-friendly pages, what better way than to add the use of a framework it controls, to its algorithm? The use of any framework inevitably introduces some borrowed visual elements. However, most successful frameworks are successful because they are flexible. Where MDL differs, is that it is not just a framework, but a framework that favors a specific design approach. MD, as a design guide, is a well-crafted and intelligent attempt to rationalise Google’s output into a coherent brand. Its failing is that it’s too brand-specific to be applied beyond Google’s product range. We can learn a lot from the design wisdom in MD, but implementing it wholesale — which is MDL’s great strength — makes little sense most of the time.

Ben Moss

Ben Moss is Senior Editor at WebdesignerDepot. He’s designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. One of these days he’ll run a sub-4hr marathon. Say hi on Twitter.

Read Next

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …