MDL – Environment Setup

admin

9 years ago

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

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

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">
            Home
            About    
			Settings 
			Logout
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content amp-wp-inline-c2222b19ef9127401feacb580e65faf2"><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-