Material Design Lite - Quick Guide

Material Design Lite - Overview

What is Material Design Lite?

Material Design Lite (MDL is a UI component library created with CSS, JavaScript, and HTML. The MDL UI components help in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.

Following are the salient features of Material Design Lite −

  • In-built responsive designing.

  • Standard CSS with minimal footprint.

  • Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.

  • Includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and so on.

  • Can be used with or without any library or development environment.

  • Cross-browser, and can be used to create reusable web components.

Responsive Design

  • Material Design Lite has in-built responsive designing so that the website created using Material Design Lite will redesign itself as per the device size.

  • Material Design Lite classes are created in such a way that the website can fit any screen size.

  • The websites created using Material Design Lite are fully compatible with PC, tablets, and mobile devices.

Standard CSS

  • Material Design Lite uses standard CSS only and it is very easy to learn.

  • There is no dependency on any external JavaScript library such as jQuery.

  • ExtensibleMaterial Design Lite is by design very minimal and flat.

  • It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.

  • It supports shadows and bold colors.

  • The colors and shades remain uniform across various platforms and devices.

And most important of all, MDL is absolutely free to use.

Material Design Lite - Environment Setup

There are two ways to use Material Design Lite −

  • Local Installation − You can download the material.{primary}-{accent}.min.css and material.min.js files on your local machine and include it in your HTML code.

  • CDN Based Version − You can include the material.{primary}-{accent}.min.css and material.min.js files into your HTML code directly from the Content Delivery Network (CDN).

Local Installation

Follow these steps for the installation of MDL −

  • Go to https://www.getmdl.io/started/index.html to download the latest version available.

  • Then, put the downloaded material.min.js file in a directory of your website, e.g. /js and material.min.css in /css.

Example

Now you can include the css and js file in your HTML file as follows −

Live Demo 
<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

The above program will generate the following result −

CDN Based Version

You can include the js and css files into your HTML code directly from the Content Delivery Network (CDN). storage.googleapis.com provides content for the latest version.

We are using storage.googleapis.com CDN version of the library throughout this tutorial.

Example

Now, let us rewrite the above example using material.css and material.js from the Google CDN.

Live Demo 
<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

The above program will generate the following result −

Material Design Lite - Layouts

In this chapter, we will discuss the different layouts in Material Design Lite. HTML5 has the following container elements −

  • <div> − Provides a generic container to HTML content.

  • <header> − Represents the header section.

  • <footer> − Represents the footer section.

  • <article> − Represents articles.

  • <section> − Provides a generic container for various types of sections.

MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the containers. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-layout

Identifies a container as an MDL component. Required on outer container element.
2

mdl-js-layout

Adds basic MDL behavior to layout. Required on outer container element.
3

mdl-layout__header

Identifies container as an MDL component. Required on header element.
4

mdl-layout-icon

Used to add an application icon. Gets overridden by menu icon if both are visible. Optional icon element.
5

mdl-layout__header-row

Identifies container as MDL header row. Required on header content container.
6

mdl-layout__title

Identifies layout title text. Required on layout title container.
7

mdl-layout-spacer

Used to align elements inside a header or drawer. It grows to fill remaining space. Commonly used for aligning elements to the right. Optional on div following layout title.
8

mdl-navigation

Identifies container as MDL navigation group. Required on nav element.
9

mdl-navigation__link

Identifies anchor as MDL navigation link. Required on header and/or drawer anchor elements.
10

mdl-layout__drawer

Identifies container as MDL layout drawer. Required on drawer container element.
11

mdl-layout__content

Identifies container as MDL layout content. Required on main element.
12

mdl-layout__header--scroll

Makes the header scroll with the content. Optional on header element.
13

mdl-layout--fixed-drawer

Makes the drawer always visible and open in larger screens. Optional on outer container element and not on drawer container element.
14

mdl-layout--fixed-header

Makes the header always visible, even in small screens. Optional on outer container element.
15

mdl-layout--large-screen-only

Hides an element on smaller screens. Optional on any descendant of mdl-layout.
16

mdl-layout--small-screen-only

Hides an element on larger screens. Optional on any descendant of mdl-layout.
17

mdl-layout__header--waterfall

Allows a "waterfall" effect with multiple header lines. Optional on header element.
18

mdl-layout__header--transparent

Makes header transparent and draws on top of layout background. Optional on header element.
19

mdl-layout__header--seamed

Uses a header without a shadow. Optional on header element.
20

mdl-layout__tab-bar

Identifies container as an MDL tab bar. Required on container element inside header (tabbed layout).
21

mdl-layout__tab

Identifies anchor as MDL tab link. Required on tab bar anchor elements.
22

is-active

Identifies tab as default active tab. Optional on tab bar anchor element and associated tab section element.
23

mdl-layout__tab-panel

Identifies container as tab content panel. Required on tab section elements.
24

mdl-layout--fixed-tabs

Uses fixed tabs instead of the default scrollable tabs. Optional on outer container element , not container inside header.

The following examples show the use of mdl-layout class to style various containers.

Fixed Drawer

To create a template with fixed drawer but no header, the following MDL classes are used.

  • mdl-layout − Identifies a div as an MDL component.

  • mdl-js-layout − Adds basic MDL behavior to outer div.

  • mdl-layout--fixed-drawer − Makes the drawer always visible and open in larger screens.

  • mdl-layout__drawer − Identifies div as MDL layout drawer.

  • mdl-layout-title − Identifies layout title text.

  • mdl-navigation − Identifies div as MDL navigation group.

  • mdl-navigation__link − Identifies anchor as MDL navigation link.

  • mdl-layout__content − Identifies div as MDL layout content.

mdl_fixeddrawer.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
      
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Result

Verify the result.

Fixed Header

To create a template with fixed header following additional MDL class is used.

  • mdl-layout--fixed-header − Makes the header always visible, even in small screens.

mdl_fixedheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- Always shows a header, even in smaller screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
      
         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Result

Verify the result.

Fixed Header and Drawer

To create a template with fixed header and a fixed drawer, following additional MDL classes are used.

  • mdl-layout--fixed-drawer − Makes the drawer always visible and open in larger screens.

  • mdl-layout--fixed-header − Makes the header always visible, even in small screens.

mdl_fixedheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Result

Verify the result.

Scrolling Header

To create a template with scrolling header, the following MDL classes are used.

  • mdl-layout--header--scroll − Makes the header scroll with the content.

mdl_scrollingheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!--  Uses a header that scrolls with the text, rather than 
         staying locked at the top -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--scroll">      
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

Result

Verify the result.

Contracting Header

To create a template with a header that contracts as the page scrolls down, the following MDL class is used.

  • mdl-layout__header--waterfall − Allows a "waterfall" effect with multiple header lines.

mdl_waterfallheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--waterfall">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
            </div>
            
            <!-- Bottom row, not visible on scroll -->
            <div class = "mdl-layout__header-row">
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

Result

Verify the result.

Fixed Header with Scrollable Tabs

To create a template with a header having scrollable tabs, the following MDL classes are used.

  • mdl-layout__tab-bar − Identifies container as an MDL tab bar.

  • mdl-layout__tab − Identifies anchor as an MDL tab link.

  • mdl-layout__tab-panel − Identifies container as a tab content panel.

mdl_scrollabletabheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

Result

Verify the result.

Fixed Header with Fixed Tabs

To create a template with a header having fixed tabs, the following additional MDL class is used.

  • mdl-layout--fixed-tabs − Uses fixed tabs instead of the default scrollable tabs.

mdl_fixedtabheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Grids

The Material Design Lite (MDL) grid is a component for laying out content for varying screen sizes. The MDL grid is defined and enclosed by a container/div element. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size has predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined, with following exceptions:

  • If a grid cell is not fit for the row in one of the screen sizes, it flows into the following line.

  • If a grid cell has a specified column size equal to or larger than the number of columns for the screen size, it takes up the entire row.

MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the grid. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-layout

Identifies a container as an MDL component. Required on outer container element.
2

mdl-grid

Identifies a container as an MDL grid component. Required on "outer" div element.
3

mdl-cell

Identifies a container as an MDL cell. Required on "inner" div elements.
4

mdl-grid--no-spacing

Updates the grid cells to have no margin between them. Optional for grid container.
5

mdl-cell--N-col

This helps put the column size for the cell to N, N is 1-12 inclusive, defaults to 4; optional for "inner" div elements.
6

mdl-cell--N-col-desktop

This helps put the column size for the cell to N in desktop mode only, N is 1-12 inclusive; optional for "inner" div elements.
7

mdl-cell--N-col-tablet

This helps put the column size for the cell to N in tablet mode only, N is 1-8 inclusive; optional for "inner" div elements.
8

mdl-cell--N-col-phone

This helps put the column size for the cell to N in phone mode only, N is 1-4 inclusive; optional for "inner" div elements.
9

mdl-cell--hide-desktop

Hides the cell when in desktop mode. Optional for "inner" div elements.
10

mdl-cell--hide-tablet

Hides the cell when in tablet mode. Optional for "inner" div elements.
11

mdl-cell--hide-phone

Hides the cell when in phone mode. Optional for "inner" div elements.
12

mdl-cell--stretch

Stretches the cell vertically to fill the parent, default; optional for "inner" div elements.
13

mdl-cell--top

Aligns the cell to the top of the parent. Optional for "inner" div elements.
14

mdl-cell--middle

Aligns the cell to the middle of the parent. Optional for "inner" div elements.
15

mdl-cell--bottom

Aligns the cell to the bottom of the parent. Optional for "inner" div elements.

Example

The following example will help you understand the use of the mdl-grid class to layout contents on various screens.

The MDL classes given below will be used in this example.

  • mdl-layout − Identifies a div as an MDL component.

  • mdl-js-layout − Adds basic MDL behavior to outer div.

  • mdl-layout--fixed-header − Makes the header always visible, even in small screens.

  • mdl-layout__header-row − Identifies container as MDL header row.

  • mdl-layout__drawer − Identifies div as MDL layout drawer.

  • mdl-layout-title − Identifies layout title text.

  • mdl-navigation − Identifies div as MDL navigation group.

  • mdl-navigation__link − Identifies anchor as MDL navigation link.

  • mdl-layout__content − Identifies div as MDL layout content.

  • mdl-grid − Identifies div as an MDL grid component.

  • mdl-cell − Identifies div as MDL cell.

  • mdl-cell--1-col − Sets the column size for the cell to that of 1 cell out of 12 cells in desktop screen size.

  • mdl-cell--2-col − Sets the column size for the cell to that of 2 cell out of 12 cells in desktop screen size.

  • mdl-cell--4-col − Sets the column size for the cell to that of 4 cell out of 12 cells in desktop screen size.

  • mdl-cell--6-col − Sets the column size for the cell to that of 6 cell out of 12 cells in desktop screen size.

  • mdl-cell--4-col-phone − Sets the column size for the cell to that of 4 cell out of 4 cells in phone screen size.

  • mdl-cell--6-col-tablet − Sets the column size for the cell to that of 6 cell out of 8 cells in tablet screen size.

  • mdl-cell--8-col-tablet − Sets the column size for the cell to that of 8 cell out of 8 cells in tablet screen size.

mdl_grid.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>  
            </nav>
         </div>
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Tabs

The Material Design Lite (MDL) tab component is a user interface component which helps to show multiple screens in a single space in an exclusive manner.

MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the tabs. The following table mentions the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-layout

Identifies a container as an MDL component. Required on outer container element.
2

mdl-tabs

Identifies a tabs container as an MDL component. Required on "outer" div element.
3

mdl-js-tabs

Sets basic MDL behavior to tabs container. Required on "outer" div element.
4

mdl-js-ripple-effect

Adds ripple click effect to tab links. Optional; goes on "outer" div element.
5

mdl-tabs__tab-bar

Identifies a container as an MDL tabs link bar. Required on first "inner" div element.
6

mdl-tabs__tab

Identifies an anchor (link) as an MDL tab activator. Required on all links in first "inner" div element.
7

is-active

Identifies a tab as the default display tab. Required on one (and only one) of the "inner" div (tab) elements.
8

mdl-tabs__panel

Identifies a container as tab content. Required on each of the "inner" div (tab) elements.

Example

The following example will help you understand the use of the mdl-tab class to layout contents on various tabs.

The MDL classes given below will be used in this example −

  • mdl-layout − Identifies a div as an MDL component.

  • mdl-js-layout − Adds basic MDL behavior to outer div.

  • mdl-layout--fixed-header − Makes the header always visible, even in small screens.

  • mdl-layout__header-row − Identifies container as MDL header row.

  • mdl-layout-title − Identifies layout title text.

  • mdl-layout__content − Identifies div as MDL layout content.

  • mdl-tabs − Identifies a tabs container as an MDL component.

  • mdl-js-tabs − Sets basic MDL behavior to tabs container.

  • mdl-tabs__tab-bar − Identifies a container as an MDL tabs link bar.

  • mdl-tabs__tab − Identifies an anchor (link) as an MDL tab activator.

  • is-active − Identifies a tab as the default display tab.

  • mdl-tabs__panel − Identifies a container as tab content.

mdl_tabs.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>  
   </body>
</html>

Result

Verify the result.

Material Design Lite - Footers

An MDL footer component comes in two primary forms: mega-footer and mini-footer. mega-footer contains more complex content than mini-footer. A mega-footer can represent multiple sections of content which are separated by horizontal rules, whereas a mini-footer presents a single section of content. The footers typically contain both informational and clickable content, such as links.

MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the mega-footer and mini-footer. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-mega-footer

Identifies container as an MDL mega-footer component. Required for footer element.
2

mdl-mega-footer__top-section

Identifies container as a footer top section. Required for top section "outer" div element.
3

mdl-mega-footer__left-section

Identifies container as a left section. Required for left section "inner" div element.
4

mdl-mega-footer__social-btn

Identifies a decorative square within mega-footer. Required for button element (if used).
5

mdl-mega-footer__right-section

Identifies container as a right section. Required for right section "inner" div element.
6

mdl-mega-footer__middle-section

Identifies container as a footer middle section. Required for middle section "outer" div element.
7

mdl-mega-footer__drop-down-section

Identifies container as a drop-down (vertical) content area. Required for drop-down "inner" div elements.
8

mdl-mega-footer__heading

Identifies a heading as a mega-footer heading. Required for h1 element inside drop-down section.
9

mdl-mega-footer__link-list

Identifies an unordered list as a drop-down (vertical) list. Required for ul element inside drop-down section.
10

mdl-mega-footer__bottom-section

Identifies container as a footer bottom section. Required for bottom section "outer" div element.
11

mdl-logo

Identifies a container as a styled section heading. Required for "inner" div element in mega-footer bottom-section or mini-footer left-section.
12

mdl-mini-footer

Identifies container as an MDL mini-footer component. Required for footer element.
13

mdl-mini-footer__left-section

Identifies container as a left section. Required for left section "inner" div element.
14

mdl-mini-footer__link-list

Identifies an unordered list as an inline (horizontal) list. Required for ul element sibling to "mdl-logo" div element.
15

mdl-mini-footer__right-section

Identifies container as a right section. Required for right section "inner" div element.
16

mdl-mini-footer__social-btn

Identifies a decorative square within mini-footer. Required for button element (if used).

Now, let us see a few examples to understand the use of MDL footer classes to style footers.

Mega Footer

Let us discuss the use of the mdl-mega-footer class to layout contents in a footer. The following MDL classes will be used in this example.

  • mdl-layout − Identifies a div as an MDL component.

  • mdl-js-layout − Adds basic MDL behavior to outer div.

  • mdl-layout--fixed-header − Makes the header always visible, even in small screens.

  • mdl-layout__header-row − Identifies container as MDL header row.

  • mdl-layout-title − Identifies layout title text.

  • mdl-layout__content − Identifies div as MDL layout content.

  • mdl-mega-footer − Identifies container as an MDL mega-footer component.

  • mdl-mega-footer__top-section − Identifies container as a footer top section.

  • mdl-mega-footer__left-section − Identifies container as a left section.

  • mdl-mega-footer__social-btn − Identifies a decorative square within mini-footer.

  • mdl-mega-footer__right-section − Identifies container as a right section.

  • mdl-mega-footer__middle-section − Identifies container as a footer middle section.

  • mdl-mega-footer__drop-down-section − Identifies container as a drop-down (vertical) content area.

  • mdl-mega-footer__heading − Identifies a heading as a mega-footer heading.

  • mdl-mega-footer__link-list − Identifies an unordered list as an inline (horizontal) list.

  • mdl-mega-footer__bottom-section − Identifies container as a footer bottom section.

  • mdl-logo − Identifies a container as a styled section heading.

mdl_megafooter.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Result

Verify the result.

Mini Footer

The following example will help you understand the use of the mdl-mini-footer class to layout contents in a footer.

The MDL classes given below will be used in this example.

  • mdl-layout − Identifies a div as an MDL component.

  • mdl-js-layout − Adds basic MDL behavior to outer div.

  • mdl-layout--fixed-header − Makes the header always visible, even in small screens.

  • mdl-layout__header-row − Identifies container as MDL header row.

  • mdl-layout-title − Identifies layout title text.

  • mdl-layout__content − Identifies div as MDL layout content.

  • mdl-mini-footer − Identifies container as an MDL mini-footer component.

  • mdl-mini-footer__left-section − Identifies container as a left section.

  • mdl-logo - Identifies a container as a styled section heading.

  • mdl-mini-footer__link-list − Identifies an unordered list as an inline (horizontal) list.

  • mdl-mini-footer__right-section − Identifies container as a right section.

mdl_minifooter.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>
               
               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Result

Verify the result.

Material Design Lite - Badges

An MDL badge component is an onscreen notification which can be a number or an icon. It is generally used to emphasize the number of items.

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements to the badges. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-badge

Identifies element as an MDL badge component. Required for span or link element.
2

mdl-badge--no-background

Applies open-circle effect to badge and is optional.
3

mdl-badge--overlap

Makes the badge overlap with its container and is optional.
4

data-badge="value"

Assigns a string value to badge used as attribute; required on span or link.

Example

The following example will help you understand the use of the mdl-badge class to add notifications to span and link elements.

The MDL classes given below will be used in this example.

  • mdl-badge − Identifies element as an MDL badge component.

  • data-badge − Assigns a string value to badge. Icons can be assigned to it using HTML symbols.

mdl_badges.htm

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

Result

Verify the result.

Material Design Lite - Buttons

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements to the buttons. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-button

Sets button as an MDL component, required.
2

mdl-js-button

Adds basic MDL behavior to button, required.
3

(none)

Sets flat display effect to button, default.
4

mdl-button--raised

Sets raised display effect; this is mutually exclusive with fab, mini-fab, and icon.
5

mdl-button--fab

Sets fab (circular) display effect; this is mutually exclusive with raised, mini-fab, and icon.
6

mdl-button--mini-fab

Sets mini-fab (small fab circular) display effect; this is mutually exclusive with raised, fab, and icon.
7

mdl-button--icon

Sets icon (small plain circular) display effect; this is mutually exclusive with raised, fab, and mini-fab.
8

mdl-button--colored

Sets colored display effect where the colors are defined in material.min.css.
9

mdl-button--primary

Sets primary color display effect where the colors are defined in material.min.css.
10

mdl-button--accent

Sets accent color display effect where the colors are defined in material.min.css.
11

mdl-js-ripple-effect

Sets ripple click effect, can be used in combination with any other class.

Example

The following example will help you understand the use of the mdl-button classes to show the different types of buttons.

mdl_buttons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table border = "0">
         <tbody>
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Colored fab (circular) display effect</td>
               <td>Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Plain fab (circular) display effect</td>
               <td>Plain fab (circular) with ripple display effect</td>
               <td>Plain fab (circular) and disabled</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Raised button</td>
               <td>Raised button with ripple display effect</td>
               <td>Raised button and disabled</td>
            </tr>
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Colored Raised button</td>
               <td>Accent-colored Raised button</td>
               <td>Accent-colored raised button with ripple effect</td>
            </tr>				
            
            <tr>
               <td><button class = "mdl-button mdl-js-button">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Flat button</td>
               <td>Flat button with ripple effect</td>
               <td>Disabled flat button</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--primary">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Primary Flat button</td>
               <td>Accent-colored Flat button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Icon button</td>
               <td>Colored Icon button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Mini Colored fab (circular) display effect</td>
               <td>Mini Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>			
         </tbody>
      </table>
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Cards

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of cards. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-card

Identifies div element as an MDL card container, required on "outer" div.
2

mdl-card--border

Puts a border to the card section that it is applied to and is used on the "inner" divs.
3

mdl-shadow--2dp through mdl-shadow--16dp

Sets variable shadow depths (2, 3, 4, 6, 8, or 16) to card and is optional, goes on "outer" div; if omitted, no shadow is shown.
4

mdl-card__title

Identifies div as a card title container and is required on "inner" title div.
5

mdl-card__title-text

Puts appropriate text characteristics to card title and is required on head tag (H1 - H6) inside title div.
6

mdl-card__subtitle-text

Puts text characteristics to a card subtitle and is optional. It should be a child of the title element.
7

mdl-card__media

Identifies div as a card media container and is required on "inner" media div.
8

mdl-card__supporting-text

Identifies div as a card body text container and assigns appropriate text characteristics to body text and is required on "inner" body text div; text goes directly inside the div with no intervening containers.
9

mdl-card__actions

Identifies div as a card actions container and assigns appropriate text characteristics to actions text and is required on "inner" actions div; content goes directly inside the div with no intervening containers.

Example

The following example will help you understand the use of the mdl-tooltip classes to show different types of tooltips.

mdl_cards.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
   
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family = Material+Icons"> 
      <style>
         .wide-card.mdl-card {
            width: 512px;
         }
      
         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url('html5-mini-logo.jpg') center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }
      
         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
               
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         
            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>
            
            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Progress Bars

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of progress bars. The following table mentions the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-js-progress

