Material Design

The styleguide

Material Design Lite

The library implementation
Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers

Not included (as of now)

  • Guidelines on depth and paper overlap
  • Animation standards

Better suited for:

  • Content display sites (Not applications)
  • Modern browsers
Get Gist of this code 
<!doctype html>
<html>
  <head>
    <title>MDL basic html scaffold</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link href='https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
    <link href='css/main.css' rel='stylesheet'>
  </head>
  <body>
    <div class='mdl-layout mdl-js-layout'>
      <main class='mdl-layout__content'>
        <p>Main content (not header, not footer)</p>
      </main>
    </div>
    <div id='scripts'>
      <script src='https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js'></script>
    </div>
  </body>
</html>

Install with Bower

bower install material-design-lite --save

Meetup flyer example

Live coding time! #yolo

Thank You!

slides: mcdlr.com/mdl