google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'material-sprint' of https://github.com/google/web-starter-kit into material-sprint 

* 'material-sprint' of https://github.com/google/web-starter-kit:
  Renaming navigation classes as per @csswizardry review
  Cleaning up layout SCSS - Make sure as much as possible is behind optional classes - Rename everything to follow style convention - Add new class for JS binding - Rearrange SCSS to take advantage of nesting with &
master
Matt Gaunt 2014-12-16 14:01:32 +00:00
parent 0dad80b350 c3a8768a29
commit 3c8092f0b0
7 changed files with 568 additions and 591 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/index.html
View File

@ -37,30 +37,26 @@
</head>
<body>
<div class="Layout">
<div class="Layout-header">
<span class="Layout-title">Web <strong>Starter Kit</strong></span>
<div class="Layout-spacer"></div>
<nav class="Layout-navigation">
<ul>
<li><a href="#hello">Hello</a></li>
<li><a href="#get-started">Get Started</a></li>
<li><a href="material-styleguide.html">Style Guide</a></li>
</ul>
<div class="wsk-layout wsk-js-layout">
<div class="wsk-layout__header">
<span class="wsk-layout-title">Web <strong>Starter Kit</strong></span>
<div class="wsk-layout-spacer"></div>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="#hello">Hello</a>
<a class="wsk-navigation__link" href="#get-started">Get Started</a>
<a class="wsk-navigation__link" href="material-styleguide.html">Style Guide</a>
</nav>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web <strong>Starter Kit</strong></span>
<nav class="Layout-navigation">
<ul>
<li><a href="#hello">Hello</a></li>
<li><a href="#get-started">Get Started</a></li>
<li><a href="material-styleguide.html">Style Guide</a></li>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web <strong>Starter Kit</strong></span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="#hello">Hello</a>
<a class="wsk-navigation__link" href="#get-started">Get Started</a>
<a class="wsk-navigation__link" href="material-styleguide.html">Style Guide</a>
</nav>
</div>
<main class="Layout-content">
<main class="wsk-layout__content">
<h2 id="hello">Welcome to Web Starter Kit!</h2>
<p>Good luck with your amazing new project.</p>
@ -72,6 +68,7 @@
<!-- build:js(app/) ../../scripts/main.min.js -->
<script src="scripts/main.js"></script>
<script src="styleguide/layout/layout.js"></script>
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->

20
app/material-styleguide.html
View File

@ -32,17 +32,15 @@
<link rel="stylesheet" href="styleguide/styleguide.css">
</head>
<body>
<div class="Layout Layout--fixedDrawer">
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer">
<div class="Layout-drawer">
<span class="Layout-title">WSK <strong>Style Guide</strong></span>
<nav class="Layout-navigation">
<ul>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">WSK <strong>Style Guide</strong></span>
<nav id="main-navigation" class="wsk-navigation">
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="styleguide-demo">
<h1>Typography</h1>
<iframe src="./styleguide/typography/demo.html" scrolling="no"></iframe>
@ -140,7 +138,7 @@
<!-- Script to handle sizing the iFrames -->
<script>
'use strict';
var navList = document.querySelector('.Layout-navigation > ul');
var navList = document.getElementById('main-navigation');
var totalDemosPendingLoading = 0;
sizeDemos();
@ -153,12 +151,10 @@
// Add list item
var navAnchor = document.createElement('a');
navAnchor.classList.add('wsk-navigation__link');
navAnchor.href = '#' + anchorLink;
navAnchor.appendChild(document.createTextNode(demoTitle));
var listItem = document.createElement('li');
listItem.appendChild(navAnchor);
navList.appendChild(listItem);
navList.appendChild(navAnchor);
var anchor = document.createElement('a');
anchor.id = anchorLink;

126
app/styleguide/layout/README.md
View File

