| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> |
| <title>Material Design Lite</title> |
| |
| <!-- Add to homescreen --> |
| <link rel="manifest" href="manifest.json"> |
| |
| <!-- Fallback to homescreen for Chrome <39 on Android --> |
| <meta name="mobile-web-app-capable" content="yes"> |
| <meta name="application-name" content="Material Design Lite"> |
| <link rel="icon" sizes="192x192" href="./assets/android-desktop.png"> |
| |
| <!-- Add to homescreen for Safari on iOS --> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
| <meta name="apple-mobile-web-app-title" content="Material Design Lite"> |
| <link rel="apple-touch-icon" href="./assets/ios-desktop.png"> |
| |
| <!-- TODO: Tile icon for Win8 (144x144 + tile color) --> |
| <!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> --> |
| <!-- <meta name="msapplication-TileColor" content="#3372DF"> --> |
| |
| <meta name="theme-color" content="#263238"> |
| |
| <link rel="shortcut icon" href="./assets/favicon.png"> |
| <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones --> |
| <!-- |
| <link rel="canonical" href="http://www.example.com/"> |
| --> |
| |
| <!-- Page styles --> |
| <link rel="stylesheet" href="./assets/prism-default.css"> |
| <link rel="stylesheet" href="./material.min.css"> |
| <link rel="stylesheet" href="./assets/main.css"> |
| |
| <!-- Fonts --> |
| <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'> |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
| </head> |
| <body class="about"> |
| <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> |
| <script> |
| // if (document.location.hostname !== 'localhost' && |
| // document.location.hostname !== '127.0.0.1' && |
| // document.location.hostname.search('.corp.') === -1) { |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| ga('create', 'UA-25993200-9', 'auto'); |
| // If a specific component page is loaded directly we'll attribute the |
| // page view to the specific component's page |
| if (window.location.pathname.indexOf('/components/') !== -1 && |
| window.location.hash.indexOf('-section') !== -1) { |
| ga('send', 'pageview', '/components/' + |
| window.location.hash.split('#')[1].split('/')[0]); |
| } else { |
| ga('send', 'pageview'); |
| } |
| // } |
| |
| // Setup error tracking before anything else runs. |
| window.onerror = function(message, file, lineNumber, columnNumber, error) { |
| try { |
| if (error !== undefined) { |
| message = error.stack; |
| } |
| ga('send', 'event', 'error', file + ':' + lineNumber, String(message)); |
| } catch (e) { |
| // no-op |
| } |
| }; |
| </script> |
| <div class="image-preloader"></div> |
| <div class="docs-layout mdl-layout mdl-js-layout"> |
| <header class="docs-layout-header mdl-layout__header"> |
| <div class="mdl-layout__header-row"> |
| <span class="docs-layout-title mdl-layout-title"><a href="./">Material<br>Design<br>Lite</a></span> |
| </div> |
| <div class="docs-navigation__container"> |
| <nav class="docs-navigation mdl-navigation"> |
| <a href="./index.html" class="mdl-navigation__link about">About</a> |
| <a href="./started/index.html" class="mdl-navigation__link started">Getting Started</a> |
| <a href="./templates/index.html" class="mdl-navigation__link templates">Templates</a> |
| <a href="./components/index.html" class="mdl-navigation__link components">Components</a> |
| <a href="./styles/index.html" class="mdl-navigation__link styles">Styles</a> |
| <a href="./customize/index.html" class="mdl-navigation__link customize">Customize</a> |
| <a href="./showcase/index.html" class="mdl-navigation__link showcase">Showcase</a> |
| <a href="./faq/index.html" class="mdl-navigation__link faq">FAQ</a> |
| <div class="spacer"></div> |
| <a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github"><i class="material-icons">link</i><span>GitHub</span></a> |
| <a href="./started/index.html#download" class="mdl-navigation__link mdl-navigation__link--icon download"> |
| <i class="material-icons"></i><span>Download</span> |
| <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200"> |
| <i class="material-icons"></i> |
| </button> |
| </a> |
| </nav> |
| </div> |
| <i class="material-icons scrollindicator scrollindicator--right"></i> |
| <i class="material-icons scrollindicator scrollindicator--left"></i> |
| </header> |
| <main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600"> |
| <div class="content mdl-grid mdl-grid--no-spacing" id="content"> |
| <div class="subpageheader mdl-cell--12-col"></div> |
| |
| <!-- TODO: Try to separate markup and content --> |
| <section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col"> |
| <dl> |
| <dt>Material Design Lite</dt> |
| <dd> |
| Material Design Lite lets you add a <a href="http://google.com/design/spec">Material Design</a> 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, and offer an experience that is immediately accessible. <a href="started/index.html">Get started now</a>. |
| </dd> |
| </dl> |
| </section> |
| |
| <section class="about-panel about-panel--templates mdl-cell mdl-cell--12-col" data-target="templates/index.html"> |
| Templates |
| </section> |
| |
| <section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col"> |
| <p> |
| The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation. |
| </p> |
| </section> |
| |
| <section class="about-panel about-panel--components mdl-color-text--white mdl-cell mdl-cell--6-col" data-target="components/index.html"> |
| Components |
| </section> |
| <section class="about-panel about-panel--styles mdl-color-text--white mdl-cell mdl-cell--6-col" data-target="styles/index.html"> |
| Styles |
| </section> |
| <section class="about-panel about-panel--customize mdl-color-text--white mdl-cell mdl-cell--12-col" data-target="customize/index.html"> |
| Customize |
| </section> |
| |
| <p><section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col"> |
| <p> |
| The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more. MDL is free to download and use, and may be used with or without any library or development environment (such as <a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a>). It is a cross-browser, cross-OS web developer's toolkit that can be used by anyone who wants to write more productive, portable, and — most importantly — usable web pages. |
| </p> |
| </section></p> |
| <script src="assets/index.js" async></script> |
| |
| |
| </div> |
| <section class="docs-text-styling download mdl-color--grey-800"> |
| <a href="./started/index.html#download" class="mdl-color-text--grey-50">Download Kit</a> |
| </section> |
| <footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900"> |
| <ul> |
| <li class="mdl-mini-footer--social-btn"> |
| <a href="https://twitter.com/googledesign" class="social-btn social-btn__twitter" role="button" title="Twitter"></a> |
| </li> |
| <li class="mdl-mini-footer--social-btn"> |
| <a href="https://github.com/google/material-design-lite" class="social-btn social-btn__github" role="button" title="GitHub"></a> |
| </li> |
| <li class="mdl-mini-footer--social-btn"> |
| <a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a> |
| </li> |
| </ul> |
| <ul class="docs-link-list"> |
| <li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li> |
| <li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li> |
| </ul> |
| </footer> |
| </main> |
| </div> |
| |
| <!-- IE Compatibility shims --> |
| <!--[if lt IE 9]> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script> |
| <![endif]--> |
| |
| <!--[if IE]> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script> |
| <link href="./assets/ie.css" rel="stylesheet"> |
| <![endif]--> |
| <!-- end shims --> |
| |
| |
| <!-- Material Design Lite --> |
| <script src="./material.min.js"></script> |
| <!-- Add Copy-to-CodePen buttons to code blocks --> |
| <script src="./assets/codepen.js"></script> |
| <!-- Enable Prism syntax highlighting --> |
| <script src="./assets/prism.js"></script> |
| <script src="./assets/prism-markup.min.js"></script> |
| <script src="./assets/prism-javascript.min.js"></script> |
| <script src="./assets/prism-css.min.js"></script> |
| <script src="./assets/prism-bash.min.js"></script> |
| <script src="./assets/main.js"></script> |
| <!-- Built with love using Material Design Lite --> |
| </body> |
| </html> |