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>
    <title>MDL basic html scaffold</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link href='' rel='stylesheet'>
    <link href=',400,500,700' rel='stylesheet'>
    <link href='' rel='stylesheet'>
    <link href='css/main.css' rel='stylesheet'>
    <div class='mdl-layout mdl-js-layout'>
      <main class='mdl-layout__content'>
        <p>Main content (not header, not footer)</p>
    <div id='scripts'>
      <script src=''></script>

Install with Bower

bower install material-design-lite --save

Meetup flyer example

Live coding time! #yolo

Thank You!