Material Design Lite – Lists : Material Design Lite (MDL) list is used to display multiple items line wise vertically. Material design provides the inbuilt classes to create beautiful list. Here in this tutorial we are going to explain how you can create list. We will explain it with example and demo. You can use our online editor to run and edit the code.

Material Design Lite – Lists

Let us first create simple list as below-

Basic List

Add the class mdl-list to the <ul> and mdl-list__item to the <li>. This will create a simple list in material design lite.

  
Item 1 
  
Item 2
  
Item 3
  
Item 4
  
Item 5

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

Basic List With Primary Content

Add the class mdl-list to the <ul> and mdl-list__item-primary-content to the <span>.

  

  
   person
    User 1
     
  

   person
  User 2
  
  
  

   person
   User 3
  
  

   person
   User 4
  
  

   person
   User 5
  

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

Material Design Lite – List Classes

Following classes are available in material design lite lists. You can use these classes to create beautiful classes.

• .mdl-list(required) – This is used to define list as an MDL component.
• .mdl-list__item(required)– This is used to define the List Items
• .mdl-list__item–two-line(optional) – This is used to define the List’s Items as Two Line.
• .mdl-list__item–three-line(optional)- This is used to define the List’s Items as a Three Line Optional Three.
• .mdl-list__item-primary-content(optional) – This is used to define the primary content sub-division –
• .mdl-list__item-avatar(optional) – This is used to define the avatar sub-division –
• .mdl-list__item-icon(optional)– This is used to define the icon sub-division –
• .mdl-list__item-secondary-content(optional)-This is used to define the secondary content sub-division requires
• .mdl-list__item-two-line or .mdl-list__item-three-line(optional)
• .mdl-list__item-secondary-info(optional)– This is used to define the information sub-division
  .mdl-list__item-two-line or .mdl-list__item-three-line.
• .mdl-list__item-secondary-action(optional)– This is used to define the Action sub-division. .mdl-list__item-two-line or .mdl-list__item-three-line.
• .mdl-list__item-text-body – This is used to define the Text Body sub-division needs .mdl-list__item-three-line class.

List With Avatars & Actions

You can create list with avatars & actions as below –

  

  
   person
    User 1
    
   star
   
  

   person
  User 2
  
  star
  
  

   person
   User 3
   star
  
  

   person
   User 4
   star
  
  

   person
   User 5
   star
  

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

Material Design Lite – Cards : Material Design Lite(MDL) Cards are basically self-contained pieces of paper with data such as images, texts, links etc about a single subject. Cards are basically new feature in user interface which provides more complex & Detailed information. Material design lite provides predefined classes to create the beautiful & interactive Cards. Here in this tutorial we are going to explain how you can create cards in material design lite. We will explain the functionality with example and demo.

How to Create Material Design Lite – Cards ?

Let us create first card –

Material Design Lite – Wide Card

We have created a wide card in material design as below. We have added custom css to customize the width of the Card.

  

    
Tutorialsplane.com
  
  

    Learn Material Design....
  
  

    
      Learn More
    
  
                            

In the above example we have created simple card in material design. If you run the above example it will produce output something like this –

Material Design Lite – Square Card

You can create a square card by adding your custom css as below-

  

    
Tutorialsplane.com
  
  

    Learn Material Design....
  
  

    
      Learn More
    
  
                            

In the above example we have created simple square card. If you run the above example it will produce output something like this –

Material Design Lite – Image Card

You can create a image card by following the steps as below-

  

  

    Picture.jpg
  
                            

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

Material Design Lite Card Classes

Here are the classes availble for material design lite cards –

• mdl-card – This is used to define div element as an MDL card container.
• mdl-card–border-This is used to Add border to the card section.
• mdl-shadow–2dp(optional)– This is used to define the shadow with variable depth 2dp.
• mdl-card__title – This defines div as a card title container.
• mdl-card__title-textThis is used to Assign the appropriate text characteristics to card title.
• mdl-card__subtitle-text-This is used to Assign the appropriate text characteristics to card subtitle.
• mdl-card__media– This is used to defines div as a card media container
• mdl-card__supporting-text– This defines div as a card body text container which supports the text.
• mdl-card__actions – This defines div as a card actions container.

Coming.. soon.

Material Design Lite – Badges : Material design lite(MDL) provides beautiful badges to display notification. It is basically circle which contains the number or icon. It is also considered as small status descriptor for ui elements. It becomes important when you want to draw user’s attention to display some important message. The most common example can be display the new message notification on the screen. Material design lite provides various pre defined classes which can be used to add beautiful styles, look and feel. Here in this tutorial we are going to explain how you can create badges in material design lite. We Will explain this with example and online demo.

Material Design Lite – Badges Example

Let us create a simple badge in material design –

Badges With Number

Here is an example of badge with number in material design lite –

account_box

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

Badges With Icon

Here is an example of badge with icon in material design lite –

account_box

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

Material Design Lite Badges Options

• mdl-badge(Required)– This Defines the badge as an MDL component.
• mdl-badge–no-background(optional)– Used to Apply open-circle effect on badge.
• mdl-badge–overlap(optional) Used to Make the badge overlap with its container.
• data-badge=”value”– Used to Assign string value to badge.

Badge Icons (On Texts)

If you want to add the badge icons on text or links you can add simply as below –

Inbox

Likes

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

Material Design Lite – Tabs : Material Design lite(MDL) Tab is basically used to create a user interface which contains the multiple views in the same space. All The views are displayed in the same space exclusively. Material Design lite provides predefined classes to create beautiful tabs. Here in this tutorial we are going to explain how you can create tabs in material design lite and customize them. We will go step by step to explain each examples with example and demo.

Material Design Lite – Tabs Example

Here is an example of tab. First we have added width class “mdl-tabs mdl-js-tabs” main div which contains the tab elements and class “mdl-js-ripple-effect” is added to add the ripple effect.

Tabs have two parts – header & panel. Header contains the header elements. Header elements are added using the class “mdl-tabs__tab” and class “is-active” is used to represent the default tab selected. The header element’s href contains the id of panel which you want to display on button click.

Panel class “mdl-tabs__panel” is used to create the panel content you can add the class “is-active” to show the default tab panel.

   

            

               Example Tab 1
               Example Tab 2
               Example Tab 3
			   Example Tab 4
            
            

               
This is Example Tab 1
            
            

               
This is Example Tab 2
            
            

               
This is Example Tab 3
            
			

               
This is Example Tab 4
            
         

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

Material Design Lite – Tabs Classes

Here are the inbuilt classes for material design lite tabs-

• mdl-layout : This class is used to define the div container as MDL Component.
• md-tabs : This class is used to define the tab container.
• mdl-js-tabs : This class is used to add MDL Behaviour in tabs.
• mdl-tabs__tab-bar: This class is used to create the tab header which contains the links.
• mdl-js-ripple-effect: This class is used to add the ripple effect in the tab headings
• mdl-tabs__tab: This identifies the link as MDL tab link.
• mdl-tabs__panel: This class is used to create contains for tab content.
• is-active: This class is used to represent the active tab.

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!