diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html new file mode 100644 index 0000000..d232839 --- /dev/null +++ b/doc/styleguide/index.html @@ -0,0 +1,96 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-alignment.html b/doc/styleguide/item-architecture-alignment.html new file mode 100644 index 0000000..7ecd445 --- /dev/null +++ b/doc/styleguide/item-architecture-alignment.html @@ -0,0 +1,182 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Align content + +

+ + +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

+
+
+
+ +
+ .alignright +
+
+ Align right. +
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

+
+
+
+
+ .alignleft +
+
+ Align left. +
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

+
+
+
+
+ .aligncenter +
+
+ Align center. +
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

+
+
+
+
+ +
+ + Markup + + 
<div>
+  <img src="../../../static/images/iphone.png" class="size-50 [modifier class]" />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+
+ +
+ Source: _base.scss, line 143 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-background.html b/doc/styleguide/item-architecture-background.html new file mode 100644 index 0000000..139b753 --- /dev/null +++ b/doc/styleguide/item-architecture-background.html @@ -0,0 +1,285 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Backgrounds + +

+ + +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+
+ +
+
+
+ +
+ .background +
+
+ Center. +
+
+
+ +
+
+
+
+ .background-top +
+
+ Top. +
+
+
+ +
+
+
+
+ .background-bottom +
+
+ Bottom. +
+
+
+ +
+
+
+
+ .background-center +
+
+ Center. +
+
+
+ +
+
+
+
+ .background-center-top +
+
+ Center top. +
+
+
+ +
+
+
+
+ .background-left-top +
+
+ Left top. +
+
+
+ +
+
+
+
+ .background-right-top +
+
+ Right top. +
+
+
+ +
+
+
+
+ .background-center-bottom +
+
+ Center bottom. +
+
+
+ +
+
+
+
+ .background-left-bottom +
+
+ Left bottom. +
+
+
+ +
+
+
+
+ .background-right-bottom +
+
+ Right bottom. +
+
+
+ +
+
+
+
+ .background-left +
+
+ Left. +
+
+
+ +
+
+
+
+ .background-right +
+
+ Right. +
+
+
+ +
+
+
+
+ +
+ + Markup + + 
<section>
+  <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+
+ +
+ Source: modules/_slides-bg.scss, line 15 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-backgrounds-gradient.html b/doc/styleguide/item-architecture-backgrounds-gradient.html new file mode 100644 index 0000000..133436e --- /dev/null +++ b/doc/styleguide/item-architecture-backgrounds-gradient.html @@ -0,0 +1,142 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Backgrounds - Gradient + +

+ +
+

Colors we use for backgrounds.

+ +
+ +
+ +
+
+ Example +
+ + +
+
Horizontal
+
Vertical
+
Radial
+
+
+ +
+ +
+ + Markup + + 
  <div class="bg-gradient-h">Horizontal</div>
+  <div class="bg-gradient-v">Vertical</div>
+  <div class="bg-gradient-r">Radial</div>
+
+ +
+ Source: _color.scss, line 193 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-backgrounds-transparent.html b/doc/styleguide/item-architecture-backgrounds-transparent.html new file mode 100644 index 0000000..6820079 --- /dev/null +++ b/doc/styleguide/item-architecture-backgrounds-transparent.html @@ -0,0 +1,146 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Backgrounds - Transparent + +

+ +
+

Colors we use for backgrounds.

+ +
+ +
+ +
+
+ Example +
+ + +
+
+
Dark
+
Light
+
Gradient
+
+
+
+ +
+ +
+ + Markup + + 
<div class="bg-red">
+  <div class="bg-trans-dark">Dark</div>
+  <div class="bg-trans-light">Light</div>
+  <div class="bg-trans-gradient">Gradient</div>
+</div>
+
+ +
+ Source: _color.scss, line 168 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-backgrounds.html b/doc/styleguide/item-architecture-backgrounds.html new file mode 100644 index 0000000..c7b673f --- /dev/null +++ b/doc/styleguide/item-architecture-backgrounds.html @@ -0,0 +1,162 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Backgrounds + +

+ +
+

Colors we use for backgrounds.

+ +
+ +
+ +
+
+ Example +
+ + +
+ Primary #44d +Secondary #67d +Light #f7f9fb +Black #000 +Black blue #123 +Blue #346 +Brown #f9f8f2 +Gray #d5d9e2 +Green #077 +Purple #62b +Red #c23 +White #fff +Facebook #3b5998 +
+
+ +
+ +
+ + Markup + + 
<span class="bg-primary size-20">Primary #44d</span>
+<span class="bg-secondary size-20">Secondary #67d</span>
+<span class="bg-light size-20">Light #f7f9fb</span>
+<span class="bg-black size-20">Black #000</span>
+<span class="bg-black-blue size-20">Black blue #123</span>
+<span class="bg-blue size-20">Blue #346</span>
+<span class="bg-brown size-20">Brown #f9f8f2</span>
+<span class="bg-gray size-20">Gray #d5d9e2</span>
+<span class="bg-green size-20">Green #077</span>
+<span class="bg-purple size-20">Purple #62b</span>
+<span class="bg-red size-20">Red #c23</span>
+<span class="bg-white size-20">White #fff</span>
+<span class="bg-facebook size-20">Facebook #3b5998</span>
+
+ +
+ Source: _color.scss, line 107 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-buttons.html b/doc/styleguide/item-architecture-buttons.html new file mode 100644 index 0000000..8273627 --- /dev/null +++ b/doc/styleguide/item-architecture-buttons.html @@ -0,0 +1,147 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Buttons + +

+ + +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+ Download +
+
+ +
+ .radius +
+
+ Rounded corners +
+
+ Download +
+
+
+ +
+ + Markup + + 
<a href="#" class="button [modifier class]">Download</a>
+
+ +
+ Source: modules/_button.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-columns.html b/doc/styleguide/item-architecture-columns.html new file mode 100644 index 0000000..84bdc47 --- /dev/null +++ b/doc/styleguide/item-architecture-columns.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Columns + +

+ +
+

Magazine Two Columns

+ +
+ +
+ +
+
+ Example +
+ + +
+

Column 1 text

Column 2 text

+
+
+ +
+ +
+ + Markup + + 
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
+
+ +
+ Source: _typography.scss, line 346 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-context.html b/doc/styleguide/item-architecture-context.html new file mode 100644 index 0000000..2bfeea7 --- /dev/null +++ b/doc/styleguide/item-architecture-context.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Context + +

+ +
+

Heading with border

+ +
+ +
+ +
+
+ Example +
+ + +
+

Why WebSlides?

+
+
+ +
+ +
+ + Markup + + 
<p class="text-context">Why WebSlides?</p>
+
+ +
+ Source: _typography.scss, line 376 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-data.html b/doc/styleguide/item-architecture-data.html new file mode 100644 index 0000000..7364e79 --- /dev/null +++ b/doc/styleguide/item-architecture-data.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Data + +

+ +
+

Numbers (results, sales... )-

+ +
+ +
+ +
+
+ Example +
+ + +
+

23,478,289

+
+
+ +
+ +
+ + Markup + + 
<p class="text-data">23,478,289</p>
+
+ +
+ Source: _typography.scss, line 314 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-emoji.html b/doc/styleguide/item-architecture-emoji.html new file mode 100644 index 0000000..6145cdb --- /dev/null +++ b/doc/styleguide/item-architecture-emoji.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Emoji + +

+ +
+

You'll love this

+ +
+ +
+ +
+
+ Example +
+ + +
+

😀😁😂😅😉😋😎😍

+
+
+ +
+ +
+ + Markup + + 
<p class="text-emoji">😀😁😂😅😉😋😎😍</p>
+
+ +
+ Source: _typography.scss, line 296 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-forms-user.html b/doc/styleguide/item-architecture-forms-user.html new file mode 100644 index 0000000..22b3316 --- /dev/null +++ b/doc/styleguide/item-architecture-forms-user.html @@ -0,0 +1,140 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Login form + +

+ + +
+ +
+
+ Example +
+ + +
+
+ + +
+
+
+ +
+ +
+ + Markup + + 
<div class="user">
+  <input type="text" placeholder="Username" />
+  <button>Log in</button>
+</div>
+
+ +
+ Source: modules/_form.scss, line 139 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-forms.html b/doc/styleguide/item-architecture-forms.html new file mode 100644 index 0000000..b63fa85 --- /dev/null +++ b/doc/styleguide/item-architecture-forms.html @@ -0,0 +1,112 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Architecture.Forms + +

+ + +
+ + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-grid.html b/doc/styleguide/item-architecture-grid.html new file mode 100644 index 0000000..6a54c45 --- /dev/null +++ b/doc/styleguide/item-architecture-grid.html @@ -0,0 +1,182 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Grid + +

+ +
+

Basic Grid (Flexible blocks) +Auto-fill & Equal height

+ +
+ +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

+
+
+

WebSlides is the clean

+

Each parent <section> in the #webslides element is an individual slide.

+
+
+
+
+ +
+ .vertical-align +
+
+ Vertical align +
+
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

+
+
+

WebSlides is the clean

+

Each parent <section> in the #webslides element is an individual slide.

+
+
+
+
+
+ +
+ + Markup + + 
<div class="grid [modifier class]">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+
+ +
+ Source: modules/_grid.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-info.html b/doc/styleguide/item-architecture-info.html new file mode 100644 index 0000000..dd6b936 --- /dev/null +++ b/doc/styleguide/item-architecture-info.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Info Messages + +

+ +
+

Error, warning, success...

+ +
+ +
+ +
+
+ Example +
+ + +
+

Psychiatrists have long debated whether it really exists.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-info">Psychiatrists have long debated whether it really exists.</p>
+
+ +
+ Source: _typography.scss, line 546 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-interviews.html b/doc/styleguide/item-architecture-interviews.html new file mode 100644 index 0000000..f1cfe82 --- /dev/null +++ b/doc/styleguide/item-architecture-interviews.html @@ -0,0 +1,172 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Interviews + +

+ +
+

Questions & Answers

+ +
+ +
+ +
+
+ Example +
+ + +
+
+
Driftwood
+
+

It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?

+
+
Fiorello
+
+

No. It's no good.

+
+
Driftwood
+
+

What's the matter with it?

+
+
Fiorello
+
+

I don't know, let's hear it again.

+
+
+
+
+ +
+ +
+ + Markup + + 
<dl class="text-interview">
+  <dt>Driftwood</dt>
+  <dd>
+    <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>No. It's no good.</p>
+  </dd>
+  <dt>Driftwood</dt>
+  <dd>
+    <p>What's the matter with it?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>I don't know, let's hear it again.</p>
+  </dd>
+</dl>
+
+ +
+ Source: _typography.scss, line 504 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-intro.html b/doc/styleguide/item-architecture-intro.html new file mode 100644 index 0000000..3f7fea3 --- /dev/null +++ b/doc/styleguide/item-architecture-intro.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Intro + +

+ +
+

Typography Classes = .text-

+ +
+ +
+ +
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-intro">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 206 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-label.html b/doc/styleguide/item-architecture-label.html new file mode 100644 index 0000000..bfe5766 --- /dev/null +++ b/doc/styleguide/item-architecture-label.html @@ -0,0 +1,134 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Label + +

+ + +
+ +
+
+ Example +
+ + +
+

Website: http://webslides.tv

+
+
+ +
+ +
+ + Markup + + 
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
+
+ +
+ Source: _typography.scss, line 333 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-landings.html b/doc/styleguide/item-architecture-landings.html new file mode 100644 index 0000000..440c3f6 --- /dev/null +++ b/doc/styleguide/item-architecture-landings.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Landings + +

+ +
+

h1,h2... Promo/Landings

+ +
+ +
+ +
+
+ Example +
+ + +
+

Landings

+
+
+ +
+ +
+ + Markup + + 
<h1 class="text-landing">Landings</h1>
+
+ +
+ Source: _typography.scss, line 233 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-lowercase.html b/doc/styleguide/item-architecture-lowercase.html new file mode 100644 index 0000000..ad1aaec --- /dev/null +++ b/doc/styleguide/item-architecture-lowercase.html @@ -0,0 +1,134 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Lowercase + +

+ + +
+ +
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-lowercase">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 286 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-navigation.html b/doc/styleguide/item-architecture-navigation.html new file mode 100644 index 0000000..145224d --- /dev/null +++ b/doc/styleguide/item-architecture-navigation.html @@ -0,0 +1,201 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Slides navigation + +

+ + +
+ +
+
+ Example +
+ + +
+ +
+
+ +
+ +
+ + Markup + + 
<div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+
+ +
+ Source: modules/_slides-navigation.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + +/a> + + 53 / 120 + +
+ + + +
+ + Markup + + 
<div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+
+ +
+ Source: modules/_navigation.scss, line 1 +
+ + + + + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-pull_quote.html b/doc/styleguide/item-architecture-pull_quote.html new file mode 100644 index 0000000..abda1c2 --- /dev/null +++ b/doc/styleguide/item-architecture-pull_quote.html @@ -0,0 +1,144 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Pull Quote + +

+ +
+

Pull Quote Right/Left

+ +
+ +
+ +
+
+ Example +
+ + +
+

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

+

Psychiatrists have long debated whether it really exists.

+

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

+

Psychiatrists have long debated whether it really exists.

+
+
+ +
+ +
+ + Markup + + 
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
+<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
+
+ +
+ Source: _typography.scss, line 449 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-radius.html b/doc/styleguide/item-architecture-radius.html new file mode 100644 index 0000000..427a6f5 --- /dev/null +++ b/doc/styleguide/item-architecture-radius.html @@ -0,0 +1,142 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Radius + +

+ +
+

Adds a rounded radis

+ +
+ +
+ +
+
+ Example +
+ + +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi. +
+
+
+ +
+ +
+ + Markup + + 
<div class="bg-black radius">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+</div>
+
+ +
+ Source: _base.scss, line 129 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-separator.html b/doc/styleguide/item-architecture-separator.html new file mode 100644 index 0000000..492a047 --- /dev/null +++ b/doc/styleguide/item-architecture-separator.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Separator + +

+ +
+

Stars *

+ +
+ +
+ +
+
+ Example +
+ + +
+

Separator

+
+
+ +
+ +
+ + Markup + + 
<p class="text-separator">Separator</p>
+
+ +
+ Source: _typography.scss, line 418 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-serif.html b/doc/styleguide/item-architecture-serif.html new file mode 100644 index 0000000..2c89b31 --- /dev/null +++ b/doc/styleguide/item-architecture-serif.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Serif + +

+ +
+

Maitree font

+ +
+ +
+ +
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-serif">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 220 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-shadow.html b/doc/styleguide/item-architecture-shadow.html new file mode 100644 index 0000000..5989338 --- /dev/null +++ b/doc/styleguide/item-architecture-shadow.html @@ -0,0 +1,142 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Shadows + +

+ +
+

Drops a shadow under the layer. The layer containing the shadow has to have a solid background

+ +
+ +
+ +
+
+ Example +
+ + +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi. +
+
+
+ +
+ +
+ + Markup + + 
<div class="bg-white shadow">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+</div>
+
+ +
+ Source: _base.scss, line 73 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-sizes.html b/doc/styleguide/item-architecture-sizes.html new file mode 100644 index 0000000..e21297e --- /dev/null +++ b/doc/styleguide/item-architecture-sizes.html @@ -0,0 +1,207 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Resizing + +

+ + +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+ +
+
+ +
+ .size-80 +
+
+ resize to 80%. +
+
+ +
+
+
+ .size-70 +
+
+ resize to 70%. +
+
+ +
+
+
+ .size-60 +
+
+ resize to 60%. +
+
+ +
+
+
+ .size-50 +
+
+ resize to 50%. +
+
+ +
+
+
+ .size-40 +
+
+ resize to 40%. +
+
+ +
+
+
+ .size-30 +
+
+ resize to 30%. +
+
+ +
+
+
+ .size-20 +
+
+ resize to 20%. +
+
+ +
+
+
+ +
+ + Markup + + 
<img src="../../../static/images/iphone.png" class="[modifier class]" />
+
+ +
+ Source: _base.scss, line 199 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-slides-bottom.html b/doc/styleguide/item-architecture-slides-bottom.html new file mode 100644 index 0000000..733b408 --- /dev/null +++ b/doc/styleguide/item-architecture-slides-bottom.html @@ -0,0 +1,153 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Align bottom + +

