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>

Output:


This material design lite tutorial provides you the basics on the following areas android material design , google material design , material ui , google design , amg lite , bootstrap material design , mdl , materialize css , cool material , material design list , material design website , material design cards , material design ui , material design web , material design apps , material design tutorial , angular material design , material design table , material design angular , material design examples , material design theme , material design animation , material design css , what is material design , material design framework , material design buttons , material design template , material design components , google material design colors , material design google , material design light

Related Searches to Material Design Lite Environmental Setup