Google Brings Material Design To Websites; Launches Material Design Lite For Web Designers


Google Material Design by Nitya tripathi

Google has been putting a lot of focus and efforts in promoting their Material Design concept. Be it apps, maps or anything; the tech giant is trying to leave no stone unturned in making Material Design ubiquitous across devices and platforms. Remember how Google materialized Google I/O 2015?

Today, taking it to the next level, Google launched Material Design Lite – a lightweight Material Design framework that brings Material Design guidelines to the web using HTML, CSS and JavaScript.

Google said “MDL is framework agnostic, and can be used with just about any front-end solution a web designer or developer might want to use. Gzipped, MDL’s code is under 27kb.”

On their launching blog, Google said that MDL is a complementary implementation of thePaper elements built with Polymer.

The Material Design Lite uses Paper elements, which allows a developer to take pieces of Material Design to use if the entire code isn’t complementary to their needs. You could, for instance, plug a MDL graph into an existing website without using other Material Design components.

If you are looking forward to use MDL, there are buttons, text-fields, tooltips and spinners available to use for your website, and of course, Google has taken care of mobile friendliness of your MDL enabled site with the availability of responsive grids and breakpoints that follow Material Design and adaptive UI guidelines. Modern web browsers like Chrome, Firefox, Opera, Microsoft Edge and Safari are best compatible for MDL.

Google also said that MDL makes it easy to add a Material Design look and feel to your website and since MDL has fewer dependencies, it becomes very easy for web designers to install and use it.

The MDL sources are written in Sass using BEM. While Google prefers you to use their pre-built CSS or theme customizer, they are also offering the Material Design Lite source code on GitHub to help you build your own version. Google also recommends to use MDL by referencing from their CDN.

Questions regarding MDL? Don’t Google it, approach their GitHub or StackOverflow forum!

If you have any question or query regarding MDL or any of its components, Google has already made available a rich set of FAQs. Moreover, you can connect with peers onGitHub or Stackoverflow to get answer to your MDL questions!

(Source and image via: getmdl.io)