Sets basic MDL behavior to progress indicator and is a required class.
2

mdl-progress__indeterminate

Sets animation to progress indicator and is an optional class.

Example

The following example will help you understand the use of the mdl-js-progress classes to show the different types of progress bars.

mdl_progressbars.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Progress bar</h4>
      <div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
      <h4>Indeterminate Progress bar</h4>
      <div id = "progressbar2" 
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
      <h4>Buffering Progress bar</h4>
      <div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
      
      <script language = "javascript">
         document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(44);
         });
         document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(87);
         });
      </script>
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Spinners

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of spinners. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-spinner

Identifies a container as MDL spinner component and is a required class.
2

mdl-js-spinner

Sets basic MDL behavior to spinner and is a required class.
3

is-active

Shows and animates the spinner and is optional.
4

mdl-spinner--single-color

Uses a single color instead of changing colors and is optional.

Example

The following example will help you understand the use of the mdl-spinner classes and the different types of spinners.

mdl_spinners.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Spinner</h4>
      <div class = "mdl-spinner mdl-js-spinner is-active"></div>
      <h4>Single Color Spinner</h4>
      <div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
   </body>
</html>

Result

Verify the result.

Material Design Lite - Menus

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display different types of menu. The following table lists down the available classes and their effects

Sr.No. Class Name & Description
1

