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" >
2014-10-01 04:29:40 -07:00
< title > Style Guide< / title >
2014-09-03 03:33:16 -07:00
<!-- 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
2014-10-02 07:43:47 -07:00
< button class = "nav-button" > Show navigation< / button >
2014-10-01 06:10:12 -07:00
2014-10-02 07:43:47 -07:00
< div class = "sidenav sidenav-static" >
2014-10-01 07:09:36 -07:00
< h1 class = "logo" > WSK < strong > Style Guide< / strong > < / h1 >
2014-10-01 06:10:12 -07:00
< nav class = "sidenav-nav" >
< ul >
< / ul >
< / nav >
< / div >
< div class = "sidenav-modal-bg" > < / div >
2014-10-02 07:43:47 -07:00
< div class = "content-container sidenav-static-content" >
< div class = "styleguide-demo" >
< h1 > Typography< / h1 >
< iframe src = "./styleguide/typography/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > List< / h1 >
< iframe src = "./styleguide/list/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Palette< / h1 >
< iframe src = "./styleguide/palette/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Shadows< / h1 >
< iframe src = "./styleguide/shadow/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Button< / h1 >
< iframe src = "./styleguide/button/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Floating Action Button< / h1 >
< iframe src = "./styleguide/fab/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Text Field< / h1 >
< iframe src = "./styleguide/textfield/demo.html" scrolling = "no" > < / iframe >
< / div >
< 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 >
< div class = "styleguide-demo" >
< h1 > Slider< / h1 >
< iframe src = "./styleguide/slider/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Navigation< / h1 >
< iframe src = "./styleguide/navigation/demo.html" scrolling = "no" > < / iframe >
< / div >
2014-09-05 06:50:02 -07:00
< / div >
2014-09-05 06:33:36 -07:00
2014-10-02 07:43:47 -07:00
< script src = "styleguide/navigation/sidenav.js" async defer > < / script >
2014-09-05 02:16:39 -07:00
2014-10-02 09:33:58 -07:00
< div class = "styleguide-demo" >
< h1 > Icons< / h1 >
< iframe src = "./styleguide/icons/demo.html" scrolling = "no" > < / iframe >
< / 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-10-01 06:10:12 -07:00
var sideNavList = document.querySelector('.sidenav-nav > ul');
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 + + ) {
2014-10-01 06:10:12 -07:00
var demoTitle = demos[i].querySelector('h1').innerText;
var anchorLink = 'demo-'+i;
// Add list item
var navAnchor = document.createElement('a');
navAnchor.href = '#'+anchorLink;
navAnchor.appendChild(document.createTextNode(demoTitle));
var listItem = document.createElement('li');
listItem.appendChild(navAnchor);
sideNavList.appendChild(listItem);
var anchor = document.createElement('a');
anchor.id = anchorLink;
demos[i].insertBefore(anchor,demos[i].querySelector('h1'));
// Size iframe
2014-09-05 06:50:02 -07:00
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 >