+ + +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+
+

Content

+
+
+
+ +
+ Slide alignment +
+
+ bottom +
+
+
+

Content

+
+
+
+
+ +
+ + Markup + + 
<section class="slide-bottom">
+  <p>Content</p>
+</section>
+
+ +
+ Source: modules/_slides.scss, line 74 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-slides-top.html b/doc/styleguide/item-architecture-slides-top.html new file mode 100644 index 0000000..0e93fbb --- /dev/null +++ b/doc/styleguide/item-architecture-slides-top.html @@ -0,0 +1,153 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Align top + +

+ + +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+
+

Content

+
+
+
+ +
+ Slide alignment +
+
+ top +
+
+
+

Content

+
+
+
+
+ +
+ + Markup + + 
<section class="slide-top">
+  <p>Content</p>
+</section>
+
+ +
+ Source: modules/_slides.scss, line 60 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-slides.html b/doc/styleguide/item-architecture-slides.html new file mode 100644 index 0000000..bfbdbe8 --- /dev/null +++ b/doc/styleguide/item-architecture-slides.html @@ -0,0 +1,144 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Slides + +

+ +
+

Fullscreen. Vertically and horizontally centered. +Fade transition to all slides. +All HTML elements will have those styles

+ +
+ +
+ +
+
+ Example +
+ + +
+
+

Content

+
+
+
+ +
+ +
+ + Markup + + 
<section>
+  <p>Content</p>
+</section>
+
+ +
+ Source: modules/_slides.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-subtitle.html b/doc/styleguide/item-architecture-subtitle.html new file mode 100644 index 0000000..2997c89 --- /dev/null +++ b/doc/styleguide/item-architecture-subtitle.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Subtitule + +

+ +
+

Subtitle (Before h1, h2)

+ +
+ +
+ +
+
+ Example +
+ + +
+

Powered by #WebSlides .text-subtitle

+
+
+ +
+ +
+ + Markup + + 
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
+
+ +
+ Source: _typography.scss, line 250 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-symbols.html b/doc/styleguide/item-architecture-symbols.html new file mode 100644 index 0000000..8631a98 --- /dev/null +++ b/doc/styleguide/item-architecture-symbols.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Symbols + +

+ +
+

Stars *

+ +
+ +
+ +
+
+ Example +
+ + +
+

* * *

+
+
+ +
+ +
+ + Markup + + 
<p class="text-symbols">* * *</p>
+
+ +
+ Source: _typography.scss, line 404 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-tables.html b/doc/styleguide/item-architecture-tables.html new file mode 100644 index 0000000..37f7f15 --- /dev/null +++ b/doc/styleguide/item-architecture-tables.html @@ -0,0 +1,192 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Tables + +

+ + +
+ +
+
+ Example +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PlansGoodBetterAwesome
PriceFree$6$10
Access to exclusive contentNoNoYes
Screens you can watch on at the same time12Unlimited
+
+
+ +
+ +
+ + Markup + + 
<table>
+  <thead>
+   <tr>
+     <th>Plans</th>
+     <th>Good</th>
+     <th>Better</th>
+     <th>Awesome</th>
+   </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Price</td>
+      <td>Free</td>
+      <td>$6</td>
+      <td>$10</td>
+    </tr>
+    <tr>
+      <td>Access to exclusive content</td>
+      <td>No</td>
+      <td>No</td>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <td>Screens you can watch on at the same time</td>
+      <td>1</td>
+      <td>2</td>
+      <td>Unlimited</td>
+    </tr>
+  </tbody>
+</table>
+
+ +
+ Source: modules/_tables.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-try.html b/doc/styleguide/item-architecture-try.html new file mode 100644 index 0000000..648832c --- /dev/null +++ b/doc/styleguide/item-architecture-try.html @@ -0,0 +1,134 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Try + +

+ + +
+ +
+
+ Example +
+ + +
+ Try element +
+
+ +
+ +
+ + Markup + + 
<a href="#" class="try">Try element</a>
+
+ +
+ Source: modules/_form.scss, line 96 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-uppercase.html b/doc/styleguide/item-architecture-uppercase.html new file mode 100644 index 0000000..a006a05 --- /dev/null +++ b/doc/styleguide/item-architecture-uppercase.html @@ -0,0 +1,134 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Uppercase + +

+ + +
+ +
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-uppercase">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 276 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture.html b/doc/styleguide/item-architecture.html new file mode 100644 index 0000000..4d55cba --- /dev/null +++ b/doc/styleguide/item-architecture.html @@ -0,0 +1,299 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Architecture + +

+ + +
+ + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-activity.html b/doc/styleguide/item-contents-activity.html new file mode 100644 index 0000000..2f24427 --- /dev/null +++ b/doc/styleguide/item-contents-activity.html @@ -0,0 +1,222 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + CVs, News ad Activity + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
+ + +
+ +
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock activity">
+  <li>
+    <a href="#" title="UX Designer at ACME">
+      <div>
+        <p class="year">
+          2016
+        </p>
+        <p class="title">
+          UX Designer at ACME
+        </p>
+        <p class="summary">
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        </p>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="14 world famous buildings to inspire you">
+      <p class="year">
+        2 mins ago
+      </p>
+      <p class="title">
+        14 world famous buildings to inspire you
+      </p>
+      <p class="summary">
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
+      </p>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Co-Founder of GAMMA">
+      <p class="year">
+        2013
+      </p>
+      <p class="title">
+        Co-Founder of GAMMA
+      </p>
+      <p class="summary">
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      </p>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-activity.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-clients.html b/doc/styleguide/item-contents-clients.html new file mode 100644 index 0000000..20f2e20 --- /dev/null +++ b/doc/styleguide/item-contents-clients.html @@ -0,0 +1,220 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Clients + +

+ +
+

Highlight clients information

+ +
+ +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+ +
+
+ +
+ .border +
+
+ with border +
+
+ +
+
+
+ +
+ + Markup + + 
<ul class="flexblock clients [modifier class]">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-clients.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-features.html b/doc/styleguide/item-contents-features.html new file mode 100644 index 0000000..e4d6b73 --- /dev/null +++ b/doc/styleguide/item-contents-features.html @@ -0,0 +1,217 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Features + +

+ +
+

Special features

+ +
+ +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+
    +
  • +
    +

    100% customizable

    + Well documented. +
    +
    • +
  • +
    + $48 +

    Extra virgin olive oil

    + The Spanish caviar. +
    +
    • +
  • +
    +

    + Ultra-fast Wifi +

    + Simple file sharing. +
    +
    • +
+
+
+ +
+ .border +
+
+ with border +
+
+
    +
  • +
    +

    100% customizable

    + Well documented. +
    +
    • +
  • +
    + $48 +

    Extra virgin olive oil

    + The Spanish caviar. +
    +
    • +
  • +
    +

    + Ultra-fast Wifi +

    + Simple file sharing. +
    +
    • +
+
+
+
+ +
+ + Markup + + 
<ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-features.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-flexblocks.html b/doc/styleguide/item-contents-flexblocks.html new file mode 100644 index 0000000..3707673 --- /dev/null +++ b/doc/styleguide/item-contents-flexblocks.html @@ -0,0 +1,245 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Flexblocks + +

+ +
+

Auto-fill & Equal height columns

+ +
+ +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+ +
+
+ +
+ .blink +
+
+ Linkable block +
+
+ +
+
+
+ .border +
+
+ With border +
+
+ +
+
+
+ +
+ + Markup + + 
<ul class="flexblock [modifier class]">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-gallery-overlay.html b/doc/styleguide/item-contents-gallery-overlay.html new file mode 100644 index 0000000..5ca87d2 --- /dev/null +++ b/doc/styleguide/item-contents-gallery-overlay.html @@ -0,0 +1,194 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Gallery + Overflow + +

+ +
+

Beautiful gallery with overlay content

+ +
+ +
+ +
+
+ Example +
+ + +
+ +
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>New York</h2>
+        <p>1,234 rooms</p>
+      </div>
+      <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>uWatch</h2>
+        <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>Ellen Daniels</h2>
+        <p>CEO</p>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-gallery.scss, line 44 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-gallery.html b/doc/styleguide/item-contents-gallery.html new file mode 100644 index 0000000..57bbb53 --- /dev/null +++ b/doc/styleguide/item-contents-gallery.html @@ -0,0 +1,206 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Galleries (portfolios, teams...) + +

+ +
+

Beautiful gallery

+ +
+ +
+ +
+
+ Example +
+ + +
+ +
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+        <figcaption>
+          <h2>uWatch</h2>
+          <p>By Jane Doe</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+        <figcaption>
+          <h2>Ellen Daniels</h2>
+          <p>CEO</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+        <figcaption>
+          <h2>New York</h2>
+          <p>3,456 rooms</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-gallery.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-metrics.html b/doc/styleguide/item-contents-metrics.html new file mode 100644 index 0000000..40470f2 --- /dev/null +++ b/doc/styleguide/item-contents-metrics.html @@ -0,0 +1,199 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Metrics + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+
    +
  • Founded + 2016 +
    • +
  • + 24M + Subscribers +
    • +
  • + Revenue: + $16M +
    • +
  • + Monthly Growth + 64% +
    • +
+
+
+ +
+ .border +
+
+ with border +
+
+
    +
  • Founded + 2016 +
    • +
  • + 24M + Subscribers +
    • +
  • + Revenue: + $16M +
    • +
  • + Monthly Growth + 64% +
    • +
+
+
+
+ +
+ + Markup + + 
<ul class="flexblock metrics  [modifier class]">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-metrics.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-plans.html b/doc/styleguide/item-contents-plans.html new file mode 100644 index 0000000..abc2bf6 --- /dev/null +++ b/doc/styleguide/item-contents-plans.html @@ -0,0 +1,244 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Plans / Pricing + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+ +
+
+ +
+ .blink +
+
+ block linkable +
+
+ +
+
+
+ +
+ + Markup + + 
<ul class="flexblock plans [modifier class]">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-plans.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-reasons.html b/doc/styleguide/item-contents-reasons.html new file mode 100644 index 0000000..f5a7273 --- /dev/null +++ b/doc/styleguide/item-contents-reasons.html @@ -0,0 +1,156 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Reasons + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
+ + +
+
    +
  • +

    Why WebSlides? Work better, faster.

    +

    Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

    +
    • +
  • +

    Good karma. Just the essentials and using lovely CSS.

    +

    WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    +
    • +
+
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock reasons">
+  <li>
+    <h2>Why WebSlides? Work better, faster.</h2>
+    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
+  </li>
+  <li>
+    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
+    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-reasons.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-resume.html b/doc/styleguide/item-contents-resume.html new file mode 100644 index 0000000..b72a5bf --- /dev/null +++ b/doc/styleguide/item-contents-resume.html @@ -0,0 +1,180 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Work / Resumé / CV + +

+ + +
+ +
+
+ Example +
+ + +
+ +
+
+ +
+ +
+ + Markup + + 
<ul class="work">
+  <li class="work-label">
+    <p class="work-title">Work</p>
+    <p class="work-client">Client</p>
+    <p class="work-services">Services</p>
+    <p class="work-date">Year</p>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Redesign of Netflix</span></p>
+      <p class="work-client"><span>Netflix</span></p>
+      <p class="work-services"><span>Frontend</span></p>
+      <p class="work-date"><span>2015-2016</span></p>
+    </a>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Airbnb TV Commercials</span></p>
+      <p class="work-client"><span>Airbnb</span></p>
+      <p class="work-services"><span>Video, Storytelling</span></p>
+      <p class="work-date"><span>2015</span></p>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_work.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-specs.html b/doc/styleguide/item-contents-specs.html new file mode 100644 index 0000000..dd63882 --- /dev/null +++ b/doc/styleguide/item-contents-specs.html @@ -0,0 +1,176 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Specs + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
+ + +
+
    +
  • +
    +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock specs">
+    <li>
+      <div>
+        <h2>Ultra-Fast WiFi</h2>
+        Simple and secure file sharing.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>All day battery life</h2>
+        Your battery worries may be over.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>Lifetime Warranty </h2>
+        We'll fix it or if we can't, we'll replace it.
+      </div>
+    </li>
+    </ul>
+
+ +
+ Source: modules/_flexblock-specs.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents-steps.html b/doc/styleguide/item-contents-steps.html new file mode 100644 index 0000000..feaef90 --- /dev/null +++ b/doc/styleguide/item-contents-steps.html @@ -0,0 +1,188 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Steps + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
+ + +
+
    +
  • +

    01. Passion

    +

    When you're really passionate about your job, you can change the world.

    +
    • +
  • +
    +

    02. Purpose

    +

    Why does this business exist? How are you different? Why matters?

    +
    • +
  • +
    +

    03. Principles

    +

    Leadership through usefulness, openness, empathy, and good taste.

    +
    • +
  • +
    +

    04. Process

    +
      +
    • Useful
      • +
    • Easy
      • +
    • Fast
      • +
    • Beautiful
      • +
    +
    • +
+
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock steps">
+  <li>
+    <h2>01. Passion</h2>
+    <p>When you're really passionate about your job, you can change the world.</p>
+  </li>
+  <li>
+    <div class="process step-2"></div>
+    <h2>02. Purpose</h2>
+    <p>Why does this business exist? How are you different? Why matters?</p>
+  </li>
+  <li>
+    <div class="process step-3"></div>
+    <h2>03. Principles</h2>
+    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
+  </li>
+  <li>
+    <div class="process step-4"></div>
+    <h2>04. Process</h2>
+    <ul>
+      <li>Useful</li>
+      <li>Easy</li>
+      <li>Fast</li>
+      <li>Beautiful</li>
+    </ul>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-steps.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-contents.html b/doc/styleguide/item-contents.html new file mode 100644 index 0000000..4e78457 --- /dev/null +++ b/doc/styleguide/item-contents.html @@ -0,0 +1,174 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Contents + +

+ + +
+ + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-landings-cards.html b/doc/styleguide/item-landings-cards.html new file mode 100644 index 0000000..570e0a6 --- /dev/null +++ b/doc/styleguide/item-landings-cards.html @@ -0,0 +1,152 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Cards + +

+ +
+

Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80

+ +
+ +
+ +
+
+ Example +
+ + +
+
+
iPhone
+
+

iPhone 7

+

3D Touch, 12MP photos, and 4K video.

+

Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.

+
+
+
+
+ +
+ +
+ + Markup + + 
  <div class="card-50">
+    <figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
+    <div class="flex-content">
+      <h2>iPhone 7</h2>
+      <p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
+      <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
+    </div>
+  </div>
+
+ +
+ Source: modules/_cards.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-landings-cites.html b/doc/styleguide/item-landings-cites.html new file mode 100644 index 0000000..9b592e5 --- /dev/null +++ b/doc/styleguide/item-landings-cites.html @@ -0,0 +1,134 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Cites + +

+ + +
+ +
+
+ Example +
+ + +
+ Avatar @jlantunez +
+
+ +
+ +
+ + Markup + + 
<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
+
+ +
+ Source: modules/_quotes.scss, line 28 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-landings-cta-cover.html b/doc/styleguide/item-landings-cta-cover.html new file mode 100644 index 0000000..a16117f --- /dev/null +++ b/doc/styleguide/item-landings-cta-cover.html @@ -0,0 +1,150 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Headings + +

+ + +
+ +
+
+ Example +
+ + +
+
+

HTML Presentations Made Easy

+

+ + WebSlides + + Demos · Github +

+
+
+
+ +
+ +
+ + Markup + + 
<div class="cta-cover">
+  <h1><strong>HTML Presentations</strong> Made Easy</h1>
+  <p class="alignright">
+    <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
+      WebSlides
+    </a>
+    <span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
+  </p>
+</div>
+
+ +
+ Source: modules/_promos.scss, line 75 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-landings-cta.html b/doc/styleguide/item-landings-cta.html new file mode 100644 index 0000000..831f370 --- /dev/null +++ b/doc/styleguide/item-landings-cta.html @@ -0,0 +1,150 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Call to action + +

+ + +
+ +
+
+ Example +
+ + +
+
+
+

$40

+
+
+

Watch TV shows anytime, anywhere

+

Lorem ipsum