mdl-button

Identifies button as an MDL component and is required on button element.
2

mdl-js-button

Sets basic MDL behavior to button and is required on button element.
3

mdl-button--icon

Sets icon to button and is required on button element.
4

material-icons

Identifies span as a material icon and is required on an inline element.
5

mdl-menu

Identifies an unordered list container as an MDL component and is required on ul element.
6

mdl-js-menu

Sets basic MDL behavior to menu and is required on ul element.
7

mdl-menu__item

Identifies buttons as MDL menu options and sets basic MDL behavior, required on list item elements.
8

mdl-js-ripple-effect

Sets ripple click effect to option links and is optional; required on unordered list element.
9

mdl-menu--top-left

Sets the menu position above button, aligns left edge of menu with button and is optional; required on unordered list element.
10

(none)

By default, menu is positioned below button, aligns to the left edge with button.
11

mdl-menu--top-right

Menu is positioned above button, aligns to the right edge with button, optional and goes on unordered list element.
12

mdl-menu--bottom-right

menu is positioned below button, aligns to the right edge with button, optional and goes on unordered list element.

Example

The following example will help you understand the use of the mdl-spinner classes to show the different types of spinners.

mdl_menu.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <style>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">    
                     <button id = "demo_menu-lower-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-lower-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>     
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">    
                     <button id = "demo_menu-top-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>         
               </div>
            </td>
            
            <td>     
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-top-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

