Material Design Lite Tutorial
Material Design Lite Resources
Selected Reading
- MDL - Tooltips
- MDL - Textfields
- MDL - DataTable
- MDL - Switches
- MDL - Icons
- MDL - Radio Buttons
- MDL - Checkboxes
- MDL - Sliders
- MDL - Menus
- MDL - Spinners
- MDL - Progress Bars
- MDL - Cards
- MDL - Buttons
- MDL - Badges
- MDL - Footers
- MDL - Tabs
- MDL - Grids
- MDL - Layouts
- MDL - Environment Setup
- MDL - Overview
- MDL - Home
Material Design Lite Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
MDL - Environment Setup
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 Depvery Network (CDN).
Local Installation
Follow these steps for the installation of MDL −
Go to 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 −
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "material.min.css">
<script src = "material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">Features</a>
<a class = "mdl-navigation__pnk" href = "">About Us</a>
<a class = "mdl-navigation__pnk" href = "">Log Out</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span class = "page-content" style = "padding-left:100px;">Hello World!</span>
</main>
</span>
</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 Depvery Network (CDN). storage.googleapis.com provides content for the latest version.
We are using storage.googleapis.com CDN version of the pbrary throughout this tutorial.
Example
Now, let us rewrite the above example using material.css and material.js from the Google CDN.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk 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>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">Features</a>
<a class = "mdl-navigation__pnk" href = "">About Us</a>
<a class = "mdl-navigation__pnk" href = "">Log Out</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span class = "page-content" style = "padding-left:100px;">Hello World!</span>
</main>
</span>
</body>
</html>
The above program will generate the following result −
Advertisements