+
+
+
+
+ +
+ +
+ + Markup + + 
<div class="cta">
+  <div class="number">
+    <p><span><sup>$</sup>40</span></p>
+  </div>
+  <div class="benefit">
+    <h2>Watch TV shows anytime, anywhere</h2>
+    <p>Lorem ipsum</p>
+  </div>
+</div>
+
+ +
+ Source: modules/_promos.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-landings-longform.html b/doc/styleguide/item-landings-longform.html new file mode 100644 index 0000000..62820a6 --- /dev/null +++ b/doc/styleguide/item-landings-longform.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Longform + +

+ + +
+ +
+
+ Example +
+ + +
+
+

Lorem ipsum

+
+
+
+ +
+ +
+ + Markup + + 
<section class="wrap longform">
+  <p>Lorem ipsum</p>
+</section>
+
+ +
+ Source: modules/_longform.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-landings-quotes.html b/doc/styleguide/item-landings-quotes.html new file mode 100644 index 0000000..3360dbb --- /dev/null +++ b/doc/styleguide/item-landings-quotes.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Quotes + +

+ + +
+ +
+
+ Example +
+ + +
+
+

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

+
+
+
+ +
+ +
+ + Markup + + 
<blockquote>
+  <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
+</blockquote>
+
+ +
+ Source: modules/_quotes.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-landings-toc.html b/doc/styleguide/item-landings-toc.html new file mode 100644 index 0000000..98e6e3a --- /dev/null +++ b/doc/styleguide/item-landings-toc.html @@ -0,0 +1,182 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Table of contents + +

+ + +
+ +
+
+ Example +
+ + +
+
+
    +
  1. + + Prologue: Learning to See + 01 + +
    2. +
  2. What is Design? + 04 +
    3. +
  3. + What is Beauty? + 08 +
      +
    1. Harmony + 12 +
      2. +
    2. Simplicity vs. Clarity + 14 +
      3. +
    +
    4. +
+
+
+
+ +
+ +
+ + Markup + + 
<div class="toc">
+  <ol>
+    <li>
+      <a href="#" title="Go to Learning to see">
+      <span class="chapter">Prologue: Learning to See</span>
+      <span class="toc-page">01</span>
+      </a>
+    </li>
+    <li><a href="#" title="Go to What is Design?"><span class="chapter">What is Design?</span>
+      <span class="toc-page">04</span></a>
+    </li>
+    <li>
+      <a href="#" title="Go to What is Beauty?"><span class="chapter">What is Beauty?</span>
+      <span class="toc-page">08</span></a>
+      <ol>
+        <li><a href="#" title="Go to Harmony"><span class="chapter">Harmony</span>
+          <span class="toc-page">12</span></a>
+        </li>
+        <li><a href="#" title="Go to Simplicity vs. Clarity"><span class="chapter">Simplicity vs. Clarity</span>
+          <span class="toc-page">14</span></a>
+        </li>
+      </ol>
+    </li>
+  </ol>
+</div>
+
+ +
+ Source: modules/_toc.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-landings.html b/doc/styleguide/item-landings.html new file mode 100644 index 0000000..00a7ee3 --- /dev/null +++ b/doc/styleguide/item-landings.html @@ -0,0 +1,149 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Landings + +

+ + +
+ + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-avatars.html b/doc/styleguide/item-media-avatars.html new file mode 100644 index 0000000..a955e88 --- /dev/null +++ b/doc/styleguide/item-media-avatars.html @@ -0,0 +1,148 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Avatars + +

+ +
+

You'll love this

+ +
+ +
+ +
+
+ Example +
+ + +
+ + + + + + +
+
+ +
+ +
+ + Markup + + 
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
+
+ +
+ Source: modules/_avatars.scss, line 5 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-background-anim.html b/doc/styleguide/item-media-background-anim.html new file mode 100644 index 0000000..e4d1c94 --- /dev/null +++ b/doc/styleguide/item-media-background-anim.html @@ -0,0 +1,138 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Animated + +

+ + +
+ +
+
+ Example +
+ + +
+
+ +
+
+
+ +
+ +
+ + Markup + + 
<section class="aligncenter bg-black">
+  <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+</section>
+
+ +
+ Source: modules/_slides-bg.scss, line 140 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-background-video.html b/doc/styleguide/item-media-background-video.html new file mode 100644 index 0000000..078a0d6 --- /dev/null +++ b/doc/styleguide/item-media-background-video.html @@ -0,0 +1,150 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Video + +

+ + +
+ +
+
+ Example +
+ + +
+
+ +
+

.background-video

+

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

+
+
+
+
+ +
+ +
+ + Markup + + 
<section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
+
+ +
+ Source: modules/_slides-bg.scss, line 92 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-background.html b/doc/styleguide/item-media-background.html new file mode 100644 index 0000000..764e9bf --- /dev/null +++ b/doc/styleguide/item-media-background.html @@ -0,0 +1,112 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Media.Background + +

+ + +
+ + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-badgets.html b/doc/styleguide/item-media-badgets.html new file mode 100644 index 0000000..d9e0dd7 --- /dev/null +++ b/doc/styleguide/item-media-badgets.html @@ -0,0 +1,140 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Badges + +

+ +
+

App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...

+ +
+ +
+ +
+
+ Example +
+ + +
+

Google Play

+

App Store

+
+
+ +
+ +
+ + Markup + + 
<p class="badge-android">Google Play</p>
+<p class="badge-ios">App Store</p>
+
+ +
+ Source: modules/_badges.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html new file mode 100644 index 0000000..08a7009 --- /dev/null +++ b/doc/styleguide/item-media-embed.html @@ -0,0 +1,146 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Embed + +

+ +
+

Responsive Media (videos, iframe...)

+ +
+ +
+ +
+
+ Example +
+ + +
+
+ +
+
+
+ +
+ +
+ + Markup + + 
<div class="embed">
+  <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+    <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+  </video>
+</div>
+
+ +
+ Source: modules/_media.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-fullscreen-embed.html b/doc/styleguide/item-media-fullscreen-embed.html new file mode 100644 index 0000000..d0df9cb --- /dev/null +++ b/doc/styleguide/item-media-fullscreen-embed.html @@ -0,0 +1,151 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Fullscreen + +

+ +
+

Responsive background video +https://fvsch.com/code/video-background/

+ +
+ +
+ +
+
+ Example +
+ + +
+
+
+ +
+
+
+
+ +
+ +
+ + Markup + + 
<div class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+    </video>
+  </div>
+</div>
+
+ +
+ Source: modules/_media.scss, line 35 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-fullscreen.html b/doc/styleguide/item-media-fullscreen.html new file mode 100644 index 0000000..5276cca --- /dev/null +++ b/doc/styleguide/item-media-fullscreen.html @@ -0,0 +1,112 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Media.Fullscreen + +

+ + +
+ + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-screenshots.html b/doc/styleguide/item-media-screenshots.html new file mode 100644 index 0000000..4ada1f7 --- /dev/null +++ b/doc/styleguide/item-media-screenshots.html @@ -0,0 +1,144 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Screenshots + +

+ +
+

HTML browser

+ +
+ +
+ +
+
+ Example +
+ + +
+
+ +
Foddie
+
+
+
+ +
+ +
+ + Markup + + 
<figure class="browser">
+  <img src="http://lorempixel.com/500/500/food/" />
+  <figcaption>Foddie</figcaption>
+</figure>
+
+ +
+ Source: modules/_browser.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media.html b/doc/styleguide/item-media.html new file mode 100644 index 0000000..d5abe62 --- /dev/null +++ b/doc/styleguide/item-media.html @@ -0,0 +1,159 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Media + +

