How to Use Material Design Lite??
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
- Go to http://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 −
<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>
It will produce 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 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">Hello World!</div>
</main>
</div>
</body>
</html>
It will produce the following result −
No comments:
Post a Comment