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>

Try it ยป

If you will run the above example it will produce the output like this-

MDL - Environment Setup  Example


Advertisements

Add Comment

๐Ÿ“– Read More