How to use material design lite for making websites

The Web Giant GOOGLE came up with Material Design Lite on its Android 5.0 update in the year 2014 as known to most of us as “Lollipop”

GOOGLE is basically pushing hard to incorporate this new style into Elements of Chrome browser & various apps. GOOGLE has made it free to be used by developers for designing website.

Though most of the Web browser support MDL but its downgraded from Microsoft Internet Explorer 9 since it doesn’t pass the Cutting-the-mustard test & it doesn’t officially support IE 8.

Always remember that components at minimum require support for Query Selector, ClassList & AddEventListener, which can be polyfilled as needed.

The Basic

To make things simple I would like to state that Material Design Lite helps you in creating Pages and Apps that are laid out in flattened manner, with Clean Lines, a muted but attractive colour palette & a noticeable lack of Clutter.

It’s a very modern, sparse look that works especially well on mobile devices.

You can simply call it “A Library of components for Web Developers”

The Actual Tool

The developers can download it from Getmdl.io

You can get access to on how to use the elements step by step. Additionally I would suggest you to check some of the templates that will give you head start.

The 5 major components included in MDL are:

1. Cards
2. Sliders
3. Column Layouts
4. Navigation tools such as buttons
5. Checkboxes

A point to remember for Web Developer is that “Material Design Lite” isnn’t radiant on any Javascript frameworks and is intended to be a completely cross-platform solution. These is because the components are created using CSS, Javascripts & HTML. In my opinion GOOGLE achieved modern Web Design Principle like Browser portability, Device Independence & Graceful degradation.

Some Developers do think that if MDL is intended for Cross-Platform than what CSS naming conventions does MDL use..?

The answer to this simple question goes back to its origin. MDL was written using BEM which stands for Block Element Modifier. It is a method used to construct CSS Class-names so they are consisted, isolated & expressive. I would highly suggest you to go through a good resources like CSSWizardry to learn more about BEM.

Don’t try to mix up the concepts of MDL with CSS Implementations because there is a huge community that does a great job by offering their own take on how Material Design should be implemented for CSS Libraries. Though MDL was developed in collaboration with the material design & Chrome UX teams and it undergoes regular reviews for Spec compliance.

Let’s get straight to the point about “How-to”. And to begin with I would say that you need to be passionate & confident about finding your way around HTML code.

And a point of caution that though it’s easy to use for Web Developer but that doesn’t mean it’s for Amateur. Especially if you have some free WordPress blog you will encounter a road block. Though customization of CSS is only available to Premium member at a cost of $99 a year. So if everything is clear in your mind than the first thing you need to do is Download the kit from the Material Design Lite websiste that I have mentioned earlier. Than include the material Lite CSS & Java script file in each HTML page on your Website so that it knows what you’re referencing.

Try to use either of 2 options mentioned below, remember that each has it’s own merit.

1. Where you use the files that are stored on Google’s own server.
2. Download them & host them on your local server.

The merit of the first one is that you will receive any improvements to the code automatically as GOOGLE updates them.

The merit of the second is that you won’t get any surprises when something changes drastically elsewhere.

Once this is done, you will be able to use the various components across your site.

Step 2: The Colour

Before you dig a little deeper understand that MDL works with 2 main colours:

1. The Primary
2. Accent

Don’t worry, you can easily use the Customise & Preview tool. Once you choose the colour of your choice & are happy with the section. Click the line of code that contains the colour references. This is something you need to do because once you click the code into the CSS & later on whenever you use a component from Material Design it will know the correct palette to use.

Step 3: The MDL components

Finally you can start to build in the real feel of material design. In order to achieve this select the components option on the top menu which contains all of the various elements you can use to Display Data or navigate the site. Some people think this process is similarly to copy the code into the CSS on your Web site. But to be frank in my opinion it’s a little bit more complicated since you need to determine the uses for each component & the resources it uses.

But fortunately we should thank “GOOGLE”. I am telling you to do this because the Web giant has provided detailed Step-By-Step instructions for each component.

I would suggest you to get along your way with the different elements as it will take some time to make yourself familiar but frankly with so much of the code at ready for you to use & with clean instructions, it won’t be long before your site looks like a fully fledged modern creation. Don’t forget to try the Template section that via which you can experiment on layouts that have been designed to get the most out of GOOGLE’s new design.

Summary

GOOGLE primary objective is to make website look a lot like an Android app. It 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. The Search giant wanted to create something that can be used by people new to developer like Blogger. It has added templates that can be used right away including buttons, text fields so that you don’t have to use Photoshop as it works with all modern browser. Microsoft recent ability to develop cross platform apps is gaining popularity and momentum. This sudden rise of Microsoft in the app world makes the GOOGLE dominance a growing challenge. MDL & Signboard are some of the initiative by GOOGLE to counter the competition. MDL is equally loved and hated among developers and only time will tell how far GOOGLE is able to achieve its objective.