Material Design Lite Styles : Material Design lite(MDL) implementation of material design for web platform. Here in this tutorial we are going to explain the basic design Lite Styles such as – button, badges and checkboxes etc.

Material Design Lite Styles : Typography

Material Design lite typography is same as HTML5. Here is default example of Material design lite fonts –

Method 1 : Use CDN Hosted Fonts

Include font css as below –

Method 1 : Use CDN Hosted Fonts

If you want to install the font library locally just download and include the file.

If you want to use cdn based fonts use as below –

Heading 1 
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

MDL – Environment Setup – To use material design lite we can install it on our local machine or we can include the hosted cdn based setup. We are going to explain how you can install material design lite using the either method ie. local installation or cdn based.

MDL – Environment Setup

We can use two ways to use the material design lite on local machine –

Local installation

Download the required files from – Download Material Design Lite

Unzip this And add include the below files in your page as –

Use CDN

If you do not want to install the material design lite on local system you can use cdn version directly as –

Example :

      

         Tutorialplane.com
         
      
      

         

  Click me

      

If you will run the above example it will produce the output like this-

Material Design Lite – Material Design is design language developed by Google. Material Design was released on June 25, 2014, at the 2014 Google I/O conference.

Material Design Lite Tutorial

Material Design Lite provides rich grid-based layouts, responsive animations, transitions,depth effects such as lighting and shadows which makes the most powerful design framework. Google states that the new design language “Material Design” is based on paper and ink which is technologically advanced and open to imagination and magic.

This tutorial is designed for the professionals to help them in learning the basic concept of material design. In this tutorial we will cover the basic and powerful features which can help the professionals to create fast, beautiful and advanced applications using the latest Technology Material Design Lite.

      

         Tutorialplane.com
         
      
      

         
Learn More!