MDL – Environment Setup
MDL – Environment Setup – To use material design lite we can install it on our local machine or we can include the hosted cdn based setup. We are going to explain how you can install material design lite using the either method ie. local installation or cdn based.
MDL – Environment Setup
We can use two ways to use the material design lite on local machine –
Local installation
Download the required files from – Download Material Design Lite
Unzip this And add include the below files in your page as –
Material Design Local installation : Example
<link rel="stylesheet" href="./material.min.css"> <script src="./material.min.js"></script> |
Use CDN
If you do not want to install the material design lite on local system you can use cdn version directly as –
MDL – Environment Setup : Use CDN Version
<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">
|
Note : In this tutorial we will use hosted cdn version of material design lite css and javascript file.
Example :
MDL – Environment Setup : Example
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Tutorialplane.com</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Settings</a>
<a class="mdl-navigation__link" href="">Logout</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;"><p><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Click me
</button></p></div>
</main>
</div>
|
If you will run the above example it will produce the output like this-
Advertisements
