Material Design Lite: A New Framework to Create Material Design Websites

Aug 11, 2015
material-design-lite

Image Courtesy: Google.com
Google launched Material Design back in the year 2014, with the ultimate goal of providing guidelines for designing and creating beautiful UI across different device form factors.  In a bid to make things simpler, Google recently launched Material Design Lite.  It’s a library of front-end components that makes it easy to apply Material Design elements to standard old HTML, JavaScript, and CSS. It’s a lightweight implementation of the Material Design with very few dependencies and is easy to install.  Now we understand where the word “Lite” comes from.

According to Google’s blog post “It is framework-agnostic, meaning MDL can be used with any of the rapidly changing landscape of front-end tool chains. MDL has a low overhead in terms of code size (~27KB gzipped), and a narrow focus — enabling material design styling for websites.”

You can use the components to develop web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL adhere to web design principles like browser portability, device independence, and graceful degradation. Google is offering the Material Design Lite source code on GitHub to help you build your own version.

Material Design Lite Components

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

material-design-lite-components

Image Courtesy: Google.com
Templates

MDL can effectively optimize for websites which are relatively heavy on content, such as marketing pages, text articles and blogs. These responsive templates show the diverse range of sites that can be created using MDL and can be downloaded from Templates page.

Currently, there are templates for

BLOG

blog-template-material-design-lite

Image Courtesy: Google.com
ANDROID.COM MDL SKIN

android.com-mld-skin

Image Courtesy: Google.com
DASHBOARD

material-design-lite-dashboard

Image Courtesy: Google.com
TEXT-HEAVY WEBPAGE

material-design-lite-text-heavy-webpage

Image Courtesy: Google.com
STAND-ALONE ARTICLE

material-design-lite-stand-alone-article

Image Courtesy: Google.com
Customization

MDL styles are structured with Sass and the BEM methodology. It is easy to customize styles in different ways, even before you download framework package. A simple way is with the color wheel on the customize page. The color wheel lets you select color accents depending on the primary color selection. The customizer will generate the stylesheet, which can be downloaded, or linked directly from Google CDN.

material-design-lite-customization

Image Courtesy: Google.com
Browsers

Components in MDL are built with frontline web techniques, such as calc(), Flexbox, querySelector, and classList. However, MDL will work in modern browsers: Chrome, Firefox, Opera, and Microsoft Edge. MDL will degrade gracefully in older browsers, such as IE9, by serving the CSS version only.

Should You Use Material Design Lite?

MDL is built on the core technologies of the web that you love and use on a daily basis such as CSS, HTML and JS. By using MDL into your projects, you also get access to a dominant and highly curated implementation of material design for the web.

Google’s Material design is not just about making website look nice. There are several advantages of building a site that uses the tech giant’s vision of how websites should look like. Material Design Lite offers a familiar look and lets users navigate the website easily.

While Google is not forcing this method of building websites, Google wants to ensure that its search results shows fast, clean and neat websites. And controlling the use of a framework seems to be the way forward. Where MDL differs, is that it is not merely a framework, rather a framework that tilts heavily towards specific design approach.

Finally

Material Design Lite seems to be a great way forward, and now you can create your own Material Design website with a matter of ease. But this approach may seem out of-context when implemented in a website which has nothing to do with Google.

However, Google provides full control over the source code, allowing us to customize. So now it probably depends on how much we can customize Google’s work, and whether we can design a better option.

Written by Albert Smith

Albert Smith

Albert Smith is Digital Marketing Manager at Hidden Brains . An experienced search engine specialist, content, social media marketer and a technical enthusiast, Albert frequently writes on diverse topics such as social media marketing trends, web & mobile app development best practices. He has worked with some of leading brands to build their online presence and scale their businesses.