+ + +
+ + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/kss-assets/WARNING.txt b/doc/styleguide/kss-assets/WARNING.txt new file mode 100644 index 0000000..644e75e --- /dev/null +++ b/doc/styleguide/kss-assets/WARNING.txt @@ -0,0 +1,2 @@ +WARNING: This folder is deleted and re-recreated each time the style guide is +built. Do NOT put your own files in this folder. diff --git a/doc/styleguide/kss-assets/github-fork--black.png b/doc/styleguide/kss-assets/github-fork--black.png new file mode 100644 index 0000000..146ef8a Binary files /dev/null and b/doc/styleguide/kss-assets/github-fork--black.png differ diff --git a/doc/styleguide/kss-assets/kss-fullscreen.js b/doc/styleguide/kss-assets/kss-fullscreen.js new file mode 100644 index 0000000..ca932d0 --- /dev/null +++ b/doc/styleguide/kss-assets/kss-fullscreen.js @@ -0,0 +1,59 @@ +(function (window, document) { + 'use strict'; + + // Set the configuration values on object creation. + // - idPrefix: The string that uniquely prefixes the ID of all elements that + // can receive the fullscreen focus. + // - bodyClass: The class that is set on the body element when the fullscreen + // mode is toggled on. + // - elementClass: the class that is set on the element that is receiving the + // fullscreen focus. + var KssFullScreen = function (config) { + this.idPrefix = config.idPrefix || 'kss-fullscreen-'; + this.bodyClass = config.bodyClass || 'kss-fullscreen-mode'; + this.elementClass = config.elementClass || 'is-fullscreen'; + + this.init(); + }; + + // Initialize the page to see if the fullscreen mode should be immediately + // turned on. + KssFullScreen.prototype.init = function () { + // Check the location hash to see if it matches the idPrefix. + if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) { + this.setFocus(window.location.hash.slice(1 + this.idPrefix.length)); + } + + var self = this; + // Initialize all fullscreen toggle buttons. + document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) { + // Get the section reference from the data attribute. + button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen); + }); + }; + + // Activation function that takes the ID of the element that will receive + // fullscreen focus. + KssFullScreen.prototype.setFocus = function (id) { + var el; + + // Find the element with the given ID and start fullscreen mode. + if (el = document.getElementById(id)) { + el.classList.toggle('is-fullscreen'); + document.body.classList.toggle('kss-fullscreen-mode'); + + // When enabling the focus mode, change the location hash. + if (el.classList.contains('is-fullscreen')) { + window.location.hash = '#' + this.idPrefix + id; + // Don't follow the link location. + return false; + } + } + + return true; + }; + + // Export to DOM global space. + window.KssFullScreen = KssFullScreen; + +})(window, document); diff --git a/doc/styleguide/kss-assets/kss-guides.js b/doc/styleguide/kss-assets/kss-guides.js new file mode 100644 index 0000000..4806ca4 --- /dev/null +++ b/doc/styleguide/kss-assets/kss-guides.js @@ -0,0 +1,26 @@ +(function (window, document) { + 'use strict'; + + var KssGuides = function (config) { + this.bodyClass = config.bodyClass || 'kss-guides-mode'; + + this.init(); + }; + + KssGuides.prototype.init = function () { + var self = this; + // Initialize all guides toggle buttons. + document.querySelectorAll('a[data-kss-guides]').forEach(function (el) { + el.onclick = self.showGuides.bind(self); + }); + }; + + // Toggle the guides mode. + KssGuides.prototype.showGuides = function () { + document.getElementsByTagName('body')[0].classList.toggle(this.bodyClass); + }; + + // Export to DOM global space. + window.KssGuides = KssGuides; + +})(window, document); diff --git a/doc/styleguide/kss-assets/kss-markup.js b/doc/styleguide/kss-assets/kss-markup.js new file mode 100644 index 0000000..6e11ff6 --- /dev/null +++ b/doc/styleguide/kss-assets/kss-markup.js @@ -0,0 +1,40 @@ +(function (window, document) { + 'use strict'; + + var KssMarkup = function (config) { + this.bodyClass = config.bodyClass || 'kss-markup-mode'; + this.detailsClass = config.detailsClass || 'kss-markup'; + + this.init(); + }; + + KssMarkup.prototype.init = function () { + var self = this; + // Initialize all markup toggle buttons. + document.querySelectorAll('a[data-kss-markup]').forEach(function (el) { + el.onclick = self.showGuides.bind(self); + }); + }; + + // Activation function that takes the ID of the element that will receive + // fullscreen focus. + KssMarkup.prototype.showGuides = function () { + var body = document.getElementsByTagName('body')[0], + enabled = body.classList.contains(this.bodyClass); + + document.querySelectorAll('.' + this.detailsClass).forEach(function (el) { + if (enabled) { + el.removeAttribute('open'); + } else { + el.setAttribute('open', ''); + } + }); + + // Toggle the markup mode. + body.classList.toggle(this.bodyClass); + }; + + // Export to DOM global space. + window.KssMarkup = KssMarkup; + +})(window, document); diff --git a/doc/styleguide/kss-assets/kss.css b/doc/styleguide/kss-assets/kss.css new file mode 100644 index 0000000..3934373 --- /dev/null +++ b/doc/styleguide/kss-assets/kss.css @@ -0,0 +1,605 @@ +[class*='kss-'] { + font-family: 'San Francisco'; } + +.kss-style { + color: #60676f; + font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; + font-size: 16px; + line-height: 24px; } + .kss-style a { + color: #d1783e; + text-decoration: none; + transition-duration: .5s; + transition-property: color; } + .kss-style a:visited { + color: #d1783e; } + .kss-style a:focus { + color: #e5b290; } + .kss-style a:active, .kss-style a:hover { + color: #d1783e; } + .kss-style a:hover, .kss-style a:active { + outline: 0; } + .kss-style a.kss-nav__menu-link { + color: #2e3337; + font-size: 1.3rem; + font-weight: 900; } + .kss-style a.kss-nav__menu-link-active { + color: #93cdcf; } + .kss-style p { + margin: 12px 0 24px; } + .kss-style h1, + .kss-style h2, + .kss-style h3, + .kss-style h4, + .kss-style h5, + .kss-style h6 { + color: #111; + font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; + font-weight: 900; + line-height: 1.15em; + margin: 24px 0 0; } + .kss-style h4, + .kss-style h5, + .kss-style h6 { + font-weight: bold; } + .kss-style h1::before, + .kss-style h2::before { + color: #e2e3e5; + font-size: 17.6px; + position: absolute; } + .kss-style h1::after, + .kss-style h2::after { + border-bottom: 1px solid #f4f3f8; + content: ''; + display: block; + height: 2.4rem; + margin-left: -90px; + width: 74vw; } + .kss-style h1 { + font-size: 40px; } + .kss-style h1::before { + content: ' #'; + margin-left: -20px; } + .kss-style h2 { + font-size: 32px; } + .kss-style h2::before { + content: '##'; + margin-left: -30px; } + .kss-style h3 { + font-size: 34px; } + .kss-style h4 { + font-size: 32px; } + .kss-style h5 { + font-size: 30px; } + .kss-style h6 { + font-size: 28px; } + .kss-style blockquote { + border-left: 0.5em #e6e6e6 solid; + color: #999; + margin: 0; + padding-left: 24px; } + .kss-style hr { + border: 0; + border-bottom: 1px solid #e6e6e6; + border-top: 1px solid white; + display: block; + height: 2px; + margin: 24px 0; + padding: 0; } + .kss-style pre, + .kss-style code, + .kss-style kbd, + .kss-style samp { + color: #393c40; + font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace; + font-size: 1em; } + .kss-style pre { + overflow: scroll; + white-space: pre; } + .kss-style ins { + background: #ff9; + color: #111; + text-decoration: none; } + .kss-style mark { + background: #ff0; + color: #111; + font-weight: bold; } + .kss-style sub, + .kss-style sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + .kss-style sup { + top: -.5em; } + .kss-style sub { + bottom: -.25em; } + .kss-style ul, + .kss-style ol { + margin: 24px 0; + padding: 0 0 0 24px; } + .kss-style li p:last-child { + margin: 0; } + .kss-style dd { + margin: 0 0 0 24px; } + .kss-style img { + border: 0; + max-width: 100%; + vertical-align: middle; } + .kss-style table { + border-collapse: collapse; + border-spacing: 0; } + .kss-style td { + vertical-align: top; } + @media print { + .kss-style a, + .kss-style a:visited { + text-decoration: underline; } + .kss-style hr { + border: 0; + border-bottom: 1px solid #000; + height: 1px; } + .kss-style a[href]:after { + content: " (" attr(href) ")"; } + .kss-style a[href^='javascript:']:after, + .kss-style a[href^='#']:after { + content: ''; } + .kss-style abbr[title]:after { + content: " (" attr(title) ")"; } + .kss-style pre, + .kss-style blockquote { + border: 1px solid #999; + padding-right: 1em; + page-break-inside: avoid; } + .kss-style tr, + .kss-style img { + page-break-inside: avoid; } + .kss-style img { + max-width: 100%; } + .kss-style p, + .kss-style h2, + .kss-style h3 { + orphans: 3; + widows: 3; } + .kss-style h2, + .kss-style h3 { + page-break-after: avoid; } } + +#kss-node { + background: #fff; + margin: 0; + padding: 20px; + /* SPAN elements with the classes below are added by prettyprint. */ + /* Specify class=linenums on a pre to get line numbering */ } + #kss-node.kss-fullscreen-mode .kss-sidebar, + #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen), + #kss-node.kss-fullscreen-mode .kss-github { + display: none; } + @media screen and (min-width: 769px) { + #kss-node { + padding: 0; } + #kss-node .kss-main, + #kss-node .kss-sidebar { + border: 0; + border-right: 1px solid #e2e3e5; + box-sizing: border-box; } } + @media screen and (min-width: 769px) { + #kss-node .kss-main { + padding: 140px 90px; } } + #kss-node .kss-sidebar { + border-right: 1px solid #e2e3e5; } + @media screen and (min-width: 769px) { + #kss-node .kss-sidebar { + border-bottom: 0; + padding: 150px 10px 0 20px; } } + #kss-node .kss-doc-title { + margin: 0; } + #kss-node .kss-doc-title img { + max-width: 40px; + vertical-align: middle; } + @media screen and (min-width: 769px) { + #kss-node .kss-doc-title { + font-size: 1.5em; } } + #kss-node .kss-nav { + position: relative; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav { + margin-top: 2em; } } + #kss-node .kss-nav ul, + #kss-node .kss-nav ol, + #kss-node .kss-nav li { + display: block; + float: none; } + #kss-node .kss-nav li { + margin-left: 3.2rem; } + #kss-node .kss-nav .kss-nav-has-children > a::before { + content: url("./images/down_arrow.svg"); } + #kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before { + content: url("./images/up_arrow.svg"); } + #kss-node .kss-nav__menu { + list-style-type: none; + margin-bottom: 12px; + margin-top: 12px; + padding: 0; } + #kss-node .kss-nav__menu-item { + display: inline-block; + padding-right: 24px; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-item { + display: list-item; + padding-right: 0; } } + #kss-node .kss-nav__menu-link { + display: inline-block; + position: relative; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-link:before { + background-color: transparent; + content: ' '; + height: 100%; + left: -20px; + position: absolute; + width: 0; } } + #kss-node .kss-nav__menu-child { + display: none; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-child { + display: block; + list-style-type: none; + margin: 0; + padding: 0; } + #kss-node .kss-nav__menu-child li { + padding: 15px 0 0; } + #kss-node .kss-nav__menu-child li:last-child { + padding: 15px 0; } } + #kss-node .kss-nav__ref { + color: #6a737a; } + #kss-node .kss-nav__ref:after { + content: ' '; } + #kss-node .kss-nav__ref-child { + font-weight: normal; } + #kss-node .kss-section { + padding-bottom: 2.4rem; + padding-top: 2.4rem; } + #kss-node .kss-section.is-fullscreen { + bottom: 0; + box-sizing: border-box; + height: 100%; + left: 0; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + object-fit: contain; + overflow: auto; + padding: 20px; + position: fixed; + right: 0; + top: 0; + transform: none; + width: 100%; } + #kss-node .kss-title { + margin-bottom: 0; } + #kss-node .is-fullscreen .kss-title { + margin-top: 0; } + #kss-node .kss-title__ref { + color: #333; + display: block; + font-size: 16px; + line-height: 16px; } + #kss-node .kss-title__ref:before { + content: 'Section '; } + #kss-node .kss-title__permalink { + color: #000; + display: block; + text-decoration: none; } + #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active { + color: #d1783e; } + @media screen and (min-width: 607px) { + #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash { + display: inline; } } + #kss-node .kss-title__permalink-hash { + color: #999; + display: none; } + #kss-node .kss-toolbar { + display: inline-block; + line-height: 1; + margin: 6px 0 24px; + padding: 3px; } + #kss-node .kss-toolbar a { + box-sizing: content-box; + display: inline-block; + height: 16px; + overflow: visible; + padding: 3px; + position: relative; + vertical-align: top; + width: 16px; } + #kss-node .kss-toolbar a + a { + margin-left: 6px; } + #kss-node .kss-toolbar a .kss-toolbar__icon-fill { + fill: #999; } + #kss-node .kss-toolbar a svg.on { + display: none; } + #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover { + border-color: #000; } + #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill { + fill: #000; } + #kss-node .kss-toolbar__tooltip { + background: #fff; + border: solid 1px #999; + bottom: 100%; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + clip: rect(1px, 1px, 1px, 1px); + color: #000; + cursor: help; + display: inline-block; + height: 1px; + left: -10px; + margin-bottom: 5px; + opacity: 0; + overflow: hidden; + padding: 8px 10px 6px; + position: absolute; + transition: opacity .25s; + white-space: nowrap; + width: 1px; + word-wrap: normal; + z-index: 1; } + #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after { + border-color: #999 transparent; + border-style: solid; + border-width: 7px 5px 0; + bottom: -8px; + content: ''; + height: 0; + left: 15px; + position: absolute; + width: 0; } + #kss-node .kss-toolbar__tooltip:after { + border-top-color: #fff; + bottom: -6px; } + #kss-node a:focus > .kss-toolbar__tooltip, + #kss-node a:hover > .kss-toolbar__tooltip { + clip: auto; + height: auto; + opacity: 1; + overflow: visible; + width: auto; } + #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen], + #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides], + #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] { + background-color: #999; + border-color: #999; } + #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill, + #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill, + #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill { + fill: #fff; } + #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on, + #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on, + #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on { + display: block; } + #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off, + #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off, + #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off { + display: none; } + #kss-node .kss-parameters { + display: table; + list-style-type: none; + margin-left: 0; + margin-top: 0; + padding-left: 0; } + #kss-node .kss-parameters__title { + font-weight: bold; } + #kss-node .kss-parameters__item { + display: table-row; } + #kss-node .kss-parameters__name { + display: table-cell; + padding-right: 20px; + white-space: nowrap; } + #kss-node .kss-parameters__description { + display: table-cell; } + #kss-node .kss-parameters__default-value code { + white-space: nowrap; } + #kss-node .is-fullscreen .kss-modifier__wrapper { + border: 0; + margin-left: -20px; + margin-right: -20px; + padding-left: 0; + padding-right: 0; } + #kss-node .kss-modifier__heading { + margin: 2.4rem 0; + padding: 1.2rem 0; } + #kss-node .kss-modifier__heading::after { + border-bottom: 4px solid #f3f3f5; + content: ''; + display: block; + padding-top: 1.2rem; + width: 40%; } + #kss-node .is-fullscreen .kss-modifier__heading { + border: 1px solid #999; + margin: 0 20px 10px; } + #kss-node .kss-modifier__default-name { + font-weight: bold; + margin-bottom: 12px; } + #kss-node .is-fullscreen .kss-modifier__default-name { + margin-left: 20px; + margin-right: 20px; } + #kss-node .kss-modifier__name { + float: left; + font-weight: bold; + padding-right: 10px; } + #kss-node .is-fullscreen .kss-modifier__name { + margin-left: 20px; } + #kss-node .kss-modifier__description { + margin-bottom: 12px; } + #kss-node .is-fullscreen .kss-modifier__description { + margin-right: 20px; } + #kss-node .kss-modifier__example { + border: 2px dashed transparent; + clear: left; + margin: -2px -2px 22px; + position: relative; + z-index: 0; } + #kss-node .kss-modifier__example:last-child { + margin-bottom: 0; } + #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after, + #kss-node.kss-guides-mode .kss-modifier__example-footer:before, + #kss-node.kss-guides-mode .kss-modifier__example-footer:after { + border: 2px solid #000; + box-sizing: border-box; + content: ''; + height: 5px; + position: absolute; + width: 5px; + z-index: -1; } + #kss-node.kss-guides-mode .kss-modifier__example { + border-color: #000; } + #kss-node.kss-guides-mode .kss-modifier__example:before { + border-left: 0; + border-top: 0; + left: -5px; + top: -5px; } + #kss-node.kss-guides-mode .kss-modifier__example:after { + border-right: 0; + border-top: 0; + right: -5px; + top: -5px; } + #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before { + left: auto; + right: 0; } + #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after { + left: 0; + right: auto; } + #kss-node .kss-modifier__example-footer { + clear: both; } + #kss-node.kss-guides-mode .kss-modifier__example-footer:before { + border-bottom: 0; + border-left: 0; + bottom: -5px; + left: -5px; } + #kss-node.kss-guides-mode .kss-modifier__example-footer:after { + border-bottom: 0; + border-right: 0; + bottom: -5px; + right: -5px; } + #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before { + left: auto; + right: 0; } + #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after { + left: 0; + right: auto; } + #kss-node .kss-markup { + border: 1px solid #e0e4e7; + border-radius: 3px; + margin: 24px 0; + padding: 20px; } + #kss-node .kss-markup[open] summary { + background: url("./images/up_arrow.svg") no-repeat right center; } + #kss-node .kss-markup summary { + background: url("./images/down_arrow.svg") no-repeat right center; + cursor: pointer; } + #kss-node .kss-markup pre { + background: #1d1f20; + overflow: auto; + padding: 20px; } + #kss-node .kss-markup pre code { + background: transparent; } + #kss-node .kss-source { + font-size: 70%; + font-style: italic; } + #kss-node .kss-github { + display: none; } + @media screen and (min-width: 501px) { + #kss-node .kss-github { + display: block; + position: absolute; + right: 0; + top: 0; } } + #kss-node .kss-github img { + border: 0; } + #kss-node .tag { + color: #a7925a; } + #kss-node .atn { + color: #ddca7e; } + #kss-node .pun { + color: #fff; } + #kss-node .atv { + color: #96b38a; } + #kss-node .pln { + color: #fff; } + #kss-node ol.linenums { + list-style-type: none; + margin: 0; + padding: 0; } + #kss-node ol.linenums li { + line-height: 2rem; + margin: 0; + min-height: 24px; + padding: 0 10px; } + +.kss-container { + display: grid; + grid-template-columns: 25% 75%; } + +.kss-header { + background-color: #2f3742; + display: flex; + padding: 0 2.4rem; + position: fixed; } + .kss-header h1, + .kss-header li a { + color: #fff; + display: inline-block; + font-family: 'San Francisco'; + font-size: .8em; + font-weight: bold; + line-height: 7.2rem; + padding: 0; } + .kss-header li a:hover { + color: #93cdcf; } + .kss-header .kss-menu-active { + border-bottom: 4px solid #93cdcf; + box-sizing: border-box; + color: #93cdcf; } + +.kss-sub-header { + background: #f3f3f5; + border-bottom: 4px solid #e7e7e9; + font-size: 14px; + padding: 1rem 2.4rem; + position: fixed; + top: 72px; + width: 100%; + z-index: 1; } + +#kssref-layout-radius .radius { + padding: 2.4rem; } + +#kssref-base-backgrounds span[class*='bg'] { + display: inline-block; + margin-left: -4px; + padding: 1.2rem; } + +#kssref-base-backgrounds-transparent div[class*='bg'] { + margin: 0; + padding: 2rem; } + #kssref-base-backgrounds-transparent div[class*='bg'] > div[class*='bg'] { + margin: 3rem; + padding: 6rem; } + +#kssref-base-backgrounds-gradient div[class*='bg'] { + margin: 3rem; + padding: 4rem; } + +#kssref-slide-background-anim .slide { + clip: rect(0, 200px, 200px, 0); + position: absolute; } + +#kssref-slide-background-anim .kss-modifier__example { + height: 200px; + margin: 0 auto; + width: 200px; } + +.kss-description p { + padding-bottom: 1.2rem; } diff --git a/doc/styleguide/kss-assets/kss.js b/doc/styleguide/kss-assets/kss.js new file mode 100644 index 0000000..9523bf2 --- /dev/null +++ b/doc/styleguide/kss-assets/kss.js @@ -0,0 +1,53 @@ +(function() { + var KssStateGenerator; + + KssStateGenerator = (function() { + var pseudo_selectors; + + pseudo_selectors = ['hover', 'enabled', 'disabled', 'active', 'visited', 'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type', 'first-child', 'last-child']; + + function KssStateGenerator() { + var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2; + pseudos = new RegExp("(\\:" + (pseudo_selectors.join('|\\:')) + ")", "g"); + try { + _ref = document.styleSheets; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + stylesheet = _ref[_i]; + if (stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0) { + idxs = []; + _ref2 = stylesheet.cssRules; + for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) { + rule = _ref2[idx]; + if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) { + replaceRule = function(matched, stuff) { + return matched.replace(/\:/g, '.pseudo-class-'); + }; + this.insertRule(rule.cssText.replace(pseudos, replaceRule)); + } + pseudos.lastIndex = 0; + } + } + } + } catch (_error) {} + } + + KssStateGenerator.prototype.insertRule = function(rule) { + var headEl, styleEl; + headEl = document.getElementsByTagName('head')[0]; + styleEl = document.createElement('style'); + styleEl.type = 'text/css'; + if (styleEl.styleSheet) { + styleEl.styleSheet.cssText = rule; + } else { + styleEl.appendChild(document.createTextNode(rule)); + } + return headEl.appendChild(styleEl); + }; + + return KssStateGenerator; + + })(); + + new KssStateGenerator; + +}).call(this); diff --git a/doc/styleguide/kss-assets/kss.scss b/doc/styleguide/kss-assets/kss.scss new file mode 100644 index 0000000..1453c41 --- /dev/null +++ b/doc/styleguide/kss-assets/kss.scss @@ -0,0 +1,970 @@ +// ------------------------------------------------------------------------------ +// Variables - Colors, Fonts, etc. +// ------------------------------------------------------------------------------ +$kss-black: #000; +$kss-gray: #999; +$kss-white: #fff; +$kss-transparent: rgba(0, 0, 0, 0); +$kss-dark-gray: #333; +$kss-shadow: rgba(0, 0, 0, .25); + +$kss-colors-header-bg: #2f3742; +$kss-colors-header-font: #fff; +$kss-colors-header-link-active: #93cdcf; +$kss-colors-subheader-bg: #f3f3f5; +$kss-colors-subheader-border: #e7e7e9; + +$kss-colors-background: $kss-white; +$kss-colors-border-sep: #e2e3e5; +$kss-colors-border-bottom-sep: #f4f3f8; + +$kss-colors-menu-link: #2e3337; +$kss-colors-menu-link-active: #93cdcf; +$kss-colors-submenu-link: #6a737a; + +$kss-colors-foreground: #60676f; +$kss-colors-heading: #111; +$kss-colors-heading-side: #e2e3e5; +$kss-colors-quotes: $kss-gray; + +$kss-colors-ins-bg: #ff9; +$kss-colors-mark-bg: #ff0; +$kss-colors-markup-border: #e0e4e7; +$kss-colors-markup-code: #1d1f20; + +$kss-colors-link: #d1783e; +$kss-colors-link-visited: #d1783e; +$kss-colors-link-hover: lighten($kss-colors-link, 20%); +$kss-colors-link-active: #d1783e; + +$kss-colors-tag: #a7925a; +$kss-colors-atn: #ddca7e; +$kss-colors-pun: #fff; +$kss-colors-atv: #96b38a; +$kss-colors-pln: #fff; + +$kss-font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif; +$kss-font-code: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace; + +$kss-font-size: 16px; +$kss-vertical-rhythm: $kss-font-size * 1.5; + +// ------------------------------------------------------------------------------ +// Wrap all of this builder's base HTML styling inside a .kss-style selector. +// ------------------------------------------------------------------------------ + +[class*='kss-'] { + font-family: 'San Francisco'; +} + +.kss-style { + color: $kss-colors-foreground; + font-family: $kss-font-body; + font-size: $kss-font-size; + line-height: $kss-vertical-rhythm; + + a { + color: $kss-colors-link; + text-decoration: none; + transition-duration: .5s; + transition-property: color; + + &:visited { color: $kss-colors-link-visited; } + &:focus { color: $kss-colors-link-hover; } + + &:active, + &:hover { + color: $kss-colors-link-active; + } + + &:hover, + &:active { + outline: 0; + } + + &.kss-nav__menu-link { + color: $kss-colors-menu-link; + font-size: 1.3rem; + font-weight: 900; + } + + &.kss-nav__menu-link-active { + color: $kss-colors-menu-link-active; + } + } + + p { + margin: ($kss-vertical-rhythm / 2) 0 $kss-vertical-rhythm; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $kss-colors-heading; + font-family: $kss-font-body; + font-weight: 900; + line-height: 1.15em; + margin: $kss-vertical-rhythm 0 0; + } + + h4, + h5, + h6 { + font-weight: bold; + } + + h1, + h2 { + &::before { + color: $kss-colors-heading-side; + font-size: $kss-font-size * 1.1; + position: absolute; + } + + &::after { + border-bottom: 1px solid $kss-colors-border-bottom-sep; + content: ''; + display: block; + height: 2.4rem; + margin-left: -90px; + width: 74vw; + } + } + + h1 { + font-size: $kss-font-size * 2.5; + + &::before { + content: ' #'; + margin-left: -20px; + } + } + + h2 { + font-size: $kss-font-size * 2; + + &::before { + content: '##'; + margin-left: -30px; + } + } + + h3 { font-size: $kss-font-size * 2.125; } + h4 { font-size: $kss-font-size * 2; } + h5 { font-size: $kss-font-size * 1.875; } + h6 { font-size: $kss-font-size * 1.75; } + + blockquote { + border-left: .5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid; + color: $kss-colors-quotes; + margin: 0; + padding-left: $kss-vertical-rhythm; + } + + hr { + border: 0; + border-bottom: 1px solid darken($kss-colors-background, 10%); + border-top: 1px solid lighten($kss-colors-foreground, 60%); + display: block; + height: 2px; + margin: $kss-vertical-rhythm 0; + padding: 0; + } + + pre, + code, + kbd, + samp { + color: mix($kss-colors-foreground, $kss-colors-heading, 50%); + font-family: $kss-font-code; + font-size: 1em; + } + + pre { + overflow: scroll; + white-space: pre; + } + + ins { + background: $kss-colors-ins-bg; + color: $kss-colors-heading; + text-decoration: none; + } + + mark { + background: $kss-colors-mark-bg; + color: $kss-colors-heading; + font-weight: bold; + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sup { top: -.5em; } + sub { bottom: -.25em; } + + ul, + ol { + margin: $kss-vertical-rhythm 0; + padding: 0 0 0 $kss-vertical-rhythm; + } + + li p:last-child { + margin: 0; + } + + dd { + margin: 0 0 0 $kss-vertical-rhythm; + } + + img { + border: 0; + max-width: 100%; + vertical-align: middle; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + td { + vertical-align: top; + } + + @media print { + a, + a:visited { + text-decoration: underline; + } + + hr { + border: 0; + border-bottom: 1px solid $kss-black; + height: 1px; + } + + a[href]:after { content: ' (' attr(href) ')'; } + + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; + } + + abbr[title]:after { content: ' (' attr(title) ')'; } + + pre, + blockquote { + border: 1px solid $kss-gray; + padding-right: 1em; + page-break-inside: avoid; + } + + tr, + img { + page-break-inside: avoid; + } + + img { max-width: 100%; } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + } +} + +// ------------------------------------------------------------------------------ +// Layout and page background +// ------------------------------------------------------------------------------ + +#kss-node { + background: $kss-white; + margin: 0; + padding: 20px; + + &.kss-fullscreen-mode { + .kss-sidebar, + .kss-section:not(.is-fullscreen), + .kss-github { + display: none; + } + } + + @media screen and (min-width: 769px) { + padding: 0; + + .kss-main, + .kss-sidebar { + border: 0; + border-right: 1px solid $kss-colors-border-sep; + box-sizing: border-box; + } + } + + .kss-main { + + @media screen and (min-width: 769px) { + padding: 140px 90px; + } + } + + .kss-sidebar { + border-right: 1px solid $kss-colors-border-sep; + + @media screen and (min-width: 769px) { + border-bottom: 0; + padding: 150px 10px 0 20px; + } + } + + .kss-doc-title { + margin: 0; + + img { + max-width: 40px; + vertical-align: middle; + } + + @media screen and (min-width: 769px) { + font-size: 1.5em; + } + } + + .kss-nav { + position: relative; + + @media screen and (min-width: 769px) { + margin-top: 2em; + } + + & ul, + & ol, + & li { + display: block; + float: none; + } + + & li { + margin-left: 3.2rem; + } + + .kss-nav-has-children > a::before { + content: url('./images/down_arrow.svg'); + } + + .kss-nav-has-children > a.kss-nav__menu-link-active::before { + content: url('./images/up_arrow.svg'); + } + } + + .kss-nav__menu { + list-style-type: none; + margin-bottom: ($kss-vertical-rhythm / 2); + margin-top: ($kss-vertical-rhythm / 2); + padding: 0; + } + + .kss-nav__menu-item { + display: inline-block; + padding-right: $kss-vertical-rhythm; + + @media screen and (min-width: 769px) { + display: list-item; + padding-right: 0; + } + } + + .kss-nav__menu-link { + display: inline-block; + position: relative; + + &:before { + @media screen and (min-width: 769px) { + background-color: $kss-transparent; + content: ' '; + height: 100%; + left: -20px; + position: absolute; + width: 0; + } + } + } + + .kss-nav__menu-child { + display: none; + + @media screen and (min-width: 769px) { + display: block; + list-style-type: none; + margin: 0; + padding: 0; + + li { + padding: 15px 0 0; + + &:last-child { + padding: 15px 0; + } + } + } + } + + .kss-nav__ref { + color: $kss-colors-submenu-link; + + &:after { + content: ' '; + } + } + + .kss-nav__ref-child { + font-weight: normal; + } + + // ------------------------------------------------------------------------------ + // Content-area components + // ------------------------------------------------------------------------------ + + .kss-section { + padding-bottom: 2.4rem; + padding-top: 2.4rem; + + // "fullscreen" styles copied from Mozilla's default stylesheet. + &.is-fullscreen { + bottom: 0; + box-sizing: border-box; + height: 100%; + left: 0; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + object-fit: contain; + // Turn on scrolling if needed. + overflow: auto; + padding: 20px; + position: fixed; + right: 0; + top: 0; + transform: none; + width: 100%; + } + } + + .kss-title { + margin-bottom: 0; + } + + .is-fullscreen .kss-title { + margin-top: 0; + } + + .kss-title__ref { + color: $kss-dark-gray; + display: block; + font-size: $kss-font-size; + line-height: $kss-font-size; + + &:before { + content: 'Section '; + } + } + + .kss-title__permalink { + color: $kss-black; + display: block; + text-decoration: none; + + &:hover, + &:focus, + &:active { + color: $kss-colors-link; + + @media screen and (min-width: 607px) { + .kss-title__permalink-hash { + display: inline; + } + } + } + } + + .kss-title__permalink-hash { + color: $kss-gray; + display: none; + } + + .kss-toolbar { + display: inline-block; + line-height: 1; + margin: 6px 0 24px; + padding: 3px; + + a { + box-sizing: content-box; + display: inline-block; + height: 16px; + overflow: visible; + padding: 3px; + position: relative; + vertical-align: top; + width: 16px; + + + a { + margin-left: 6px; + } + + .kss-toolbar__icon-fill { + fill: $kss-gray; + } + + svg.on { + display: none; + } + + &:focus, + &:hover { + border-color: $kss-black; + + .kss-toolbar__icon-fill { + fill: $kss-black; + } + } + } + } + + .kss-toolbar__tooltip { + background: $kss-white; + border: solid 1px $kss-gray; + bottom: 100%; + box-shadow: 2px 2px 2px $kss-shadow; + clip: rect(1px, 1px, 1px, 1px); + color: $kss-black; + cursor: help; + display: inline-block; + height: 1px; + left: -10px; + margin-bottom: 5px; + opacity: 0; + overflow: hidden; + padding: 8px 10px 6px; + position: absolute; + transition: opacity .25s; + white-space: nowrap; + width: 1px; + word-wrap: normal; + z-index: 1; + + // Solid grey triangle. + &:before, + &:after { + border-color: $kss-gray transparent; + border-style: solid; + border-width: 7px 5px 0; + bottom: -8px; + content: ''; + height: 0; + left: 15px; + position: absolute; + width: 0; + } + + // White triangle knock-out. + &:after { + border-top-color: $kss-white; + bottom: -6px; + } + } + + a:focus, + a:hover { + > .kss-toolbar__tooltip { + clip: auto; + height: auto; + opacity: 1; + overflow: visible; + width: auto; + } + } + + .is-fullscreen .kss-toolbar a[data-kss-fullscreen], + &.kss-guides-mode .kss-toolbar a[data-kss-guides], + &.kss-markup-mode .kss-toolbar a[data-kss-markup] { + background-color: $kss-gray; + border-color: $kss-gray; + + .kss-toolbar__icon-fill { + fill: $kss-white; + } + + svg.on { + display: block; + } + + svg.off { + display: none; + } + } + + .kss-parameters { + display: table; + list-style-type: none; + margin-left: 0; + margin-top: 0; + padding-left: 0; + } + + .kss-parameters__title { + font-weight: bold; + } + + .kss-parameters__item { + display: table-row; + } + + .kss-parameters__name { + display: table-cell; + padding-right: 20px; + white-space: nowrap; + } + + .kss-parameters__description { + display: table-cell; + } + + .kss-parameters__default-value code { + white-space: nowrap; + } + + .is-fullscreen .kss-modifier__wrapper { + border: 0; + margin-left: -20px; + margin-right: -20px; + padding-left: 0; + padding-right: 0; + } + + .kss-modifier__heading { + margin: 2.4rem 0; + padding: 1.2rem 0; + + &::after { + border-bottom: 4px solid $kss-colors-subheader-bg; + content: ''; + display: block; + padding-top: 1.2rem; + width: 40%; + } + } + + .is-fullscreen .kss-modifier__heading { + border: 1px solid $kss-gray; + margin: 0 20px 10px; + } + + .kss-modifier__default-name { + font-weight: bold; + margin-bottom: ($kss-vertical-rhythm / 2); + } + + .is-fullscreen .kss-modifier__default-name { + margin-left: 20px; + margin-right: 20px; + } + + .kss-modifier__name { + float: left; + font-weight: bold; + padding-right: 10px; + } + + .is-fullscreen .kss-modifier__name { + margin-left: 20px; + } + + .kss-modifier__description { + margin-bottom: ($kss-vertical-rhythm / 2); + } + + .is-fullscreen .kss-modifier__description { + margin-right: 20px; + } + + .kss-modifier__example { + border: 2px dashed transparent; + clear: left; + margin: -2px -2px ($kss-vertical-rhythm - 2px); + position: relative; // Contain the example's absolute positioning. + z-index: 0; // Establishes a local stacking context. + + &:last-child { + margin-bottom: 0; + } + } + + &.kss-guides-mode .kss-modifier__example, + &.kss-guides-mode .kss-modifier__example-footer { + &:before, + &:after { + border: 2px solid $kss-black; + box-sizing: border-box; + content: ''; + height: 5px; + position: absolute; + width: 5px; + z-index: -1; + } + } + + &.kss-guides-mode .kss-modifier__example { + border-color: $kss-black; + + &:before { + border-left: 0; + border-top: 0; + left: -5px; + top: -5px; + } + + &:after { + border-right: 0; + border-top: 0; + right: -5px; + top: -5px; + } + } + + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example { + &:before { + left: auto; + right: 0; + } + + &:after { + left: 0; + right: auto; + } + } + + .kss-modifier__example-footer { + clear: both; + } + + &.kss-guides-mode .kss-modifier__example-footer { + &:before { + border-bottom: 0; + border-left: 0; + bottom: -5px; + left: -5px; + } + + &:after { + border-bottom: 0; + border-right: 0; + bottom: -5px; + right: -5px; + } + } + + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer { + &:before { + left: auto; + right: 0; + } + + &:after { + left: 0; + right: auto; + } + } + + .kss-markup { + border: 1px solid $kss-colors-markup-border; + border-radius: 3px; + margin: 24px 0; + padding: 20px; + + &[open] summary { + background: url('./images/up_arrow.svg') no-repeat right center; + } + + & summary { + background: url('./images/down_arrow.svg') no-repeat right center; + cursor: pointer; + } + + pre { + background: $kss-colors-markup-code; + overflow: auto; + padding: 20px; + + code { + background: transparent; + } + } + } + + .kss-source { + font-size: 70%; + font-style: italic; + } + + .kss-github { + display: none; + + @media screen and (min-width: 501px) { + display: block; + position: absolute; + right: 0; + top: 0; + } + + img { + border: 0; + } + } + + // ------------------------------------------------------------------------------ + // prettify.js styles + // ------------------------------------------------------------------------------ + + /* SPAN elements with the classes below are added by prettyprint. */ + .tag { color: $kss-colors-tag; } + .atn { color: $kss-colors-atn; } + .pun { color: $kss-colors-pun; } + .atv { color: $kss-colors-atv; } + .pln { color: $kss-colors-pln; } + + + /* Specify class=linenums on a pre to get line numbering */ + ol.linenums { + list-style-type: none; + margin: 0; + padding: 0; + + li { + line-height: 2rem; + margin: 0; + min-height: $kss-vertical-rhythm; + padding: 0 10px; + } + } +} + +.kss-container { + display: grid; + grid-template-columns: 25% 75%; +} + +// ------------------------------------------------------------------------------ +// Sidebar-area components +// ------------------------------------------------------------------------------ +.kss-header { + background-color: $kss-colors-header-bg; + display: flex; + padding: 0 2.4rem; + position: fixed; + + h1, + li a { + color: $kss-colors-header-font; + display: inline-block; + font-family: 'San Francisco'; + font-size: .8em; + font-weight: bold; + line-height: 7.2rem; + padding: 0; + } + + li a:hover { + color: $kss-colors-header-link-active; + } + + .kss-menu-active { + border-bottom: 4px solid $kss-colors-header-link-active; + box-sizing: border-box; + color: $kss-colors-header-link-active; + } + +} + +.kss-sub-header { + background: $kss-colors-subheader-bg; + border-bottom: 4px solid $kss-colors-subheader-border; + font-size: 14px; + padding: 1rem 2.4rem; + position: fixed; + top: 72px; + width: 100%; + z-index: 1; +} + + +// WebSlides + +#kssref-layout-radius { + & .radius { + padding: 2.4rem; + } +} + +#kssref-base-backgrounds { + & span[class*='bg'] { + display: inline-block; + margin-left: -4px; + padding: 1.2rem; + } +} + +#kssref-base-backgrounds-transparent { + & div[class*='bg'] { + margin: 0; + padding: 2rem; + + & > div[class*='bg'] { + margin: 3rem; + padding: 6rem; + } + } +} + +#kssref-base-backgrounds-gradient { + & div[class*='bg'] { + margin: 3rem; + padding: 4rem; + } +} + +#kssref-slide-background-anim .slide { + clip: rect(0, 200px, 200px, 0); + position: absolute; +} + +#kssref-slide-background-anim .kss-modifier__example { + height: 200px; + margin: 0 auto; + width: 200px; +} + +.kss-description { + + p { + padding-bottom: 1.2rem; + } +} diff --git a/doc/styleguide/kss-assets/noise-low.png b/doc/styleguide/kss-assets/noise-low.png new file mode 100644 index 0000000..105bee1 Binary files /dev/null and b/doc/styleguide/kss-assets/noise-low.png differ diff --git a/doc/styleguide/kss-assets/prettify.js b/doc/styleguide/kss-assets/prettify.js new file mode 100644 index 0000000..f00339e --- /dev/null +++ b/doc/styleguide/kss-assets/prettify.js @@ -0,0 +1,1477 @@ +// Copyright (C) 2006 Google Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +/** + * @fileoverview + * some functions for browser-side pretty printing of code contained in html. + * + *

+ * For a fairly comprehensive set of languages see the + * README + * file that came with this source. At a minimum, the lexer should work on a + * number of languages including C and friends, Java, Python, Bash, SQL, HTML, + * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk + * and a subset of Perl, but, because of commenting conventions, doesn't work on + * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class. + *

+ * Usage:

    + *
  1. include this source file in an html page via + * {@code } + *
  2. define style rules. See the example page for examples. + *
  3. mark the {@code 
    } and {@code } tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code } tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," +
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,byte,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+
+      return parts.join('');
+    }
+
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+
+    walk(node);
+
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+
+    var document = node.ownerDocument;
+
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+
+    nDecorations = decorations.length = decPos;
+
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+
+      var end = Math.min(spanEnd, decEnd);
+
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+
+      sourceIndex = end;
+
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/doc/styleguide/kss-assets/sample-inline.png b/doc/styleguide/kss-assets/sample-inline.png
new file mode 100644
index 0000000..30494c6
Binary files /dev/null and b/doc/styleguide/kss-assets/sample-inline.png differ
diff --git a/doc/styleguide/kss-assets/sample-inline.svg b/doc/styleguide/kss-assets/sample-inline.svg
new file mode 100644
index 0000000..d581ae5
--- /dev/null
+++ b/doc/styleguide/kss-assets/sample-inline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+</svg>
diff --git a/doc/styleguide/kss-assets/sample.png b/doc/styleguide/kss-assets/sample.png
new file mode 100644
index 0000000..56a579d
Binary files /dev/null and b/doc/styleguide/kss-assets/sample.png differ
diff --git a/doc/styleguide/kss-assets/sample.svg b/doc/styleguide/kss-assets/sample.svg
new file mode 100644
index 0000000..878030b
--- /dev/null
+++ b/doc/styleguide/kss-assets/sample.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+</svg>
diff --git a/doc/styleguide/kss-assets/scrollspy.js b/doc/styleguide/kss-assets/scrollspy.js
new file mode 100644
index 0000000..0cff71f
--- /dev/null
+++ b/doc/styleguide/kss-assets/scrollspy.js
@@ -0,0 +1,147 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+function ScrollSpy (wrapper, opt) {
+
+  this.doc = document;
+  this.wrapper = (typeof wrapper === 'string') ? this.doc.querySelector(wrapper) : wrapper;
+  this.nav = this.wrapper.querySelectorAll(opt.nav);
+
+  this.contents = [];
+  this.win = window;
+
+  this.winH = this.win.innerHeight;
+
+  this.className = opt.className;
+
+  this.callback = opt.callback;
+
+  this.init();
+}
+
+ScrollSpy.prototype.init = function () {
+  this.contents = this.getContents();
+  this.attachEvent();
+};
+
+ScrollSpy.prototype.getContents = function () {
+  var targetList = [];
+
+  for (var i = 0, max = this.nav.length; i < max; i++) {
+    var href = this.nav[i].href;
+
+    targetList.push(this.doc.getElementById(href.split('#')[1]));
+  }
+
+  return targetList;
+};
+
+ScrollSpy.prototype.attachEvent = function () {
+  this.win.addEventListener('load', (function () {
+    this.spy(this.callback);
+  }).bind(this));
+
+
+  var scrollingTimer;
+
+  this.win.addEventListener('scroll', (function () {
+    if (scrollingTimer) {
+      clearTimeout(scrollingTimer);
+    }
+
+    var _this = this;
+
+    scrollingTimer = setTimeout(function () {
+      _this.spy(_this.callback);
+    }, 10);
+  }).bind(this));
+
+
+  var resizingTimer;
+
+  this.win.addEventListener('resize', (function () {
+    if (resizingTimer) {
+      clearTimeout(resizingTimer);
+    }
+
+    var _this = this;
+
+    resizingTimer = setTimeout(function () {
+      _this.spy(_this.callback);
+    }, 10);
+  }).bind(this));
+};
+
+ScrollSpy.prototype.spy = function (cb) {
+  var elems = this.getElemsViewState();
+
+  this.markNav(elems);
+
+  if (typeof cb === 'function') {
+    cb(elems);
+  }
+};
+
+ScrollSpy.prototype.getElemsViewState = function () {
+  var elemsInView = [],
+    elemsOutView = [],
+    viewStatusList = [];
+
+  for (var i = 0, max = this.contents.length; i < max; i++) {
+    var currentContent = this.contents[i],
+      isInView = this.isInView(currentContent);
+
+    if (isInView) {
+      elemsInView.push(currentContent);
+    } else {
+      elemsOutView.push(currentContent);
+    }
+    viewStatusList.push(isInView);
+  }
+
+  return {
+    inView: elemsInView,
+    outView: elemsOutView,
+    viewStatusList: viewStatusList
+  };
+};
+
+ScrollSpy.prototype.isInView = function (el) {
+  var winH = this.winH,
+    scrollTop = this.doc.documentElement.scrollTop || this.doc.body.scrollTop,
+    scrollBottom = scrollTop + winH,
+    rect = el.getBoundingClientRect(),
+    elTop = rect.top + scrollTop,
+    elBottom = elTop + el.offsetHeight;
+
+  return (elTop < scrollBottom) && (elBottom > scrollTop);
+};
+
+ScrollSpy.prototype.markNav = function (elems) {
+  var navItems = this.nav,
+    isAlreadyMarked = false;
+
+  for (var i = 0, max = navItems.length; i < max; i++) {
+    if (elems.viewStatusList[i] && !isAlreadyMarked) {
+      isAlreadyMarked = true;
+      navItems[i].classList.add(this.className);
+    } else {
+      navItems[i].classList.remove(this.className);
+    }
+  }
+};
+
+
+module.exports = ScrollSpy;
+
+},{}],2:[function(require,module,exports){
+(function (global){
+/**
+ * ScrollSpy
+ *
+ */
+
+var ScrollSpy = require('./modules/scrollspy');
+
+global.ScrollSpy = module.exports = ScrollSpy;
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./modules/scrollspy":1}]},{},[2]);
diff --git a/doc/styleguide/section-architecture.html b/doc/styleguide/section-architecture.html
new file mode 100644
index 0000000..795b046
--- /dev/null
+++ b/doc/styleguide/section-architecture.html
@@ -0,0 +1,2298 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
+        <li><a href="./" target="_blank">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-alignment">
+                    <span class="kss-nav__name">Align content</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-background">
+                    <span class="kss-nav__name">Backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-backgrounds">
+                    <span class="kss-nav__name">Architecture.backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-backgrounds">
+                    <span class="kss-nav__name">Backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-backgrounds-gradient">
+                    <span class="kss-nav__name">Backgrounds - Gradient</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-backgrounds-transparent">
+                    <span class="kss-nav__name">Backgrounds - Transparent</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-buttons">
+                    <span class="kss-nav__name">Buttons</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-columns">
+                    <span class="kss-nav__name">Columns</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-context">
+                    <span class="kss-nav__name">Context</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-data">
+                    <span class="kss-nav__name">Data</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-emoji">
+                    <span class="kss-nav__name">Emoji</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-forms">
+                    <span class="kss-nav__name">Architecture.Forms</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-forms-user">
+                    <span class="kss-nav__name">Login form</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-grid">
+                    <span class="kss-nav__name">Grid</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-info">
+                    <span class="kss-nav__name">Info Messages</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-interviews">
+                    <span class="kss-nav__name">Interviews</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-intro">
+                    <span class="kss-nav__name">Intro</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-label">
+                    <span class="kss-nav__name">Label</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-landings">
+                    <span class="kss-nav__name">Landings</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-lowercase">
+                    <span class="kss-nav__name">Lowercase</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-navigation">
+                    <span class="kss-nav__name">Navigation</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-navigation">
+                    <span class="kss-nav__name">Slides navigation</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-pull_quote">
+                    <span class="kss-nav__name">Pull Quote</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-radius">
+                    <span class="kss-nav__name">Radius</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-separator">
+                    <span class="kss-nav__name">Separator</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-serif">
+                    <span class="kss-nav__name">Serif</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-shadow">
+                    <span class="kss-nav__name">Shadows</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-sizes">
+                    <span class="kss-nav__name">Resizing</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-slides">
+                    <span class="kss-nav__name">fullscreen</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-slides">
+                    <span class="kss-nav__name">Slides</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-slides-bottom">
+                    <span class="kss-nav__name">Align bottom</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-slides-top">
+                    <span class="kss-nav__name">Align top</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-subtitle">
+                    <span class="kss-nav__name">Subtitule</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-symbols">
+                    <span class="kss-nav__name">Symbols</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-tables">
+                    <span class="kss-nav__name">Tables</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-try">
+                    <span class="kss-nav__name">Try</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-uppercase">
+                    <span class="kss-nav__name">Uppercase</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings.html">
+            <span class="kss-nav__name">Landings</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-architecture" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-architecture">
+              Architecture
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+      </div>
+      <div id="kssref-architecture-alignment" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-alignment">
+              Align content
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <div>
+  <img src="../../../static/images/iphone.png" class="size-50 " />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .alignright
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Align right.
+              </div>
+              <div class="kss-modifier__example">
+                <div>
+  <img src="../../../static/images/iphone.png" class="size-50 alignright" />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .alignleft
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Align left.
+              </div>
+              <div class="kss-modifier__example">
+                <div>
+  <img src="../../../static/images/iphone.png" class="size-50 alignleft" />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .aligncenter
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Align center.
+              </div>
+              <div class="kss-modifier__example">
+                <div>
+  <img src="../../../static/images/iphone.png" class="size-50 aligncenter" />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;size-50 [modifier class]&quot; /&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_base.scss</code>, line 143
+          </div>
+
+      </div>
+      <div id="kssref-architecture-background" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-background">
+              Backgrounds
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <section>
+  <span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .background
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 15
+          </div>
+
+      </div>
+      <div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds">
+              Architecture.backgrounds
+            </a>
+          </h2>
+
+
+        </div>
+
+
+
+      </div>
+      <div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds">
+              Backgrounds
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <span class="bg-primary size-20">Primary #44d</span>
+<span class="bg-secondary size-20">Secondary #67d</span>
+<span class="bg-light size-20">Light #f7f9fb</span>
+<span class="bg-black size-20">Black #000</span>
+<span class="bg-black-blue size-20">Black blue #123</span>
+<span class="bg-blue size-20">Blue #346</span>
+<span class="bg-brown size-20">Brown #f9f8f2</span>
+<span class="bg-gray size-20">Gray #d5d9e2</span>
+<span class="bg-green size-20">Green #077</span>
+<span class="bg-purple size-20">Purple #62b</span>
+<span class="bg-red size-20">Red #c23</span>
+<span class="bg-white size-20">White #fff</span>
+<span class="bg-facebook size-20">Facebook #3b5998</span>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary size-20&quot;&gt;Primary #44d&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-secondary size-20&quot;&gt;Secondary #67d&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-light size-20&quot;&gt;Light #f7f9fb&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-black size-20&quot;&gt;Black #000&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-black-blue size-20&quot;&gt;Black blue #123&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-blue size-20&quot;&gt;Blue #346&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-brown size-20&quot;&gt;Brown #f9f8f2&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-gray size-20&quot;&gt;Gray #d5d9e2&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-green size-20&quot;&gt;Green #077&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-purple size-20&quot;&gt;Purple #62b&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-red size-20&quot;&gt;Red #c23&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-white size-20&quot;&gt;White #fff&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-facebook size-20&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_color.scss</code>, line 107
+          </div>
+
+      </div>
+      <div id="kssref-architecture-backgrounds-gradient" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds-gradient">
+              Backgrounds - Gradient
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+                <div class="bg-gradient-h">Horizontal</div>
+  <div class="bg-gradient-v">Vertical</div>
+  <div class="bg-gradient-r">Radial</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">  &lt;div class&#x3D;&quot;bg-gradient-h&quot;&gt;Horizontal&lt;/div&gt;
+  &lt;div class&#x3D;&quot;bg-gradient-v&quot;&gt;Vertical&lt;/div&gt;
+  &lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_color.scss</code>, line 193
+          </div>
+
+      </div>
+      <div id="kssref-architecture-backgrounds-transparent" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds-transparent">
+              Backgrounds - Transparent
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="bg-red">
+  <div class="bg-trans-dark">Dark</div>
+  <div class="bg-trans-light">Light</div>
+  <div class="bg-trans-gradient">Gradient</div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-red&quot;&gt;
+  &lt;div class&#x3D;&quot;bg-trans-dark&quot;&gt;Dark&lt;/div&gt;
+  &lt;div class&#x3D;&quot;bg-trans-light&quot;&gt;Light&lt;/div&gt;
+  &lt;div class&#x3D;&quot;bg-trans-gradient&quot;&gt;Gradient&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_color.scss</code>, line 168
+          </div>
+
+      </div>
+      <div id="kssref-architecture-buttons" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-buttons">
+              Buttons
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <a href="#" class="button ">Download</a>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .radius
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Rounded corners
+              </div>
+              <div class="kss-modifier__example">
+                <a href="#" class="button radius">Download</a>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_button.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-architecture-columns" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-columns">
+              Columns
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Magazine Two Columns</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;text-cols&quot;&gt;&lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt; text&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Column 2&lt;/strong&gt; text&lt;/p&gt;&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 346
+          </div>
+
+      </div>
+      <div id="kssref-architecture-context" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-context">
+              Context
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Heading with border</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-context">Why WebSlides?</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-context&quot;&gt;Why WebSlides?&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 376
+          </div>
+
+      </div>
+      <div id="kssref-architecture-data" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-data">
+              Data
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Numbers (results, sales... )-</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-data">23,478,289</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-data&quot;&gt;23,478,289&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 314
+          </div>
+
+      </div>
+      <div id="kssref-architecture-emoji" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-emoji">
+              Emoji
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>You&#39;ll love this</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-emoji&quot;&gt;😀😁😂😅😉😋😎😍&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 296
+          </div>
+
+      </div>
+      <div id="kssref-architecture-forms" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-forms">
+              Architecture.Forms
+            </a>
+          </h2>
+
+
+        </div>
+
+
+
+      </div>
+      <div id="kssref-architecture-forms-user" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-architecture-forms-user">
+              Login form
+            </a>
+          </h3>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="user">
+  <input type="text" placeholder="Username" />
+  <button>Log in</button>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;user&quot;&gt;
+  &lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;Username&quot; /&gt;
+  &lt;button&gt;Log in&lt;/button&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_form.scss</code>, line 139
+          </div>
+
+      </div>
+      <div id="kssref-architecture-grid" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-grid">
+              Grid
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Basic Grid (Flexible blocks)
+Auto-fill &amp; Equal height</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <div class="grid ">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .vertical-align
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Vertical align
+              </div>
+              <div class="kss-modifier__example">
+                <div class="grid vertical-align">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+    &lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_grid.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-architecture-info" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-info">
+              Info Messages
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Error, warning, success...</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-info&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 546
+          </div>
+
+      </div>
+      <div id="kssref-architecture-interviews" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-interviews">
+              Interviews
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Questions &amp; Answers</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <dl class="text-interview">
+  <dt>Driftwood</dt>
+  <dd>
+    <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>No. It's no good.</p>
+  </dd>
+  <dt>Driftwood</dt>
+  <dd>
+    <p>What's the matter with it?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>I don't know, let's hear it again.</p>
+  </dd>
+</dl>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class&#x3D;&quot;text-interview&quot;&gt;
+  &lt;dt&gt;Driftwood&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;It says, &quot;The party of the first part shall be known in this contract as the party of the first part.&quot; How do you like that? That&#x27;s pretty neat, eh?&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Fiorello&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;No. It&#x27;s no good.&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Driftwood&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;What&#x27;s the matter with it?&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Fiorello&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;I don&#x27;t know, let&#x27;s hear it again.&lt;/p&gt;
+  &lt;/dd&gt;
+&lt;/dl&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 504
+          </div>
+
+      </div>
+      <div id="kssref-architecture-intro" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-intro">
+              Intro
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Typography Classes = .text-</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-intro">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-intro&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 206
+          </div>
+
+      </div>
+      <div id="kssref-architecture-label" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-label">
+              Label
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;&lt;span class&#x3D;&quot;text-label&quot;&gt;Website:&lt;/span&gt; &lt;a href&#x3D;&quot;#&quot;&gt;http://webslides.tv&lt;/a&gt;&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 333
+          </div>
+
+      </div>
+      <div id="kssref-architecture-landings" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-landings">
+              Landings
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>h1,h2... Promo/Landings</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <h1 class="text-landing">Landings</h1>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class&#x3D;&quot;text-landing&quot;&gt;Landings&lt;/h1&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 233
+          </div>
+
+      </div>
+      <div id="kssref-architecture-lowercase" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-lowercase">
+              Lowercase
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-lowercase">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-lowercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 286
+          </div>
+
+      </div>
+      <div id="kssref-architecture-navigation" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-navigation">
+              Navigation
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Responsive Media (videos, iframe...)</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .navbar
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Navigation bar
+              </div>
+              <div class="kss-modifier__example">
+                <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .aligncenter
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center alignment
+              </div>
+              <div class="kss-modifier__example">
+                <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .alignright
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right alignment
+              </div>
+              <div class="kss-modifier__example">
+                <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
+  &lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;→&lt;/a&gt;
+  &lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;←&lt;/a&gt;
+  &lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_navigation.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-architecture-navigation" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-navigation">
+              Slides navigation
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
+  &lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;→&lt;/a&gt;
+  &lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;←&lt;/a&gt;
+  &lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-navigation.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-architecture-pull_quote" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-pull_quote">
+              Pull Quote
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Pull Quote Right/Left</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
+<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
+&lt;p class&#x3D;&quot;text-pull-right&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;
+&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
+&lt;p class&#x3D;&quot;text-pull-left&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 449
+          </div>
+
+      </div>
+      <div id="kssref-architecture-radius" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-radius">
+              Radius
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Adds a rounded radis</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="bg-black radius">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-black radius&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_base.scss</code>, line 129
+          </div>
+
+      </div>
+      <div id="kssref-architecture-separator" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-separator">
+              Separator
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Stars <em> </em> *</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-separator">Separator</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-separator&quot;&gt;Separator&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 418
+          </div>
+
+      </div>
+      <div id="kssref-architecture-serif" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-serif">
+              Serif
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Maitree font</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-serif">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-serif&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 220
+          </div>
+
+      </div>
+      <div id="kssref-architecture-shadow" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-shadow">
+              Shadows
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Drops a shadow under the layer. The layer containing the shadow has to have a solid background</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="bg-white shadow">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-white shadow&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_base.scss</code>, line 73
+          </div>
+
+      </div>
+      <div id="kssref-architecture-sizes" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-sizes">
+              Resizing
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <img src="../../../static/images/iphone.png" class="" />
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .size-80
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 80%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-80" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-70
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 70%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-70" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-60
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 60%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-60" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-50
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 50%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-50" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-40
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 40%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-40" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-30
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 30%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-30" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-20
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 20%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-20" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;[modifier class]&quot; /&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_base.scss</code>, line 199
+          </div>
+
+      </div>
+      <div id="kssref-architecture-slides" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-slides">
+              fullscreen
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Slide with no padding (full card, .embed youtube video...)</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section>
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 43
+          </div>
+
+      </div>
+      <div id="kssref-architecture-slides" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-slides">
+              Slides
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Fullscreen. Vertically and horizontally centered.
+Fade transition to all slides.
+All HTML elements will have those styles</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section>
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-architecture-slides-bottom" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-architecture-slides-bottom">
+              Align bottom
+            </a>
+          </h3>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <section class="slide-bottom">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                Slide alignment
+              </div>
+              <div class="kss-modifier__description kss-style">
+                bottom
+              </div>
+              <div class="kss-modifier__example">
+                <section class="slide-bottom">
+  <p>Content</p>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-bottom&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 74
+          </div>
+
+      </div>
+      <div id="kssref-architecture-slides-top" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-architecture-slides-top">
+              Align top
+            </a>
+          </h3>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <section class="slide-top">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                Slide alignment
+              </div>
+              <div class="kss-modifier__description kss-style">
+                top
+              </div>
+              <div class="kss-modifier__example">
+                <section class="slide-top">
+  <p>Content</p>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-top&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 60
+          </div>
+
+      </div>
+      <div id="kssref-architecture-subtitle" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-subtitle">
+              Subtitule
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Subtitle (Before h1, h2)</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-subtitle&quot;&gt;Powered by &lt;a href&#x3D;&quot;#&quot;&gt;#WebSlides&lt;/a&gt; &lt;code&gt;.text-subtitle&lt;/code&gt;&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 250
+          </div>
+
+      </div>
+      <div id="kssref-architecture-symbols" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-symbols">
+              Symbols
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Stars <em> </em> *</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-symbols">* * *</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-symbols&quot;&gt;* * *&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 404
+          </div>
+
+      </div>
+      <div id="kssref-architecture-tables" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-tables">
+              Tables
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <table>
+  <thead>
+   <tr>
+     <th>Plans</th>
+     <th>Good</th>
+     <th>Better</th>
+     <th>Awesome</th>
+   </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Price</td>
+      <td>Free</td>
+      <td>$6</td>
+      <td>$10</td>
+    </tr>
+    <tr>
+      <td>Access to exclusive content</td>
+      <td>No</td>
+      <td>No</td>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <td>Screens you can watch on at the same time</td>
+      <td>1</td>
+      <td>2</td>
+      <td>Unlimited</td>
+    </tr>
+  </tbody>
+</table>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table&gt;
+  &lt;thead&gt;
+   &lt;tr&gt;
+     &lt;th&gt;Plans&lt;/th&gt;
+     &lt;th&gt;Good&lt;/th&gt;
+     &lt;th&gt;Better&lt;/th&gt;
+     &lt;th&gt;Awesome&lt;/th&gt;
+   &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Price&lt;/td&gt;
+      &lt;td&gt;Free&lt;/td&gt;
+      &lt;td&gt;$6&lt;/td&gt;
+      &lt;td&gt;$10&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Access to exclusive content&lt;/td&gt;
+      &lt;td&gt;No&lt;/td&gt;
+      &lt;td&gt;No&lt;/td&gt;
+      &lt;td&gt;Yes&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Screens you can watch on at the same time&lt;/td&gt;
+      &lt;td&gt;1&lt;/td&gt;
+      &lt;td&gt;2&lt;/td&gt;
+      &lt;td&gt;Unlimited&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_tables.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-architecture-try" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-try">
+              Try
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <a href="#" class="try">Try element</a>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;try&quot;&gt;Try element&lt;/a&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_form.scss</code>, line 96
+          </div>
+
+      </div>
+      <div id="kssref-architecture-uppercase" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-uppercase">
+              Uppercase
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-uppercase">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-uppercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 276
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/section-contents.html b/doc/styleguide/section-contents.html
new file mode 100644
index 0000000..1ff29ab
--- /dev/null
+++ b/doc/styleguide/section-contents.html
@@ -0,0 +1,1457 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
+        <li><a href="./" target="_blank">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-activity">
+                    <span class="kss-nav__name"> CVs, News ad Activity</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-clients">
+                    <span class="kss-nav__name">Clients</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-features">
+                    <span class="kss-nav__name">Features</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-flexblocks">
+                    <span class="kss-nav__name">Flexblocks</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-gallery">
+                    <span class="kss-nav__name">Galleries (portfolios, teams...)</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-contents.html#kssref-contents-gallery-overlay">
+                    <span class="kss-nav__name">Gallery + Overflow</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-metrics">
+                    <span class="kss-nav__name">Metrics</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-plans">
+                    <span class="kss-nav__name">Plans / Pricing</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-reasons">
+                    <span class="kss-nav__name">Reasons</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-resume">
+                    <span class="kss-nav__name">Work / Resumé / CV</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-specs">
+                    <span class="kss-nav__name">Specs</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-steps">
+                    <span class="kss-nav__name"> Steps</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings.html">
+            <span class="kss-nav__name">Landings</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-contents" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-contents">
+              Contents
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+      </div>
+      <div id="kssref-contents-activity" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-activity">
+               CVs, News ad Activity
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock activity">
+  <li>
+    <a href="#" title="UX Designer at ACME">
+      <div>
+        <p class="year">
+          2016
+        </p>
+        <p class="title">
+          UX Designer at ACME
+        </p>
+        <p class="summary">
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        </p>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="14 world famous buildings to inspire you">
+      <p class="year">
+        2 mins ago
+      </p>
+      <p class="title">
+        14 world famous buildings to inspire you
+      </p>
+      <p class="summary">
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
+      </p>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Co-Founder of GAMMA">
+      <p class="year">
+        2013
+      </p>
+      <p class="title">
+        Co-Founder of GAMMA
+      </p>
+      <p class="summary">
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      </p>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock activity&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;UX Designer at ACME&quot;&gt;
+      &lt;div&gt;
+        &lt;p class&#x3D;&quot;year&quot;&gt;
+          2016
+        &lt;/p&gt;
+        &lt;p class&#x3D;&quot;title&quot;&gt;
+          UX Designer at ACME
+        &lt;/p&gt;
+        &lt;p class&#x3D;&quot;summary&quot;&gt;
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        &lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;14 world famous buildings to inspire you&quot;&gt;
+      &lt;p class&#x3D;&quot;year&quot;&gt;
+        2 mins ago
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;title&quot;&gt;
+        14 world famous buildings to inspire you
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;summary&quot;&gt;
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world&#x27;s most famous buildings.
+      &lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Co-Founder of GAMMA&quot;&gt;
+      &lt;p class&#x3D;&quot;year&quot;&gt;
+        2013
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;title&quot;&gt;
+        Co-Founder of GAMMA
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;summary&quot;&gt;
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      &lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-activity.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-clients" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-clients">
+              Clients
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Highlight clients information</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock clients ">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock clients border">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock clients [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
+      &lt;figure&gt;
+        &lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/google.svg&quot; alt&#x3D;&quot;Google&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h3&gt;Interfaces&lt;/h3&gt;
+          &lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
+      &lt;figure&gt;
+        &lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/microsoft.svg&quot; alt&#x3D;&quot;Microsoft&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h3&gt;Interfaces&lt;/h3&gt;
+          &lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-clients.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-features" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-features">
+              Features
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Special features</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock features&quot;&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt; &lt;span&gt;100&lt;sup&gt;%&lt;/sup&gt;&lt;/span&gt; customizable&lt;/h2&gt;
+      Well documented.
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;48&lt;/span&gt;
+      &lt;h2&gt;Extra virgin olive oil&lt;/h2&gt;
+      The Spanish caviar.
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt;
+        Ultra-fast Wifi
+      &lt;/h2&gt;
+      Simple file sharing.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-features.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-flexblocks" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-flexblocks">
+              Flexblocks
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Auto-fill &amp; Equal height columns</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock ">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .blink
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Linkable block
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock blink">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                With border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock border">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 1
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 2
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 3
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 4
+     &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-gallery" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-gallery">
+              Galleries (portfolios, teams...)
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Beautiful gallery</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+        <figcaption>
+          <h2>uWatch</h2>
+          <p>By Jane Doe</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+        <figcaption>
+          <h2>Ellen Daniels</h2>
+          <p>CEO</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+        <figcaption>
+          <h2>New York</h2>
+          <p>3,456 rooms</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;uWatch&lt;/h2&gt;
+          &lt;p&gt;By Jane Doe&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;Ellen Daniels&lt;/h2&gt;
+          &lt;p&gt;CEO&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;New York&lt;/h2&gt;
+          &lt;p&gt;3,456 rooms&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-gallery-overlay" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-contents-gallery-overlay">
+              Gallery + Overflow
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Beautiful gallery with overlay content</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>New York</h2>
+        <p>1,234 rooms</p>
+      </div>
+      <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>uWatch</h2>
+        <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>Ellen Daniels</h2>
+        <p>CEO</p>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;New York&lt;/h2&gt;
+        &lt;p&gt;1,234 rooms&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;uWatch&lt;/h2&gt;
+        &lt;time datetime&#x3D;&quot;2017-12-17T21:23:34-05:00&quot;&gt;December 2017&lt;/time&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;Ellen Daniels&lt;/h2&gt;
+        &lt;p&gt;CEO&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 44
+          </div>
+
+      </div>
+      <div id="kssref-contents-metrics" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-metrics">
+              Metrics
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock metrics  ">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock metrics  border">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock metrics  [modifier class]&quot;&gt;
+  &lt;li&gt; Founded
+    &lt;span&gt;2016&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;span&gt;24M&lt;/span&gt;
+    Subscribers
+  &lt;/li&gt;
+  &lt;li&gt;
+    Revenue:
+    &lt;span&gt;$16M&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    Monthly Growth
+    &lt;span&gt;64%&lt;/span&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-metrics.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-plans" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-plans">
+              Plans / Pricing
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock plans ">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .blink
+              </div>
+              <div class="kss-modifier__description kss-style">
+                block linkable
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock plans blink">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock plans [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Basic&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;Free&lt;/span&gt;
+        &lt;p&gt;Good karma. Just the essential features. 100% customizable. Make it yours.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Medium&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;4,99 &lt;sup&gt;/month&lt;/sup&gt;&lt;/span&gt;
+        &lt;p&gt;Clean markup with popular naming conventions. Minimum effort.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Buy Now&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Premium &lt;sup&gt;(save 20%)&lt;/sup&gt;&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;40 &lt;sup&gt;/year&lt;/sup&gt;&lt;/span&gt;
+        &lt;p&gt;Prototype faster. Create landings and portfolios. Unlimited projects.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-plans.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-reasons" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-reasons">
+              Reasons
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock reasons">
+  <li>
+    <h2>Why WebSlides? Work better, faster.</h2>
+    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
+  </li>
+  <li>
+    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
+    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock reasons&quot;&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Why WebSlides? Work better, faster.&lt;/h2&gt;
+    &lt;p&gt;Designers and marketers can now focus on the content. Simply &lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;choose a demo&lt;/a&gt; and customize it in minutes. Be memorable! &lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;h2&gt; Good karma. Just the essentials and using lovely CSS.&lt;/h2&gt;
+    &lt;p&gt;WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.&lt;/p&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-reasons.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-resume" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-resume">
+              Work / Resumé / CV
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="work">
+  <li class="work-label">
+    <p class="work-title">Work</p>
+    <p class="work-client">Client</p>
+    <p class="work-services">Services</p>
+    <p class="work-date">Year</p>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Redesign of Netflix</span></p>
+      <p class="work-client"><span>Netflix</span></p>
+      <p class="work-services"><span>Frontend</span></p>
+      <p class="work-date"><span>2015-2016</span></p>
+    </a>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Airbnb TV Commercials</span></p>
+      <p class="work-client"><span>Airbnb</span></p>
+      <p class="work-services"><span>Video, Storytelling</span></p>
+      <p class="work-date"><span>2015</span></p>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;work&quot;&gt;
+  &lt;li class&#x3D;&quot;work-label&quot;&gt;
+    &lt;p class&#x3D;&quot;work-title&quot;&gt;Work&lt;/p&gt;
+    &lt;p class&#x3D;&quot;work-client&quot;&gt;Client&lt;/p&gt;
+    &lt;p class&#x3D;&quot;work-services&quot;&gt;Services&lt;/p&gt;
+    &lt;p class&#x3D;&quot;work-date&quot;&gt;Year&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; rel&#x3D;&quot;external&quot;&gt;
+      &lt;p class&#x3D;&quot;work-title&quot;&gt;&lt;span&gt;Redesign of Netflix&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-client&quot;&gt;&lt;span&gt;Netflix&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-services&quot;&gt;&lt;span&gt;Frontend&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-date&quot;&gt;&lt;span&gt;2015-2016&lt;/span&gt;&lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; rel&#x3D;&quot;external&quot;&gt;
+      &lt;p class&#x3D;&quot;work-title&quot;&gt;&lt;span&gt;Airbnb TV Commercials&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-client&quot;&gt;&lt;span&gt;Airbnb&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-services&quot;&gt;&lt;span&gt;Video, Storytelling&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-date&quot;&gt;&lt;span&gt;2015&lt;/span&gt;&lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_work.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-specs" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-specs">
+              Specs
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock specs">
+    <li>
+      <div>
+        <h2>Ultra-Fast WiFi</h2>
+        Simple and secure file sharing.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>All day battery life</h2>
+        Your battery worries may be over.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>Lifetime Warranty </h2>
+        We'll fix it or if we can't, we'll replace it.
+      </div>
+    </li>
+    </ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
+    &lt;li&gt;
+      &lt;div&gt;
+        &lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
+        Simple and secure file sharing.
+      &lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;div&gt;
+        &lt;h2&gt;All day battery life&lt;/h2&gt;
+        Your battery worries may be over.
+      &lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;div&gt;
+        &lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
+        We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
+      &lt;/div&gt;
+    &lt;/li&gt;
+    &lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-specs.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-contents-steps" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-contents-steps">
+               Steps
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock steps">
+  <li>
+    <h2>01. Passion</h2>
+    <p>When you're really passionate about your job, you can change the world.</p>
+  </li>
+  <li>
+    <div class="process step-2"></div>
+    <h2>02. Purpose</h2>
+    <p>Why does this business exist? How are you different? Why matters?</p>
+  </li>
+  <li>
+    <div class="process step-3"></div>
+    <h2>03. Principles</h2>
+    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
+  </li>
+  <li>
+    <div class="process step-4"></div>
+    <h2>04. Process</h2>
+    <ul>
+      <li>Useful</li>
+      <li>Easy</li>
+      <li>Fast</li>
+      <li>Beautiful</li>
+    </ul>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock steps&quot;&gt;
+  &lt;li&gt;
+    &lt;h2&gt;01. Passion&lt;/h2&gt;
+    &lt;p&gt;When you&#x27;re really passionate about your job, you can change the world.&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-2&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;02. Purpose&lt;/h2&gt;
+    &lt;p&gt;Why does this business exist? How are you different? Why matters?&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-3&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;03. Principles&lt;/h2&gt;
+    &lt;p&gt;Leadership through usefulness, openness, empathy, and good taste.&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-4&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;04. Process&lt;/h2&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Useful&lt;/li&gt;
+      &lt;li&gt;Easy&lt;/li&gt;
+      &lt;li&gt;Fast&lt;/li&gt;
+      &lt;li&gt;Beautiful&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-steps.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/section-landings.html b/doc/styleguide/section-landings.html
new file mode 100644
index 0000000..9a29be0
--- /dev/null
+++ b/doc/styleguide/section-landings.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
+        <li><a href="./" target="_blank">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-landings.html">
+            <span class="kss-nav__name">Landings</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cards">
+                    <span class="kss-nav__name">Cards</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cites">
+                    <span class="kss-nav__name">Cites</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta">
+                    <span class="kss-nav__name">Call to action</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta-cover">
+                    <span class="kss-nav__name">Headings</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-longform">
+                    <span class="kss-nav__name">Longform</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-quotes">
+                    <span class="kss-nav__name">Quotes</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-toc">
+                    <span class="kss-nav__name">Table of contents</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-landings">
+              Landings
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+      </div>
+      <div id="kssref-landings-cards" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-cards">
+              Cards
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+                <div class="card-50">
+    <figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
+    <div class="flex-content">
+      <h2>iPhone 7</h2>
+      <p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
+      <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
+    </div>
+  </div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">  &lt;div class&#x3D;&quot;card-50&quot;&gt;
+    &lt;figure&gt;&lt;img class&#x3D;&quot;aligncenter&quot; src&#x3D;&quot;/static/images/iphone.png&quot; alt&#x3D;&quot;iPhone&quot;&gt;&lt;/figure&gt;
+    &lt;div class&#x3D;&quot;flex-content&quot;&gt;
+      &lt;h2&gt;iPhone 7&lt;/h2&gt;
+      &lt;p class&#x3D;&quot;text-intro&quot;&gt;3D Touch, 12MP photos, and 4K video.&lt;/p&gt;
+      &lt;p&gt;Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_cards.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-landings-cites" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-cites">
+              Cites
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;cite&gt; &lt;img class&#x3D;&quot;avatar-40&quot; src&#x3D;&quot;http://webslides.tv/static/images/avatar.jpg&quot; alt&#x3D;&quot;Avatar&quot;&gt; &lt;a href&#x3D;&quot;http://twitter.com/jlantunez/&quot;&gt;@jlantunez&lt;/a&gt;&lt;/cite&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_quotes.scss</code>, line 28
+          </div>
+
+      </div>
+      <div id="kssref-landings-cta" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-cta">
+              Call to action
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="cta">
+  <div class="number">
+    <p><span><sup>$</sup>40</span></p>
+  </div>
+  <div class="benefit">
+    <h2>Watch TV shows anytime, anywhere</h2>
+    <p>Lorem ipsum</p>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;cta&quot;&gt;
+  &lt;div class&#x3D;&quot;number&quot;&gt;
+    &lt;p&gt;&lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;40&lt;/span&gt;&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class&#x3D;&quot;benefit&quot;&gt;
+    &lt;h2&gt;Watch TV shows anytime, anywhere&lt;/h2&gt;
+    &lt;p&gt;Lorem ipsum&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_promos.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-landings-cta-cover" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-cta-cover">
+              Headings
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="cta-cover">
+  <h1><strong>HTML Presentations</strong> Made Easy</h1>
+  <p class="alignright">
+    <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
+      WebSlides
+    </a>
+    <span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
+  </p>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;cta-cover&quot;&gt;
+  &lt;h1&gt;&lt;strong&gt;HTML Presentations&lt;/strong&gt; Made Easy&lt;/h1&gt;
+  &lt;p class&#x3D;&quot;alignright&quot;&gt;
+    &lt;a class&#x3D;&quot;button&quot; href&#x3D;&quot;https://webslides.tv/webslides-latest.zip&quot; title&#x3D;&quot;Download WebSlides&quot;&gt;
+      WebSlides
+    &lt;/a&gt;
+    &lt;span class&#x3D;&quot;try&quot;&gt;&lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;Demos&lt;/a&gt; · &lt;a href&#x3D;&quot;https://github.com/webslides/webslides&quot; title&#x3D;&quot;Github&quot;&gt;Github&lt;/a&gt;&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_promos.scss</code>, line 75
+          </div>
+
+      </div>
+      <div id="kssref-landings-longform" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-longform">
+              Longform
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="wrap longform">
+  <p>Lorem ipsum</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;wrap longform&quot;&gt;
+  &lt;p&gt;Lorem ipsum&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_longform.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-landings-quotes" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-quotes">
+              Quotes
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <blockquote>
+  <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
+</blockquote>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote&gt;
+  &lt;p&gt;&quot;I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides.&quot;&lt;/p&gt;
+&lt;/blockquote&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_quotes.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-landings-toc" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-toc">
+              Table of contents
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="toc">
+  <ol>
+    <li>
+      <a href="#" title="Go to Learning to see">
+      <span class="chapter">Prologue: Learning to See</span>
+      <span class="toc-page">01</span>
+      </a>
+    </li>
+    <li><a href="#" title="Go to What is Design?"><span class="chapter">What is Design?</span>
+      <span class="toc-page">04</span></a>
+    </li>
+    <li>
+      <a href="#" title="Go to What is Beauty?"><span class="chapter">What is Beauty?</span>
+      <span class="toc-page">08</span></a>
+      <ol>
+        <li><a href="#" title="Go to Harmony"><span class="chapter">Harmony</span>
+          <span class="toc-page">12</span></a>
+        </li>
+        <li><a href="#" title="Go to Simplicity vs. Clarity"><span class="chapter">Simplicity vs. Clarity</span>
+          <span class="toc-page">14</span></a>
+        </li>
+      </ol>
+    </li>
+  </ol>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;toc&quot;&gt;
+  &lt;ol&gt;
+    &lt;li&gt;
+      &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Learning to see&quot;&gt;
+      &lt;span class&#x3D;&quot;chapter&quot;&gt;Prologue: Learning to See&lt;/span&gt;
+      &lt;span class&#x3D;&quot;toc-page&quot;&gt;01&lt;/span&gt;
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to What is Design?&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;What is Design?&lt;/span&gt;
+      &lt;span class&#x3D;&quot;toc-page&quot;&gt;04&lt;/span&gt;&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to What is Beauty?&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;What is Beauty?&lt;/span&gt;
+      &lt;span class&#x3D;&quot;toc-page&quot;&gt;08&lt;/span&gt;&lt;/a&gt;
+      &lt;ol&gt;
+        &lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Harmony&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;Harmony&lt;/span&gt;
+          &lt;span class&#x3D;&quot;toc-page&quot;&gt;12&lt;/span&gt;&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Simplicity vs. Clarity&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;Simplicity vs. Clarity&lt;/span&gt;
+          &lt;span class&#x3D;&quot;toc-page&quot;&gt;14&lt;/span&gt;&lt;/a&gt;
+        &lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_toc.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/section-media.html b/doc/styleguide/section-media.html
new file mode 100644
index 0000000..3cb76da
--- /dev/null
+++ b/doc/styleguide/section-media.html
@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
+        <li><a href="./" target="_blank">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings.html">
+            <span class="kss-nav__name">Landings</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-avatars">
+                    <span class="kss-nav__name">Avatars</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-background">
+                    <span class="kss-nav__name">Media.Background</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-anim">
+                    <span class="kss-nav__name">Animated</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-video">
+                    <span class="kss-nav__name">Video</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-badgets">
+                    <span class="kss-nav__name">Badges</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-embed">
+                    <span class="kss-nav__name">Embed</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-fullscreen">
+                    <span class="kss-nav__name">Media.Fullscreen</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-fullscreen-embed">
+                    <span class="kss-nav__name">Fullscreen</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-screenshots">
+                    <span class="kss-nav__name">Screenshots</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-media" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-media">
+              Media
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+      </div>
+      <div id="kssref-media-avatars" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-avatars">
+              Avatars
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>You&#39;ll love this</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-48&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_avatars.scss</code>, line 5
+          </div>
+
+      </div>
+      <div id="kssref-media-background" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-background">
+              Media.Background
+            </a>
+          </h2>
+
+
+        </div>
+
+
+
+      </div>
+      <div id="kssref-media-background-anim" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-media-background-anim">
+              Animated
+            </a>
+          </h3>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="aligncenter bg-black">
+  <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
+  &lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 140
+          </div>
+
+      </div>
+      <div id="kssref-media-background-video" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-media-background-video">
+              Video
+            </a>
+          </h3>
+
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;video class&#x3D;&quot;background-video&quot; autoplay poster&#x3D;&quot;https://webslides.tv/static/images/working.jpg&quot;&gt;
+    &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/working.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+  &lt;/video&gt;
+  &lt;div class&#x3D;&quot;wrap&quot;&gt;
+    &lt;p&gt;&lt;code&gt;.background-video&lt;/code&gt;&lt;/p&gt;
+    &lt;h2&gt;&lt;strong&gt;WebSlides is the easiest way to make HTML presentations. Inspire and engage.&lt;/strong&gt;&lt;/h2&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 92
+          </div>
+
+      </div>
+      <div id="kssref-media-badgets" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-badgets">
+              Badges
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="badge-android">Google Play</p>
+<p class="badge-ios">App Store</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;badge-android&quot;&gt;Google Play&lt;/p&gt;
+&lt;p class&#x3D;&quot;badge-ios&quot;&gt;App Store&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_badges.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-media-embed" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-embed">
+              Embed
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Responsive Media (videos, iframe...)</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="embed">
+  <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+    <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+  </video>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;embed&quot;&gt;
+  &lt;video autoplay loop poster&#x3D;&quot;https://webslides.tv/static/images/peggy.jpg&quot;&gt;
+    &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/peggy.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_media.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-media-fullscreen" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-fullscreen">
+              Media.Fullscreen
+            </a>
+          </h2>
+
+
+        </div>
+
+
+
+      </div>
+      <div id="kssref-media-fullscreen-embed" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-media-fullscreen-embed">
+              Fullscreen
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Responsive background video
+<a href="https://fvsch.com/code/video-background/">https://fvsch.com/code/video-background/</a></p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+    </video>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;fullscreen&quot;&gt;
+  &lt;div class&#x3D;&quot;embed&quot;&gt;
+    &lt;video autoplay loop poster&#x3D;&quot;https://webslides.tv/static/images/peggy.jpg&quot;&gt;
+      &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/peggy.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+    &lt;/video&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_media.scss</code>, line 35
+          </div>
+
+      </div>
+      <div id="kssref-media-screenshots" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-screenshots">
+              Screenshots
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>HTML browser</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <figure class="browser">
+  <img src="http://lorempixel.com/500/500/food/" />
+  <figcaption>Foddie</figcaption>
+</figure>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class&#x3D;&quot;browser&quot;&gt;
+  &lt;img src&#x3D;&quot;http://lorempixel.com/500/500/food/&quot; /&gt;
+  &lt;figcaption&gt;Foddie&lt;/figcaption&gt;
+&lt;/figure&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_browser.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/npm-debug.log b/npm-debug.log
deleted file mode 100644
index 6104d93..0000000
--- a/npm-debug.log
+++ /dev/null
@@ -1,45 +0,0 @@
-0 info it worked if it ends with ok
-1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'kss' ]
-2 info using npm@3.5.2
-3 info using node@v4.2.6
-4 verbose run-script [ 'prekss', 'kss', 'postkss' ]
-5 info lifecycle webslides@1.3.1~prekss: webslides@1.3.1
-6 silly lifecycle webslides@1.3.1~prekss: no script for prekss, continuing
-7 info lifecycle webslides@1.3.1~kss: webslides@1.3.1
-8 verbose lifecycle webslides@1.3.1~kss: unsafe-perm in lifecycle true
-9 verbose lifecycle webslides@1.3.1~kss: PATH: /usr/share/npm/bin/node-gyp-bin:/home/displaynone/Proyectos/WebSlides/node_modules/.bin:/home/displaynone/bin:/home/displaynone/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
-10 verbose lifecycle webslides@1.3.1~kss: CWD: /home/displaynone/Proyectos/WebSlides
-11 silly lifecycle webslides@1.3.1~kss: Args: [ '-c', 'npm-run-all -p kss:*' ]
-12 silly lifecycle webslides@1.3.1~kss: Returned: code: 1  signal: null
-13 info lifecycle webslides@1.3.1~kss: Failed to exec kss script
-14 verbose stack Error: webslides@1.3.1 kss: `npm-run-all -p kss:*`
-14 verbose stack Exit status 1
-14 verbose stack     at EventEmitter.<anonymous> (/usr/share/npm/lib/utils/lifecycle.js:232:16)
-14 verbose stack     at emitTwo (events.js:87:13)
-14 verbose stack     at EventEmitter.emit (events.js:172:7)
-14 verbose stack     at ChildProcess.<anonymous> (/usr/share/npm/lib/utils/spawn.js:24:14)
-14 verbose stack     at emitTwo (events.js:87:13)
-14 verbose stack     at ChildProcess.emit (events.js:172:7)
-14 verbose stack     at maybeClose (internal/child_process.js:821:16)
-14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
-15 verbose pkgid webslides@1.3.1
-16 verbose cwd /home/displaynone/Proyectos/WebSlides
-17 error Linux 4.10.0-35-generic
-18 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "kss"
-19 error node v4.2.6
-20 error npm  v3.5.2
-21 error code ELIFECYCLE
-22 error webslides@1.3.1 kss: `npm-run-all -p kss:*`
-22 error Exit status 1
-23 error Failed at the webslides@1.3.1 kss script 'npm-run-all -p kss:*'.
-23 error Make sure you have the latest version of node.js and npm installed.
-23 error If you do, this is most likely a problem with the webslides package,
-23 error not with npm itself.
-23 error Tell the author that this fails on your system:
-23 error     npm-run-all -p kss:*
-23 error You can get information on how to open an issue for this project with:
-23 error     npm bugs webslides
-23 error Or if that isn't available, you can get their info via:
-23 error     npm owner ls webslides
-23 error There is likely additional logging output above.
-24 verbose exit [ 1, true ]
diff --git a/package.json b/package.json
index 888010c..3708f7d 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "kss": "npm-run-all -p kss:*",
     "kss:prebuild": "rimraf doc/styleguide*",
     "kss:css": "node-sass doc/kss/templates/default/kss-assets/kss.scss doc/kss/templates/default/kss-assets/kss.css",
-    "kss:doc": "kss --config kss-config.json --verbose ./README.md"
+    "kss:doc": "kss --config kss-config.json --verbose"
   },
   "jest": {
     "collectCoverage": true