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:


Best and top web technologies resources

best and top web technologies resources
Around the web there is lots of useful information about UI Design, Front-end news and trends, but sometimes it’s too hard to find and read all of them. It’s a mess and you will go crazy!
Therefore, I have put together the best sources about news and trends in the web technologies world.

The Morning Brew
Treehouse Blog
net Magazine
Web Platform
HTML5 Doctor
HTML5 Doctor

How to keep up to date on Front-End Technologies

new web tools, trends and workflows
The web is a rapidly evolving universe. An important part of our job as UI designer & front-end developers is keeping up to date and staying close to new tools, trends and workflows.

Hundreds of blogs and articles are there, but there is no way you can reach all of them. I think you should have a strategy to keep up to date, so I have created this recipe.

Follow these simple steps

  1. Follow cool people
  2. Find the best sources
  3. Attend conferences
  4. Get your own sources

Follow cool people

Tech leaders help you to stay on top of relevant news and trends. They are in-the-know and they work on a specific topic.
Twitter can be a great place to find people who are in-the-know.
I am listing some of best folks from the industry. some of them are from companies like (Google, Twitter, Facebook & Yahoo).