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

Adding semantic tags to layout demo. 

Fixes #39.
master
Sérgio Gomes 2015-03-17 16:06:28 +00:00
parent 55900f4e48
commit a04efdbe4f
1 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/layout/demo.html
View File

@ -18,7 +18,7 @@
<div class="demo-layout">
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
<div class="wsk-layout__header">
<header class="wsk-layout__header">
<!-- Icon -->
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
<!-- Title -->
@ -33,7 +33,7 @@
<a class="wsk-navigation__link" href="#">Are</a>
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
</header>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Material Design Lite</span>
<nav class="wsk-navigation">
@ -44,9 +44,9 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
<div class="wsk-layout__content">
<main class="wsk-layout__content">
<div class="demo-layout__content"></div>
</div>
</main>
</div>
</div>
@ -56,7 +56,7 @@
<div class="demo-layout">
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
<div class="wsk-layout__header wsk-layout__header--scroll">
<header class="wsk-layout__header wsk-layout__header--scroll">
<!-- Icon -->
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
<!-- Title -->
@ -71,7 +71,7 @@
<a class="wsk-navigation__link" href="#">Are</a>
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
</header>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Material Design Lite</span>
<nav class="wsk-navigation">
@ -82,9 +82,9 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
<div class="wsk-layout__content">
<main class="wsk-layout__content">
<div class="demo-layout__content"></div>
</div>
</main>
</div>
</div>
@ -95,7 +95,7 @@
<div class="demo-layout">
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--overlay-drawer-button">
<div class="wsk-layout__header">
<header class="wsk-layout__header">
<span class="wsk-layout-title">Fixed drawer layout demo</span>
<div class="wsk-layout-spacer"></div>
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right">
@ -106,7 +106,7 @@
<input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean" />
</div>
</div>
</div>
</header>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Material Design Lite</span>
<nav class="wsk-navigation">
@ -117,9 +117,9 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
<div class="wsk-layout__content">
<main class="wsk-layout__content">
<div class="demo-layout__content"></div>
</div>
</main>
</div>
</div>
@ -139,9 +139,9 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
<div class="wsk-layout__content">
<main class="wsk-layout__content">
<div class="demo-layout__content"></div>
</div>
</main>
</div>
</div>
@ -151,7 +151,7 @@
<div class="demo-layout">
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
<div class="wsk-layout__header">
<header class="wsk-layout__header">
<!-- Icon -->
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
<!-- Title -->
@ -166,7 +166,7 @@
<a class="wsk-navigation__link" href="#">Are</a>
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
</header>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Material Design Lite</span>
<nav class="wsk-navigation">
@ -177,9 +177,9 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
<div class="wsk-layout__content">
<main class="wsk-layout__content">
<div class="demo-layout__content"></div>
</div>
</main>
</div>
</div>
@ -190,7 +190,7 @@
<div class="demo-layout">
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--fixed-header">
<div class="wsk-layout__header">
<header class="wsk-layout__header">
<span class="wsk-layout-title">Fixed drawer and header</span>
<div class="wsk-layout-spacer"></div>
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right">
@ -201,7 +201,7 @@
<input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean2" />
</div>
</div>
</div>
</header>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Material Design Lite</span>
<nav class="wsk-navigation">
@ -212,9 +212,9 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
<div class="wsk-layout__content">
<main class="wsk-layout__content">
<div class="demo-layout__content"></div>
</div>
</main>
</div>
</div>
@ -225,7 +225,7 @@
<div class="demo-layout">
<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">
<header class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--waterfall wsk-layout__header--tall">
<!-- Top row -->
<div class="wsk-layout__header-row">
<!-- Icon -->
@ -260,7 +260,7 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
</div>
</header>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Material Design Lite</span>
<nav class="wsk-navigation">
@ -271,9 +271,9 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
<div class="wsk-layout__content">
<main class="wsk-layout__content">
<div class="demo-layout__content"></div>
</div>
</main>
</div>
</div>
@ -283,7 +283,7 @@
<div class="demo-layout">
<div class="wsk-layout wsk-js-layout" id="transparent_demo">
<div class="wsk-layout__header wsk-layout__header--transparent">
<header class="wsk-layout__header wsk-layout__header--transparent">
<!-- Icon -->
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
<!-- Title -->
@ -298,7 +298,7 @@
<a class="wsk-navigation__link" href="#">Are</a>
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
</header>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Material Design Lite</span>
<nav class="wsk-navigation">
@ -309,8 +309,8 @@
<a class="wsk-navigation__link" href="#">You?</a>
</nav>
</div>
<div class="wsk-layout__content">
</div>
<main class="wsk-layout__content">
</main>
</div>
</div>
@ -319,12 +319,12 @@
<div class="demo-layout">
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
<div class="wsk-layout__header">
<header class="wsk-layout__header">
<!-- Icon -->
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
<!-- Title -->
<span class="wsk-layout-title">Material Design Lite</span>
</div>
</header>
<div class="wsk-layout__tab-bar wsk-js-ripple-effect">
<a href="#blue-panel-scroll" class="wsk-layout__tab is-active">Blue</a>
<a href="#green-panel-scroll" class="wsk-layout__tab">Green</a>
@ -345,17 +345,17 @@
<a href="#green-panel-scroll" class="wsk-layout__tab">Green Six</a>
<a href="#red-panel-scroll" class="wsk-layout__tab">Red Six</a>
</div>
<div class="wsk-layout__content">
<div class="wsk-layout__tab-panel is-active" id="blue-panel-scroll">
<main class="wsk-layout__content">
<section class="wsk-layout__tab-panel is-active" id="blue-panel-scroll">
<div class="demo-layout__content"></div>
</div>
<div class="wsk-layout__tab-panel" id="green-panel-scroll">
</section>
<section class="wsk-layout__tab-panel" id="green-panel-scroll">
<div class="demo-layout__content-green"></div>
</div>
<div class="wsk-layout__tab-panel" id="red-panel-scroll">
</section>
<section class="wsk-layout__tab-panel" id="red-panel-scroll">
<div class="demo-layout__content-red"></div>
</div>
</div>
</section>
</main>
</div>
</div>
@ -364,28 +364,28 @@
<div class="demo-layout">
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header wsk-layout--fixed-tabs">
<div class="wsk-layout__header">
<header class="wsk-layout__header">
<!-- Icon -->
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
<!-- Title -->
<span class="wsk-layout-title">Material Design Lite</span>
</div>
</header>
<div class="wsk-layout__tab-bar wsk-js-ripple-effect">
<a href="#blue-panel-fixed" class="wsk-layout__tab is-active">Blue</a>
<a href="#green-panel-fixed" class="wsk-layout__tab">Green</a>
<a href="#red-panel-fixed" class="wsk-layout__tab">Red</a>
</div>
<div class="wsk-layout__content">
<div class="wsk-layout__tab-panel is-active" id="blue-panel-fixed">
<main class="wsk-layout__content">
<section class="wsk-layout__tab-panel is-active" id="blue-panel-fixed">
<div class="demo-layout__content"></div>
</div>
<div class="wsk-layout__tab-panel" id="green-panel-fixed">
</section>
<section class="wsk-layout__tab-panel" id="green-panel-fixed">
<div class="demo-layout__content-green"></div>
</div>
<div class="wsk-layout__tab-panel" id="red-panel-fixed">
</section>
<section class="wsk-layout__tab-panel" id="red-panel-fixed">
<div class="demo-layout__content-red"></div>
</div>
</div>
</section>
</main>
</div>
</div>