Material Design Lite Environmental Setup
What is Environmental Setup in (MDL) ?
- 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:
- Then, put the downloaded material.min.js file in a directory of your website, e.g. /js and material.min.cssin /css.
Sample code:
- 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">
<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;">Wikitechy!</div>
</main>
</div>
</body>
</html>
Output:
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.
Sample Code:
- Rewriting the above example using material.css and material.js from Google CDN.
<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">Wikitechy!</div>
</main>
</div>
</body>
</html>