Result

Verify the result.

Material Design Lite - Sliders

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of menu. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-slider

Identifies input element as an MDL component and is required.
2

mdl-js-slider

Sets basic MDL behavior to input element and is required.

Example

The following example will help you understand the use of the mdl-slider classes to show the different types of sliders.

mdl_sliders.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <div id = "message" >25</div>
   </body>
</html>

Result

Verify the result.

Material Design Lite - Checkboxes

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of checkboxes. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-checkbox

Identifies label as an MDL component and is required on label element.
2

mdl-js-checkbox

Sets basic MDL behavior to label and is required on label element.
3

mdl-checkbox__input

Sets basic MDL behavior to checkbox and is required on input element (checkbox).
4

mdl-checkbox__label

Sets basic MDL behavior to caption and is required on span element (caption).
5

mdl-js-ripple-effect

Sets ripple click effect and is optional; goes on the label element and not on the input element (checkbox).

Example

The following example will help you understand the use of the mdl-slider classes to show the different types of check boxes.

mdl_checkboxes.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Radio Buttons

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of radio buttons. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-radio

Identifies label as an MDL component and is required on label element.
2

mdl-js-radio

Sets basic MDL behavior to label and is required on label element.
3

mdl-radio__button

Sets basic MDL behavior to radio and is required on input element (radio button).
4

