MDL – Environment Setup


Material Design Lite – Environment Setup

”;


Previous

Next

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

Follow these steps for the installation of MDL −

  • Go to https://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 −

Live Demo 
<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>

The above program will generate the following result −