be31ad9f21
- Maximum of 3 columns in "web" layout, with 360px fixed width columns, 40px gutters and excess padding left and right. - 2 columns in "tablet" layout, with variable size columns and 24px gutters. - 1 columns in "phone" layout, with 16px gutters.
174 lines
5.8 KiB
HTML
174 lines
5.8 KiB
HTML
<!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>Style Guide</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 -->
|
|
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
|
|
|
<link rel="stylesheet" href="styleguide/styleguide.css">
|
|
</head>
|
|
<body>
|
|
|
|
<button class="nav-button">Show navigation</button>
|
|
|
|
<div class="sidenav sidenav-static">
|
|
<h1 class="logo">WSK <strong>Style Guide</strong></h1>
|
|
<nav class="sidenav-nav">
|
|
<ul>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="sidenav-modal-bg"></div>
|
|
|
|
<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>Cards</h1>
|
|
<iframe src="./styleguide/card/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>
|
|
|
|
<div class="styleguide-demo">
|
|
<h1>Icons</h1>
|
|
<iframe src="./styleguide/icons/demo.html" scrolling="no"></iframe>
|
|
</div>
|
|
|
|
<div class="styleguide-demo">
|
|
<h1>Header panel</h1>
|
|
<iframe src="./styleguide/header-panel/demo.html" scrolling="no"></iframe>
|
|
</div>
|
|
|
|
<div class="styleguide-demo">
|
|
<h1>Column Layout</h1>
|
|
<iframe src="./styleguide/column-layout/demo.html"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="styleguide/navigation/sidenav.js" async defer></script>
|
|
|
|
<!-- Script to handle sizing the iFrames -->
|
|
<script>
|
|
'use strict';
|
|
var sideNavList = document.querySelector('.sidenav-nav > ul');
|
|
var totalDemosPendingLoading = 0;
|
|
sizeDemos();
|
|
|
|
function sizeDemos() {
|
|
var demos = document.querySelectorAll('.styleguide-demo');
|
|
totalDemosPendingLoading = demos.length;
|
|
for(var i = 0; i < demos.length; i++) {
|
|
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
|
|
sizeDemo(demos[i]);
|
|
}
|
|
}
|
|
|
|
function sizeDemo(rootDemoElement) {
|
|
var iframe = rootDemoElement.querySelector('iframe');
|
|
iframe.onload = function(){
|
|
var contentHeight = iframe.contentDocument.documentElement.scrollHeight;
|
|
iframe.style.height = contentHeight+'px';
|
|
iframe.classList.add('heightSet');
|
|
totalDemosPendingLoading--;
|
|
if(totalDemosPendingLoading <= 0) {
|
|
document.body.classList.add('demosLoaded');
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|