mdl-radio__label

Sets basic MDL behavior to caption and is required on span element (caption).
5

mdl-js-ripple-effect

Sets ripple click effect and is optional; goes on the label element and not on the input element (radio button).

Example

The following example will help you understand the use of the mdl-slider classes to show the different types of radio buttons.

mdl_radio.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td> 
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender" 
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" 
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender" 
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender" 
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>      
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Icons

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of checkboxes as icons. The following tables lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-icon-toggle

Identifies label as an MDL component and is required on label element.
2

mdl-js-icon-toggle

Sets basic MDL behavior to label and is required on label element.
3

mdl-icon-toggle__input

Sets basic MDL behavior to icon-toggle and is required on input element (icon-toggle).
4

mdl-icon-toggle__label

Sets basic MDL behavior to caption and is required on on i element (icon).
5

mdl-js-ripple-effect

Sets ripple click effect and is optional; goes on the label element and not on the input element (icon-toggle).

Example

The following example showcases the use of mdl-icon-toggle classes to show different types of checkboxes as icons.

mdl_icons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Switches

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of checkboxes as switches. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-switch

Identifies label as an MDL component and is required on label element.
2

mdl-js-switch

Sets basic MDL behavior to label and is required on label element.
3

mdl-switch__input

Sets basic MDL behavior to switch and is required on input element (switch).
4

