Post
Ask Question

Design Responsive Websites Using Google Material Design Lite

Introduction

 
Now I am telling about responsive web design tutorial using google Material design lite just like a Bootstrap... TO design your web site look and feel
for desktop, tablet and mobile
About Us:-
 
In this MDL file included CSS, javascript, for all grids, buttons, form,Label, table, tooltip, header, footer, menu, icons all LIbrary files included and enhanced in MDL file you Just add the class file In Your Design
 
Add References Page Top: 
 
  1. <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js">  
  2.    
  3. <link href="mdl/material.css" rel="stylesheet" />  
  4. <script src="mdl/material.js"></script>  
  5. <link href="mdl/material.min.css" rel="stylesheet" />  
  6. <script src="mdl/material.min.js"></script> 
Grid:-
 
Source Code:- 
  1. <div class="mdl-grid">  
  2.    <div class="mdl-cell mdl-cell--2-col-phone mdl-cell--4-col-tablet mdl-cell--2-col-desktop"> 50% phone </br> 50% tablet </br> 16.6% desktop </div>  
  3.    <div class="mdl-cell mdl-cell--2-col-phone mdl-cell--4-col-tablet mdl-cell--2-col-desktop"> 50% phone </br> 50% tablet </br> 16.6% desktop </div>  
  4.    <div class="mdl-cell mdl-cell--2-col-phone mdl-cell--8-col-tablet mdl-cell--2-col-desktop"> 50% phone </br> 100% tablet </br> 16.6% desktop </div>  
  5.    <div class="mdl-cell mdl-cell--2-col-phone mdl-cell--5-col-tablet mdl-cell--2-col-desktop"> 50% phone </br> 62.5% tablet </br> 16.6% desktop </div>  
  6.    <div class="mdl-cell mdl-cell--2-col-phone mdl-cell--3-col-tablet mdl-cell--2-col-desktop"> 50% phone </br> 37.5% tablet </br> 16.6% desktop </div>  
  7.    <div class="mdl-cell mdl-cell--2-col-phone mdl-cell--8-col-tablet mdl-cell--2-col-desktop"> 50% phone </br> 100% tablet </br> 16.6% desktop </div>  
  8. </div> 
 Tab:-
 
  1. <div class="mdl-tabs mdl-js-tabs">  
  2. <div class="mdl-tabs__tab-bar"> <a href="#tab1" class="mdl-tabs__tab">Tab One</a> <a href="#tab2" class="mdl-tabs__tab">Tab Two</a> <a href="#tab3" class="mdl-tabs__tab">Tab Three</a> </div>  
  3. <div class="mdl-tabs__panel is-active" id="tab1">  
  4.    <p>First tab's content.</p>  
  5. </div>  
  6. <div class="mdl-tabs__panel" id="tab2">  
  7.    <p>Second tab's content.</p>  
  8. </div>  
  9. <div class="mdl-tabs__panel" id="tab3">  
  10.    <p>Third tab's content.</p>  
  11. </div> 
Table:-

  1. <table class="mdl-data-table mdl-js-data-table">  
  2.    <thead>  
  3.       <tr>  
  4.          <th class="mdl-data-table__cell--non-numeric">Text</th>  
  5.          <th class="mdl-data-table__cell--non-numeric">Text</th>  
  6.          <th>Numbers</th>  
  7.          <th class="mdl-data-table__cell--non-numeric">Text</th>  
  8.       </tr>  
  9.    </thead>  
  10.    <tbody>  
  11.       <tr>  
  12.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  13.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  14.          <td>40</td>  
  15.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  16.       </tr>  
  17.       <tr>  
  18.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  19.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  20.          <td>122</td>  
  21.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  22.       </tr>  
  23.       <tr>  
  24.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  25.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  26.          <td>144</td>  
  27.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  28.       </tr>  
  29.    </tbody>  
  30. </table>  
  31. <h4>Table design with checkbox</h4>  
  32. <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">  
  33.    <thead>  
  34.       <tr>  
  35.          <th class="mdl-data-table__cell--non-numeric">Text</th>  
  36.          <th>Number</th>  
  37.          <th>Number</th>  
  38.       </tr>  
  39.    </thead>  
  40.    <tbody>  
  41.       <tr>  
  42.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  43.          <td>255</td>  
  44.          <td>190</td>  
  45.       </tr>  
  46.       <tr>  
  47.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  48.          <td>50</td>  
  49.          <td>125</td>  
  50.       </tr>  
  51.       <tr>  
  52.          <td class="mdl-data-table__cell--non-numeric">Table cell</td>  
  53.          <td>13</td>  
  54.          <td>196</td>  
  55.       </tr>  
  56.    </tbody>  
  57. </table> 
Form
 
 
  1. <form>  
  2.    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label "> <label for="input_text" class="mdl-textfield__label">First name</label> <input type="text" class="mdl-textfield__input" id="input_text" /> </div>  
  3.    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <label for="input_email" class="mdl-textfield__label">Email</label> <input type="email" class="mdl-textfield__input" id="input_email" /> </div>  
  4.    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <label for="input_password" class="mdl-textfield__label">Password with verification</label> <input type="password" pattern="[0-9]*" class="mdl-textfield__input" id="input_password" /> <span class="mdl-textfield__error">Digits only</span> </div>  
  5.    <label for="checkbox-1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked /> <span class="mdl-checkbox__label">Checkbox</span> </label> <label for="option-1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect"> <input type="radio" class="mdl-radio__button" id="option-1" name="options" value="1" checked/> <span class="mdl-radio__label">Option 1</span> </label> <label for="option-2" class="mdl-radio mdl-js-radio mdl-js-ripple-effect"> <input type="radio" class="mdl-radio__button" id="option-2" name="options" value="2" /> <span class="mdl-radio__label">Option 2</span> </label>   
  6. </form> 
References:
http://www.getmdl.io/index.html
https://www.google.com/design/spec/components/chips.html#chips-contact-chips 


Similar Articles