2014-09-03 03:33:16 -07:00
<!doctype html>
< html lang = "" >
< 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" >
< title > Web Starter Kit< / title >
<!-- Add to homescreen for Chrome on Android -->
< meta name = "mobile-web-app-capable" content = "yes" >
< link rel = "icon" sizes = "192x192" href = "images/touch/chrome-touch-icon-192x192.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 = "Web Starter Kit" >
< link rel = "apple-touch-icon-precomposed" href = "apple-touch-icon-precomposed.png" >
<!-- 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" >
<!-- 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 -->
2014-09-03 06:40:56 -07:00
< link href = '//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel = 'stylesheet' type = 'text/css' >
2014-09-03 07:34:54 -07:00
2014-09-03 03:33:16 -07:00
< link rel = "stylesheet" href = "styleguide/styleguide.css" >
< / head >
< body >
2014-09-17 10:51:33 -07:00
< header class = "styleguide-masthead" >
< div class = "styleguide-container" >
< h1 class = "styleguide-title" > Material Style Guide< / h1 >
< / div >
< / header >
2014-09-03 09:37:42 -07:00
2014-09-05 06:50:02 -07:00
< div class = "styleguide-demo" >
2014-09-17 10:51:33 -07:00
< h1 > Typography< / h1 >
< iframe src = "./styleguide/typography/demo.html" scrolling = "no" > < / iframe >
2014-09-05 06:50:02 -07:00
< / div >
2014-09-03 07:34:54 -07:00
2014-09-05 06:50:02 -07:00
< div class = "styleguide-demo" >
< h1 > Palette< / h1 >
< iframe src = "./styleguide/palette/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-03 06:40:56 -07:00
2014-09-17 10:51:33 -07:00
< div class = "styleguide-demo" >
< h1 > Shadows< / h1 >
< iframe src = "./styleguide/shadow/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-05 06:50:02 -07:00
< div class = "styleguide-demo" >
< h1 > Button< / h1 >
< iframe src = "./styleguide/button/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-05 06:33:36 -07:00
2014-09-05 06:50:02 -07:00
< div class = "styleguide-demo" >
< h1 > Floating Action Button< / h1 >
< iframe src = "./styleguide/fab/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-05 06:33:36 -07:00
2014-09-05 06:50:02 -07:00
< div class = "styleguide-demo" >
< h1 > Text Field< / h1 >
< iframe src = "./styleguide/textfield/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-05 06:33:36 -07:00
2014-09-17 10:51:33 -07:00
< div class = "styleguide-demo" >
< h1 > Radio Buttons< / h1 >
< iframe src = "./styleguide/radio/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Checkbox< / h1 >
< iframe src = "./styleguide/checkbox/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-17 16:23:19 -07:00
< div class = "styleguide-demo" >
< h1 > Slider< / h1 >
< iframe src = "./styleguide/slider/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-05 06:50:02 -07:00
< div class = "styleguide-demo" >
< h1 > Side Nav< / h1 >
< div class = "demo-wrapper" >
< iframe class = "sidenavDemo" src = "./styleguide/sidenav/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-05 06:33:36 -07:00
< / div >
2014-09-05 02:16:39 -07:00
2014-09-17 10:51:33 -07:00
< div class = "styleguide-demo" >
< h1 > Toolbar< / h1 >
< div class = "demo-wrapper" >
< iframe class = "sidenavDemo" src = "./styleguide/toolbar/demo.html" scrolling = "no" > < / iframe >
< / div >
< / div >
2014-09-03 09:37:42 -07:00
<!-- Script to handle sizing the iFrames -->
2014-09-03 06:40:56 -07:00
< script >
2014-09-05 06:50:02 -07:00
'use strict';
2014-09-03 06:40:56 -07:00
2014-09-05 06:50:02 -07:00
var totalDemosPendingLoading = 0;
sizeDemos();
2014-09-03 06:40:56 -07:00
2014-09-05 06:50:02 -07:00
function sizeDemos() {
var demos = document.querySelectorAll('.styleguide-demo');
totalDemosPendingLoading = demos.length;
for(var i = 0; i < demos.length ; i + + ) {
sizeDemo(demos[i]);
2014-09-03 06:40:56 -07:00
}
}
2014-09-05 06:50:02 -07:00
function sizeDemo(rootDemoElement) {
var iframe = rootDemoElement.querySelector('iframe');
2014-09-03 06:40:56 -07:00
iframe.onload = function(){
var contentHeight = iframe.contentDocument.documentElement.scrollHeight;
iframe.style.height = contentHeight+'px';
iframe.classList.add('heightSet');
2014-09-05 06:50:02 -07:00
totalDemosPendingLoading--;
if(totalDemosPendingLoading < = 0) {
document.body.classList.add('demosLoaded');
}
2014-09-03 06:40:56 -07:00
};
}
< / script >
2014-09-03 03:33:16 -07:00
< / body >
< / html >
