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-11-28 09:41:16 -08:00
< div class = "Layout Layout--fixedDrawer" >
< div class = "Layout-drawer" >
< span class = "Layout-title" > WSK < strong > Style Guide< / strong > < / span >
< nav class = "Layout-navigation" >
< ul >
< / ul >
< / nav >
< / div >
< div class = "Layout-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 > Cards< / h1 >
< iframe src = "./styleguide/card/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Animation< / h1 >
< iframe src = "./styleguide/animation/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 > Dropdown Menu< / h1 >
< iframe src = "./styleguide/dropdown-menu/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Item< / h1 >
< iframe src = "./styleguide/item/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 > Layout< / h1 >
< iframe src = "./styleguide/layout/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Icons< / h1 >
< p > See the material-design-icons pack that can be installed in your node_modules directory
after running < code > npm install< / code > < / p >
< / div >
< div class = "styleguide-demo" >
< h1 > Tooltip< / h1 >
< iframe src = "./styleguide/tooltip/demo.html" scrolling = "no" > < / iframe >
< / div >
< div class = "styleguide-demo" >
< h1 > Column Layout< / h1 >
< iframe src = "./styleguide/column-layout/demo.html" > < / iframe >
< / div >
2014-10-13 02:19:35 -07:00
< / div >
2014-10-02 09:33:58 -07:00
< / div >
2014-11-12 08:45:04 -08:00
2014-11-25 04:04:34 -08:00
<!-- build:js ../../scripts/main.min.js -->
2014-11-28 09:41:16 -08:00
< script src = "styleguide/layout/layout.js" async defer > < / script >
2014-11-12 08:45:04 -08:00
<!-- endbuild -->
2014-10-06 04:20:34 -07:00
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-11-28 09:41:16 -08:00
var navList = document.querySelector('.Layout-navigation > 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;
2014-11-25 03:21:29 -08:00
for (var i = 0; i < demos.length ; i + + ) {
2014-10-16 10:07:39 -07:00
var demoTitle = demos[i].querySelector('h1').textContent;
2014-11-25 03:21:29 -08:00
var anchorLink = 'demo-' + i;
2014-10-01 06:10:12 -07:00
// Add list item
var navAnchor = document.createElement('a');
2014-11-25 03:21:29 -08:00
navAnchor.href = '#' + anchorLink;
2014-10-01 06:10:12 -07:00
navAnchor.appendChild(document.createTextNode(demoTitle));
var listItem = document.createElement('li');
listItem.appendChild(navAnchor);
2014-11-28 09:41:16 -08:00
navList.appendChild(listItem);
2014-10-01 06:10:12 -07:00
var anchor = document.createElement('a');
anchor.id = anchorLink;
2014-11-25 03:21:29 -08:00
demos[i].insertBefore(anchor , demos[i].querySelector('h1'));
2014-10-01 06:10:12 -07:00
// 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-11-25 03:21:29 -08:00
if (iframe === null) {
totalDemosPendingLoading--;
return;
}
iframe.onload = function() {
2014-09-03 06:40:56 -07:00
var contentHeight = iframe.contentDocument.documentElement.scrollHeight;
2014-11-25 03:21:29 -08:00
iframe.style.height = contentHeight + 'px';
2014-09-03 06:40:56 -07:00
iframe.classList.add('heightSet');
2014-09-05 06:50:02 -07:00
totalDemosPendingLoading--;
2014-11-25 03:21:29 -08:00
if (totalDemosPendingLoading < = 0) {
2014-09-05 06:50:02 -07:00
document.body.classList.add('demosLoaded');
}
2014-09-03 06:40:56 -07:00
};
}
< / script >
2014-09-03 03:33:16 -07:00
< / body >
< / html >