mdl-switch__label

Sets basic MDL behavior to caption and is required on input element (caption).
5

mdl-js-ripple-effect

Sets ripple click effect and is optional; goes on the label element and not on the input element (switch).

Example

The following example will help you understand the use of the mdl-switch classes and the different types of checkboxes as switch.

mdl_switches.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td> 
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1" 
                     class = "mdl-switch__input" checked>
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input">           
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>   
   </body>
</html>

Result

Verify the result.

Material Design Lite - DataTable

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display a table as data-table. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-data-table

Identifies table as an MDL component and is required on table element.
2

mdl-js-data-table

Sets basic MDL behavior to table and is required on table element.
3

mdl-data-table--selectable

Sets all/individual selectable behavior (checkboxes) and is optional; goes on table element.
4

mdl-data-table__cell--non-numeric

Sets text formatting to data cell and is optional; goes on both table header and table data cells.
5

(none)

By default, sets the numeric formatting to header or data cell.

Example

The following example will help you understand the use of the mdl-data-table classes to show a data-table.

mdl_data_tables.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
         <thead>
            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
               <th>Class</th><th>Grade</th></tr>
         </thead>
         
         <tbody>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
               <td>VI</td><td>A</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
               <td>VI</td><td>B</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
               <td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Textfields

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of text inputs. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-textfield

