MDL – Quick Guide


Table of Contents

Material Design Lite – Quick Guide

”;


Previous

Next

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 −