@ -5,30 +5,26 @@ The layout module allows you to build layouts easily, simply by adding a few CSS
## Basic Example
```html
<div class="Layout">
<div class="Layout-header">
<div class="wsk-layout">
<div class="wsk-layout__header">
<!-- Title -->
<span class="Layout-title">Web Starter Kit</span>
<span class="wsk-layout-title">Web Starter Kit</span>
<!-- Add spacer, to align navigation to the right -->
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
<!-- Navigation -->
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<nav class="wsk-layout-navigation">
<a class="wsk-layout-navigation-link" href="">Hello</a>
(...)
</ul>
</nav>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-layout-navigation">
<a class="wsk-layout-navigation-link" href="">Hello</a>
(...)
</ul>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="demo-content"></div>
</div>
</div>
@ -40,13 +36,13 @@ The container element.
### Options
- `Layout--fixedHeader`:
- `wsk-layout--fixed-header`:
By default, headers are only shown in larger screens. Using this option makes them visible in smaller screens as well.
- `Layout--fixedDrawer`:
- `wsk-layout--fixed-drawer`:
By default, drawers are only shown in smaller screens. Using this option makes them always visible and open in larger screens, effectively functioning as side navigation. They still open and close normally in smaller screens, to save screen real estate.
- `Layout--overlayDrawerButton`:
- `wsk-layout--overlay-drawer-button`:
By default, the drawer button pushes down the content, to avoid overlapping issues. You can use this option if you'd like to overlay the drawer button directly on top of the content.
### State
@ -55,45 +51,45 @@ The container element.
Utility class that gets added to the layout when in a small screen size.
## Layout-header
## wsk-layout__header
The header element (optional). By default, it's only shown in large screens.
### Options
- `Layout-header--transparent`:
- `wsk-layout__header--transparent`:
Makes the background transparent, instead of the default main palette color.
- `Layout-header--mediumTall`:
- `wsk-layout__header--medium-tall`:
Makes the header twice the height of a default header.
- `Layout-header--tall`:
- `wsk-layout__header--tall`:
Makes the header three times the height of a default header.
- `Layout-header--multiRow`:
- `wsk-layout__header--multi-row`:
Allows stacking of multiple rows inside the header (by default, it only has one). Example:
```html
<div class="Layout-header Layout-header--multiRow Layout-header--tall">
<div class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--tall">
<!-- Top row -->
<div class="Layout-header-row">
<div class="wsk-layout__header-row">
<span>Upper row</span>
</div>
<div class="Layout-header-row">
<div class="wsk-layout__header-row">
<span>Middle row</span>
</div>
<div class="Layout-header-row">
<div class="wsk-layout__header-row">
<span>Bottom row</span>
</div>
</div>
```
- `Layout-header--seamed`:
- `wsk-layout__header--seamed`:
By default, the header casts a shadow onto the content. This option removes the shadow altogether.
- `Layout-header--waterfall`:
- `wsk-layout__header--waterfall`:
By default, the header casts a shadow onto the content. This option removes the shadow when the page is at the top of the content, and only shows the shadow if the user has scrolled down.
- `Layout-header--scroll`:
- `wsk-layout__header--scroll`:
By default, the header stays fixed at the top. This option makes it scroll with the content, so it's only visible at the top of the page.
### State
@ -104,24 +100,24 @@ The header element (optional). By default, it's only shown in large screens.
### Sub-elements
- `Layout-header-row`:
- `wsk-layout__header-row`:
Used when stacking multiple rows inside the header (by default, it only has one). Example:
```html
<div class="Layout-header Layout-header--multiRow Layout-header--tall">
<div class="Layout-header-row">
<div class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--tall">
<div class="wsk-layout__header-row">
<span>Upper row</span>
</div>
<div class="Layout-header-row">
<div class="wsk-layout__header-row">
<span>Middle row</span>
</div>
<div class="Layout-header-row">
<div class="wsk-layout__header-row">
<span>Bottom row</span>
</div>
</div>
```
## Layout-drawer
## wsk-layout__drawer
The drawer element (optional). By default, it's only shown in small screens, as a collapsible panel.
@ -135,48 +131,72 @@ None.
This class is added to the drawer when it is currently visible.
## Layout-content
## wsk-layout__content
Your content goes here :)
## Other Elements
## Other options
- `Layout-spacer`:
Used to align elements inside a header or drawer. `Layout-spacer` is a class set to flex grow, so you can use it to align elements to the right in a header, for example:
- `wsk-layout-spacer`:
Used to align elements inside a header or drawer. This is a class set to flex
grow, so you can use it to align elements to the right in a header, for
example:
```html
<div class="Layout-header">
<div class="wsk-layout__header">
<span>Left-aligned text</span>
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
<span>Right-aligned text</span>
</div>
```
or to the center:
```html
<div class="Layout-header">
<div class="Layout-spacer"></div>
<div class="wsk-layout__header">
<div class="wsk-layout-spacer"></div>
<span>Center-aligned text</span>
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
</div>
```
You can also use it to align to bottom in a drawer:
```html
<div class="Layout-drawer">
<div class="wsk-layout__drawer">
<span>Top-aligned text</span>
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
<span>Bottom-aligned text</span>
</div>
```
- `Layout-title`:
Styles the text inside to look like a title (slightly different styling depending on container).
- `wsk-layout-title`:
Styles the text inside to look like a title (slightly different styling
depending on container).
```html
<div class="Layout-header">
<div class="Layout-title">My Awesome Site</div>
<div class="wsk-layout__header">
<div class="wsk-layout-title">My Awesome Site</div>
</div>
```
```html
<div class="Layout-drawer">
<div class="Layout-title">My Awesome Site</div>
<div class="wsk-layout__drawer">
<div class="wsk-layout-title">My Awesome Site</div>
</div>
```
- `wsk-layout-navigation` and `wsk-layout-navigation-link`:
Used to place a navigation section and navigation links, respectively. They're
styled differently depending on whether they're placed in the header or the
drawer.
```html
<div class="wsk-layout__header">
<nav class="wsk-layout-navigation">
<a class="wsk-layout-navigation-link" href="">Hello</a>
(...)
</nav>
</div>
```
```html
<div class="wsk-layout__drawer">
<nav class="wsk-layout-navigation">
<a class="wsk-layout-navigation-link" href="">Hello</a>
(...)
</nav>
</div>
```

432
app/styleguide/layout/_layout.scss
View File

@ -4,25 +4,47 @@
@import '../animation/animation';
// Colors
$sidenav-bg-color: nth($palette-page, 1);
$sidenav-border-color: nth($palette-page, 4);
$text-color: nth($palette-page, 9);
$layout-drawer-bg-color: nth($palette-page, 1);
$layout-drawer-border-color: nth($palette-page, 4);
$layout-text-color: nth($palette-page, 9);
$panel-bg-color: nth($palette-primary, 6);
$panel-text-color: nth($palette-page, 3);
$layout-header-bg-color: nth($palette-primary, 6);
$layout-header-text-color: nth($palette-page, 3);
// Dimensions
$nav-narrow: 240px;
$nav-wide: 456px;
$nav-width: $nav-narrow;
$layout-drawer-narrow: 240px;
$layout-drawer-wide: 456px;
$layout-drawer-width: $layout-drawer-narrow;
$horizontal-padding: 24px;
$layout-horizontal-padding: 24px;
$panel-row-height: 60px;
$panel-default-height: $panel-row-height;
$screen-size-threshold: 850px;
$layout-header-row-height: 60px;
$layout-header-height: $layout-header-row-height;
$layout-screen-size-threshold: 850px;
.Layout {
// Navigation classes. Only used here for now, but we may at some point move
// this to its own component.
.wsk-navigation {
display: flex;
flex-wrap: nowrap;
}
.wsk-navigation__link {
color: $layout-text-color;
text-decoration: none;
font-weight: 700;
font-size: 14px;
margin: 0;
}
.wsk-navigation__link:hover {
background-color: nth($palette-page, 4);
}
// Main layout class.
.wsk-layout {
width: 100%;
height: 100vh;
display: flex;
@ -32,12 +54,25 @@ $screen-size-threshold: 850px;
position: relative;
}
.Layout-drawer {
// Optional utility classes for formatting special blocks in this component.
.wsk-layout-title {
display: block;
@include typo-title();
box-sizing: border-box;
}
.wsk-layout-spacer {
flex-grow: 1;
}
// Drawer.
.wsk-layout__drawer {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: $nav-width;
width: $layout-drawer-width;
height: 100%;
max-height: 100%;
@ -47,20 +82,17 @@ $screen-size-threshold: 850px;
@include shadow-z1();
// With this, we get a huge paint before it runs.
box-sizing: border-box;
border-right: 1px solid $sidenav-border-color;
background: $sidenav-bg-color;
border-right: 1px solid $layout-drawer-border-color;
background: $layout-drawer-bg-color;
// Transform offscreen.
transform: translateX(-$nav-width - 10px);
transform: translateX(-$layout-drawer-width - 10px);
transform-style: preserve-3d;
will-change: transform;
transition-property: transform;
@include material-animation-default();
transition-property: transform;
color: nth($palette-page, 9);
@ -68,65 +100,43 @@ $screen-size-threshold: 850px;
overflow-y: auto;
z-index: 5;
}
.Layout-drawer > .Layout-title {
display: block;
@include typo-title();
box-sizing: border-box;
line-height: $panel-default-height;
padding-left: $horizontal-padding;
border-bottom: 1px solid $sidenav-border-color;
}
.Layout-drawer > * {
flex-shrink: 0;
}
.Layout-drawer.is-visible {
&.is-visible {
transform: translateX(0px);
}
}
.Layout-drawer .Layout-navigation {
& > * {
flex-shrink: 0;
}
& > .wsk-layout-title {
line-height: $layout-header-height;
padding-left: $layout-horizontal-padding;
border-bottom: 1px solid $layout-drawer-border-color;
}
& .wsk-navigation {
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
ul {
display: block;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
}
li {
display: block;
& .wsk-navigation__link {
padding: 16px $layout-horizontal-padding;
margin: 0;
}
a {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
color: $text-color;
text-decoration: none;
font-weight: 700;
font-size: 14px;
height: 100%;
padding: 16px $horizontal-padding;
margin: 0;
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
.wsk-layout--fixed-drawer > & {
transform: translateX(0px);
z-index: 2;
}
}
}
a:hover {
background-color: nth($palette-page, 4);
}
}
// TODO(sgomes): Replace with an icon button when we have that component.
.Layout-drawerButton {
// Drawer button.
// TODO(sgomes): Replace with an icon button when we have that component.
.wsk-layout__drawer-button {
display: block;
position: relative;
@ -145,51 +155,34 @@ $screen-size-threshold: 850px;
color: rgba(0, 0, 0, 0.5);
z-index: 3;
}
.Layout-drawerButton:after {
&:after {
// TODO(sgomes): Replace with proper menu icon once we have an icon font.
content: '☰';
}
}
.Layout--overlayDrawerButton .Layout-drawerButton {
.wsk-layout--overlay-drawer-button > & {
position: absolute;
top: 0;
left: 0;
}
}
.Layout-header .Layout-drawerButton {
.wsk-layout__header & {
position: relative;
top: 0;
left: 0;
margin: 0 16px 0 0;
color: $panel-text-color;
}
color: $layout-header-text-color;
}
@media screen and (min-width: $screen-size-threshold + 1px) {
.Layout-drawerButton {
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
display: none;
}
.Layout--fixedDrawer > .Layout-drawer {
transform: translateX(0px);
z-index: 2;
}
.Layout--fixedDrawer > .Layout-content {
margin-left: $nav-width;
}
.Layout--fixedDrawer > .Layout-header {
margin-left: $nav-width;
}
}
// Header
.Layout-header {
// Header.
.wsk-layout__header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@ -197,162 +190,126 @@ $screen-size-threshold: 850px;
margin: 0;
border: 0;
height: 60px;
min-height: $panel-default-height;
background-color: $panel-bg-color;
color: $panel-text-color;
min-height: $layout-header-height;
background-color: $layout-header-bg-color;
color: $layout-header-text-color;
z-index: 3;
transition-property: min-height, box-shadow;
@include material-animation-default();
transition-property: min-height, box-shadow;
padding-left: 16px;
overflow: hidden;
}
.Layout-header--transparent {
background-color: transparent;
}
&.is-compact {
min-height: $layout-header-row-height;
}
.Layout-header--multiRow {
flex-direction: column;
}
&.is-casting-shadow {
@include shadow-z1();
}
.Layout-header-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
& > * {
flex-shrink: 0;
align-items: center;
min-height: $panel-row-height;
width: 100%;
}
}
.Layout-header > *,
.Layout-header-row > * {
flex-shrink: 0;
}
// Add a margin to the last entry...
& > *:last-child {
margin-right: $layout-horizontal-padding;
}
// Add a margin to the last entry...
.Layout-header > *:last-child,
.Layout-header-row > *:last-child {
margin-right: $horizontal-padding;
}
// ...unless it's a navigation area.
.Layout-header > .Layout-navigation:last-child,
.Layout-header-row > .Layout-navigation:last-child {
// ...unless it's a navigation area.
& > .wsk-navigation:last-child {
margin-right: 0;
}
}
// No margins on header rows, either.
.Layout-header.Layout-header--multiRow > .Layout-header-row {
margin-right: 0;
}
.Layout-spacer {
flex-grow: 1;
}
.Layout-header .Layout-title {
& .wsk-layout-title {
display: block;
@include typo-title();
}
.Layout-header .Layout-navigation {
margin: 0;
padding: 0;
height: $panel-row-height;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
ul {
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
}
li {
display: inline-block;
height: 100%;
& .wsk-navigation {
margin: 0;
padding: 0;
height: $layout-header-row-height;
flex-direction: row;
align-items: center;
}
a {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
color: $panel-text-color;
text-decoration: none;
font-weight: 700;
font-size: 14px;
height: 100%;
& .wsk-navigation__link {
color: $layout-header-text-color;
line-height: $layout-header-row-height;
padding: 0 16px;
margin: 0;
}
a:hover {
& .wsk-navigation__link:hover {
background-color: rgba(nth($palette-grey, 8), 0.6);
}
}
.Layout-header.Layout-header--mediumTall {
min-height: 2 * $panel-row-height;
}
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
.wsk-layout--fixed-drawer > & {
margin-left: $layout-drawer-width;
}
}
.Layout-header.Layout-header--tall {
min-height: 3 * $panel-row-height;
}
.Layout-header.is-compact {
min-height: $panel-row-height;
}
.Layout-header.is-casting-shadow {
@include shadow-z1();
}
.Layout-header.Layout-header--transparent.is-casting-shadow {
box-shadow: none;
}
.Layout-content {
// Fix IE10 bug.
-ms-flex: 0 1 auto;
display: inline-block;
overflow-y: auto;
overflow-x: hidden;
flex-grow: 1;
z-index: 1;
}
.Layout-header.Layout-header--scroll ~ .Layout-content {
overflow: visible;
}
.Layout-drawer.is-visible ~ .Layout-obfuscator {
background-color: rgba(0, 0, 0, 0.5);
visibility: visible;
}
@media screen and (max-width: $screen-size-threshold) {
.Layout-header {
@media screen and (max-width: $layout-screen-size-threshold) {
& {
display: none;
}
.Layout--fixedHeader > .Layout-header {
.wsk-layout--fixed-header > & {
display: flex;
}
.Layout-header.Layout-header--scroll ~ .Layout-content {
overflow-y: auto;
overflow-x: hidden;
}
}
.Layout-obfuscator {
.wsk-layout__header--transparent {
background-color: transparent;
}
.wsk-layout__header--multi-row {
flex-direction: column;
}
.wsk-layout__header--medium-tall {
min-height: 2 * $layout-header-row-height;
}
.wsk-layout__header--tall {
min-height: 3 * $layout-header-row-height;
}
.wsk-layout__header--transparent.is-casting-shadow {
box-shadow: none;
}
// Declared twice to bump rule priority.
.wsk-layout__header-row.wsk-layout__header-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
align-items: center;
min-height: $layout-header-row-height;
width: 100%;
margin-right: 0;
& > * {
flex-shrink: 0;
}
// Add a margin to the last entry...
& > *:last-child {
margin-right: $layout-horizontal-padding;
}
// ...unless it's a navigation area.
& > .wsk-navigation:last-child {
margin-right: 0;
}
}
// Obfuscator.
@media screen and (max-width: $layout-screen-size-threshold) {
.wsk-layout__obfuscator {
background-color: transparent;
position: absolute;
top: 0;
@ -363,5 +320,42 @@ $screen-size-threshold: 850px;
visibility: hidden;
transition-property: background-color;
@include material-animation-default();
.wsk-layout__drawer.is-visible ~ & {
background-color: rgba(0, 0, 0, 0.5);
visibility: visible;
}
}
}
// Content.
.wsk-layout__content {
// Fix IE10 bug.
-ms-flex: 0 1 auto;
display: inline-block;
overflow-y: auto;
overflow-x: hidden;
flex-grow: 1;
z-index: 1;
.wsk-layout--fixed-drawer > & {
margin-left: $layout-drawer-width;
}
.wsk-layout__header--scroll ~ & {
overflow: visible;
}
@media screen and (max-width: $layout-screen-size-threshold) {
.wsk-layout--fixed-drawer > & {
margin-left: 0;
}
.wsk-layout__header--scroll ~ & {
overflow-y: auto;
overflow-x: hidden;
}
}
}
}

308
app/styleguide/layout/demo.html
View File

@ -17,36 +17,32 @@
screens.</p>
<div class="demo-container">
<div class="Layout Layout--overlayDrawerButton">
<div class="Layout-header">
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
<div class="wsk-layout__header">
<!-- Title -->
<span class="Layout-title">Web Starter Kit</span>
<span class="wsk-layout-title">Web Starter Kit</span>
<!-- Add spacer, to align navigation to the right -->
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
<!-- Navigation -->
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="demo-content"></div>
</div>
</div>
@ -57,36 +53,32 @@
<p>Same as the standard layout, but the header scrolls with the content.</p>
<div class="demo-container">
<div class="Layout Layout--overlayDrawerButton">
<div class="Layout-header Layout-header--scroll">
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
<div class="wsk-layout__header wsk-layout__header--scroll">
<!-- Title -->
<span class="Layout-title">Web Starter Kit</span>
<span class="wsk-layout-title">Web Starter Kit</span>
<!-- Add spacer, to align navigation to the right -->
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
<!-- Navigation -->
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="demo-content"></div>
</div>
</div>
@ -98,10 +90,10 @@
navigation.</p>
<div class="demo-container">
<div class="Layout Layout--fixedDrawer Layout--overlayDrawerButton">
<div class="Layout-header">
<span class="Layout-title">Fixed drawer layout demo</span>
<div class="Layout-spacer"></div>
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--overlay-drawer-button">
<div class="wsk-layout__header">
<span class="wsk-layout-title">Fixed drawer layout demo</span>
<div class="wsk-layout-spacer"></div>
<div class="input-container right large">
<label class="ExpandableIcon" for="sample-expclean">
<span class="IconSearch"></span>
@ -112,19 +104,17 @@
</div>
</div>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="demo-content"></div>
</div>
</div>
@ -135,20 +125,18 @@
<p>Same as the previous layout, but with no header.</p>
<div class="demo-container">
<div class="Layout Layout--fixedDrawer Layout--overlayDrawerButton">
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--overlay-drawer-button">
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="demo-content"></div>
</div>
</div>
@ -159,36 +147,32 @@
<p>Always shows a header, even in smaller screens.</p>
<div class="demo-container">
<div class="Layout Layout--fixedHeader">
<div class="Layout-header">
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
<div class="wsk-layout__header">
<!-- Title -->
<span class="Layout-title">Web Starter Kit</span>
<span class="wsk-layout-title">Web Starter Kit</span>
<!-- Add spacer, to align navigation to the right -->
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
<!-- Navigation. We use CSS to hide it in small screens. -->
<nav class="Layout-navigation" id="fixed_header_nav">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<nav class="wsk-navigation" id="fixed_header_nav">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="demo-content"></div>
</div>
</div>
@ -200,10 +184,10 @@
even in small screens.</p>
<div class="demo-container">
<div class="Layout Layout--fixedDrawer Layout--fixedHeader">
<div class="Layout-header">
<span class="Layout-title">Fixed drawer and header</span>
<div class="Layout-spacer"></div>
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--fixed-header">
<div class="wsk-layout__header">
<span class="wsk-layout-title">Fixed drawer and header</span>
<div class="wsk-layout-spacer"></div>
<div class="input-container right large">
<label class="ExpandableIcon" for="sample-expclean2">
<span class="IconSearch"></span>
@ -214,19 +198,17 @@
</div>
</div>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="demo-content"></div>
</div>
</div>
@ -237,57 +219,51 @@
<p>Example of a more complex waterfall header, with multiple rows.</p>
<div class="demo-container">
<div class="Layout Layout--overlayDrawerButton">
<div class="Layout-header Layout-header--multiRow Layout-header--waterfall Layout-header--tall">
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
<div class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--waterfall wsk-layout__header--tall">
<!-- Top row -->
<div class="Layout-header-row">
<div class="wsk-layout__header-row">
<span id="my_text_changes">Web Starter Kit</span>
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
<!-- Only show when compact, check CSS -->
<nav class="Layout-navigation" id="compact_navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<nav class="wsk-navigation" id="compact_navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<!-- Middle row, subtitle -->
<div class="Layout-header-row">
<div class="wsk-layout__header-row">
<span class="Typography--title">
Multi-row layout demo
</span>
</div>
<!-- Bottom row -->
<div class="Layout-header-row">
<div class="Layout-spacer"></div>
<div class="wsk-layout__header-row">
<div class="wsk-layout-spacer"></div>
<!-- Only show when expanded, check CSS -->
<nav class="Layout-navigation" id="expanded_navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<nav class="wsk-navigation" id="expanded_navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
<div class="demo-content"></div>
</div>
</div>
@ -298,36 +274,32 @@
<p>Uses a transparent header that draws on top of the layout's background.</p>
<div class="demo-container">
<div class="Layout" id="transparent_demo">
<div class="Layout-header Layout-header--transparent">
<div class="wsk-layout wsk-js-layout" id="transparent_demo">
<div class="wsk-layout__header wsk-layout__header--transparent">
<!-- Title -->
<span class="Layout-title">Web Starter Kit</span>
<span class="wsk-layout-title">Web Starter Kit</span>
<!-- Add spacer, to align navigation to the right -->
<div class="Layout-spacer"></div>
<div class="wsk-layout-spacer"></div>
<!-- Navigation -->
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-drawer">
<span class="Layout-title">Web Starter Kit</span>
<nav class="Layout-navigation">
<ul>
<li><a href="">Hello</a></li>
<li><a href="">World.</a></li>
<li><a href="">How</a></li>
<li><a href="">Are</a></li>
<li><a href="">You?</a></li>
</ul>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
<a class="wsk-navigation__link" href="">World.</a>
<a class="wsk-navigation__link" href="">How</a>
<a class="wsk-navigation__link" href="">Are</a>
<a class="wsk-navigation__link" href="">You?</a>
</nav>
</div>
<div class="Layout-content">
<div class="wsk-layout__content">
</div>
</div>
</div>

24
app/styleguide/layout/demo.scss
View File

@ -17,57 +17,57 @@
padding: 8px;
}
.Layout {
.wsk-layout {
height: 500px;
}
// Styles for fixed drawer demos.
.Layout-header .ExpandableIcon {
.wsk-layout__header .ExpandableIcon {
border-color: nth($palette-page, 3);
border-radius: 50%;
}
.Layout-header .ExpandableIcon:hover {
.wsk-layout__header .ExpandableIcon:hover {
background-color: rgba(nth($palette-grey, 8), 0.6);
}
.Layout-header .TextField {
.wsk-layout__header .TextField {
color: nth($palette-page, 3);
}
// Styles for fixed header demo.
.Layout.is-small-screen .Layout-header #fixed_header_nav {
.wsk-layout.is-small-screen #fixed_header_nav {
visibility: hidden;
}
// Styles for multi-row layout demo.
.Layout-header #my_text_changes {
#my_text_changes {
@include typo-display-1;
transition-property: font-size;
@include material-animation-default();
}
.Layout-header #compact_navigation {
#compact_navigation {
visibility: hidden;
}
.Layout-header #expanded_navigation {
#expanded_navigation {
visibility: visible;
}
.Layout-header.is-compact #my_text_changes {
.wsk-layout__header.is-compact #my_text_changes {
@include typo-title;
}
.Layout-header.is-compact #compact_navigation {
.wsk-layout__header.is-compact #compact_navigation {
visibility: visible;
}
.Layout-header.is-compact #expanded_navigation {
.wsk-layout__header.is-compact #expanded_navigation {
visibility: hidden;
}
.Layout-header.is-compact #my_text_changes:after {
.wsk-layout__header.is-compact #my_text_changes:after {
content: " \0000a0 > \0000a0 Multi-row layout demo";
}

22
app/styleguide/layout/layout.js
View File

@ -1,7 +1,7 @@
window.addEventListener('load', function() {
'use strict';
var layouts = document.querySelectorAll('.Layout');
var layouts = document.querySelectorAll('.wsk-js-layout');
var MODE = {
STANDARD: 0,
SEAMED: 1,
@ -9,8 +9,6 @@ window.addEventListener('load', function() {
SCROLL: 3
};
var DRAWER_BUTTON_CLASS = 'Layout-drawerButton';
var SHADOW_CLASS = 'is-casting-shadow';
var COMPACT_CLASS = 'is-compact';
var SMALL_SCREEN_CLASS = 'is-small-screen';
@ -51,9 +49,9 @@ window.addEventListener('load', function() {
for (var i = 0; i < layouts.length; i++) {
var layout = layouts[i];
var header = layout.querySelector('.Layout-header');
var drawer = layout.querySelector('.Layout-drawer');
var content = layout.querySelector('.Layout-content');
var header = layout.querySelector('.wsk-layout__header');
var drawer = layout.querySelector('.wsk-layout__drawer');
var content = layout.querySelector('.wsk-layout__content');
var mode = MODE.STANDARD;
// Keep an eye on screen size, and add/remove auxiliary class for styling
@ -65,11 +63,11 @@ window.addEventListener('load', function() {
screenSizeHandler();
if (header) {
if (header.classList.contains('Layout-header--seamed')) {
if (header.classList.contains('wsk-layout__header--seamed')) {
mode = MODE.SEAMED;
} else if (header.classList.contains('Layout-header--waterfall')) {
} else if (header.classList.contains('wsk-layout__header--waterfall')) {
mode = MODE.WATERFALL;
} else if (layout.classList.contains('Layout-header--scroll')) {
} else if (layout.classList.contains('wsk-layout__header--scroll')) {
mode = MODE.SCROLL;
}
@ -90,20 +88,20 @@ window.addEventListener('load', function() {
// Add drawer toggling button to our layout, if we have an openable drawer.
if (drawer) {
var drawerButton = document.createElement('div');
drawerButton.classList.add(DRAWER_BUTTON_CLASS);
drawerButton.classList.add('wsk-layout__drawer-button');
var clickHandler = drawerToggleHandlerGenerator(drawer);
drawerButton.addEventListener('click', clickHandler);
// If we have a fixed header, add the button to the header rather than
// the layout.
if (layout.classList.contains('Layout--fixedHeader')) {
if (layout.classList.contains('wsk-layout--fixed-header')) {
header.insertBefore(drawerButton, header.firstChild);
} else {
layout.insertBefore(drawerButton, content);
}
var obfuscator = document.createElement('div');
obfuscator.classList.add('Layout-obfuscator');
obfuscator.classList.add('wsk-layout__obfuscator');
layout.appendChild(obfuscator);
obfuscator.addEventListener('click', clickHandler);
}