Identifies container as an MDL component and is required on "outer" div element.
2

mdl-js-textfield

Sets basic MDL behavior to input and is required on "outer" div element.
3

mdl-textfield__input

Identifies element as textfield input and is required on input or textarea element.
4

mdl-textfield__label

Identifies element as textfield label and is required on label element for input or textarea elements.
5

mdl-textfield--floating-label

Applies floating label effect and is optional; goes on "outer" div element.
6

mdl-textfield__error

Identifies span as an MDL error message and is optional; goes on span element for MDL input element with pattern.
7

mdl-textfield--expandable

Identifies a div as an MDL expandable text field container; used for expandable input fields, and is required on "outer" div element.
8

mdl-button

Identifies label as an MDL icon button; used for expandable input fields, and is required on "outer" div's label element.
9

mdl-js-button

Sets basic behavior to icon container; used for expandable input fields, and is required on "outer" div's label element.
10

mdl-button--icon

Identifies label as an MDL icon container; used for expandable input fields, and is required on "outer" div's label element.
11

mdl-input__expandable-holder

Identifies a container as an MDL component; used for expandable input fields, and is required on "inner" div element.
12

is-invalid

Identifies the textfield as invalid on initial load and is optional on mdl-textfield element.

Example

The following example will help you understand the use of the mdl-textfield classes to show the different types of textfields.

mdl_textfields.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

Result

Verify the result.

Material Design Lite - Tooltips

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of tooltips. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-tooltip

Identifies container as an MDL tooltip and is required on tooltip container element.
2

mdl-tooltip--large

Sets large-font effect and is optional; goes on tooltip container element.

Example

The following example will help you understand the use of the mdl-tooltip classes to show the different types of tooltips.

mdl_tooltips.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip1" class = "icon material-icons">add</div>
               <div class = "mdl-tooltip" for = "tooltip1">Follow</div>
            </td>
            
            <td>
               <div id = "tooltip2" class = "icon material-icons">print</div>
               <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
            </td>
         </tr>
         
         <tr>
            <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
               <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
            </td>
            
            <td>
               <div id = "tooltip4" class = "icon material-icons">share</div>
               <div class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</div>
            </td>
         </tr>   	  
      </table>   
   </body>
</html>

Result

Verify the result.

Advertisements