From 4df45aaa60ba7e4b49a2f370d159c9f7c084a61d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Sacrist=C3=A1n?= <displaynone@gmail.com>
Date: Fri, 29 Sep 2017 23:57:24 +0200
Subject: [PATCH] kss - styles organization

---
 doc/styleguide/index.html                     |   94 +-
 ....html => item-architecture-alignment.html} |   98 +-
 ...html => item-architecture-background.html} |   98 +-
 ...em-architecture-backgrounds-gradient.html} |  102 +-
 ...architecture-backgrounds-transparent.html} |  100 +-
 ...tml => item-architecture-backgrounds.html} |   98 +-
 ...ns.html => item-architecture-buttons.html} |  102 +-
 ...ns.html => item-architecture-columns.html} |   98 +-
 ...xt.html => item-architecture-context.html} |   98 +-
 ...-data.html => item-architecture-data.html} |   98 +-
 ...moji.html => item-architecture-emoji.html} |   98 +-
 .../item-architecture-forms-user.html         |  140 +
 doc/styleguide/item-architecture-forms.html   |  112 +
 ...-grid.html => item-architecture-grid.html} |  102 +-
 ...-info.html => item-architecture-info.html} |   98 +-
 ...html => item-architecture-interviews.html} |   98 +-
 ...ntro.html => item-architecture-intro.html} |   98 +-
 ...abel.html => item-architecture-label.html} |   98 +-
 ...s.html => item-architecture-landings.html} |   98 +-
 .../item-architecture-lowercase.html          |  134 +
 ...html => item-architecture-navigation.html} |  157 +-
 ...html => item-architecture-pull_quote.html} |   98 +-
 ...ius.html => item-architecture-radius.html} |   98 +-
 ....html => item-architecture-separator.html} |   98 +-
 ...erif.html => item-architecture-serif.html} |   98 +-
 ...dow.html => item-architecture-shadow.html} |   98 +-
 ...izes.html => item-architecture-sizes.html} |   98 +-
 ...l => item-architecture-slides-bottom.html} |  102 +-
 ...html => item-architecture-slides-top.html} |  102 +-
 doc/styleguide/item-architecture-slides.html  |  144 ++
 ...e.html => item-architecture-subtitle.html} |   98 +-
 ...ls.html => item-architecture-symbols.html} |   98 +-
 ...les.html => item-architecture-tables.html} |   98 +-
 doc/styleguide/item-architecture-try.html     |  134 +
 .../item-architecture-uppercase.html          |  134 +
 doc/styleguide/item-architecture.html         |  299 +++
 doc/styleguide/item-base-colors.html          |  148 --
 doc/styleguide/item-base-elements.html        |  111 -
 doc/styleguide/item-base-typography.html      |  111 -
 doc/styleguide/item-base.html                 |  209 --
 doc/styleguide/item-blocks.html               |  224 --
 doc/styleguide/item-browser.html              |  165 --
 .../item-classes-layout-shadow.html           |  150 --
 doc/styleguide/item-classes-layout.html       |   94 -
 doc/styleguide/item-classes.html              |  108 -
 ...inside-components-article-post-title-.html |  116 -
 ...-the-organization-of-your-style-guide.html |  108 -
 doc/styleguide/item-components-article.html   |  116 -
 ...s-button-organization-just-as-before-.html |  145 --
 .../item-components-buttons-bold.html         |  134 -
 doc/styleguide/item-components-buttons.html   |  108 -
 doc/styleguide/item-components.html           |  147 --
 doc/styleguide/item-content.html              |  199 --
 ...ivity.html => item-contents-activity.html} |  102 +-
 ...lients.html => item-contents-clients.html} |  100 +-
 ...tures.html => item-contents-features.html} |  100 +-
 ...ink.html => item-contents-flexblocks.html} |  100 +-
 ...tml => item-contents-gallery-overlay.html} |  100 +-
 ...allery.html => item-contents-gallery.html} |  102 +-
 ...etrics.html => item-contents-metrics.html} |  100 +-
 ...ck-plans.html => item-contents-plans.html} |  102 +-
 ...easons.html => item-contents-reasons.html} |  100 +-
 ...-resume.html => item-contents-resume.html} |   98 +-
 ...ck-specs.html => item-contents-specs.html} |  100 +-
 ...ck-steps.html => item-contents-steps.html} |  100 +-
 ...item-flexblock.html => item-contents.html} |  141 +-
 doc/styleguide/item-elements-try.html         |  214 --
 doc/styleguide/item-elements.html             |  204 --
 doc/styleguide/item-flexblock-landings.html   |  147 --
 doc/styleguide/item-forms-user.html           |  220 --
 doc/styleguide/item-forms.html                |  199 --
 ...em-cards.html => item-landings-cards.html} |  102 +-
 ...ks-cites.html => item-landings-cites.html} |   98 +-
 ...over.html => item-landings-cta-cover.html} |   98 +-
 ...blocks-cta.html => item-landings-cta.html} |   98 +-
 doc/styleguide/item-landings-intro.html       |  139 -
 doc/styleguide/item-landings-longform.html    |  138 +
 ...-quotes.html => item-landings-quotes.html} |   98 +-
 ...blocks-toc.html => item-landings-toc.html} |   98 +-
 doc/styleguide/item-landings.html             |  186 +-
 doc/styleguide/item-layout.html               |  214 --
 doc/styleguide/item-longform.html             |  218 --
 ...m-avatars.html => item-media-avatars.html} |  102 +-
 ...m.html => item-media-background-anim.html} |   98 +-
 ....html => item-media-background-video.html} |   98 +-
 doc/styleguide/item-media-background.html     |  112 +
 ...m-badgets.html => item-media-badgets.html} |  102 +-
 doc/styleguide/item-media-embed.html          |   97 +-
 .../item-media-fullscreen-embed.html          |  151 ++
 doc/styleguide/item-media-fullscreen.html     |  112 +
 ...shots.html => item-media-screenshots.html} |  102 +-
 doc/styleguide/item-media.html                |  133 +-
 doc/styleguide/item-navigation.html           |  326 ---
 .../item-slide-background-position.html       |  276 --
 doc/styleguide/item-slide.html                |  209 --
 doc/styleguide/item-slides.html               |  258 --
 doc/styleguide/item-typography-lowercase.html |  214 --
 doc/styleguide/item-typography-uppercase.html |  214 --
 doc/styleguide/item-typography.html           |  274 --
 doc/styleguide/kss-assets/css/kss-body.scss   |    5 -
 doc/styleguide/kss-assets/css/kss-colors.scss |   53 -
 .../kss-assets/css/kss-documentation.scss     |  196 --
 doc/styleguide/kss-assets/css/kss-header.scss |   91 -
 .../kss-assets/css/kss-markdown.scss          |  122 -
 .../kss-assets/css/kss-navigation.scss        |  109 -
 .../kss-assets/css/kss-settings.scss          |   13 -
 doc/styleguide/kss-assets/css/kss-title.scss  |   12 -
 doc/styleguide/kss-assets/css/kss-tools.scss  |   30 -
 doc/styleguide/kss-assets/css/kss.css         |  507 ----
 doc/styleguide/kss-assets/css/kss.scss        |   16 -
 .../kss-assets/images/down_arrow.svg          |   35 -
 doc/styleguide/kss-assets/images/up_arrow.svg |   35 -
 doc/styleguide/kss-assets/js/kss.js           |  130 -
 doc/styleguide/kss-assets/vendor/jquery.js    |    4 -
 doc/styleguide/kss-assets/vendor/prism.css    |  138 -
 doc/styleguide/kss-assets/vendor/prism.js     |    6 -
 doc/styleguide/section-architecture.html      | 2298 +++++++++++++++++
 doc/styleguide/section-avatars.html           |  228 --
 doc/styleguide/section-badgets.html           |  220 --
 doc/styleguide/section-base.html              |  368 ---
 doc/styleguide/section-blocks.html            |  538 ----
 doc/styleguide/section-browser.html           |  165 --
 doc/styleguide/section-buttons.html           |  227 --
 doc/styleguide/section-cards.html             |  232 --
 doc/styleguide/section-classes.html           |  228 --
 doc/styleguide/section-components.html        |  352 ---
 doc/styleguide/section-content.html           |  282 --
 ...n-flexblock.html => section-contents.html} |  770 +++---
 doc/styleguide/section-elements.html          |  336 ---
 doc/styleguide/section-forms.html             |  242 --
 doc/styleguide/section-grid.html              |  262 --
 doc/styleguide/section-landings.html          |  552 +++-
 doc/styleguide/section-layout.html            |  499 ----
 doc/styleguide/section-longform.html          |  218 --
 doc/styleguide/section-media.html             |  434 +++-
 doc/styleguide/section-navigation.html        |  326 ---
 doc/styleguide/section-screenshots.html       |  224 --
 doc/styleguide/section-slide.html             |  491 ----
 doc/styleguide/section-slides.html            |  415 ---
 doc/styleguide/section-typography.html        |  958 -------
 package.json                                  |    1 +
 src/scss/_base.scss                           |    8 +-
 src/scss/_color.scss                          |   11 +-
 src/scss/_typography.scss                     |   32 +-
 src/scss/modules/_avatars.scss                |    2 +-
 src/scss/modules/_badges.scss                 |    2 +-
 src/scss/modules/_browser.scss                |    2 +-
 src/scss/modules/_button.scss                 |    2 +-
 src/scss/modules/_cards.scss                  |    2 +-
 src/scss/modules/_flexblock-activity.scss     |    8 +-
 src/scss/modules/_flexblock-clients.scss      |    6 +-
 src/scss/modules/_flexblock-features.scss     |    6 +-
 src/scss/modules/_flexblock-gallery.scss      |   12 +-
 src/scss/modules/_flexblock-metrics.scss      |    6 +-
 src/scss/modules/_flexblock-plans.scss        |    8 +-
 src/scss/modules/_flexblock-reasons.scss      |    6 +-
 src/scss/modules/_flexblock-specs.scss        |    6 +-
 src/scss/modules/_flexblock-steps.scss        |    7 +-
 src/scss/modules/_flexblock.scss              |    7 +-
 src/scss/modules/_form.scss                   |    6 +-
 src/scss/modules/_grid.scss                   |    2 +-
 src/scss/modules/_longform.scss               |    2 +-
 src/scss/modules/_media.scss                  |    2 +-
 src/scss/modules/_navigation.scss             |    2 +-
 src/scss/modules/_promos.scss                 |    4 +-
 src/scss/modules/_quotes.scss                 |    4 +-
 src/scss/modules/_slides-bg.scss              |    6 +-
 src/scss/modules/_slides-navigation.scss      |    2 +-
 src/scss/modules/_slides.scss                 |    8 +-
 src/scss/modules/_tables.scss                 |    2 +-
 src/scss/modules/_toc.scss                    |    2 +-
 src/scss/modules/_work.scss                   |    2 +-
 172 files changed, 5865 insertions(+), 19783 deletions(-)
 rename doc/styleguide/{item-layout-alignment.html => item-architecture-alignment.html} (67%)
 rename doc/styleguide/{item-slide-background.html => item-architecture-background.html} (72%)
 rename doc/styleguide/{item-base-backgrounds-gradient.html => item-architecture-backgrounds-gradient.html} (50%)
 rename doc/styleguide/{item-base-backgrounds-transparent.html => item-architecture-backgrounds-transparent.html} (51%)
 rename doc/styleguide/{item-base-backgrounds.html => item-architecture-backgrounds.html} (58%)
 rename doc/styleguide/{item-buttons.html => item-architecture-buttons.html} (52%)
 rename doc/styleguide/{item-typography-columns.html => item-architecture-columns.html} (51%)
 rename doc/styleguide/{item-typography-context.html => item-architecture-context.html} (50%)
 rename doc/styleguide/{item-typography-data.html => item-architecture-data.html} (50%)
 rename doc/styleguide/{item-typography-emoji.html => item-architecture-emoji.html} (50%)
 create mode 100644 doc/styleguide/item-architecture-forms-user.html
 create mode 100644 doc/styleguide/item-architecture-forms.html
 rename doc/styleguide/{item-grid.html => item-architecture-grid.html} (63%)
 rename doc/styleguide/{item-typography-info.html => item-architecture-info.html} (50%)
 rename doc/styleguide/{item-typography-interviews.html => item-architecture-interviews.html} (55%)
 rename doc/styleguide/{item-typography-intro.html => item-architecture-intro.html} (50%)
 rename doc/styleguide/{item-typography-label.html => item-architecture-label.html} (50%)
 rename doc/styleguide/{item-typography-landings.html => item-architecture-landings.html} (50%)
 create mode 100644 doc/styleguide/item-architecture-lowercase.html
 rename doc/styleguide/{item-blocks-navigation.html => item-architecture-navigation.html} (52%)
 rename doc/styleguide/{item-typography-pull_quote.html => item-architecture-pull_quote.html} (55%)
 rename doc/styleguide/{item-layout-radius.html => item-architecture-radius.html} (56%)
 rename doc/styleguide/{item-typography-separator.html => item-architecture-separator.html} (50%)
 rename doc/styleguide/{item-typography-serif.html => item-architecture-serif.html} (50%)
 rename doc/styleguide/{item-layout-shadow.html => item-architecture-shadow.html} (56%)
 rename doc/styleguide/{item-layout-sizes.html => item-architecture-sizes.html} (64%)
 rename doc/styleguide/{item-slides-bottom.html => item-architecture-slides-bottom.html} (52%)
 rename doc/styleguide/{item-slides-top.html => item-architecture-slides-top.html} (52%)
 create mode 100644 doc/styleguide/item-architecture-slides.html
 rename doc/styleguide/{item-typography-subtitle.html => item-architecture-subtitle.html} (51%)
 rename doc/styleguide/{item-typography-symbols.html => item-architecture-symbols.html} (50%)
 rename doc/styleguide/{item-elements-tables.html => item-architecture-tables.html} (56%)
 create mode 100644 doc/styleguide/item-architecture-try.html
 create mode 100644 doc/styleguide/item-architecture-uppercase.html
 create mode 100644 doc/styleguide/item-architecture.html
 delete mode 100644 doc/styleguide/item-base-colors.html
 delete mode 100644 doc/styleguide/item-base-elements.html
 delete mode 100644 doc/styleguide/item-base-typography.html
 delete mode 100644 doc/styleguide/item-base.html
 delete mode 100644 doc/styleguide/item-blocks.html
 delete mode 100644 doc/styleguide/item-browser.html
 delete mode 100644 doc/styleguide/item-classes-layout-shadow.html
 delete mode 100644 doc/styleguide/item-classes-layout.html
 delete mode 100644 doc/styleguide/item-classes.html
 delete mode 100644 doc/styleguide/item-components-article-post-title-this-controls-the-organization-of-your-style-guide-here-i-m-filing-this-component-inside-components-article-post-title-.html
 delete mode 100644 doc/styleguide/item-components-article-post-title-this-controls-the-organization-of-your-style-guide.html
 delete mode 100644 doc/styleguide/item-components-article.html
 delete mode 100644 doc/styleguide/item-components-button-organization-just-as-before-.html
 delete mode 100644 doc/styleguide/item-components-buttons-bold.html
 delete mode 100644 doc/styleguide/item-components-buttons.html
 delete mode 100644 doc/styleguide/item-components.html
 delete mode 100644 doc/styleguide/item-content.html
 rename doc/styleguide/{item-flexblock-activity.html => item-contents-activity.html} (62%)
 rename doc/styleguide/{item-flexblock-clients.html => item-contents-clients.html} (64%)
 rename doc/styleguide/{item-flexblock-features.html => item-contents-features.html} (59%)
 rename doc/styleguide/{item-flexblock-blink.html => item-contents-flexblocks.html} (59%)
 rename doc/styleguide/{item-flexblock-gallery-overlay.html => item-contents-gallery-overlay.html} (59%)
 rename doc/styleguide/{item-flexblock-gallery.html => item-contents-gallery.html} (59%)
 rename doc/styleguide/{item-flexblock-metrics.html => item-contents-metrics.html} (57%)
 rename doc/styleguide/{item-flexblock-plans.html => item-contents-plans.html} (66%)
 rename doc/styleguide/{item-flexblock-reasons.html => item-contents-reasons.html} (55%)
 rename doc/styleguide/{item-content-resume.html => item-contents-resume.html} (61%)
 rename doc/styleguide/{item-flexblock-specs.html => item-contents-specs.html} (55%)
 rename doc/styleguide/{item-flexblock-steps.html => item-contents-steps.html} (58%)
 rename doc/styleguide/{item-flexblock.html => item-contents.html} (53%)
 delete mode 100644 doc/styleguide/item-elements-try.html
 delete mode 100644 doc/styleguide/item-elements.html
 delete mode 100644 doc/styleguide/item-flexblock-landings.html
 delete mode 100644 doc/styleguide/item-forms-user.html
 delete mode 100644 doc/styleguide/item-forms.html
 rename doc/styleguide/{item-cards.html => item-landings-cards.html} (55%)
 rename doc/styleguide/{item-blocks-cites.html => item-landings-cites.html} (51%)
 rename doc/styleguide/{item-blocks-cta-cover.html => item-landings-cta-cover.html} (55%)
 rename doc/styleguide/{item-blocks-cta.html => item-landings-cta.html} (52%)
 delete mode 100644 doc/styleguide/item-landings-intro.html
 create mode 100644 doc/styleguide/item-landings-longform.html
 rename doc/styleguide/{item-blocks-quotes.html => item-landings-quotes.html} (50%)
 rename doc/styleguide/{item-blocks-toc.html => item-landings-toc.html} (61%)
 delete mode 100644 doc/styleguide/item-layout.html
 delete mode 100644 doc/styleguide/item-longform.html
 rename doc/styleguide/{item-avatars.html => item-media-avatars.html} (55%)
 rename doc/styleguide/{item-slide-background-anim.html => item-media-background-anim.html} (52%)
 rename doc/styleguide/{item-slide-background-video.html => item-media-background-video.html} (55%)
 create mode 100644 doc/styleguide/item-media-background.html
 rename doc/styleguide/{item-badgets.html => item-media-badgets.html} (50%)
 create mode 100644 doc/styleguide/item-media-fullscreen-embed.html
 create mode 100644 doc/styleguide/item-media-fullscreen.html
 rename doc/styleguide/{item-screenshots.html => item-media-screenshots.html} (50%)
 delete mode 100644 doc/styleguide/item-navigation.html
 delete mode 100644 doc/styleguide/item-slide-background-position.html
 delete mode 100644 doc/styleguide/item-slide.html
 delete mode 100644 doc/styleguide/item-slides.html
 delete mode 100644 doc/styleguide/item-typography-lowercase.html
 delete mode 100644 doc/styleguide/item-typography-uppercase.html
 delete mode 100644 doc/styleguide/item-typography.html
 delete mode 100644 doc/styleguide/kss-assets/css/kss-body.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss-colors.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss-documentation.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss-header.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss-markdown.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss-navigation.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss-settings.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss-title.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss-tools.scss
 delete mode 100644 doc/styleguide/kss-assets/css/kss.css
 delete mode 100644 doc/styleguide/kss-assets/css/kss.scss
 delete mode 100644 doc/styleguide/kss-assets/images/down_arrow.svg
 delete mode 100644 doc/styleguide/kss-assets/images/up_arrow.svg
 delete mode 100644 doc/styleguide/kss-assets/js/kss.js
 delete mode 100644 doc/styleguide/kss-assets/vendor/jquery.js
 delete mode 100644 doc/styleguide/kss-assets/vendor/prism.css
 delete mode 100644 doc/styleguide/kss-assets/vendor/prism.js
 create mode 100644 doc/styleguide/section-architecture.html
 delete mode 100644 doc/styleguide/section-avatars.html
 delete mode 100644 doc/styleguide/section-badgets.html
 delete mode 100644 doc/styleguide/section-base.html
 delete mode 100644 doc/styleguide/section-blocks.html
 delete mode 100644 doc/styleguide/section-browser.html
 delete mode 100644 doc/styleguide/section-buttons.html
 delete mode 100644 doc/styleguide/section-cards.html
 delete mode 100644 doc/styleguide/section-classes.html
 delete mode 100644 doc/styleguide/section-components.html
 delete mode 100644 doc/styleguide/section-content.html
 rename doc/styleguide/{section-flexblock.html => section-contents.html} (84%)
 delete mode 100644 doc/styleguide/section-elements.html
 delete mode 100644 doc/styleguide/section-forms.html
 delete mode 100644 doc/styleguide/section-grid.html
 delete mode 100644 doc/styleguide/section-layout.html
 delete mode 100644 doc/styleguide/section-longform.html
 delete mode 100644 doc/styleguide/section-navigation.html
 delete mode 100644 doc/styleguide/section-screenshots.html
 delete mode 100644 doc/styleguide/section-slide.html
 delete mode 100644 doc/styleguide/section-slides.html
 delete mode 100644 doc/styleguide/section-typography.html

diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html
index 9074325..d232839 100644
--- a/doc/styleguide/index.html
+++ b/doc/styleguide/index.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,36 +55,6 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-layout-alignment.html b/doc/styleguide/item-architecture-alignment.html
similarity index 67%
rename from doc/styleguide/item-layout-alignment.html
rename to doc/styleguide/item-architecture-alignment.html
index 4a3d6a9..7ecd445 100644
--- a/doc/styleguide/item-layout-alignment.html
+++ b/doc/styleguide/item-architecture-alignment.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-layout-alignment" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-alignment" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-layout-alignment">
+            <a class="kss-title__permalink" href="#kssref-architecture-alignment">
               Align content
             </a>
           </h2>
diff --git a/doc/styleguide/item-slide-background.html b/doc/styleguide/item-architecture-background.html
similarity index 72%
rename from doc/styleguide/item-slide-background.html
rename to doc/styleguide/item-architecture-background.html
index a204824..139b753 100644
--- a/doc/styleguide/item-slide-background.html
+++ b/doc/styleguide/item-architecture-background.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-slide-background" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-background" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-slide-background">
+            <a class="kss-title__permalink" href="#kssref-architecture-background">
               Backgrounds
             </a>
           </h2>
diff --git a/doc/styleguide/item-base-backgrounds-gradient.html b/doc/styleguide/item-architecture-backgrounds-gradient.html
similarity index 50%
rename from doc/styleguide/item-base-backgrounds-gradient.html
rename to doc/styleguide/item-architecture-backgrounds-gradient.html
index 25f2a8e..133436e 100644
--- a/doc/styleguide/item-base-backgrounds-gradient.html
+++ b/doc/styleguide/item-architecture-backgrounds-gradient.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,47 +55,17 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-base-backgrounds-gradient" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-architecture-backgrounds-gradient" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-base-backgrounds-gradient">
-              Gradient Backgrounds
+            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds-gradient">
+              Backgrounds - Gradient
             </a>
           </h3>
 
@@ -181,7 +101,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_color.scss</code>, line 194
+            Source: <code>_color.scss</code>, line 193
           </div>
 
       </div>
diff --git a/doc/styleguide/item-base-backgrounds-transparent.html b/doc/styleguide/item-architecture-backgrounds-transparent.html
similarity index 51%
rename from doc/styleguide/item-base-backgrounds-transparent.html
rename to doc/styleguide/item-architecture-backgrounds-transparent.html
index ccb2c2d..6820079 100644
--- a/doc/styleguide/item-base-backgrounds-transparent.html
+++ b/doc/styleguide/item-architecture-backgrounds-transparent.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,47 +55,17 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-base-backgrounds-transparent" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-architecture-backgrounds-transparent" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-base-backgrounds-transparent">
-              Transparent Backgrounds
+            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds-transparent">
+              Backgrounds - Transparent
             </a>
           </h3>
 
diff --git a/doc/styleguide/item-base-backgrounds.html b/doc/styleguide/item-architecture-backgrounds.html
similarity index 58%
rename from doc/styleguide/item-base-backgrounds.html
rename to doc/styleguide/item-architecture-backgrounds.html
index 0d39eae..c7b673f 100644
--- a/doc/styleguide/item-base-backgrounds.html
+++ b/doc/styleguide/item-architecture-backgrounds.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-base-backgrounds" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-base-backgrounds">
+            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds">
               Backgrounds
             </a>
           </h2>
diff --git a/doc/styleguide/item-buttons.html b/doc/styleguide/item-architecture-buttons.html
similarity index 52%
rename from doc/styleguide/item-buttons.html
rename to doc/styleguide/item-architecture-buttons.html
index 69d963b..8273627 100644
--- a/doc/styleguide/item-buttons.html
+++ b/doc/styleguide/item-architecture-buttons.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,49 +55,19 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-buttons" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div id="kssref-architecture-buttons" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-buttons">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-buttons">
               Buttons
             </a>
-          </h1>
+          </h2>
 
 
         </div>
diff --git a/doc/styleguide/item-typography-columns.html b/doc/styleguide/item-architecture-columns.html
similarity index 51%
rename from doc/styleguide/item-typography-columns.html
rename to doc/styleguide/item-architecture-columns.html
index 6df77e1..84bdc47 100644
--- a/doc/styleguide/item-typography-columns.html
+++ b/doc/styleguide/item-architecture-columns.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-columns" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-columns" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-columns">
+            <a class="kss-title__permalink" href="#kssref-architecture-columns">
               Columns
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-context.html b/doc/styleguide/item-architecture-context.html
similarity index 50%
rename from doc/styleguide/item-typography-context.html
rename to doc/styleguide/item-architecture-context.html
index 304157d..2bfeea7 100644
--- a/doc/styleguide/item-typography-context.html
+++ b/doc/styleguide/item-architecture-context.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-context" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-context" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-context">
+            <a class="kss-title__permalink" href="#kssref-architecture-context">
               Context
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-data.html b/doc/styleguide/item-architecture-data.html
similarity index 50%
rename from doc/styleguide/item-typography-data.html
rename to doc/styleguide/item-architecture-data.html
index c07cd93..7364e79 100644
--- a/doc/styleguide/item-typography-data.html
+++ b/doc/styleguide/item-architecture-data.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-data" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-data" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-data">
+            <a class="kss-title__permalink" href="#kssref-architecture-data">
               Data
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-emoji.html b/doc/styleguide/item-architecture-emoji.html
similarity index 50%
rename from doc/styleguide/item-typography-emoji.html
rename to doc/styleguide/item-architecture-emoji.html
index ab7afa5..6145cdb 100644
--- a/doc/styleguide/item-typography-emoji.html
+++ b/doc/styleguide/item-architecture-emoji.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-emoji" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-emoji" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-emoji">
+            <a class="kss-title__permalink" href="#kssref-architecture-emoji">
               Emoji
             </a>
           </h2>
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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-forms-user" class="kss-section kss-section--depth-3 is-fullscreen">
+
+        <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>
+</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/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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-forms" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <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>
+</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/item-grid.html b/doc/styleguide/item-architecture-grid.html
similarity index 63%
rename from doc/styleguide/item-grid.html
rename to doc/styleguide/item-architecture-grid.html
index 5769d9a..6a54c45 100644
--- a/doc/styleguide/item-grid.html
+++ b/doc/styleguide/item-architecture-grid.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,49 +55,19 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-grid" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div id="kssref-architecture-grid" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-grid">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-architecture-grid">
               Grid
             </a>
-          </h1>
+          </h2>
 
             <div class="kss-description">
               <p>Basic Grid (Flexible blocks)
diff --git a/doc/styleguide/item-typography-info.html b/doc/styleguide/item-architecture-info.html
similarity index 50%
rename from doc/styleguide/item-typography-info.html
rename to doc/styleguide/item-architecture-info.html
index 06b953d..dd6b936 100644
--- a/doc/styleguide/item-typography-info.html
+++ b/doc/styleguide/item-architecture-info.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-info" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-info" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-info">
+            <a class="kss-title__permalink" href="#kssref-architecture-info">
               Info Messages
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-interviews.html b/doc/styleguide/item-architecture-interviews.html
similarity index 55%
rename from doc/styleguide/item-typography-interviews.html
rename to doc/styleguide/item-architecture-interviews.html
index e938cd5..f1cfe82 100644
--- a/doc/styleguide/item-typography-interviews.html
+++ b/doc/styleguide/item-architecture-interviews.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-interviews" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-interviews" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-interviews">
+            <a class="kss-title__permalink" href="#kssref-architecture-interviews">
               Interviews
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-intro.html b/doc/styleguide/item-architecture-intro.html
similarity index 50%
rename from doc/styleguide/item-typography-intro.html
rename to doc/styleguide/item-architecture-intro.html
index 6ba1ee4..3f7fea3 100644
--- a/doc/styleguide/item-typography-intro.html
+++ b/doc/styleguide/item-architecture-intro.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-intro" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-intro" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-intro">
+            <a class="kss-title__permalink" href="#kssref-architecture-intro">
               Intro
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-label.html b/doc/styleguide/item-architecture-label.html
similarity index 50%
rename from doc/styleguide/item-typography-label.html
rename to doc/styleguide/item-architecture-label.html
index 3ffbb29..bfe5766 100644
--- a/doc/styleguide/item-typography-label.html
+++ b/doc/styleguide/item-architecture-label.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-label" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-label" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-label">
+            <a class="kss-title__permalink" href="#kssref-architecture-label">
               Label
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-landings.html b/doc/styleguide/item-architecture-landings.html
similarity index 50%
rename from doc/styleguide/item-typography-landings.html
rename to doc/styleguide/item-architecture-landings.html
index 9f544a0..440c3f6 100644
--- a/doc/styleguide/item-typography-landings.html
+++ b/doc/styleguide/item-architecture-landings.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-landings" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-landings" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-landings">
+            <a class="kss-title__permalink" href="#kssref-architecture-landings">
               Landings
             </a>
           </h2>
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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-lowercase" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <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>
+</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/item-blocks-navigation.html b/doc/styleguide/item-architecture-navigation.html
similarity index 52%
rename from doc/styleguide/item-blocks-navigation.html
rename to doc/styleguide/item-architecture-navigation.html
index 51490f8..145224d 100644
--- a/doc/styleguide/item-blocks-navigation.html
+++ b/doc/styleguide/item-architecture-navigation.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-blocks-navigation" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-navigation" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-blocks-navigation">
+            <a class="kss-title__permalink" href="#kssref-architecture-navigation">
               Slides navigation
             </a>
           </h2>
@@ -217,6 +137,65 @@
 
 
 
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
+/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>
+</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/item-typography-pull_quote.html b/doc/styleguide/item-architecture-pull_quote.html
similarity index 55%
rename from doc/styleguide/item-typography-pull_quote.html
rename to doc/styleguide/item-architecture-pull_quote.html
index 6b40381..abda1c2 100644
--- a/doc/styleguide/item-typography-pull_quote.html
+++ b/doc/styleguide/item-architecture-pull_quote.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-pull_quote" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-pull_quote" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-pull_quote">
+            <a class="kss-title__permalink" href="#kssref-architecture-pull_quote">
               Pull Quote
             </a>
           </h2>
diff --git a/doc/styleguide/item-layout-radius.html b/doc/styleguide/item-architecture-radius.html
similarity index 56%
rename from doc/styleguide/item-layout-radius.html
rename to doc/styleguide/item-architecture-radius.html
index 0122cf6..427a6f5 100644
--- a/doc/styleguide/item-layout-radius.html
+++ b/doc/styleguide/item-architecture-radius.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-layout-radius" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-radius" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-layout-radius">
+            <a class="kss-title__permalink" href="#kssref-architecture-radius">
               Radius
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-separator.html b/doc/styleguide/item-architecture-separator.html
similarity index 50%
rename from doc/styleguide/item-typography-separator.html
rename to doc/styleguide/item-architecture-separator.html
index 81b6e5c..492a047 100644
--- a/doc/styleguide/item-typography-separator.html
+++ b/doc/styleguide/item-architecture-separator.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-separator" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-separator" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-separator">
+            <a class="kss-title__permalink" href="#kssref-architecture-separator">
               Separator
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-serif.html b/doc/styleguide/item-architecture-serif.html
similarity index 50%
rename from doc/styleguide/item-typography-serif.html
rename to doc/styleguide/item-architecture-serif.html
index 71b75cd..2c89b31 100644
--- a/doc/styleguide/item-typography-serif.html
+++ b/doc/styleguide/item-architecture-serif.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-serif" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-serif" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-serif">
+            <a class="kss-title__permalink" href="#kssref-architecture-serif">
               Serif
             </a>
           </h2>
diff --git a/doc/styleguide/item-layout-shadow.html b/doc/styleguide/item-architecture-shadow.html
similarity index 56%
rename from doc/styleguide/item-layout-shadow.html
rename to doc/styleguide/item-architecture-shadow.html
index fa86426..5989338 100644
--- a/doc/styleguide/item-layout-shadow.html
+++ b/doc/styleguide/item-architecture-shadow.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-layout-shadow" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-shadow" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-layout-shadow">
+            <a class="kss-title__permalink" href="#kssref-architecture-shadow">
               Shadows
             </a>
           </h2>
diff --git a/doc/styleguide/item-layout-sizes.html b/doc/styleguide/item-architecture-sizes.html
similarity index 64%
rename from doc/styleguide/item-layout-sizes.html
rename to doc/styleguide/item-architecture-sizes.html
index aa54f44..e21297e 100644
--- a/doc/styleguide/item-layout-sizes.html
+++ b/doc/styleguide/item-architecture-sizes.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-layout-sizes" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-sizes" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-layout-sizes">
+            <a class="kss-title__permalink" href="#kssref-architecture-sizes">
               Resizing
             </a>
           </h2>
diff --git a/doc/styleguide/item-slides-bottom.html b/doc/styleguide/item-architecture-slides-bottom.html
similarity index 52%
rename from doc/styleguide/item-slides-bottom.html
rename to doc/styleguide/item-architecture-slides-bottom.html
index 10235ba..733b408 100644
--- a/doc/styleguide/item-slides-bottom.html
+++ b/doc/styleguide/item-architecture-slides-bottom.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,49 +55,19 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-slides-bottom" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-slides-bottom" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-slides-bottom">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-architecture-slides-bottom">
               Align bottom
             </a>
-          </h2>
+          </h3>
 
 
         </div>
diff --git a/doc/styleguide/item-slides-top.html b/doc/styleguide/item-architecture-slides-top.html
similarity index 52%
rename from doc/styleguide/item-slides-top.html
rename to doc/styleguide/item-architecture-slides-top.html
index f906fae..0e93fbb 100644
--- a/doc/styleguide/item-slides-top.html
+++ b/doc/styleguide/item-architecture-slides-top.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,49 +55,19 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-slides-top" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-slides-top" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-slides-top">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-architecture-slides-top">
               Align top
             </a>
-          </h2>
+          </h3>
 
 
         </div>
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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-slides" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <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>
+</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/item-typography-subtitle.html b/doc/styleguide/item-architecture-subtitle.html
similarity index 51%
rename from doc/styleguide/item-typography-subtitle.html
rename to doc/styleguide/item-architecture-subtitle.html
index 4366eaf..2997c89 100644
--- a/doc/styleguide/item-typography-subtitle.html
+++ b/doc/styleguide/item-architecture-subtitle.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-subtitle" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-subtitle" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-subtitle">
+            <a class="kss-title__permalink" href="#kssref-architecture-subtitle">
               Subtitule
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography-symbols.html b/doc/styleguide/item-architecture-symbols.html
similarity index 50%
rename from doc/styleguide/item-typography-symbols.html
rename to doc/styleguide/item-architecture-symbols.html
index 80495a8..8631a98 100644
--- a/doc/styleguide/item-typography-symbols.html
+++ b/doc/styleguide/item-architecture-symbols.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-typography-symbols" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-symbols" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-symbols">
+            <a class="kss-title__permalink" href="#kssref-architecture-symbols">
               Symbols
             </a>
           </h2>
diff --git a/doc/styleguide/item-elements-tables.html b/doc/styleguide/item-architecture-tables.html
similarity index 56%
rename from doc/styleguide/item-elements-tables.html
rename to doc/styleguide/item-architecture-tables.html
index 8601570..37f7f15 100644
--- a/doc/styleguide/item-elements-tables.html
+++ b/doc/styleguide/item-architecture-tables.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-elements-tables" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-architecture-tables" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-elements-tables">
+            <a class="kss-title__permalink" href="#kssref-architecture-tables">
               Tables
             </a>
           </h2>
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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-try" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <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>
+</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/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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-uppercase" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <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/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 @@
+<!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" class="kss-fullscreen-mode">
+<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 is-fullscreen">
+
+        <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>
+</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/item-base-colors.html b/doc/styleguide/item-base-colors.html
deleted file mode 100644
index 0e4bfff..0000000
--- a/doc/styleguide/item-base-colors.html
+++ /dev/null
@@ -1,148 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-base-colors" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-base-colors">
-            <span class="kss-title__ref">
-              1.1
-              <span class="kss-title__permalink-hash">
-                  #Base.colors
-              </span>
-            </span>
-            Highlight Colors
-          </a>
-        </h2>
-
-          <div class="kss-description">
-            <p>Colors we use for higlighting states.</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</span>
-<span class="bg-secondary size-20">Secondary</span>
-<span class="bg-light size-20">Light</span>
-<span class="bg-black size-20">Black</span>
-<span class="bg-black-blue size-20">Black blue</span>
-<span class="bg-blue size-20">Blue</span>
-<span class="bg-brown size-20">Brown</span>
-<span class="bg-gray size-20">Gray</span>
-<span class="bg-green size-20">Green</span>
-<span class="bg-purple size-20">Purple</span>
-<span class="bg-red size-20">Red</span>
-<span class="bg-white size-20">White</span>
-<span class="bg-facebook size-20">Facebook</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&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-secondary size-20&quot;&gt;Secondary&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-light size-20&quot;&gt;Light&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-black size-20&quot;&gt;Black&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-black-blue size-20&quot;&gt;Black blue&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-blue size-20&quot;&gt;Blue&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-brown size-20&quot;&gt;Brown&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-gray size-20&quot;&gt;Gray&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-green size-20&quot;&gt;Green&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-purple size-20&quot;&gt;Purple&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-red size-20&quot;&gt;Red&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-white size-20&quot;&gt;White&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-facebook size-20&quot;&gt;Facebook&lt;/span&gt;</code></pre>
-          </details>
-
-        <div class="kss-source kss-style">
-          Source: <code>_color.scss</code>, line 107
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-base-elements.html b/doc/styleguide/item-base-elements.html
deleted file mode 100644
index 86aceea..0000000
--- a/doc/styleguide/item-base-elements.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-base-elements" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-base-elements">
-            <span class="kss-title__ref">
-              4.2
-              <span class="kss-title__permalink-hash">
-                  #base.elements
-              </span>
-            </span>
-            Elements
-          </a>
-        </h2>
-
-
-      </div>
-
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 272
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-base-typography.html b/doc/styleguide/item-base-typography.html
deleted file mode 100644
index a75dac2..0000000
--- a/doc/styleguide/item-base-typography.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-base-typography" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-base-typography">
-            <span class="kss-title__ref">
-              4.1
-              <span class="kss-title__permalink-hash">
-                  #base.typography
-              </span>
-            </span>
-            Typography
-          </a>
-        </h2>
-
-
-      </div>
-
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 265
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-base.html b/doc/styleguide/item-base.html
deleted file mode 100644
index a6667d3..0000000
--- a/doc/styleguide/item-base.html
+++ /dev/null
@@ -1,209 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</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-base.html">
-            <span class="kss-nav__name">Base</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-base.html#kssref-base-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-base.html#kssref-base-backgrounds-gradient">
-                    <span class="kss-nav__name">Gradient 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-base.html#kssref-base-backgrounds-transparent">
-                    <span class="kss-nav__name">Transparent Backgrounds</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-base" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-base">
-              Base
-            </a>
-          </h1>
-
-
-        </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/item-blocks.html b/doc/styleguide/item-blocks.html
deleted file mode 100644
index 4f49450..0000000
--- a/doc/styleguide/item-blocks.html
+++ /dev/null
@@ -1,224 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</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-blocks.html">
-            <span class="kss-nav__name">Blocks</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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-toc">
-                    <span class="kss-nav__name">Table of contents</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-blocks" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-blocks">
-              Blocks
-            </a>
-          </h1>
-
-
-        </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/item-browser.html b/doc/styleguide/item-browser.html
deleted file mode 100644
index fba6a60..0000000
--- a/doc/styleguide/item-browser.html
+++ /dev/null
@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-avatars.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-badgets.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-browser.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Screenshots</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-buttons.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Buttons</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Slide</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Typography</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-browser" class="kss-section kss-section--depth-1 is-fullscreen">
-
-      <div class="kss-style">
-        <h1 class="kss-title kss-title--level-1">
-          <a class="kss-title__permalink" href="#kssref-browser">
-            <span class="kss-title__ref">
-              4
-              <span class="kss-title__permalink-hash">
-                  #Browser
-              </span>
-            </span>
-            Screenshots
-          </a>
-        </h1>
-
-          <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>
-</article>
-
-<!-- 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/item-classes-layout-shadow.html b/doc/styleguide/item-classes-layout-shadow.html
deleted file mode 100644
index e0ca66a..0000000
--- a/doc/styleguide/item-classes-layout-shadow.html
+++ /dev/null
@@ -1,150 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-classes.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Classes</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-classes-layout-shadow" class="kss-section kss-section--depth-3 is-fullscreen">
-
-      <div class="kss-style">
-        <h3 class="kss-title kss-title--level-3">
-          <a class="kss-title__permalink" href="#kssref-classes-layout-shadow">
-            <span class="kss-title__ref">
-              1.1.1
-              <span class="kss-title__permalink-hash">
-                  #Classes.Layout.Shadow
-              </span>
-            </span>
-            Shadows
-          </a>
-        </h3>
-
-          <p class="kss-toolbar">
-            <a href="#kssref-classes-layout-shadow" data-kss-guides="true">
-              <span class="kss-toolbar__tooltip">Toggle example guides</span>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
-                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
-                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
-                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
-                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
-                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
-                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
-                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
-                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
-                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
-              </svg>
-            </a>
-            <a href="#kssref-classes-layout-shadow" data-kss-markup="true">
-              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
-                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
-                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
-              </svg>
-            </a>
-          </p>
-
-          <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"><ul><li>Option 1</li><li>Option 2</li><li>Option 3</li><li>Option 4</li></ul></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;&lt;ul&gt;&lt;li&gt;Option 1&lt;/li&gt;&lt;li&gt;Option 2&lt;/li&gt;&lt;li&gt;Option 3&lt;/li&gt;&lt;li&gt;Option 4&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;</code></pre>
-          </details>
-
-        <div class="kss-source kss-style">
-          Source: <code>_base.scss</code>, line 73
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-classes-layout.html b/doc/styleguide/item-classes-layout.html
deleted file mode 100644
index 0521fa4..0000000
--- a/doc/styleguide/item-classes-layout.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-classes.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Classes</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-classes-layout" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-classes-layout">
-            <span class="kss-title__ref">
-              1.1
-              <span class="kss-title__permalink-hash">
-                  #Classes.Layout
-              </span>
-            </span>
-            Classes.Layout
-          </a>
-        </h2>
-
-
-
-      </div>
-
-
-
-    </div>
-</article>
-
-<!-- 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/item-classes.html b/doc/styleguide/item-classes.html
deleted file mode 100644
index 4a5f607..0000000
--- a/doc/styleguide/item-classes.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-classes.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Classes</span>
-        </a>
-            <ul class="kss-nav__menu-child">
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-classes.html#kssref-classes-layout">
-                  <span class="kss-nav__ref ">1.1</span
-                  ><span class="kss-nav__name">Classes.Layout</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-classes.html#kssref-classes-layout-shadow">
-                  <span class="kss-nav__ref kss-nav__ref-child">1.1.1</span
-                  ><span class="kss-nav__name">Shadows</span>
-                </a>
-              </li>
-            </ul>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-classes" class="kss-section kss-section--depth-1 is-fullscreen">
-
-      <div class="kss-style">
-        <h1 class="kss-title kss-title--level-1">
-          <a class="kss-title__permalink" href="#kssref-classes">
-            <span class="kss-title__ref">
-              1
-              <span class="kss-title__permalink-hash">
-                  #Classes
-              </span>
-            </span>
-            Classes
-          </a>
-        </h1>
-
-
-
-      </div>
-
-
-
-    </div>
-</article>
-
-<!-- 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/item-components-article-post-title-this-controls-the-organization-of-your-style-guide-here-i-m-filing-this-component-inside-components-article-post-title-.html b/doc/styleguide/item-components-article-post-title-this-controls-the-organization-of-your-style-guide-here-i-m-filing-this-component-inside-components-article-post-title-.html
deleted file mode 100644
index a06d9ec..0000000
--- a/doc/styleguide/item-components-article-post-title-this-controls-the-organization-of-your-style-guide-here-i-m-filing-this-component-inside-components-article-post-title-.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide-here-i-m-filing-this-component-inside-components-article-post-title-" class="kss-section kss-section--depth-4 is-fullscreen">
-
-      <div class="kss-style">
-        <h4 class="kss-title kss-title--level-4">
-          <a class="kss-title__permalink" href="#kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide-here-i-m-filing-this-component-inside-components-article-post-title-">
-            <span class="kss-title__ref">
-              5.1.1.1
-              <span class="kss-title__permalink-hash">
-                  #Components.article.post-title (ꜛ this controls the organization of your style guide. Here, I&#x27;m filing this component inside Components / Article / Post Title)
-              </span>
-            </span>
-            Post Title (this will be the title of your component)
-          </a>
-        </h4>
-
-          <div class="kss-description">
-            <p>Large, <strong>in charge</strong>, and centered. (this is the description of your component. you can use markdown in here.)</p>
-<p>Markup (define the markup to be used in your styleguide):</p>
-<h1 class="post-title">A Post Title</h1>
-          </div>
-
-      </div>
-
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 142
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-components-article-post-title-this-controls-the-organization-of-your-style-guide.html b/doc/styleguide/item-components-article-post-title-this-controls-the-organization-of-your-style-guide.html
deleted file mode 100644
index 9708ecf..0000000
--- a/doc/styleguide/item-components-article-post-title-this-controls-the-organization-of-your-style-guide.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide" class="kss-section kss-section--depth-3 is-fullscreen">
-
-      <div class="kss-style">
-        <h3 class="kss-title kss-title--level-3">
-          <a class="kss-title__permalink" href="#kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide">
-            <span class="kss-title__ref">
-              5.1.1
-              <span class="kss-title__permalink-hash">
-                  #Components.article.post-title (ꜛ this controls the organization of your style guide
-              </span>
-            </span>
-            Components.article.post-title (ꜛ this controls the organization of your style guide
-          </a>
-        </h3>
-
-
-      </div>
-
-
-
-    </div>
-</article>
-
-<!-- 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/item-components-article.html b/doc/styleguide/item-components-article.html
deleted file mode 100644
index 1874ed2..0000000
--- a/doc/styleguide/item-components-article.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-components-article" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-components-article">
-            <span class="kss-title__ref">
-              5.1
-              <span class="kss-title__permalink-hash">
-                  #Components.article
-              </span>
-            </span>
-            Article
-          </a>
-        </h2>
-
-          <div class="kss-description">
-            <p>An article is made up of a title, featured image, and some default
-typographic settings for links, italics, bold, and blockquotes.</p>
-
-          </div>
-
-      </div>
-
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 177
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-components-button-organization-just-as-before-.html b/doc/styleguide/item-components-button-organization-just-as-before-.html
deleted file mode 100644
index 1425651..0000000
--- a/doc/styleguide/item-components-button-organization-just-as-before-.html
+++ /dev/null
@@ -1,145 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-components-button-organization-just-as-before-" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-components-button-organization-just-as-before-">
-            <span class="kss-title__ref">
-              5.2
-              <span class="kss-title__permalink-hash">
-                  #Components.button (organization, just as before)
-              </span>
-            </span>
-            Buttons (title, same as before)
-          </a>
-        </h2>
-
-          <div class="kss-description">
-            <p>Various button styles. (description, just as before)</p>
-<p>(a new modifiers section)
-:hover - When user hovers over button.
-:focus - When button is focused.
-.button--small - A small button.
-.button--large - A large button.</p>
-
-          </div>
-
-      </div>
-
-        <div class="kss-modifier__wrapper">
-          <div class="kss-modifier__heading kss-style">
-            Example
-          </div>
-
-
-          <div class="kss-modifier__example">
-            (we add the `` to every element that has a modifier)
-Link Button
-<button class="button ">Button Element</button>
-<input class="button " type="button" value="Input Button" />
-            <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">(we add the &#x60;&#x60; to every element that has a modifier)
-Link Button
-&lt;button class&#x3D;&quot;button &quot;&gt;Button Element&lt;/button&gt;
-&lt;input class&#x3D;&quot;button &quot; type&#x3D;&quot;button&quot; value&#x3D;&quot;Input Button&quot; /&gt;</code></pre>
-          </details>
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 227
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-components-buttons-bold.html b/doc/styleguide/item-components-buttons-bold.html
deleted file mode 100644
index 8fdfd15..0000000
--- a/doc/styleguide/item-components-buttons-bold.html
+++ /dev/null
@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-components-buttons-bold" class="kss-section kss-section--depth-3 is-fullscreen">
-
-      <div class="kss-style">
-        <h3 class="kss-title kss-title--level-3">
-          <a class="kss-title__permalink" href="#kssref-components-buttons-bold">
-            <span class="kss-title__ref">
-              5.3.1
-              <span class="kss-title__permalink-hash">
-                  #Components.Buttons.bold
-              </span>
-            </span>
-            Bold Button
-          </a>
-        </h3>
-
-          <div class="kss-description">
-            <p>Use this class for a bolder, stronger looking button.</p>
-
-          </div>
-
-      </div>
-
-        <div class="kss-modifier__wrapper">
-          <div class="kss-modifier__heading kss-style">
-            Example
-          </div>
-
-
-          <div class="kss-modifier__example">
-            <button class="btn btn-bold">Click Me</button>
-            <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;button class&#x3D;&quot;btn btn-bold&quot;&gt;Click Me&lt;/button&gt;</code></pre>
-          </details>
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 34
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-components-buttons.html b/doc/styleguide/item-components-buttons.html
deleted file mode 100644
index fb4a2ce..0000000
--- a/doc/styleguide/item-components-buttons.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-components-buttons" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-components-buttons">
-            <span class="kss-title__ref">
-              5.3
-              <span class="kss-title__permalink-hash">
-                  #Components.Buttons
-              </span>
-            </span>
-            Components.Buttons
-          </a>
-        </h2>
-
-
-      </div>
-
-
-
-    </div>
-</article>
-
-<!-- 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/item-components.html b/doc/styleguide/item-components.html
deleted file mode 100644
index 31053d6..0000000
--- a/doc/styleguide/item-components.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-            <ul class="kss-nav__menu-child">
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-article">
-                  <span class="kss-nav__ref ">5.1</span
-                  ><span class="kss-nav__name">Article</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide">
-                  <span class="kss-nav__ref kss-nav__ref-child">5.1.1</span
-                  ><span class="kss-nav__name">Components.article.post-title (ꜛ this controls the organization of your style guide</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-button-organization-just-as-before-">
-                  <span class="kss-nav__ref ">5.2</span
-                  ><span class="kss-nav__name">Buttons (title, same as before)</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-buttons">
-                  <span class="kss-nav__ref ">5.3</span
-                  ><span class="kss-nav__name">Components.Buttons</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-buttons-bold">
-                  <span class="kss-nav__ref kss-nav__ref-child">5.3.1</span
-                  ><span class="kss-nav__name">Bold Button</span>
-                </a>
-              </li>
-            </ul>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-components" class="kss-section kss-section--depth-1 is-fullscreen">
-
-      <div class="kss-style">
-        <h1 class="kss-title kss-title--level-1">
-          <a class="kss-title__permalink" href="#kssref-components">
-            <span class="kss-title__ref">
-              5
-              <span class="kss-title__permalink-hash">
-                  #Components
-              </span>
-            </span>
-            Components
-          </a>
-        </h1>
-
-          <div class="kss-description">
-            <p>Components are ingredients of our design system. They may be made up of smaller groups of styles.</p>
-
-          </div>
-
-      </div>
-
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 169
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-content.html b/doc/styleguide/item-content.html
deleted file mode 100644
index d50aa60..0000000
--- a/doc/styleguide/item-content.html
+++ /dev/null
@@ -1,199 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</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-content.html">
-            <span class="kss-nav__name">Content</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-content.html#kssref-content-resume">
-                    <span class="kss-nav__name">Work / Resumé / CV</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-content" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-content">
-              Content
-            </a>
-          </h1>
-
-
-        </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/item-flexblock-activity.html b/doc/styleguide/item-contents-activity.html
similarity index 62%
rename from doc/styleguide/item-flexblock-activity.html
rename to doc/styleguide/item-contents-activity.html
index 5ed62cb..2f24427 100644
--- a/doc/styleguide/item-flexblock-activity.html
+++ b/doc/styleguide/item-contents-activity.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,47 +55,17 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-activity" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-activity" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-activity">
-               Activity
+            <a class="kss-title__permalink" href="#kssref-contents-activity">
+               CVs, News ad Activity
             </a>
           </h2>
 
@@ -261,7 +181,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-activity.scss</code>, line 5
+            Source: <code>modules/_flexblock-activity.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-clients.html b/doc/styleguide/item-contents-clients.html
similarity index 64%
rename from doc/styleguide/item-flexblock-clients.html
rename to doc/styleguide/item-contents-clients.html
index 5c96833..20f2e20 100644
--- a/doc/styleguide/item-flexblock-clients.html
+++ b/doc/styleguide/item-contents-clients.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-clients" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-clients" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-clients">
+            <a class="kss-title__permalink" href="#kssref-contents-clients">
               Clients
             </a>
           </h2>
@@ -259,7 +179,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-clients.scss</code>, line 5
+            Source: <code>modules/_flexblock-clients.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-features.html b/doc/styleguide/item-contents-features.html
similarity index 59%
rename from doc/styleguide/item-flexblock-features.html
rename to doc/styleguide/item-contents-features.html
index 51e2f96..e4d6b73 100644
--- a/doc/styleguide/item-flexblock-features.html
+++ b/doc/styleguide/item-contents-features.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-features" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-features" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-features">
+            <a class="kss-title__permalink" href="#kssref-contents-features">
               Features
             </a>
           </h2>
@@ -256,7 +176,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-features.scss</code>, line 5
+            Source: <code>modules/_flexblock-features.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-blink.html b/doc/styleguide/item-contents-flexblocks.html
similarity index 59%
rename from doc/styleguide/item-flexblock-blink.html
rename to doc/styleguide/item-contents-flexblocks.html
index 8e90189..3707673 100644
--- a/doc/styleguide/item-flexblock-blink.html
+++ b/doc/styleguide/item-contents-flexblocks.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-blink" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-flexblocks" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-blink">
+            <a class="kss-title__permalink" href="#kssref-contents-flexblocks">
               Flexblocks
             </a>
           </h2>
@@ -284,7 +204,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock.scss</code>, line 6
+            Source: <code>modules/_flexblock.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-gallery-overlay.html b/doc/styleguide/item-contents-gallery-overlay.html
similarity index 59%
rename from doc/styleguide/item-flexblock-gallery-overlay.html
rename to doc/styleguide/item-contents-gallery-overlay.html
index 750c503..5ca87d2 100644
--- a/doc/styleguide/item-flexblock-gallery-overlay.html
+++ b/doc/styleguide/item-contents-gallery-overlay.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-gallery-overlay" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-contents-gallery-overlay" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
+            <a class="kss-title__permalink" href="#kssref-contents-gallery-overlay">
               Gallery + Overflow
             </a>
           </h3>
@@ -233,7 +153,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-gallery.scss</code>, line 50
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 44
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-gallery.html b/doc/styleguide/item-contents-gallery.html
similarity index 59%
rename from doc/styleguide/item-flexblock-gallery.html
rename to doc/styleguide/item-contents-gallery.html
index d766ce7..57bbb53 100644
--- a/doc/styleguide/item-flexblock-gallery.html
+++ b/doc/styleguide/item-contents-gallery.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,47 +55,17 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-gallery" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-gallery" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-gallery">
-              Gallery
+            <a class="kss-title__permalink" href="#kssref-contents-gallery">
+              Galleries (portfolios, teams...)
             </a>
           </h2>
 
@@ -245,7 +165,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-gallery.scss</code>, line 7
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-metrics.html b/doc/styleguide/item-contents-metrics.html
similarity index 57%
rename from doc/styleguide/item-flexblock-metrics.html
rename to doc/styleguide/item-contents-metrics.html
index 3e5adcd..40470f2 100644
--- a/doc/styleguide/item-flexblock-metrics.html
+++ b/doc/styleguide/item-contents-metrics.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-metrics" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-metrics" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-metrics">
+            <a class="kss-title__permalink" href="#kssref-contents-metrics">
               Metrics
             </a>
           </h2>
@@ -238,7 +158,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-metrics.scss</code>, line 5
+            Source: <code>modules/_flexblock-metrics.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-plans.html b/doc/styleguide/item-contents-plans.html
similarity index 66%
rename from doc/styleguide/item-flexblock-plans.html
rename to doc/styleguide/item-contents-plans.html
index a7dc5c3..abc2bf6 100644
--- a/doc/styleguide/item-flexblock-plans.html
+++ b/doc/styleguide/item-contents-plans.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,47 +55,17 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-plans" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-plans" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-plans">
-              Plans
+            <a class="kss-title__permalink" href="#kssref-contents-plans">
+              Plans / Pricing
             </a>
           </h2>
 
@@ -283,7 +203,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-plans.scss</code>, line 5
+            Source: <code>modules/_flexblock-plans.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-reasons.html b/doc/styleguide/item-contents-reasons.html
similarity index 55%
rename from doc/styleguide/item-flexblock-reasons.html
rename to doc/styleguide/item-contents-reasons.html
index 1312745..f5a7273 100644
--- a/doc/styleguide/item-flexblock-reasons.html
+++ b/doc/styleguide/item-contents-reasons.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-reasons" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-reasons" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-reasons">
+            <a class="kss-title__permalink" href="#kssref-contents-reasons">
               Reasons
             </a>
           </h2>
@@ -195,7 +115,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-reasons.scss</code>, line 5
+            Source: <code>modules/_flexblock-reasons.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-content-resume.html b/doc/styleguide/item-contents-resume.html
similarity index 61%
rename from doc/styleguide/item-content-resume.html
rename to doc/styleguide/item-contents-resume.html
index 33ea5f5..b72a5bf 100644
--- a/doc/styleguide/item-content-resume.html
+++ b/doc/styleguide/item-contents-resume.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-content-resume" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-resume" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-content-resume">
+            <a class="kss-title__permalink" href="#kssref-contents-resume">
               Work / Resumé / CV
             </a>
           </h2>
diff --git a/doc/styleguide/item-flexblock-specs.html b/doc/styleguide/item-contents-specs.html
similarity index 55%
rename from doc/styleguide/item-flexblock-specs.html
rename to doc/styleguide/item-contents-specs.html
index 387f992..dd63882 100644
--- a/doc/styleguide/item-flexblock-specs.html
+++ b/doc/styleguide/item-contents-specs.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-specs" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-specs" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-specs">
+            <a class="kss-title__permalink" href="#kssref-contents-specs">
               Specs
             </a>
           </h2>
@@ -215,7 +135,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-specs.scss</code>, line 5
+            Source: <code>modules/_flexblock-specs.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock-steps.html b/doc/styleguide/item-contents-steps.html
similarity index 58%
rename from doc/styleguide/item-flexblock-steps.html
rename to doc/styleguide/item-contents-steps.html
index 833f1aa..feaef90 100644
--- a/doc/styleguide/item-flexblock-steps.html
+++ b/doc/styleguide/item-contents-steps.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock-steps" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-contents-steps" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-flexblock-steps">
+            <a class="kss-title__permalink" href="#kssref-contents-steps">
                Steps
             </a>
           </h2>
@@ -227,7 +147,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-steps.scss</code>, line 6
+            Source: <code>modules/_flexblock-steps.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/item-flexblock.html b/doc/styleguide/item-contents.html
similarity index 53%
rename from doc/styleguide/item-flexblock.html
rename to doc/styleguide/item-contents.html
index 5d099c9..4e78457 100644
--- a/doc/styleguide/item-flexblock.html
+++ b/doc/styleguide/item-contents.html
@@ -35,126 +35,81 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</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-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
+          <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-flexblock.html#kssref-flexblock-activity">
-                    <span class="kss-nav__name"> Activity</span>
+                  <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-flexblock.html#kssref-flexblock-blink">
-                    <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-flexblock.html#kssref-flexblock-clients">
+                  <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-flexblock.html#kssref-flexblock-features">
+                  <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-flexblock.html#kssref-flexblock-gallery">
-                    <span class="kss-nav__name">Gallery</span>
+                  <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 kss-nav__ref-child" href="section-flexblock.html#kssref-flexblock-gallery-overlay">
+                  <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-flexblock.html#kssref-flexblock-metrics">
+                  <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-flexblock.html#kssref-flexblock-plans">
-                    <span class="kss-nav__name">Plans</span>
+                  <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-flexblock.html#kssref-flexblock-reasons">
+                  <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-flexblock.html#kssref-flexblock-specs">
+                  <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-flexblock.html#kssref-flexblock-steps">
+                  <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-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -162,47 +117,17 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div id="kssref-contents" class="kss-section kss-section--depth-1 is-fullscreen">
 
         <div class="kss-style">
           <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-flexblock">
-              Flexblock
+            <a class="kss-title__permalink" href="#kssref-contents">
+              Contents
             </a>
           </h1>
 
diff --git a/doc/styleguide/item-elements-try.html b/doc/styleguide/item-elements-try.html
deleted file mode 100644
index e233a2e..0000000
--- a/doc/styleguide/item-elements-try.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-elements-try" class="kss-section kss-section--depth-2 is-fullscreen">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-elements-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>
-</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/item-elements.html b/doc/styleguide/item-elements.html
deleted file mode 100644
index 5a3e2b2..0000000
--- a/doc/styleguide/item-elements.html
+++ /dev/null
@@ -1,204 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</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-elements.html">
-            <span class="kss-nav__name">Elements</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-elements.html#kssref-elements-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-elements.html#kssref-elements-try">
-                    <span class="kss-nav__name">Try</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-elements" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-elements">
-              Elements
-            </a>
-          </h1>
-
-
-        </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/item-flexblock-landings.html b/doc/styleguide/item-flexblock-landings.html
deleted file mode 100644
index 232eba2..0000000
--- a/doc/styleguide/item-flexblock-landings.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-flexblock-landings" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-flexblock-landings">
-            <span class="kss-title__ref">
-              2.6
-              <span class="kss-title__permalink-hash">
-                  #Flexblock.Landings
-              </span>
-            </span>
-            Landings
-          </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">
-            <h1 class="text-landing">Landings</h1>
-            <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">
-              <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 220
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/item-forms-user.html b/doc/styleguide/item-forms-user.html
deleted file mode 100644
index dc66a40..0000000
--- a/doc/styleguide/item-forms-user.html
+++ /dev/null
@@ -1,220 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-forms-user" class="kss-section kss-section--depth-2 is-fullscreen">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-forms-user">
-              User
-            </a>
-          </h2>
-
-
-        </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>
-</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/item-forms.html b/doc/styleguide/item-forms.html
deleted file mode 100644
index 4d1d56c..0000000
--- a/doc/styleguide/item-forms.html
+++ /dev/null
@@ -1,199 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</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-forms.html">
-            <span class="kss-nav__name">Forms</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-forms.html#kssref-forms-user">
-                    <span class="kss-nav__name">User</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-forms" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-forms">
-              Forms
-            </a>
-          </h1>
-
-
-        </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/item-cards.html b/doc/styleguide/item-landings-cards.html
similarity index 55%
rename from doc/styleguide/item-cards.html
rename to doc/styleguide/item-landings-cards.html
index ddee360..570e0a6 100644
--- a/doc/styleguide/item-cards.html
+++ b/doc/styleguide/item-landings-cards.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,49 +55,19 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-cards" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div id="kssref-landings-cards" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-cards">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-cards">
               Cards
             </a>
-          </h1>
+          </h2>
 
             <div class="kss-description">
               <p>Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80</p>
diff --git a/doc/styleguide/item-blocks-cites.html b/doc/styleguide/item-landings-cites.html
similarity index 51%
rename from doc/styleguide/item-blocks-cites.html
rename to doc/styleguide/item-landings-cites.html
index 6c9cbae..9b592e5 100644
--- a/doc/styleguide/item-blocks-cites.html
+++ b/doc/styleguide/item-landings-cites.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-blocks-cites" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-cites" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-blocks-cites">
+            <a class="kss-title__permalink" href="#kssref-landings-cites">
               Cites
             </a>
           </h2>
diff --git a/doc/styleguide/item-blocks-cta-cover.html b/doc/styleguide/item-landings-cta-cover.html
similarity index 55%
rename from doc/styleguide/item-blocks-cta-cover.html
rename to doc/styleguide/item-landings-cta-cover.html
index e3effee..a16117f 100644
--- a/doc/styleguide/item-blocks-cta-cover.html
+++ b/doc/styleguide/item-landings-cta-cover.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-blocks-cta-cover" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-cta-cover" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-blocks-cta-cover">
+            <a class="kss-title__permalink" href="#kssref-landings-cta-cover">
               Headings
             </a>
           </h2>
diff --git a/doc/styleguide/item-blocks-cta.html b/doc/styleguide/item-landings-cta.html
similarity index 52%
rename from doc/styleguide/item-blocks-cta.html
rename to doc/styleguide/item-landings-cta.html
index 8abe0a9..831f370 100644
--- a/doc/styleguide/item-blocks-cta.html
+++ b/doc/styleguide/item-landings-cta.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-blocks-cta" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-cta" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-blocks-cta">
+            <a class="kss-title__permalink" href="#kssref-landings-cta">
               Call to action
             </a>
           </h2>
diff --git a/doc/styleguide/item-landings-intro.html b/doc/styleguide/item-landings-intro.html
deleted file mode 100644
index 7329a6d..0000000
--- a/doc/styleguide/item-landings-intro.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-landings.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Landings</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-landings-intro" class="kss-section kss-section--depth-2 is-fullscreen">
-
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-landings-intro">
-            <span class="kss-title__ref">
-              3.1
-              <span class="kss-title__permalink-hash">
-                  #Landings.Intro
-              </span>
-            </span>
-            Intro
-          </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">
-            <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 207
-        </div>
-
-    </div>
-</article>
-
-<!-- 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/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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-longform" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <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>
+</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/item-blocks-quotes.html b/doc/styleguide/item-landings-quotes.html
similarity index 50%
rename from doc/styleguide/item-blocks-quotes.html
rename to doc/styleguide/item-landings-quotes.html
index 0160a7a..3360dbb 100644
--- a/doc/styleguide/item-blocks-quotes.html
+++ b/doc/styleguide/item-landings-quotes.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-blocks-quotes" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-quotes" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-blocks-quotes">
+            <a class="kss-title__permalink" href="#kssref-landings-quotes">
               Quotes
             </a>
           </h2>
diff --git a/doc/styleguide/item-blocks-toc.html b/doc/styleguide/item-landings-toc.html
similarity index 61%
rename from doc/styleguide/item-blocks-toc.html
rename to doc/styleguide/item-landings-toc.html
index 02c3d27..98e6e3a 100644
--- a/doc/styleguide/item-blocks-toc.html
+++ b/doc/styleguide/item-landings-toc.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-blocks-toc" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-toc" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-blocks-toc">
+            <a class="kss-title__permalink" href="#kssref-landings-toc">
               Table of contents
             </a>
           </h2>
diff --git a/doc/styleguide/item-landings.html b/doc/styleguide/item-landings.html
index 311c0ab..00a7ee3 100644
--- a/doc/styleguide/item-landings.html
+++ b/doc/styleguide/item-landings.html
@@ -2,7 +2,7 @@
 <html class="no-js" lang="en">
 <head>
   <meta charset="utf-8">
-  <title>WebSlides</title>
+  <title>WebSlides - Documentation 1.5.0</title>
 
   <meta name="description" content="">
   <meta name="generator" content="kss-node">
@@ -13,105 +13,107 @@
 
 </head>
 <body id="kss-node" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-landings.html">
-          <span class="kss-nav__ref">3</span><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" href="section-landings.html#kssref-landings-intro">
-                  <span class="kss-nav__ref ">3.1</span
-                  ><span class="kss-nav__name">Intro</span>
-                </a>
-              </li>
-            </ul>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
-        </a>
-      </li>
+<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>
-<article role="main" class="kss-main">
-
-    <div id="kssref-landings" class="kss-section kss-section--depth-1 is-fullscreen">
-
-      <div class="kss-style">
-        <h1 class="kss-title kss-title--level-1">
-          <a class="kss-title__permalink" href="#kssref-landings">
-            <span class="kss-title__ref">
-              3
-              <span class="kss-title__permalink-hash">
-                  #Landings
-              </span>
-            </span>
-            Landings
+<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>
-        </h1>
+        </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 is-fullscreen">
+
+        <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 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">
-            <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 228
-        </div>
-
-    </div>
-</article>
+  </div>
+</div>
 
 <!-- SCRIPTS -->
 <script src="kss-assets/kss.js"></script>
diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html
deleted file mode 100644
index b82d4b0..0000000
--- a/doc/styleguide/item-layout.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</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-layout.html">
-            <span class="kss-nav__name">Layout</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-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-sizes">
-                    <span class="kss-nav__name">Resizing</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-layout" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-layout">
-              Layout
-            </a>
-          </h1>
-
-
-        </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/item-longform.html b/doc/styleguide/item-longform.html
deleted file mode 100644
index bada9be..0000000
--- a/doc/styleguide/item-longform.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-longform" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-longform">
-              Longform
-            </a>
-          </h1>
-
-
-        </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>
-</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/item-avatars.html b/doc/styleguide/item-media-avatars.html
similarity index 55%
rename from doc/styleguide/item-avatars.html
rename to doc/styleguide/item-media-avatars.html
index 8b07f14..a955e88 100644
--- a/doc/styleguide/item-avatars.html
+++ b/doc/styleguide/item-media-avatars.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,49 +55,19 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-avatars" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div id="kssref-media-avatars" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-avatars">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-avatars">
               Avatars
             </a>
-          </h1>
+          </h2>
 
             <div class="kss-description">
               <p>You&#39;ll love this</p>
diff --git a/doc/styleguide/item-slide-background-anim.html b/doc/styleguide/item-media-background-anim.html
similarity index 52%
rename from doc/styleguide/item-slide-background-anim.html
rename to doc/styleguide/item-media-background-anim.html
index 4938944..e4d1c94 100644
--- a/doc/styleguide/item-slide-background-anim.html
+++ b/doc/styleguide/item-media-background-anim.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-slide-background-anim" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-media-background-anim" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-slide-background-anim">
+            <a class="kss-title__permalink" href="#kssref-media-background-anim">
               Animated
             </a>
           </h3>
diff --git a/doc/styleguide/item-slide-background-video.html b/doc/styleguide/item-media-background-video.html
similarity index 55%
rename from doc/styleguide/item-slide-background-video.html
rename to doc/styleguide/item-media-background-video.html
index ef3bc6d..078a0d6 100644
--- a/doc/styleguide/item-slide-background-video.html
+++ b/doc/styleguide/item-media-background-video.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,46 +55,16 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-slide-background-video" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-media-background-video" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-slide-background-video">
+            <a class="kss-title__permalink" href="#kssref-media-background-video">
               Video
             </a>
           </h3>
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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-media-background" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <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>
+</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/item-badgets.html b/doc/styleguide/item-media-badgets.html
similarity index 50%
rename from doc/styleguide/item-badgets.html
rename to doc/styleguide/item-media-badgets.html
index 2b8ea2d..d9e0dd7 100644
--- a/doc/styleguide/item-badgets.html
+++ b/doc/styleguide/item-media-badgets.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,49 +55,19 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-badgets" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div id="kssref-media-badgets" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-badgets">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-badgets">
               Badges
             </a>
-          </h1>
+          </h2>
 
             <div class="kss-description">
               <p>App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...</p>
diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html
index 28abe9e..08a7009 100644
--- a/doc/styleguide/item-media-embed.html
+++ b/doc/styleguide/item-media-embed.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,36 +55,6 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
@@ -224,6 +144,3 @@
 <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
 </body>
 </html>
-built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-media-fullscreen-embed" class="kss-section kss-section--depth-3 is-fullscreen">
+
+        <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>
+</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/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 @@
+<!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" class="kss-fullscreen-mode">
+<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 " 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-media-fullscreen" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <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>
+</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/item-screenshots.html b/doc/styleguide/item-media-screenshots.html
similarity index 50%
rename from doc/styleguide/item-screenshots.html
rename to doc/styleguide/item-media-screenshots.html
index f3fac06..4ada1f7 100644
--- a/doc/styleguide/item-screenshots.html
+++ b/doc/styleguide/item-media-screenshots.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -105,49 +55,19 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-screenshots" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div id="kssref-media-screenshots" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-screenshots">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-screenshots">
               Screenshots
             </a>
-          </h1>
+          </h2>
 
             <div class="kss-description">
               <p>HTML browser</p>
diff --git a/doc/styleguide/item-media.html b/doc/styleguide/item-media.html
index 44e40d0..d5abe62 100644
--- a/doc/styleguide/item-media.html
+++ b/doc/styleguide/item-media.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -106,8 +56,28 @@
           </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-embed">
-                    <span class="kss-nav__name">Fullscreen</span>
+                  <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">
@@ -115,38 +85,23 @@
                     <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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-navigation.html b/doc/styleguide/item-navigation.html
deleted file mode 100644
index a7a6217..0000000
--- a/doc/styleguide/item-navigation.html
+++ /dev/null
@@ -1,326 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-navigation" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-navigation">
-              Navigation
-            </a>
-          </h1>
-
-            <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">
-              <nav role="navigation" class="">
-  <ul>
-    <li><a href="">About</a></li>
-    <li><a href="">Clients</a></li>
-    <li class="facebook">
-      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
-        Facebook
-      </a>
-    </li>
-    <li class="twitter">
-      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
-        @WebSlides
-      </a>
-    </li>
-  </ul>
-</nav>
-              <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">
-                <nav role="navigation" class="navbar">
-  <ul>
-    <li><a href="">About</a></li>
-    <li><a href="">Clients</a></li>
-    <li class="facebook">
-      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
-        Facebook
-      </a>
-    </li>
-    <li class="twitter">
-      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
-        @WebSlides
-      </a>
-    </li>
-  </ul>
-</nav>
-                <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">
-                <nav role="navigation" class="aligncenter">
-  <ul>
-    <li><a href="">About</a></li>
-    <li><a href="">Clients</a></li>
-    <li class="facebook">
-      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
-        Facebook
-      </a>
-    </li>
-    <li class="twitter">
-      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
-        @WebSlides
-      </a>
-    </li>
-  </ul>
-</nav>
-                <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">
-                <nav role="navigation" class="alignright">
-  <ul>
-    <li><a href="">About</a></li>
-    <li><a href="">Clients</a></li>
-    <li class="facebook">
-      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
-        Facebook
-      </a>
-    </li>
-    <li class="twitter">
-      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
-        @WebSlides
-      </a>
-    </li>
-  </ul>
-</nav>
-                <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;nav role&#x3D;&quot;navigation&quot; class&#x3D;&quot;[modifier class]&quot;&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;Clients&lt;/a&gt;&lt;/li&gt;
-    &lt;li class&#x3D;&quot;facebook&quot;&gt;
-      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://facebook.com/webslides&quot; title&#x3D;&quot;Facebook&quot;&gt;
-        Facebook
-      &lt;/a&gt;
-    &lt;/li&gt;
-    &lt;li class&#x3D;&quot;twitter&quot;&gt;
-      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://twitter.com/webslides&quot; title&#x3D;&quot;Twitter&quot;&gt;
-        @WebSlides
-      &lt;/a&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/nav&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_navigation.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/item-slide-background-position.html b/doc/styleguide/item-slide-background-position.html
deleted file mode 100644
index e657cc9..0000000
--- a/doc/styleguide/item-slide-background-position.html
+++ /dev/null
@@ -1,276 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" class="kss-fullscreen-mode">
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-slide-background-position" class="kss-section kss-section--depth-3 is-fullscreen">
-
-      <div class="kss-style">
-        <h3 class="kss-title kss-title--level-3">
-          <a class="kss-title__permalink" href="#kssref-slide-background-position">
-            <span class="kss-title__ref">
-              3.1.1
-              <span class="kss-title__permalink-hash">
-                  #Slide.Background.Position
-              </span>
-            </span>
-            Slide backgrounds
-          </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>
-  <span class="" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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]&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/250/250/&#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>
-</article>
-
-<!-- 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/item-slide.html b/doc/styleguide/item-slide.html
deleted file mode 100644
index 0387114..0000000
--- a/doc/styleguide/item-slide.html
+++ /dev/null
@@ -1,209 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</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-slide.html">
-            <span class="kss-nav__name">Slide</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-slide.html#kssref-slide-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 kss-nav__ref-child" href="section-slide.html#kssref-slide-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-slide.html#kssref-slide-background-video">
-                    <span class="kss-nav__name">Video</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-slide" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-slide">
-              Slide
-            </a>
-          </h1>
-
-
-        </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/item-slides.html b/doc/styleguide/item-slides.html
deleted file mode 100644
index 7f1f7fb..0000000
--- a/doc/styleguide/item-slides.html
+++ /dev/null
@@ -1,258 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</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-slides.html">
-            <span class="kss-nav__name">fullscreen</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-slides.html#kssref-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 " href="section-slides.html#kssref-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 " href="section-slides.html#kssref-slides-top">
-                    <span class="kss-nav__name">Align top</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-slides.html">
-            <span class="kss-nav__name">Slides</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-slides.html#kssref-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 " href="section-slides.html#kssref-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 " href="section-slides.html#kssref-slides-top">
-                    <span class="kss-nav__name">Align top</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-slides" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-slides">
-              Slides
-            </a>
-          </h1>
-
-            <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>
-</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/item-typography-lowercase.html b/doc/styleguide/item-typography-lowercase.html
deleted file mode 100644
index 6fc09df..0000000
--- a/doc/styleguide/item-typography-lowercase.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-typography-lowercase" class="kss-section kss-section--depth-2 is-fullscreen">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-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>
-</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/item-typography-uppercase.html b/doc/styleguide/item-typography-uppercase.html
deleted file mode 100644
index 5f8bc62..0000000
--- a/doc/styleguide/item-typography-uppercase.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-typography-uppercase" class="kss-section kss-section--depth-2 is-fullscreen">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-typography-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/item-typography.html b/doc/styleguide/item-typography.html
deleted file mode 100644
index b066153..0000000
--- a/doc/styleguide/item-typography.html
+++ /dev/null
@@ -1,274 +0,0 @@
-<!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" class="kss-fullscreen-mode">
-<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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</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-typography.html">
-            <span class="kss-nav__name">Typography</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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-uppercase">
-                    <span class="kss-nav__name">Uppercase</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-typography" class="kss-section kss-section--depth-1 is-fullscreen">
-
-        <div class="kss-style">
-          <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-typography">
-              Typography
-            </a>
-          </h1>
-
-
-        </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/kss-assets/css/kss-body.scss b/doc/styleguide/kss-assets/css/kss-body.scss
deleted file mode 100644
index 7b24a9a..0000000
--- a/doc/styleguide/kss-assets/css/kss-body.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.kss-body {
-  margin: 0;
-  padding: 0;
-  background: $white;
-}
diff --git a/doc/styleguide/kss-assets/css/kss-colors.scss b/doc/styleguide/kss-assets/css/kss-colors.scss
deleted file mode 100644
index a90dbca..0000000
--- a/doc/styleguide/kss-assets/css/kss-colors.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.kss-colors-container {
-  margin: 0;
-  padding-left: 0;
-
-  @include mq(min, 568px) { margin-left: -10px; }
-}
-
-.kss-color {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 127px;
-  margin: 0 auto;
-  margin-top: 10px;
-  border: 1px solid $gray;
-  border-radius: 2px;
-
-  @include mq(min, 568px) {
-    display: inline-block;
-    width: 225px;
-    margin-left: 10px;
-  }
-}
-
-.kss-color .kss-parameters__description {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px;
-  background: $white;
-}
-
-.kss-color__name {
-  display: block;
-  min-height: 22px;
-  font-weight: 700;
-  font-size: em(14px);
-  line-height: 1.6;
-}
-
-.kss-color__var,
-.kss-color__code {
-  display: block;
-  font-size: em(12px);
-  line-height: 1.4;
-}
-
-.kss-color .kss-parameters__name { display: none; }
-
diff --git a/doc/styleguide/kss-assets/css/kss-documentation.scss b/doc/styleguide/kss-assets/css/kss-documentation.scss
deleted file mode 100644
index 2ea7953..0000000
--- a/doc/styleguide/kss-assets/css/kss-documentation.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-$kss-section-item-color: $cowabunga;
-$kss-modifiers-heading-color: $cowabunga;
-$kss-modifiers-name-color: $cowabunga;
-
-
-.kss-documentation {
-  z-index: 100;
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 100vh;
-  padding: 20px;
-  padding-top: 80px;
-  background: $white;
-  transition: opacity 0.4s ease-out;
-
-  &.kss-state-active { opacity: 0.1; }
-
-  @include mq(min, 1024px) {
-    padding-top: 20px;
-    padding-left: calc(25% + 20px);
-  }
-
-  @include mq(min, 1280px) { padding-left: calc(20% + 20px); }
-
-  @include mq(min, 1440px) { padding-left: calc(15% + 20px); }
-}
-
-.kss-section { margin-bottom: 40px; }
-
-.kss-section__content {
-  border: 1px solid $gray;
-  padding: 1em;
-
-  ol,
-  ul,
-  p,
-  a {
-    font-family: 'Lato', sans-serif;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-}
-
-.kss-section__permalink { text-decoration: none; }
-
-.kss-section__item {
-  margin: 0;
-  margin-bottom: 5px;
-  color: $kss-section-item-color;
-  font-size: rem(32px);
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
-  text-transform: none;
-  letter-spacing: normal;
-
-  &--depth-2 { font-size: rem(30px); }
-
-  &--depth-3 { font-size: rem(22px); }
-
-  &--depth-4 { font-size: rem(20px); }
-
-  &--depth-5 { font-size: rem(18px); }
-
-  &--depth-6 { font-size: rem(16px); }
-}
-
-.kss-section__ref {
-  display: inline-block;
-  vertical-align: middle;
-  padding-right: 5px;
-}
-
-.kss-section__name {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.kss-parameters {
-  padding-left: 40px;
-  list-style-position: outside;
-  list-style-type: circle;
-}
-
-.kss-parameters__item { margin-bottom: 15px; }
-
-.kss-parameters__name {
-  background: #f5f5f5;
-  padding: 5px;
-}
-
-.kss-parameters__description {
-  margin: 0;
-  font-size: rem(16px);
-  line-height: 1.5;
-}
-
-.kss-section__description {
-  margin-bottom: 20px;
-  line-height: 1.5;
-
-  ol,
-  ul,
-  p,
-  a {
-    color: $black;
-    font-family: 'Lato', sans-serif;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  ol,
-  ul {
-    padding-left: 40px;
-    list-style-position: outside;
-  }
-
-  ol { list-style-type: decimal; }
-
-  ul { list-style-type: circle; }
-
-  ol,
-  ul,
-  p {
-    margin: 0;
-    font-size: rem(16px);
-  }
-
-  a {
-    color: $blue;
-    text-decoration: none;
-  }
-
-  a:hover,
-  a:focus {
-    color: lighten($blue, 15%);
-    text-decoration: underline;
-    outline: 0;
-  }
-
-  code {
-    display: inline-block;
-    padding: 2px 5px;
-    background: #F5F5F5;
-  }
-}
-
-.kss-section__source {
-  margin: 0;
-  color: darken($gray, 30%);
-  font-size: rem(14px);
-}
-
-.kss-section__modifiers {
-  border: 1px solid $gray;
-  border-top: none;
-  border-bottom: none;
-  padding: 1em;
-  background: #FDFDFD;
-}
-
-.kss-modifiers__heading {
-  margin: 0;
-  margin-bottom: 10px;
-  font-family: 'Lato', sans-serif;
-  font-size: rem(18px);
-  font-weight: 700;
-  color: $kss-modifiers-heading-color;
-}
-
-.kss-modifiers__name {
-  margin: 0;
-  margin-bottom: 5px;
-  font-size: rem(16px);
-  font-weight: 400;
-  color: $kss-modifiers-name-color;
-}
-
-.kss-modifiers__description { margin: 0; }
-
-.kss-modifiers__example {
-  position: relative;
-  min-height: 50px;
-  margin-bottom: 20px;
-
-  &:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
-  &:last-child { margin-bottom: 0; }
-}
-
-.kss-section__markup pre[class*=language-] { margin: 0; }
diff --git a/doc/styleguide/kss-assets/css/kss-header.scss b/doc/styleguide/kss-assets/css/kss-header.scss
deleted file mode 100644
index e4dfe1e..0000000
--- a/doc/styleguide/kss-assets/css/kss-header.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-$kss-header-color: $cowabunga;
-$kss-header-hamburger-color: $cowabunga;
-
-$bar-height: 4px;
-$bar-width: 30px;
-
-
-.kss-header {
-  z-index: 900;
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 50px;
-  padding: 10px;
-  color: $kss-header-color;
-  background: $white;
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
-
-  @include mq(min, 1025px) { display: none; }
-}
-
-.kss-header__inner { position: relative; }
-
-.kss-header__title {
-  font-size: rem(16px);
-  line-height: 25px;
-  text-align: left;
-
-  @include mq(min, 568px) { font-size: rem(20px); }
-}
-
-.kss-header__hamburger-trigger {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.kss-header__hamburger {
-  width: $bar-width;
-  height: $bar-height;
-  margin-top: 13px;
-  margin-bottom: 13px;
-  border-radius: 5px;
-  color: $kss-header-hamburger-color;
-  background: $kss-header-hamburger-color;
-  -webkit-perspective: 1000;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform:translate3d(0,0,0);
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  transition: all 0.4s;
-
-  &:before,
-  &:after {
-    content: '';
-    position: absolute;
-    width: $bar-width;
-    height: $bar-height;
-    background: $kss-header-hamburger-color;
-    transition: all 0.5s;
-  }
-
-  &:before {
-    top: -$bar-height*2;
-    border-radius: 5px;
-  }
-
-  &:after {
-    top: $bar-height*2;
-    border-radius: 5px;
-  }
-
-  &.kss-state-active { background: transparent; }
-
-  &.kss-state-active:before,
-  &.kss-state-active:after {
-    width: $bar-width/2;
-    transition: all 0.5s;
-  }
-
-  &.kss-state-active:before { transform: translate(7px ,4px) rotate(-40deg); }
-
-  &.kss-state-active:after { transform: translate(7px, -4px) rotate(40deg); }
-}
diff --git a/doc/styleguide/kss-assets/css/kss-markdown.scss b/doc/styleguide/kss-assets/css/kss-markdown.scss
deleted file mode 100644
index e178e07..0000000
--- a/doc/styleguide/kss-assets/css/kss-markdown.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-$kss-markdown-headings-color: $cowabunga;
-
-
-.kss-markdown {
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-width: 800px;
-
-  ul,
-  ol,
-  dl,
-  dd,
-  blockquote,
-  hr,
-  table,
-  form,
-  fieldset,
-  figure,
-  pre,
-  address,
-  a,
-  p,
-  h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-    color: $black;
-    font-family: 'Lato', sans-serif;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  a {
-    color: $blue;
-    font-size: rem(16px);
-    text-decoration: none;
-  }
-
-  a:hover,
-  a:focus {
-    color: lighten($blue, 15%);
-    outline: 0;
-  }
-
-  h1,
-  h2 {
-    color: $kss-markdown-headings-color;
-    font-weight: 700;
-  }
-
-  h2 { margin-top: rem(48px); }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: rem(24px);
-    color: $kss-markdown-headings-color;
-    font-weight: 700;
-  }
-
-  h1 { font-size: rem(32px); }
-  h2 { font-size: rem(30px); }
-  h3 { font-size: rem(22px); }
-  h4 { font-size: rem(20px); }
-  h5 { font-size: rem(18px); }
-  h6 { font-size: rem(16px); }
-
-  ol,
-  ul,
-  p {
-    margin-bottom: rem(24px);
-    font-size: rem(16px);
-  }
-
-  ol,
-  ul {
-    padding-left: 40px;
-    list-style-position: outside;
-    font-size: rem(16px);
-  }
-
-  ol { list-style-type: decimal; }
-
-  ul { list-style-type: circle; }
-
-  img,
-  video,
-  audio,
-  embed,
-  object {
-    max-width: 100%;
-    display: block;
-  }
-
-  audio,
-  canvas,
-  img,
-  video { vertical-align: middle; }
-
-  hr {
-    display: block;
-    box-sizing: border-box;
-    height: 1px;
-    margin-top: rem(23px);
-    margin-bottom: rem(24px);
-    border: 0;
-    border-top: 1px solid $gray;
-    padding: 0;
-  }
-
-  pre,
-  pre[class*=language-] {
-    overflow: auto;
-    border: 1px solid $gray;
-    padding: 1em;
-    background: #F5F5F5;
-  }
-
-  code {
-    padding: 2px 5px;
-    background: #F5F5F5;
-  }
-}
diff --git a/doc/styleguide/kss-assets/css/kss-navigation.scss b/doc/styleguide/kss-assets/css/kss-navigation.scss
deleted file mode 100644
index 700cb9c..0000000
--- a/doc/styleguide/kss-assets/css/kss-navigation.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-$kss-nav-item-link-active: $cowabunga;
-
-
-.kss-navigation {
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: block;
-  box-shadow: -10px 0 10px 10px rgba($black, 0.5);
-  box-sizing: border-box;
-  width: 85%;
-  height: 100%;
-  color: $black;
-  background: $white;
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
-  transform: translateX(-100%);
-  transition: transform 0.3s ease-out;
-
-  @include mq(min, 768px) { width: 35%; }
-
-  @include mq(min, 1024px) {
-    width: 25%;
-    transform: translateX(0);
-  }
-
-  @include mq(min, 1280px) { width: 20%; }
-
-  @include mq(min, 1440px) { width: 15%; }
-
-  &.kss-state-active { transform: none; }
-}
-
-.kss-navigation__title {
-  display: none;
-  box-sizing: border-box;
-  padding: 20px 10px;
-
-  @include mq(min, 1024px) { display: block; }
-}
-
-.kss-nav {
-  overflow-y: auto;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding-top: 10px;
-  padding-bottom: 100px;
-  padding-left: 0;
-  list-style-type: none;
-
-  @include mq(min, 1024px) { padding-top: 0; }
-}
-
-.kss-nav__item a {
-  display: block;
-  box-sizing: border-box;
-  padding: 5px 20px;
-  color: $black;
-  font-family: 'Lato', sans-serif;
-  font-size: rem(16px);
-  font-weight: 400;
-  text-decoration: none;
-  text-transform: none;
-  letter-spacing: normal;
-  transition: color 0.3s;
-
-  &:hover { color: $kss-nav-item-link-active; }
-
-  &:hover .kss-nav__name { transform: translateX(6px); }
-
-  &.kss-state-active { color: $kss-nav-item-link-active; }
-
-  &.kss-state-active:hover .kss-nav__name { transform: none; }
-}
-
-.kss-nav__ref {
-  display: inline-block;
-  vertical-align: middle;
-  padding-right: 5px;
-}
-
-.kss-nav__name {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  transition: transform 0.3s;
-}
-
-.kss-nav__subnav {
-  margin-bottom: 10px;
-  padding: 0;
-  list-style-type: none;
-
-  .kss-nav__item a {
-    padding: 2px 10px;
-    padding-left: 30px;
-    font-size: rem(14px);
-    font-weight: 300;
-  }
-
-  .kss-nav__item--grandchild a {
-    padding-left: 40px;
-    font-size: rem(12px);
-  }
-}
diff --git a/doc/styleguide/kss-assets/css/kss-settings.scss b/doc/styleguide/kss-assets/css/kss-settings.scss
deleted file mode 100644
index d8c8cdc..0000000
--- a/doc/styleguide/kss-assets/css/kss-settings.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// primary theme color of the styleguide.
-$cowabunga:       #E87E04;
-
-// secondary colors.
-$black:           #222222;
-$gray:            #CCCCCC;
-$white:           #FFFFFF;
-
-// utility colors.
-$blue:            #3498DB;
-$green:           #2ECC71;
-$orange:          #F1C40F;
-$red:             #E74C3C;
diff --git a/doc/styleguide/kss-assets/css/kss-title.scss b/doc/styleguide/kss-assets/css/kss-title.scss
deleted file mode 100644
index b94210e..0000000
--- a/doc/styleguide/kss-assets/css/kss-title.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$kss-title-color: $cowabunga;
-
-.kss-title {
-  margin: 0;
-  color: $kss-title-color;
-  text-align: center;
-  font-size: rem(24px);
-  font-family: 'Lato', sans-serif;
-  font-weight: 700;
-  text-transform: none;
-  letter-spacing: normal;
-}
diff --git a/doc/styleguide/kss-assets/css/kss-tools.scss b/doc/styleguide/kss-assets/css/kss-tools.scss
deleted file mode 100644
index 9cf82dc..0000000
--- a/doc/styleguide/kss-assets/css/kss-tools.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@function em($target, $context: 16px) {
-  @return ($target / $context) * 1em;
-}
-
-@function rem($target, $context: 16px) {
-  @return ($target / $context) * 1rem;
-}
-
-@function mq-unit($target) {
-  @return ($target / 16px) * 1em;
-}
-
-
-
-@mixin mq($min-max, $width1, $max:unquote(''), $width2:unquote('')) {
-  // min-width > max-width.
-  @if $min-max == min and $max == max {
-    @media only screen and (min-width: mq-unit($width1 + 1)) and (max-width: mq-unit($width2)) { @content; }
-  }
-
-  // min-width.
-  @else if $min-max == min {
-    @media only screen and (min-width: mq-unit($width1 + 1)) { @content; }
-  }
-
-  // max-width.
-  @else if $min-max == max {
-    @media only screen and (max-width: mq-unit($width1)) { @content; }
-  }
-}
diff --git a/doc/styleguide/kss-assets/css/kss.css b/doc/styleguide/kss-assets/css/kss.css
deleted file mode 100644
index 12866da..0000000
--- a/doc/styleguide/kss-assets/css/kss.css
+++ /dev/null
@@ -1,507 +0,0 @@
-.kss-body {
-  margin: 0;
-  padding: 0;
-  background: #FFFFFF; }
-
-.kss-title {
-  margin: 0;
-  color: #E87E04;
-  text-align: center;
-  font-size: 1.5rem;
-  font-family: 'Lato', sans-serif;
-  font-weight: 700;
-  text-transform: none;
-  letter-spacing: normal; }
-
-.kss-header {
-  z-index: 900;
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 50px;
-  padding: 10px;
-  color: #E87E04;
-  background: #FFFFFF;
-  font-family: 'Lato', sans-serif;
-  font-weight: 400; }
-  @media only screen and (min-width: 64.125em) {
-    .kss-header {
-      display: none; } }
-
-.kss-header__inner {
-  position: relative; }
-
-.kss-header__title {
-  font-size: 1rem;
-  line-height: 25px;
-  text-align: left; }
-  @media only screen and (min-width: 35.5625em) {
-    .kss-header__title {
-      font-size: 1.25rem; } }
-
-.kss-header__hamburger-trigger {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  width: 32px;
-  height: 32px;
-  cursor: pointer; }
-
-.kss-header__hamburger {
-  width: 30px;
-  height: 4px;
-  margin-top: 13px;
-  margin-bottom: 13px;
-  border-radius: 5px;
-  color: #E87E04;
-  background: #E87E04;
-  -webkit-perspective: 1000;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform: translate3d(0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
-  transition: all 0.4s; }
-  .kss-header__hamburger:before, .kss-header__hamburger:after {
-    content: '';
-    position: absolute;
-    width: 30px;
-    height: 4px;
-    background: #E87E04;
-    transition: all 0.5s; }
-  .kss-header__hamburger:before {
-    top: -8px;
-    border-radius: 5px; }
-  .kss-header__hamburger:after {
-    top: 8px;
-    border-radius: 5px; }
-  .kss-header__hamburger.kss-state-active {
-    background: transparent; }
-  .kss-header__hamburger.kss-state-active:before, .kss-header__hamburger.kss-state-active:after {
-    width: 15px;
-    transition: all 0.5s; }
-  .kss-header__hamburger.kss-state-active:before {
-    transform: translate(7px, 4px) rotate(-40deg); }
-  .kss-header__hamburger.kss-state-active:after {
-    transform: translate(7px, -4px) rotate(40deg); }
-
-.kss-navigation {
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: block;
-  box-shadow: -10px 0 10px 10px rgba(34, 34, 34, 0.5);
-  box-sizing: border-box;
-  width: 85%;
-  height: 100%;
-  color: #222222;
-  background: #FFFFFF;
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
-  transform: translateX(-100%);
-  transition: transform 0.3s ease-out; }
-  @media only screen and (min-width: 48.0625em) {
-    .kss-navigation {
-      width: 35%; } }
-  @media only screen and (min-width: 64.0625em) {
-    .kss-navigation {
-      width: 25%;
-      transform: translateX(0); } }
-  @media only screen and (min-width: 80.0625em) {
-    .kss-navigation {
-      width: 20%; } }
-  @media only screen and (min-width: 90.0625em) {
-    .kss-navigation {
-      width: 15%; } }
-  .kss-navigation.kss-state-active {
-    transform: none; }
-
-.kss-navigation__title {
-  display: none;
-  box-sizing: border-box;
-  padding: 20px 10px; }
-  @media only screen and (min-width: 64.0625em) {
-    .kss-navigation__title {
-      display: block; } }
-
-.kss-nav {
-  overflow-y: auto;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding-top: 10px;
-  padding-bottom: 100px;
-  padding-left: 0;
-  list-style-type: none; }
-  @media only screen and (min-width: 64.0625em) {
-    .kss-nav {
-      padding-top: 0; } }
-
-.kss-nav__item a {
-  display: block;
-  box-sizing: border-box;
-  padding: 5px 20px;
-  color: #222222;
-  font-family: 'Lato', sans-serif;
-  font-size: 1rem;
-  font-weight: 400;
-  text-decoration: none;
-  text-transform: none;
-  letter-spacing: normal;
-  transition: color 0.3s; }
-  .kss-nav__item a:hover {
-    color: #E87E04; }
-  .kss-nav__item a:hover .kss-nav__name {
-    transform: translateX(6px); }
-  .kss-nav__item a.kss-state-active {
-    color: #E87E04; }
-  .kss-nav__item a.kss-state-active:hover .kss-nav__name {
-    transform: none; }
-
-.kss-nav__ref {
-  display: inline-block;
-  vertical-align: middle;
-  padding-right: 5px; }
-
-.kss-nav__name {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  transition: transform 0.3s; }
-
-.kss-nav__subnav {
-  margin-bottom: 10px;
-  padding: 0;
-  list-style-type: none; }
-  .kss-nav__subnav .kss-nav__item a {
-    padding: 2px 10px;
-    padding-left: 30px;
-    font-size: 0.875rem;
-    font-weight: 300; }
-  .kss-nav__subnav .kss-nav__item--grandchild a {
-    padding-left: 40px;
-    font-size: 0.75rem; }
-
-.kss-markdown {
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-width: 800px; }
-  .kss-markdown ul,
-  .kss-markdown ol,
-  .kss-markdown dl,
-  .kss-markdown dd,
-  .kss-markdown blockquote,
-  .kss-markdown hr,
-  .kss-markdown table,
-  .kss-markdown form,
-  .kss-markdown fieldset,
-  .kss-markdown figure,
-  .kss-markdown pre,
-  .kss-markdown address,
-  .kss-markdown a,
-  .kss-markdown p,
-  .kss-markdown h1, .kss-markdown h2, .kss-markdown h3, .kss-markdown h4, .kss-markdown h5, .kss-markdown h6 {
-    margin: 0;
-    color: #222222;
-    font-family: 'Lato', sans-serif;
-    font-weight: 400;
-    line-height: 1.5; }
-  .kss-markdown a {
-    color: #3498DB;
-    font-size: 1rem;
-    text-decoration: none; }
-  .kss-markdown a:hover,
-  .kss-markdown a:focus {
-    color: #75b9e7;
-    outline: 0; }
-  .kss-markdown h1,
-  .kss-markdown h2 {
-    color: #E87E04;
-    font-weight: 700; }
-  .kss-markdown h2 {
-    margin-top: 3rem; }
-  .kss-markdown h3,
-  .kss-markdown h4,
-  .kss-markdown h5,
-  .kss-markdown h6 {
-    margin-top: 1.5rem;
-    color: #E87E04;
-    font-weight: 700; }
-  .kss-markdown h1 {
-    font-size: 2rem; }
-  .kss-markdown h2 {
-    font-size: 1.875rem; }
-  .kss-markdown h3 {
-    font-size: 1.375rem; }
-  .kss-markdown h4 {
-    font-size: 1.25rem; }
-  .kss-markdown h5 {
-    font-size: 1.125rem; }
-  .kss-markdown h6 {
-    font-size: 1rem; }
-  .kss-markdown ol,
-  .kss-markdown ul,
-  .kss-markdown p {
-    margin-bottom: 1.5rem;
-    font-size: 1rem; }
-  .kss-markdown ol,
-  .kss-markdown ul {
-    padding-left: 40px;
-    list-style-position: outside;
-    font-size: 1rem; }
-  .kss-markdown ol {
-    list-style-type: decimal; }
-  .kss-markdown ul {
-    list-style-type: circle; }
-  .kss-markdown img,
-  .kss-markdown video,
-  .kss-markdown audio,
-  .kss-markdown embed,
-  .kss-markdown object {
-    max-width: 100%;
-    display: block; }
-  .kss-markdown audio,
-  .kss-markdown canvas,
-  .kss-markdown img,
-  .kss-markdown video {
-    vertical-align: middle; }
-  .kss-markdown hr {
-    display: block;
-    box-sizing: border-box;
-    height: 1px;
-    margin-top: 1.4375rem;
-    margin-bottom: 1.5rem;
-    border: 0;
-    border-top: 1px solid #CCCCCC;
-    padding: 0; }
-  .kss-markdown pre,
-  .kss-markdown pre[class*=language-] {
-    overflow: auto;
-    border: 1px solid #CCCCCC;
-    padding: 1em;
-    background: #F5F5F5; }
-  .kss-markdown code {
-    padding: 2px 5px;
-    background: #F5F5F5; }
-
-.kss-documentation {
-  z-index: 100;
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 100vh;
-  padding: 20px;
-  padding-top: 80px;
-  background: #FFFFFF;
-  transition: opacity 0.4s ease-out; }
-  .kss-documentation.kss-state-active {
-    opacity: 0.1; }
-  @media only screen and (min-width: 64.0625em) {
-    .kss-documentation {
-      padding-top: 20px;
-      padding-left: calc(25% + 20px); } }
-  @media only screen and (min-width: 80.0625em) {
-    .kss-documentation {
-      padding-left: calc(20% + 20px); } }
-  @media only screen and (min-width: 90.0625em) {
-    .kss-documentation {
-      padding-left: calc(15% + 20px); } }
-
-.kss-section {
-  margin-bottom: 40px; }
-
-.kss-section__content {
-  border: 1px solid #CCCCCC;
-  padding: 1em; }
-  .kss-section__content ol,
-  .kss-section__content ul,
-  .kss-section__content p,
-  .kss-section__content a {
-    font-family: 'Lato', sans-serif;
-    font-weight: 400;
-    line-height: 1.5; }
-
-.kss-section__permalink {
-  text-decoration: none; }
-
-.kss-section__item {
-  margin: 0;
-  margin-bottom: 5px;
-  color: #E87E04;
-  font-size: 2rem;
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
-  text-transform: none;
-  letter-spacing: normal; }
-  .kss-section__item--depth-2 {
-    font-size: 1.875rem; }
-  .kss-section__item--depth-3 {
-    font-size: 1.375rem; }
-  .kss-section__item--depth-4 {
-    font-size: 1.25rem; }
-  .kss-section__item--depth-5 {
-    font-size: 1.125rem; }
-  .kss-section__item--depth-6 {
-    font-size: 1rem; }
-
-.kss-section__ref {
-  display: inline-block;
-  vertical-align: middle;
-  padding-right: 5px; }
-
-.kss-section__name {
-  display: inline-block;
-  vertical-align: middle; }
-
-.kss-parameters {
-  padding-left: 40px;
-  list-style-position: outside;
-  list-style-type: circle; }
-
-.kss-parameters__item {
-  margin-bottom: 15px; }
-
-.kss-parameters__name {
-  background: #f5f5f5;
-  padding: 5px; }
-
-.kss-parameters__description {
-  margin: 0;
-  font-size: 1rem;
-  line-height: 1.5; }
-
-.kss-section__description {
-  margin-bottom: 20px;
-  line-height: 1.5; }
-  .kss-section__description ol,
-  .kss-section__description ul,
-  .kss-section__description p,
-  .kss-section__description a {
-    color: #222222;
-    font-family: 'Lato', sans-serif;
-    font-weight: 400;
-    line-height: 1.5; }
-  .kss-section__description ol,
-  .kss-section__description ul {
-    padding-left: 40px;
-    list-style-position: outside; }
-  .kss-section__description ol {
-    list-style-type: decimal; }
-  .kss-section__description ul {
-    list-style-type: circle; }
-  .kss-section__description ol,
-  .kss-section__description ul,
-  .kss-section__description p {
-    margin: 0;
-    font-size: 1rem; }
-  .kss-section__description a {
-    color: #3498DB;
-    text-decoration: none; }
-  .kss-section__description a:hover,
-  .kss-section__description a:focus {
-    color: #75b9e7;
-    text-decoration: underline;
-    outline: 0; }
-  .kss-section__description code {
-    display: inline-block;
-    padding: 2px 5px;
-    background: #F5F5F5; }
-
-.kss-section__source {
-  margin: 0;
-  color: gray;
-  font-size: 0.875rem; }
-
-.kss-section__modifiers {
-  border: 1px solid #CCCCCC;
-  border-top: none;
-  border-bottom: none;
-  padding: 1em;
-  background: #FDFDFD; }
-
-.kss-modifiers__heading {
-  margin: 0;
-  margin-bottom: 10px;
-  font-family: 'Lato', sans-serif;
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: #E87E04; }
-
-.kss-modifiers__name {
-  margin: 0;
-  margin-bottom: 5px;
-  font-size: 1rem;
-  font-weight: 400;
-  color: #E87E04; }
-
-.kss-modifiers__description {
-  margin: 0; }
-
-.kss-modifiers__example {
-  position: relative;
-  min-height: 50px;
-  margin-bottom: 20px; }
-  .kss-modifiers__example:after {
-    content: '';
-    display: table;
-    clear: both; }
-  .kss-modifiers__example:last-child {
-    margin-bottom: 0; }
-
-.kss-section__markup pre[class*=language-] {
-  margin: 0; }
-
-.kss-colors-container {
-  margin: 0;
-  padding-left: 0; }
-  @media only screen and (min-width: 35.5625em) {
-    .kss-colors-container {
-      margin-left: -10px; } }
-
-.kss-color {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 127px;
-  margin: 0 auto;
-  margin-top: 10px;
-  border: 1px solid #CCCCCC;
-  border-radius: 2px; }
-  @media only screen and (min-width: 35.5625em) {
-    .kss-color {
-      display: inline-block;
-      width: 225px;
-      margin-left: 10px; } }
-
-.kss-color .kss-parameters__description {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px;
-  background: #FFFFFF; }
-
-.kss-color__name {
-  display: block;
-  min-height: 22px;
-  font-weight: 700;
-  font-size: 0.875em;
-  line-height: 1.6; }
-
-.kss-color__var,
-.kss-color__code {
-  display: block;
-  font-size: 0.75em;
-  line-height: 1.4; }
-
-.kss-color .kss-parameters__name {
-  display: none; }
diff --git a/doc/styleguide/kss-assets/css/kss.scss b/doc/styleguide/kss-assets/css/kss.scss
deleted file mode 100644
index 29f806d..0000000
--- a/doc/styleguide/kss-assets/css/kss.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// CLI commands:
-// sass --sourcemap=none kss.scss:kss.css
-// sass --watch --sourcemap=none kss.scss:kss.css
-
-
-@import 'kss-settings.scss';
-@import 'kss-tools.scss';
-
-@import 'kss-body.scss';
-@import 'kss-title.scss';
-@import 'kss-header.scss';
-@import 'kss-navigation.scss';
-@import 'kss-markdown.scss';
-@import 'kss-documentation.scss';
-
-@import 'kss-colors.scss';
diff --git a/doc/styleguide/kss-assets/images/down_arrow.svg b/doc/styleguide/kss-assets/images/down_arrow.svg
deleted file mode 100644
index 422b72a..0000000
--- a/doc/styleguide/kss-assets/images/down_arrow.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="svg2"
-   viewBox="0 0 9.9999998 5.4329431"
-   height="5.4329433"
-   width="10">
-  <defs
-     id="defs4" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-43.431457,-483.51941)"
-     id="layer1">
-    <path
-       id="path3338"
-       d="m 48.114068,488.83394 -4.421005,-4.421 c -0.631572,-0.63158 0,-1.26315 0.631572,-0.63158 l 3.789433,3.78944 c 0.157893,0.15789 0.473679,0.15789 0.631572,0 l 3.789433,-3.78944 c 0.631572,-0.63157 1.263144,0 0.640594,0.61804 l -4.430027,4.43454 c -0.157893,0.15789 -0.473679,0.15789 -0.631572,0 z"
-       style="fill:#999ca1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-  </g>
-</svg>
diff --git a/doc/styleguide/kss-assets/images/up_arrow.svg b/doc/styleguide/kss-assets/images/up_arrow.svg
deleted file mode 100644
index 6f5537e..0000000
--- a/doc/styleguide/kss-assets/images/up_arrow.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="svg2"
-   viewBox="0 0 9.9999998 5.4329431"
-   height="5.4329433"
-   width="10">
-  <defs
-     id="defs4" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-43.431457,-483.51941)"
-     id="layer1">
-    <path
-       id="path3338"
-       d="m 48.114068,483.63783 -4.421005,4.421 c -0.631572,0.63158 0,1.26315 0.631572,0.63158 l 3.789433,-3.78944 c 0.157893,-0.15789 0.473679,-0.15789 0.631572,0 l 3.789433,3.78944 c 0.631572,0.63157 1.263144,0 0.640594,-0.61804 l -4.430027,-4.43454 c -0.157893,-0.15789 -0.473679,-0.15789 -0.631572,0 z"
-       style="fill:#999ca1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-  </g>
-</svg>
diff --git a/doc/styleguide/kss-assets/js/kss.js b/doc/styleguide/kss-assets/js/kss.js
deleted file mode 100644
index 8e56d99..0000000
--- a/doc/styleguide/kss-assets/js/kss.js
+++ /dev/null
@@ -1,130 +0,0 @@
-(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);
-
-
-
-// custom code.
-(function() {
-
-
-  // navigation.
-  $('.kss-header__hamburger-trigger').on('click', function (e) {
-    var kssNavigation  = '.kss-navigation',
-        kssDocumentation  = '.kss-documentation',
-        kssHamburger = '.kss-header__hamburger';
-
-    if ($(kssNavigation).hasClass('kss-state-active')) {
-      $(kssNavigation).removeClass('kss-state-active');
-      $(kssDocumentation).removeClass('kss-state-active');
-    }
-    else {
-      $(kssNavigation).addClass('kss-state-active');
-      $(kssDocumentation).addClass('kss-state-active');
-    }
-
-    if ($(kssHamburger).hasClass('kss-state-active')) {
-      $(kssHamburger).removeClass('kss-state-active');
-    }
-    else {
-      $(kssHamburger).addClass('kss-state-active');
-    }
-  });
-
-
-  // smooth scrolling.
-  (function smoothScrolling () {
-    $('.kss-nav__item > a[href*=section]').on('click', function (e) {
-      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-
-        if (target.length) {
-          $('html, body').animate({
-            scrollTop: target.offset().top
-          }, 1000);
-
-          return false;
-        }
-      }
-    });
-  })();
-
-
-  // colors.
-  (function(){
-    var parameters = $('.kss-parameters');
-
-    if (parameters) {
-      $('.kss-parameters__item').each(function (index) {
-        var description = $(this).find('.kss-parameters__description').text().trim().replace(/; +/g, ';');
-        var colorName = description.split(';')[1] ? description.split(';')[1] : '';
-        var colorVar = $(this).find('.kss-parameters__name').text().trim();
-        var colorCode = description.split(';')[0];
-        var isHexadecimal  = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorCode);
-        var isRGB  = /(rgba?\((?:\d{1,3}(, +|,|\))){3}(?:\d+\.\d+\))?)/i.test(colorCode);
-        var colorContent = '<span class="kss-color__name">' + colorName + '</span>' +
-                           '<span class="kss-color__var">' + colorVar + '</span>' +
-                           '<span class="kss-color__code">' + colorCode + '</span>';
-
-        if (isHexadecimal || isRGB) {
-          $(this).parent().addClass('kss-colors-container');
-          $(this).addClass('kss-color').css('background', colorCode);
-          $(this).find('.kss-parameters__description').html(colorContent);
-        }
-      });
-    }
-  })();
-
-
-})();
diff --git a/doc/styleguide/kss-assets/vendor/jquery.js b/doc/styleguide/kss-assets/vendor/jquery.js
deleted file mode 100644
index 49990d6..0000000
--- a/doc/styleguide/kss-assets/vendor/jquery.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/*! jQuery v2.1.4 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */
-!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.4",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return n.each(this,a,b)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){return!n.isArray(a)&&a-parseFloat(a)+1>=0},isPlainObject:function(a){return"object"!==n.type(a)||a.nodeType||n.isWindow(a)?!1:a.constructor&&!j.call(a.constructor.prototype,"isPrototypeOf")?!1:!0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=l.createElement("script"),b.text=a,l.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=s(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:g.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,f=0,g=a.length,h=s(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);else for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(e=d.call(arguments,2),f=function(){return a.apply(b||this,e.concat(d.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:k}),n.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function s(a){var b="length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N=M.replace("w","w#"),O="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+N+"))|)"+L+"*\\]",P=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+O+")*)|.*)\\)|)",Q=new RegExp(L+"+","g"),R=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),S=new RegExp("^"+L+"*,"+L+"*"),T=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),U=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),V=new RegExp(P),W=new RegExp("^"+N+"$"),X={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M.replace("w","w*")+")"),ATTR:new RegExp("^"+O),PSEUDO:new RegExp("^"+P),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},Y=/^(?:input|select|textarea|button)$/i,Z=/^h\d$/i,$=/^[^{]+\{\s*\[native \w/,_=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,aa=/[+~]/,ba=/'|\\/g,ca=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),da=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ea=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(fa){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s,w,x;if((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,d=d||[],k=b.nodeType,"string"!=typeof a||!a||1!==k&&9!==k&&11!==k)return d;if(!e&&p){if(11!==k&&(f=_.exec(a)))if(j=f[1]){if(9===k){if(h=b.getElementById(j),!h||!h.parentNode)return d;if(h.id===j)return d.push(h),d}else if(b.ownerDocument&&(h=b.ownerDocument.getElementById(j))&&t(b,h)&&h.id===j)return d.push(h),d}else{if(f[2])return H.apply(d,b.getElementsByTagName(a)),d;if((j=f[3])&&c.getElementsByClassName)return H.apply(d,b.getElementsByClassName(j)),d}if(c.qsa&&(!q||!q.test(a))){if(s=r=u,w=b,x=1!==k&&a,1===k&&"object"!==b.nodeName.toLowerCase()){o=g(a),(r=b.getAttribute("id"))?s=r.replace(ba,"\\$&"):b.setAttribute("id",s),s="[id='"+s+"'] ",l=o.length;while(l--)o[l]=s+ra(o[l]);w=aa.test(a)&&pa(b.parentNode)||b,x=o.join(",")}if(x)try{return H.apply(d,w.querySelectorAll(x)),d}catch(y){}finally{r||b.removeAttribute("id")}}}return i(a.replace(R,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=a.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function pa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=g.documentElement,e=g.defaultView,e&&e!==e.top&&(e.addEventListener?e.addEventListener("unload",ea,!1):e.attachEvent&&e.attachEvent("onunload",ea)),p=!f(g),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(g.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=$.test(g.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!g.getElementsByName||!g.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c&&c.parentNode?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ca,da);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ca,da);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=$.test(g.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\f]' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){var b=g.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=$.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",P)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=$.test(o.compareDocumentPosition),t=b||$.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===g||a.ownerDocument===v&&t(v,a)?-1:b===g||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,h=[a],i=[b];if(!e||!f)return a===g?-1:b===g?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)i.unshift(c);while(h[d]===i[d])d++;return d?la(h[d],i[d]):h[d]===v?-1:i[d]===v?1:0},g):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(U,"='$1']"),!(!c.matchesSelector||!p||r&&r.test(b)||q&&q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ca,da),a[3]=(a[3]||a[4]||a[5]||"").replace(ca,da),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return X.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&V.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ca,da).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(Q," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h;if(q){if(f){while(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){k=q[u]||(q[u]={}),j=k[a]||[],n=j[0]===w&&j[1],m=j[0]===w&&j[2],l=n&&q.childNodes[n];while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[w,n,m];break}}else if(s&&(j=(b[u]||(b[u]={}))[a])&&j[0]===w)m=j[1];else while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(s&&((l[u]||(l[u]={}))[a]=[w,m]),l===b))break;return m-=e,m===d||m%d===0&&m/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(R,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(ca,da),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return W.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(ca,da).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Z.test(a.nodeName)},input:function(a){return Y.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:oa(function(){return[0]}),last:oa(function(a,b){return[b-1]}),eq:oa(function(a,b,c){return[0>c?c+b:c]}),even:oa(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:oa(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:oa(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:oa(function(a,b,c){for(var d=0>c?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=ma(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=na(b);function qa(){}qa.prototype=d.filters=d.pseudos,d.setFilters=new qa,g=ga.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){(!c||(e=S.exec(h)))&&(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=T.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(R," ")}),h=h.slice(c.length));for(g in d.filter)!(e=X[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?ga.error(a):z(a,i).slice(0)};function ra(a){for(var b=0,c=a.length,d="";c>b;b++)d+=a[b].value;return d}function sa(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[u]||(b[u]={}),(h=i[d])&&h[0]===w&&h[1]===f)return j[2]=h[2];if(i[d]=j,j[2]=a(b,c,g))return!0}}}function ta(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ua(a,b,c){for(var d=0,e=b.length;e>d;d++)ga(a,b[d],c);return c}function va(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function wa(a,b,c,d,e,f){return d&&!d[u]&&(d=wa(d)),e&&!e[u]&&(e=wa(e,f)),ia(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ua(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:va(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=va(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=va(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function xa(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=sa(function(a){return a===b},h,!0),l=sa(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[sa(ta(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return wa(i>1&&ta(m),i>1&&ra(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(R,"$1"),c,e>i&&xa(a.slice(i,e)),f>e&&xa(a=a.slice(e)),f>e&&ra(a))}m.push(c)}return ta(m)}function ya(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,m,o,p=0,q="0",r=f&&[],s=[],t=j,u=f||e&&d.find.TAG("*",k),v=w+=null==t?1:Math.random()||.1,x=u.length;for(k&&(j=g!==n&&g);q!==x&&null!=(l=u[q]);q++){if(e&&l){m=0;while(o=a[m++])if(o(l,g,h)){i.push(l);break}k&&(w=v)}c&&((l=!o&&l)&&p--,f&&r.push(l))}if(p+=q,c&&q!==p){m=0;while(o=b[m++])o(r,s,g,h);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=F.call(i));s=va(s)}H.apply(i,s),k&&!f&&s.length>0&&p+b.length>1&&ga.uniqueSort(i)}return k&&(w=v,j=t),r};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=xa(b[c]),f[u]?d.push(f):e.push(f);f=A(a,ya(e,d)),f.selector=a}return f},i=ga.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(ca,da),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=X.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(ca,da),aa.test(j[0].type)&&pa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&ra(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,aa.test(a)&&pa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ja(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=n.expr.match.needsContext,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^.[^:#\[\.,]*$/;function x(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(w.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return g.call(b,a)>=0!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(x(this,a||[],!1))},not:function(a){return this.pushStack(x(this,a||[],!0))},is:function(a){return!!x(this,"string"==typeof a&&u.test(a)?n(a):a||[],!1).length}});var y,z=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,A=n.fn.init=function(a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:z.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||y).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:l,!0)),v.test(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}return d=l.getElementById(c[2]),d&&d.parentNode&&(this.length=1,this[0]=d),this.context=l,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof y.ready?y.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};A.prototype=n.fn,y=n(l);var B=/^(?:parents|prev(?:Until|All))/,C={children:!0,contents:!0,next:!0,prev:!0};n.extend({dir:function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},sibling:function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c}}),n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=u.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.unique(f):f)},index:function(a){return a?"string"==typeof a?g.call(n(a),this[0]):g.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.unique(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function D(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return n.dir(a,"parentNode")},parentsUntil:function(a,b,c){return n.dir(a,"parentNode",c)},next:function(a){return D(a,"nextSibling")},prev:function(a){return D(a,"previousSibling")},nextAll:function(a){return n.dir(a,"nextSibling")},prevAll:function(a){return n.dir(a,"previousSibling")},nextUntil:function(a,b,c){return n.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return n.dir(a,"previousSibling",c)},siblings:function(a){return n.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return n.sibling(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(C[a]||n.unique(e),B.test(a)&&e.reverse()),this.pushStack(e)}});var E=/\S+/g,F={};function G(a){var b=F[a]={};return n.each(a.match(E)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?F[a]||G(a):n.extend({},a);var b,c,d,e,f,g,h=[],i=!a.once&&[],j=function(l){for(b=a.memory&&l,c=!0,g=e||0,e=0,f=h.length,d=!0;h&&f>g;g++)if(h[g].apply(l[0],l[1])===!1&&a.stopOnFalse){b=!1;break}d=!1,h&&(i?i.length&&j(i.shift()):b?h=[]:k.disable())},k={add:function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this},remove:function(){return h&&n.each(arguments,function(a,b){var c;while((c=n.inArray(b,h,c))>-1)h.splice(c,1),d&&(f>=c&&f--,g>=c&&g--)}),this},has:function(a){return a?n.inArray(a,h)>-1:!(!h||!h.length)},empty:function(){return h=[],f=0,this},disable:function(){return h=i=b=void 0,this},disabled:function(){return!h},lock:function(){return i=void 0,b||k.disable(),this},locked:function(){return!i},fireWith:function(a,b){return!h||c&&!i||(b=b||[],b=[a,b.slice?b.slice():b],d?i.push(b):j(b)),this},fire:function(){return k.fireWith(this,arguments),this},fired:function(){return!!c}};return k},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=d.call(arguments),e=c.length,f=1!==e||a&&n.isFunction(a.promise)?e:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(e){b[a]=this,c[a]=arguments.length>1?d.call(arguments):e,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(e>1)for(i=new Array(e),j=new Array(e),k=new Array(e);e>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().done(h(b,k,c)).fail(g.reject).progress(h(b,j,i)):--f;return f||g.resolveWith(k,c),g.promise()}});var H;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(H.resolveWith(l,[n]),n.fn.triggerHandler&&(n(l).triggerHandler("ready"),n(l).off("ready"))))}});function I(){l.removeEventListener("DOMContentLoaded",I,!1),a.removeEventListener("load",I,!1),n.ready()}n.ready.promise=function(b){return H||(H=n.Deferred(),"complete"===l.readyState?setTimeout(n.ready):(l.addEventListener("DOMContentLoaded",I,!1),a.addEventListener("load",I,!1))),H.promise(b)},n.ready.promise();var J=n.access=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)n.access(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f};n.acceptData=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function K(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=n.expando+K.uid++}K.uid=1,K.accepts=n.acceptData,K.prototype={key:function(a){if(!K.accepts(a))return 0;var b={},c=a[this.expando];if(!c){c=K.uid++;try{b[this.expando]={value:c},Object.defineProperties(a,b)}catch(d){b[this.expando]=c,n.extend(a,b)}}return this.cache[c]||(this.cache[c]={}),c},set:function(a,b,c){var d,e=this.key(a),f=this.cache[e];if("string"==typeof b)f[b]=c;else if(n.isEmptyObject(f))n.extend(this.cache[e],b);else for(d in b)f[d]=b[d];return f},get:function(a,b){var c=this.cache[this.key(a)];return void 0===b?c:c[b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=this.key(a),g=this.cache[f];if(void 0===b)this.cache[f]={};else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in g?d=[b,e]:(d=e,d=d in g?[d]:d.match(E)||[])),c=d.length;while(c--)delete g[d[c]]}},hasData:function(a){return!n.isEmptyObject(this.cache[a[this.expando]]||{})},discard:function(a){a[this.expando]&&delete this.cache[a[this.expando]]}};var L=new K,M=new K,N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(O,"-$1").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}M.set(a,b,c)}else c=void 0;return c}n.extend({hasData:function(a){return M.hasData(a)||L.hasData(a)},data:function(a,b,c){
-return M.access(a,b,c)},removeData:function(a,b){M.remove(a,b)},_data:function(a,b,c){return L.access(a,b,c)},_removeData:function(a,b){L.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=M.get(f),1===f.nodeType&&!L.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d])));L.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){M.set(this,a)}):J(this,function(b){var c,d=n.camelCase(a);if(f&&void 0===b){if(c=M.get(f,a),void 0!==c)return c;if(c=M.get(f,d),void 0!==c)return c;if(c=P(f,d,void 0),void 0!==c)return c}else this.each(function(){var c=M.get(this,d);M.set(this,d,b),-1!==a.indexOf("-")&&void 0!==c&&M.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){M.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=L.get(a,b),c&&(!d||n.isArray(c)?d=L.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return L.get(a,c)||L.access(a,c,{empty:n.Callbacks("once memory").add(function(){L.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?n.queue(this[0],a):void 0===b?this:this.each(function(){var c=n.queue(this,a,b);n._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&n.dequeue(this,a)})},dequeue:function(a){return this.each(function(){n.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=n.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=L.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var Q=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,R=["Top","Right","Bottom","Left"],S=function(a,b){return a=b||a,"none"===n.css(a,"display")||!n.contains(a.ownerDocument,a)},T=/^(?:checkbox|radio)$/i;!function(){var a=l.createDocumentFragment(),b=a.appendChild(l.createElement("div")),c=l.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),k.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",k.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var U="undefined";k.focusinBubbles="onfocusin"in a;var V=/^key/,W=/^(?:mouse|pointer|contextmenu)|click/,X=/^(?:focusinfocus|focusoutblur)$/,Y=/^([^.]*)(?:\.(.+)|)$/;function Z(){return!0}function $(){return!1}function _(){try{return l.activeElement}catch(a){}}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return typeof n!==U&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(E)||[""],j=b.length;while(j--)h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g,!1)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.hasData(a)&&L.get(a);if(r&&(i=r.events)){b=(b||"").match(E)||[""],j=b.length;while(j--)if(h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&(delete r.handle,L.remove(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,m,o,p=[d||l],q=j.call(b,"type")?b.type:b,r=j.call(b,"namespace")?b.namespace.split("."):[];if(g=h=d=d||l,3!==d.nodeType&&8!==d.nodeType&&!X.test(q+n.event.triggered)&&(q.indexOf(".")>=0&&(r=q.split("."),q=r.shift(),r.sort()),k=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=r.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},e||!o.trigger||o.trigger.apply(d,c)!==!1)){if(!e&&!o.noBubble&&!n.isWindow(d)){for(i=o.delegateType||q,X.test(i+q)||(g=g.parentNode);g;g=g.parentNode)p.push(g),h=g;h===(d.ownerDocument||l)&&p.push(h.defaultView||h.parentWindow||a)}f=0;while((g=p[f++])&&!b.isPropagationStopped())b.type=f>1?i:o.bindType||q,m=(L.get(g,"events")||{})[b.type]&&L.get(g,"handle"),m&&m.apply(g,c),m=k&&g[k],m&&m.apply&&n.acceptData(g)&&(b.result=m.apply(g,c),b.result===!1&&b.preventDefault());return b.type=q,e||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!n.acceptData(d)||k&&n.isFunction(d[q])&&!n.isWindow(d)&&(h=d[k],h&&(d[k]=null),n.event.triggered=q,d[q](),n.event.triggered=void 0,h&&(d[k]=h)),b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(L.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(g.namespace))&&(a.handleObj=g,a.data=g.data,e=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(a.result=e)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!==this;i=i.parentNode||this)if(i.disabled!==!0||"click"!==a.type){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>=0:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h<b.length&&g.push({elem:this,handlers:b.slice(h)}),g},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return null==a.which&&(a.which=null!=b.charCode?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,b){var c,d,e,f=b.button;return null==a.pageX&&null!=b.clientX&&(c=a.target.ownerDocument||l,d=c.documentElement,e=c.body,a.pageX=b.clientX+(d&&d.scrollLeft||e&&e.scrollLeft||0)-(d&&d.clientLeft||e&&e.clientLeft||0),a.pageY=b.clientY+(d&&d.scrollTop||e&&e.scrollTop||0)-(d&&d.clientTop||e&&e.clientTop||0)),a.which||void 0===f||(a.which=1&f?1:2&f?3:4&f?2:0),a}},fix:function(a){if(a[n.expando])return a;var b,c,d,e=a.type,f=a,g=this.fixHooks[e];g||(this.fixHooks[e]=g=W.test(e)?this.mouseHooks:V.test(e)?this.keyHooks:{}),d=g.props?this.props.concat(g.props):this.props,a=new n.Event(f),b=d.length;while(b--)c=d[b],a[c]=f[c];return a.target||(a.target=l),3===a.target.nodeType&&(a.target=a.target.parentNode),g.filter?g.filter(a,f):a},special:{load:{noBubble:!0},focus:{trigger:function(){return this!==_()&&this.focus?(this.focus(),!1):void 0},delegateType:"focusin"},blur:{trigger:function(){return this===_()&&this.blur?(this.blur(),!1):void 0},delegateType:"focusout"},click:{trigger:function(){return"checkbox"===this.type&&this.click&&n.nodeName(this,"input")?(this.click(),!1):void 0},_default:function(a){return n.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}},simulate:function(a,b,c,d){var e=n.extend(new n.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?n.event.trigger(e,null,b):n.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},n.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)},n.Event=function(a,b){return this instanceof n.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?Z:$):this.type=a,b&&n.extend(this,b),this.timeStamp=a&&a.timeStamp||n.now(),void(this[n.expando]=!0)):new n.Event(a,b)},n.Event.prototype={isDefaultPrevented:$,isPropagationStopped:$,isImmediatePropagationStopped:$,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=Z,a&&a.preventDefault&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=Z,a&&a.stopPropagation&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=Z,a&&a.stopImmediatePropagation&&a.stopImmediatePropagation(),this.stopPropagation()}},n.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){n.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return(!e||e!==d&&!n.contains(d,e))&&(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),k.focusinBubbles||n.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){n.event.simulate(b,a.target,n.event.fix(a),!0)};n.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=L.access(d,b);e||d.addEventListener(a,c,!0),L.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=L.access(d,b)-1;e?L.access(d,b,e):(d.removeEventListener(a,c,!0),L.remove(d,b))}}}),n.fn.extend({on:function(a,b,c,d,e){var f,g;if("object"==typeof a){"string"!=typeof b&&(c=c||b,b=void 0);for(g in a)this.on(g,b,c,a[g],e);return this}if(null==c&&null==d?(d=b,c=b=void 0):null==d&&("string"==typeof b?(d=c,c=void 0):(d=c,c=b,b=void 0)),d===!1)d=$;else if(!d)return this;return 1===e&&(f=d,d=function(a){return n().off(a),f.apply(this,arguments)},d.guid=f.guid||(f.guid=n.guid++)),this.each(function(){n.event.add(this,a,d,c,b)})},one:function(a,b,c,d){return this.on(a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,n(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return(b===!1||"function"==typeof b)&&(c=b,b=void 0),c===!1&&(c=$),this.each(function(){n.event.remove(this,a,c,b)})},trigger:function(a,b){return this.each(function(){n.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?n.event.trigger(a,b,c,!0):void 0}});var aa=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,ba=/<([\w:]+)/,ca=/<|&#?\w+;/,da=/<(?:script|style|link)/i,ea=/checked\s*(?:[^=]|=\s*.checked.)/i,fa=/^$|\/(?:java|ecma)script/i,ga=/^true\/(.*)/,ha=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,ia={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};ia.optgroup=ia.option,ia.tbody=ia.tfoot=ia.colgroup=ia.caption=ia.thead,ia.th=ia.td;function ja(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function ka(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function la(a){var b=ga.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function ma(a,b){for(var c=0,d=a.length;d>c;c++)L.set(a[c],"globalEval",!b||L.get(b[c],"globalEval"))}function na(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(L.hasData(a)&&(f=L.access(a),g=L.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}M.hasData(a)&&(h=M.access(a),i=n.extend({},h),M.set(b,i))}}function oa(a,b){var c=a.getElementsByTagName?a.getElementsByTagName(b||"*"):a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function pa(a,b){var c=b.nodeName.toLowerCase();"input"===c&&T.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}n.extend({clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=oa(h),f=oa(a),d=0,e=f.length;e>d;d++)pa(f[d],g[d]);if(b)if(c)for(f=f||oa(a),g=g||oa(h),d=0,e=f.length;e>d;d++)na(f[d],g[d]);else na(a,h);return g=oa(h,"script"),g.length>0&&ma(g,!i&&oa(a,"script")),h},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,k=b.createDocumentFragment(),l=[],m=0,o=a.length;o>m;m++)if(e=a[m],e||0===e)if("object"===n.type(e))n.merge(l,e.nodeType?[e]:e);else if(ca.test(e)){f=f||k.appendChild(b.createElement("div")),g=(ba.exec(e)||["",""])[1].toLowerCase(),h=ia[g]||ia._default,f.innerHTML=h[1]+e.replace(aa,"<$1></$2>")+h[2],j=h[0];while(j--)f=f.lastChild;n.merge(l,f.childNodes),f=k.firstChild,f.textContent=""}else l.push(b.createTextNode(e));k.textContent="",m=0;while(e=l[m++])if((!d||-1===n.inArray(e,d))&&(i=n.contains(e.ownerDocument,e),f=oa(k.appendChild(e),"script"),i&&ma(f),c)){j=0;while(e=f[j++])fa.test(e.type||"")&&c.push(e)}return k},cleanData:function(a){for(var b,c,d,e,f=n.event.special,g=0;void 0!==(c=a[g]);g++){if(n.acceptData(c)&&(e=c[L.expando],e&&(b=L.cache[e]))){if(b.events)for(d in b.events)f[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);L.cache[e]&&delete L.cache[e]}delete M.cache[c[M.expando]]}}}),n.fn.extend({text:function(a){return J(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=ja(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=ja(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?n.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||n.cleanData(oa(c)),c.parentNode&&(b&&n.contains(c.ownerDocument,c)&&ma(oa(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(oa(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return J(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!da.test(a)&&!ia[(ba.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(aa,"<$1></$2>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(oa(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,n.cleanData(oa(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,m=this,o=l-1,p=a[0],q=n.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&ea.test(p))return this.each(function(c){var d=m.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(c=n.buildFragment(a,this[0].ownerDocument,!1,this),d=c.firstChild,1===c.childNodes.length&&(c=d),d)){for(f=n.map(oa(c,"script"),ka),g=f.length;l>j;j++)h=c,j!==o&&(h=n.clone(h,!0,!0),g&&n.merge(f,oa(h,"script"))),b.call(this[j],h,j);if(g)for(i=f[f.length-1].ownerDocument,n.map(f,la),j=0;g>j;j++)h=f[j],fa.test(h.type||"")&&!L.access(h,"globalEval")&&n.contains(i,h)&&(h.src?n._evalUrl&&n._evalUrl(h.src):n.globalEval(h.textContent.replace(ha,"")))}return this}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),g=e.length-1,h=0;g>=h;h++)c=h===g?this:this.clone(!0),n(e[h])[b](c),f.apply(d,c.get());return this.pushStack(d)}});var qa,ra={};function sa(b,c){var d,e=n(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:n.css(e[0],"display");return e.detach(),f}function ta(a){var b=l,c=ra[a];return c||(c=sa(a,b),"none"!==c&&c||(qa=(qa||n("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),b=qa[0].contentDocument,b.write(),b.close(),c=sa(a,b),qa.detach()),ra[a]=c),c}var ua=/^margin/,va=new RegExp("^("+Q+")(?!px)[a-z%]+$","i"),wa=function(b){return b.ownerDocument.defaultView.opener?b.ownerDocument.defaultView.getComputedStyle(b,null):a.getComputedStyle(b,null)};function xa(a,b,c){var d,e,f,g,h=a.style;return c=c||wa(a),c&&(g=c.getPropertyValue(b)||c[b]),c&&(""!==g||n.contains(a.ownerDocument,a)||(g=n.style(a,b)),va.test(g)&&ua.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function ya(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}!function(){var b,c,d=l.documentElement,e=l.createElement("div"),f=l.createElement("div");if(f.style){f.style.backgroundClip="content-box",f.cloneNode(!0).style.backgroundClip="",k.clearCloneStyle="content-box"===f.style.backgroundClip,e.style.cssText="border:0;width:0;height:0;top:0;left:-9999px;margin-top:1px;position:absolute",e.appendChild(f);function g(){f.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;margin-top:1%;top:1%;border:1px;padding:1px;width:4px;position:absolute",f.innerHTML="",d.appendChild(e);var g=a.getComputedStyle(f,null);b="1%"!==g.top,c="4px"===g.width,d.removeChild(e)}a.getComputedStyle&&n.extend(k,{pixelPosition:function(){return g(),b},boxSizingReliable:function(){return null==c&&g(),c},reliableMarginRight:function(){var b,c=f.appendChild(l.createElement("div"));return c.style.cssText=f.style.cssText="-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:0",c.style.marginRight=c.style.width="0",f.style.width="1px",d.appendChild(e),b=!parseFloat(a.getComputedStyle(c,null).marginRight),d.removeChild(e),f.removeChild(c),b}})}}(),n.swap=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};var za=/^(none|table(?!-c[ea]).+)/,Aa=new RegExp("^("+Q+")(.*)$","i"),Ba=new RegExp("^([+-])=("+Q+")","i"),Ca={position:"absolute",visibility:"hidden",display:"block"},Da={letterSpacing:"0",fontWeight:"400"},Ea=["Webkit","O","Moz","ms"];function Fa(a,b){if(b in a)return b;var c=b[0].toUpperCase()+b.slice(1),d=b,e=Ea.length;while(e--)if(b=Ea[e]+c,b in a)return b;return d}function Ga(a,b,c){var d=Aa.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function Ha(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=n.css(a,c+R[f],!0,e)),d?("content"===c&&(g-=n.css(a,"padding"+R[f],!0,e)),"margin"!==c&&(g-=n.css(a,"border"+R[f]+"Width",!0,e))):(g+=n.css(a,"padding"+R[f],!0,e),"padding"!==c&&(g+=n.css(a,"border"+R[f]+"Width",!0,e)));return g}function Ia(a,b,c){var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=wa(a),g="border-box"===n.css(a,"boxSizing",!1,f);if(0>=e||null==e){if(e=xa(a,b,f),(0>e||null==e)&&(e=a.style[b]),va.test(e))return e;d=g&&(k.boxSizingReliable()||e===a.style[b]),e=parseFloat(e)||0}return e+Ha(a,b,c||(g?"border":"content"),d,f)+"px"}function Ja(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=L.get(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&S(d)&&(f[g]=L.access(d,"olddisplay",ta(d.nodeName)))):(e=S(d),"none"===c&&e||L.set(d,"olddisplay",e?c:n.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}n.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=xa(a,"opacity");return""===c?"1":c}}}},cssNumber:{columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=n.camelCase(b),i=a.style;return b=n.cssProps[h]||(n.cssProps[h]=Fa(i,h)),g=n.cssHooks[b]||n.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b]:(f=typeof c,"string"===f&&(e=Ba.exec(c))&&(c=(e[1]+1)*e[2]+parseFloat(n.css(a,b)),f="number"),null!=c&&c===c&&("number"!==f||n.cssNumber[h]||(c+="px"),k.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=n.camelCase(b);return b=n.cssProps[h]||(n.cssProps[h]=Fa(a.style,h)),g=n.cssHooks[b]||n.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=xa(a,b,d)),"normal"===e&&b in Da&&(e=Da[b]),""===c||c?(f=parseFloat(e),c===!0||n.isNumeric(f)?f||0:e):e}}),n.each(["height","width"],function(a,b){n.cssHooks[b]={get:function(a,c,d){return c?za.test(n.css(a,"display"))&&0===a.offsetWidth?n.swap(a,Ca,function(){return Ia(a,b,d)}):Ia(a,b,d):void 0},set:function(a,c,d){var e=d&&wa(a);return Ga(a,c,d?Ha(a,b,d,"border-box"===n.css(a,"boxSizing",!1,e),e):0)}}}),n.cssHooks.marginRight=ya(k.reliableMarginRight,function(a,b){return b?n.swap(a,{display:"inline-block"},xa,[a,"marginRight"]):void 0}),n.each({margin:"",padding:"",border:"Width"},function(a,b){n.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+R[d]+b]=f[d]||f[d-2]||f[0];return e}},ua.test(a)||(n.cssHooks[a+b].set=Ga)}),n.fn.extend({css:function(a,b){return J(this,function(a,b,c){var d,e,f={},g=0;if(n.isArray(b)){for(d=wa(a),e=b.length;e>g;g++)f[b[g]]=n.css(a,b[g],!1,d);return f}return void 0!==c?n.style(a,b,c):n.css(a,b)},a,b,arguments.length>1)},show:function(){return Ja(this,!0)},hide:function(){return Ja(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){S(this)?n(this).show():n(this).hide()})}});function Ka(a,b,c,d,e){return new Ka.prototype.init(a,b,c,d,e)}n.Tween=Ka,Ka.prototype={constructor:Ka,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||"swing",this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(n.cssNumber[c]?"":"px")},cur:function(){var a=Ka.propHooks[this.prop];return a&&a.get?a.get(this):Ka.propHooks._default.get(this)},run:function(a){var b,c=Ka.propHooks[this.prop];return this.options.duration?this.pos=b=n.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Ka.propHooks._default.set(this),this}},Ka.prototype.init.prototype=Ka.prototype,Ka.propHooks={_default:{get:function(a){var b;return null==a.elem[a.prop]||a.elem.style&&null!=a.elem.style[a.prop]?(b=n.css(a.elem,a.prop,""),b&&"auto"!==b?b:0):a.elem[a.prop]},set:function(a){n.fx.step[a.prop]?n.fx.step[a.prop](a):a.elem.style&&(null!=a.elem.style[n.cssProps[a.prop]]||n.cssHooks[a.prop])?n.style(a.elem,a.prop,a.now+a.unit):a.elem[a.prop]=a.now}}},Ka.propHooks.scrollTop=Ka.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},n.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2}},n.fx=Ka.prototype.init,n.fx.step={};var La,Ma,Na=/^(?:toggle|show|hide)$/,Oa=new RegExp("^(?:([+-])=|)("+Q+")([a-z%]*)$","i"),Pa=/queueHooks$/,Qa=[Va],Ra={"*":[function(a,b){var c=this.createTween(a,b),d=c.cur(),e=Oa.exec(b),f=e&&e[3]||(n.cssNumber[a]?"":"px"),g=(n.cssNumber[a]||"px"!==f&&+d)&&Oa.exec(n.css(c.elem,a)),h=1,i=20;if(g&&g[3]!==f){f=f||g[3],e=e||[],g=+d||1;do h=h||".5",g/=h,n.style(c.elem,a,g+f);while(h!==(h=c.cur()/d)&&1!==h&&--i)}return e&&(g=c.start=+g||+d||0,c.unit=f,c.end=e[1]?g+(e[1]+1)*e[2]:+e[2]),c}]};function Sa(){return setTimeout(function(){La=void 0}),La=n.now()}function Ta(a,b){var c,d=0,e={height:a};for(b=b?1:0;4>d;d+=2-b)c=R[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function Ua(a,b,c){for(var d,e=(Ra[b]||[]).concat(Ra["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function Va(a,b,c){var d,e,f,g,h,i,j,k,l=this,m={},o=a.style,p=a.nodeType&&S(a),q=L.get(a,"fxshow");c.queue||(h=n._queueHooks(a,"fx"),null==h.unqueued&&(h.unqueued=0,i=h.empty.fire,h.empty.fire=function(){h.unqueued||i()}),h.unqueued++,l.always(function(){l.always(function(){h.unqueued--,n.queue(a,"fx").length||h.empty.fire()})})),1===a.nodeType&&("height"in b||"width"in b)&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=n.css(a,"display"),k="none"===j?L.get(a,"olddisplay")||ta(a.nodeName):j,"inline"===k&&"none"===n.css(a,"float")&&(o.display="inline-block")),c.overflow&&(o.overflow="hidden",l.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]}));for(d in b)if(e=b[d],Na.exec(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}m[d]=q&&q[d]||n.style(a,d)}else j=void 0;if(n.isEmptyObject(m))"inline"===("none"===j?ta(a.nodeName):j)&&(o.display=j);else{q?"hidden"in q&&(p=q.hidden):q=L.access(a,"fxshow",{}),f&&(q.hidden=!p),p?n(a).show():l.done(function(){n(a).hide()}),l.done(function(){var b;L.remove(a,"fxshow");for(b in m)n.style(a,b,m[b])});for(d in m)g=Ua(p?q[d]:0,d,l),d in q||(q[d]=g.start,p&&(g.end=g.start,g.start="width"===d||"height"===d?1:0))}}function Wa(a,b){var c,d,e,f,g;for(c in a)if(d=n.camelCase(c),e=b[d],f=a[c],n.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=n.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function Xa(a,b,c){var d,e,f=0,g=Qa.length,h=n.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=La||Sa(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:n.extend({},b),opts:n.extend(!0,{specialEasing:{}},c),originalProperties:b,originalOptions:c,startTime:La||Sa(),duration:c.duration,tweens:[],createTween:function(b,c){var d=n.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?h.resolveWith(a,[j,b]):h.rejectWith(a,[j,b]),this}}),k=j.props;for(Wa(k,j.opts.specialEasing);g>f;f++)if(d=Qa[f].call(j,a,k,j.opts))return d;return n.map(k,Ua,j),n.isFunction(j.opts.start)&&j.opts.start.call(a,j),n.fx.timer(n.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}n.Animation=n.extend(Xa,{tweener:function(a,b){n.isFunction(a)?(b=a,a=["*"]):a=a.split(" ");for(var c,d=0,e=a.length;e>d;d++)c=a[d],Ra[c]=Ra[c]||[],Ra[c].unshift(b)},prefilter:function(a,b){b?Qa.unshift(a):Qa.push(a)}}),n.speed=function(a,b,c){var d=a&&"object"==typeof a?n.extend({},a):{complete:c||!c&&b||n.isFunction(a)&&a,duration:a,easing:c&&b||b&&!n.isFunction(b)&&b};return d.duration=n.fx.off?0:"number"==typeof d.duration?d.duration:d.duration in n.fx.speeds?n.fx.speeds[d.duration]:n.fx.speeds._default,(null==d.queue||d.queue===!0)&&(d.queue="fx"),d.old=d.complete,d.complete=function(){n.isFunction(d.old)&&d.old.call(this),d.queue&&n.dequeue(this,d.queue)},d},n.fn.extend({fadeTo:function(a,b,c,d){return this.filter(S).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=n.isEmptyObject(a),f=n.speed(b,c,d),g=function(){var b=Xa(this,n.extend({},a),f);(e||L.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=n.timers,g=L.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&Pa.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));(b||!c)&&n.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=L.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=n.timers,g=d?d.length:0;for(c.finish=!0,n.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),n.each(["toggle","show","hide"],function(a,b){var c=n.fn[b];n.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(Ta(b,!0),a,d,e)}}),n.each({slideDown:Ta("show"),slideUp:Ta("hide"),slideToggle:Ta("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){n.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),n.timers=[],n.fx.tick=function(){var a,b=0,c=n.timers;for(La=n.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||n.fx.stop(),La=void 0},n.fx.timer=function(a){n.timers.push(a),a()?n.fx.start():n.timers.pop()},n.fx.interval=13,n.fx.start=function(){Ma||(Ma=setInterval(n.fx.tick,n.fx.interval))},n.fx.stop=function(){clearInterval(Ma),Ma=null},n.fx.speeds={slow:600,fast:200,_default:400},n.fn.delay=function(a,b){return a=n.fx?n.fx.speeds[a]||a:a,b=b||"fx",this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},function(){var a=l.createElement("input"),b=l.createElement("select"),c=b.appendChild(l.createElement("option"));a.type="checkbox",k.checkOn=""!==a.value,k.optSelected=c.selected,b.disabled=!0,k.optDisabled=!c.disabled,a=l.createElement("input"),a.value="t",a.type="radio",k.radioValue="t"===a.value}();var Ya,Za,$a=n.expr.attrHandle;n.fn.extend({attr:function(a,b){return J(this,n.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){n.removeAttr(this,a)})}}),n.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(a&&3!==f&&8!==f&&2!==f)return typeof a.getAttribute===U?n.prop(a,b,c):(1===f&&n.isXMLDoc(a)||(b=b.toLowerCase(),d=n.attrHooks[b]||(n.expr.match.bool.test(b)?Za:Ya)),
-void 0===c?d&&"get"in d&&null!==(e=d.get(a,b))?e:(e=n.find.attr(a,b),null==e?void 0:e):null!==c?d&&"set"in d&&void 0!==(e=d.set(a,c,b))?e:(a.setAttribute(b,c+""),c):void n.removeAttr(a,b))},removeAttr:function(a,b){var c,d,e=0,f=b&&b.match(E);if(f&&1===a.nodeType)while(c=f[e++])d=n.propFix[c]||c,n.expr.match.bool.test(c)&&(a[d]=!1),a.removeAttribute(c)},attrHooks:{type:{set:function(a,b){if(!k.radioValue&&"radio"===b&&n.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}}}),Za={set:function(a,b,c){return b===!1?n.removeAttr(a,c):a.setAttribute(c,c),c}},n.each(n.expr.match.bool.source.match(/\w+/g),function(a,b){var c=$a[b]||n.find.attr;$a[b]=function(a,b,d){var e,f;return d||(f=$a[b],$a[b]=e,e=null!=c(a,b,d)?b.toLowerCase():null,$a[b]=f),e}});var _a=/^(?:input|select|textarea|button)$/i;n.fn.extend({prop:function(a,b){return J(this,n.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[n.propFix[a]||a]})}}),n.extend({propFix:{"for":"htmlFor","class":"className"},prop:function(a,b,c){var d,e,f,g=a.nodeType;if(a&&3!==g&&8!==g&&2!==g)return f=1!==g||!n.isXMLDoc(a),f&&(b=n.propFix[b]||b,e=n.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){return a.hasAttribute("tabindex")||_a.test(a.nodeName)||a.href?a.tabIndex:-1}}}}),k.optSelected||(n.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null}}),n.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){n.propFix[this.toLowerCase()]=this});var ab=/[\t\r\n\f]/g;n.fn.extend({addClass:function(a){var b,c,d,e,f,g,h="string"==typeof a&&a,i=0,j=this.length;if(n.isFunction(a))return this.each(function(b){n(this).addClass(a.call(this,b,this.className))});if(h)for(b=(a||"").match(E)||[];j>i;i++)if(c=this[i],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(ab," "):" ")){f=0;while(e=b[f++])d.indexOf(" "+e+" ")<0&&(d+=e+" ");g=n.trim(d),c.className!==g&&(c.className=g)}return this},removeClass:function(a){var b,c,d,e,f,g,h=0===arguments.length||"string"==typeof a&&a,i=0,j=this.length;if(n.isFunction(a))return this.each(function(b){n(this).removeClass(a.call(this,b,this.className))});if(h)for(b=(a||"").match(E)||[];j>i;i++)if(c=this[i],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(ab," "):"")){f=0;while(e=b[f++])while(d.indexOf(" "+e+" ")>=0)d=d.replace(" "+e+" "," ");g=a?n.trim(d):"",c.className!==g&&(c.className=g)}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):this.each(n.isFunction(a)?function(c){n(this).toggleClass(a.call(this,c,this.className,b),b)}:function(){if("string"===c){var b,d=0,e=n(this),f=a.match(E)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else(c===U||"boolean"===c)&&(this.className&&L.set(this,"__className__",this.className),this.className=this.className||a===!1?"":L.get(this,"__className__")||"")})},hasClass:function(a){for(var b=" "+a+" ",c=0,d=this.length;d>c;c++)if(1===this[c].nodeType&&(" "+this[c].className+" ").replace(ab," ").indexOf(b)>=0)return!0;return!1}});var bb=/\r/g;n.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=n.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,n(this).val()):a,null==e?e="":"number"==typeof e?e+="":n.isArray(e)&&(e=n.map(e,function(a){return null==a?"":a+""})),b=n.valHooks[this.type]||n.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=n.valHooks[e.type]||n.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(bb,""):null==c?"":c)}}}),n.extend({valHooks:{option:{get:function(a){var b=n.find.attr(a,"value");return null!=b?b:n.trim(n.text(a))}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type||0>e,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],!(!c.selected&&i!==e||(k.optDisabled?c.disabled:null!==c.getAttribute("disabled"))||c.parentNode.disabled&&n.nodeName(c.parentNode,"optgroup"))){if(b=n(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=n.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=n.inArray(d.value,f)>=0)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),n.each(["radio","checkbox"],function(){n.valHooks[this]={set:function(a,b){return n.isArray(b)?a.checked=n.inArray(n(a).val(),b)>=0:void 0}},k.checkOn||(n.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})}),n.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){n.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),n.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}});var cb=n.now(),db=/\?/;n.parseJSON=function(a){return JSON.parse(a+"")},n.parseXML=function(a){var b,c;if(!a||"string"!=typeof a)return null;try{c=new DOMParser,b=c.parseFromString(a,"text/xml")}catch(d){b=void 0}return(!b||b.getElementsByTagName("parsererror").length)&&n.error("Invalid XML: "+a),b};var eb=/#.*$/,fb=/([?&])_=[^&]*/,gb=/^(.*?):[ \t]*([^\r\n]*)$/gm,hb=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,ib=/^(?:GET|HEAD)$/,jb=/^\/\//,kb=/^([\w.+-]+:)(?:\/\/(?:[^\/?#]*@|)([^\/?#:]*)(?::(\d+)|)|)/,lb={},mb={},nb="*/".concat("*"),ob=a.location.href,pb=kb.exec(ob.toLowerCase())||[];function qb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(E)||[];if(n.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function rb(a,b,c,d){var e={},f=a===mb;function g(h){var i;return e[h]=!0,n.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function sb(a,b){var c,d,e=n.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&n.extend(!0,a,d),a}function tb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function ub(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}n.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:ob,type:"GET",isLocal:hb.test(pb[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":nb,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":n.parseJSON,"text xml":n.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?sb(sb(a,n.ajaxSettings),b):sb(n.ajaxSettings,a)},ajaxPrefilter:qb(lb),ajaxTransport:qb(mb),ajax:function(a,b){"object"==typeof a&&(b=a,a=void 0),b=b||{};var c,d,e,f,g,h,i,j,k=n.ajaxSetup({},b),l=k.context||k,m=k.context&&(l.nodeType||l.jquery)?n(l):n.event,o=n.Deferred(),p=n.Callbacks("once memory"),q=k.statusCode||{},r={},s={},t=0,u="canceled",v={readyState:0,getResponseHeader:function(a){var b;if(2===t){if(!f){f={};while(b=gb.exec(e))f[b[1].toLowerCase()]=b[2]}b=f[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return 2===t?e:null},setRequestHeader:function(a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this},overrideMimeType:function(a){return t||(k.mimeType=a),this},statusCode:function(a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this},abort:function(a){var b=a||u;return c&&c.abort(b),x(0,b),this}};if(o.promise(v).complete=p.add,v.success=v.done,v.error=v.fail,k.url=((a||k.url||ob)+"").replace(eb,"").replace(jb,pb[1]+"//"),k.type=b.method||b.type||k.method||k.type,k.dataTypes=n.trim(k.dataType||"*").toLowerCase().match(E)||[""],null==k.crossDomain&&(h=kb.exec(k.url.toLowerCase()),k.crossDomain=!(!h||h[1]===pb[1]&&h[2]===pb[2]&&(h[3]||("http:"===h[1]?"80":"443"))===(pb[3]||("http:"===pb[1]?"80":"443")))),k.data&&k.processData&&"string"!=typeof k.data&&(k.data=n.param(k.data,k.traditional)),rb(lb,k,b,v),2===t)return v;i=n.event&&k.global,i&&0===n.active++&&n.event.trigger("ajaxStart"),k.type=k.type.toUpperCase(),k.hasContent=!ib.test(k.type),d=k.url,k.hasContent||(k.data&&(d=k.url+=(db.test(d)?"&":"?")+k.data,delete k.data),k.cache===!1&&(k.url=fb.test(d)?d.replace(fb,"$1_="+cb++):d+(db.test(d)?"&":"?")+"_="+cb++)),k.ifModified&&(n.lastModified[d]&&v.setRequestHeader("If-Modified-Since",n.lastModified[d]),n.etag[d]&&v.setRequestHeader("If-None-Match",n.etag[d])),(k.data&&k.hasContent&&k.contentType!==!1||b.contentType)&&v.setRequestHeader("Content-Type",k.contentType),v.setRequestHeader("Accept",k.dataTypes[0]&&k.accepts[k.dataTypes[0]]?k.accepts[k.dataTypes[0]]+("*"!==k.dataTypes[0]?", "+nb+"; q=0.01":""):k.accepts["*"]);for(j in k.headers)v.setRequestHeader(j,k.headers[j]);if(k.beforeSend&&(k.beforeSend.call(l,v,k)===!1||2===t))return v.abort();u="abort";for(j in{success:1,error:1,complete:1})v[j](k[j]);if(c=rb(mb,k,b,v)){v.readyState=1,i&&m.trigger("ajaxSend",[v,k]),k.async&&k.timeout>0&&(g=setTimeout(function(){v.abort("timeout")},k.timeout));try{t=1,c.send(r,x)}catch(w){if(!(2>t))throw w;x(-1,w)}}else x(-1,"No Transport");function x(a,b,f,h){var j,r,s,u,w,x=b;2!==t&&(t=2,g&&clearTimeout(g),c=void 0,e=h||"",v.readyState=a>0?4:0,j=a>=200&&300>a||304===a,f&&(u=tb(k,v,f)),u=ub(k,u,v,j),j?(k.ifModified&&(w=v.getResponseHeader("Last-Modified"),w&&(n.lastModified[d]=w),w=v.getResponseHeader("etag"),w&&(n.etag[d]=w)),204===a||"HEAD"===k.type?x="nocontent":304===a?x="notmodified":(x=u.state,r=u.data,s=u.error,j=!s)):(s=x,(a||!x)&&(x="error",0>a&&(a=0))),v.status=a,v.statusText=(b||x)+"",j?o.resolveWith(l,[r,x,v]):o.rejectWith(l,[v,x,s]),v.statusCode(q),q=void 0,i&&m.trigger(j?"ajaxSuccess":"ajaxError",[v,k,j?r:s]),p.fireWith(l,[v,x]),i&&(m.trigger("ajaxComplete",[v,k]),--n.active||n.event.trigger("ajaxStop")))}return v},getJSON:function(a,b,c){return n.get(a,b,c,"json")},getScript:function(a,b){return n.get(a,void 0,b,"script")}}),n.each(["get","post"],function(a,b){n[b]=function(a,c,d,e){return n.isFunction(c)&&(e=e||d,d=c,c=void 0),n.ajax({url:a,type:b,dataType:e,data:c,success:d})}}),n._evalUrl=function(a){return n.ajax({url:a,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})},n.fn.extend({wrapAll:function(a){var b;return n.isFunction(a)?this.each(function(b){n(this).wrapAll(a.call(this,b))}):(this[0]&&(b=n(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this)},wrapInner:function(a){return this.each(n.isFunction(a)?function(b){n(this).wrapInner(a.call(this,b))}:function(){var b=n(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=n.isFunction(a);return this.each(function(c){n(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){n.nodeName(this,"body")||n(this).replaceWith(this.childNodes)}).end()}}),n.expr.filters.hidden=function(a){return a.offsetWidth<=0&&a.offsetHeight<=0},n.expr.filters.visible=function(a){return!n.expr.filters.hidden(a)};var vb=/%20/g,wb=/\[\]$/,xb=/\r?\n/g,yb=/^(?:submit|button|image|reset|file)$/i,zb=/^(?:input|select|textarea|keygen)/i;function Ab(a,b,c,d){var e;if(n.isArray(b))n.each(b,function(b,e){c||wb.test(a)?d(a,e):Ab(a+"["+("object"==typeof e?b:"")+"]",e,c,d)});else if(c||"object"!==n.type(b))d(a,b);else for(e in b)Ab(a+"["+e+"]",b[e],c,d)}n.param=function(a,b){var c,d=[],e=function(a,b){b=n.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};if(void 0===b&&(b=n.ajaxSettings&&n.ajaxSettings.traditional),n.isArray(a)||a.jquery&&!n.isPlainObject(a))n.each(a,function(){e(this.name,this.value)});else for(c in a)Ab(c,a[c],b,e);return d.join("&").replace(vb,"+")},n.fn.extend({serialize:function(){return n.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=n.prop(this,"elements");return a?n.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!n(this).is(":disabled")&&zb.test(this.nodeName)&&!yb.test(a)&&(this.checked||!T.test(a))}).map(function(a,b){var c=n(this).val();return null==c?null:n.isArray(c)?n.map(c,function(a){return{name:b.name,value:a.replace(xb,"\r\n")}}):{name:b.name,value:c.replace(xb,"\r\n")}}).get()}}),n.ajaxSettings.xhr=function(){try{return new XMLHttpRequest}catch(a){}};var Bb=0,Cb={},Db={0:200,1223:204},Eb=n.ajaxSettings.xhr();a.attachEvent&&a.attachEvent("onunload",function(){for(var a in Cb)Cb[a]()}),k.cors=!!Eb&&"withCredentials"in Eb,k.ajax=Eb=!!Eb,n.ajaxTransport(function(a){var b;return k.cors||Eb&&!a.crossDomain?{send:function(c,d){var e,f=a.xhr(),g=++Bb;if(f.open(a.type,a.url,a.async,a.username,a.password),a.xhrFields)for(e in a.xhrFields)f[e]=a.xhrFields[e];a.mimeType&&f.overrideMimeType&&f.overrideMimeType(a.mimeType),a.crossDomain||c["X-Requested-With"]||(c["X-Requested-With"]="XMLHttpRequest");for(e in c)f.setRequestHeader(e,c[e]);b=function(a){return function(){b&&(delete Cb[g],b=f.onload=f.onerror=null,"abort"===a?f.abort():"error"===a?d(f.status,f.statusText):d(Db[f.status]||f.status,f.statusText,"string"==typeof f.responseText?{text:f.responseText}:void 0,f.getAllResponseHeaders()))}},f.onload=b(),f.onerror=b("error"),b=Cb[g]=b("abort");try{f.send(a.hasContent&&a.data||null)}catch(h){if(b)throw h}},abort:function(){b&&b()}}:void 0}),n.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(a){return n.globalEval(a),a}}}),n.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),n.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(d,e){b=n("<script>").prop({async:!0,charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&e("error"===a.type?404:200,a.type)}),l.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Fb=[],Gb=/(=)\?(?=&|$)|\?\?/;n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Fb.pop()||n.expando+"_"+cb++;return this[a]=!0,a}}),n.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Gb.test(b.url)?"url":"string"==typeof b.data&&!(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Gb.test(b.data)&&"data");return h||"jsonp"===b.dataTypes[0]?(e=b.jsonpCallback=n.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Gb,"$1"+e):b.jsonp!==!1&&(b.url+=(db.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||n.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Fb.push(e)),g&&n.isFunction(f)&&f(g[0]),g=f=void 0}),"script"):void 0}),n.parseHTML=function(a,b,c){if(!a||"string"!=typeof a)return null;"boolean"==typeof b&&(c=b,b=!1),b=b||l;var d=v.exec(a),e=!c&&[];return d?[b.createElement(d[1])]:(d=n.buildFragment([a],b,e),e&&e.length&&n(e).remove(),n.merge([],d.childNodes))};var Hb=n.fn.load;n.fn.load=function(a,b,c){if("string"!=typeof a&&Hb)return Hb.apply(this,arguments);var d,e,f,g=this,h=a.indexOf(" ");return h>=0&&(d=n.trim(a.slice(h)),a=a.slice(0,h)),n.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&n.ajax({url:a,type:e,dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?n("<div>").append(n.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,f||[a.responseText,b,a])}),this},n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){n.fn[b]=function(a){return this.on(b,a)}}),n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};var Ib=a.document.documentElement;function Jb(a){return n.isWindow(a)?a:9===a.nodeType&&a.defaultView}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,"position"),l=n(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=n.css(a,"top"),i=n.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d=this[0],e={top:0,left:0},f=d&&d.ownerDocument;if(f)return b=f.documentElement,n.contains(b,d)?(typeof d.getBoundingClientRect!==U&&(e=d.getBoundingClientRect()),c=Jb(f),{top:e.top+c.pageYOffset-b.clientTop,left:e.left+c.pageXOffset-b.clientLeft}):e},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===n.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],"html")||(d=a.offset()),d.top+=n.css(a[0],"borderTopWidth",!0),d.left+=n.css(a[0],"borderLeftWidth",!0)),{top:b.top-d.top-n.css(c,"marginTop",!0),left:b.left-d.left-n.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||Ib;while(a&&!n.nodeName(a,"html")&&"static"===n.css(a,"position"))a=a.offsetParent;return a||Ib})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(b,c){var d="pageYOffset"===c;n.fn[b]=function(e){return J(this,function(b,e,f){var g=Jb(b);return void 0===f?g?g[c]:b[e]:void(g?g.scrollTo(d?a.pageXOffset:f,d?f:a.pageYOffset):b[e]=f)},b,e,arguments.length,null)}}),n.each(["top","left"],function(a,b){n.cssHooks[b]=ya(k.pixelPosition,function(a,c){return c?(c=xa(a,b),va.test(c)?n(a).position()[b]+"px":c):void 0})}),n.each({Height:"height",Width:"width"},function(a,b){n.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return J(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.size=function(){return this.length},n.fn.andSelf=n.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});var Kb=a.jQuery,Lb=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=Lb),b&&a.jQuery===n&&(a.jQuery=Kb),n},typeof b===U&&(a.jQuery=a.$=n),n});
diff --git a/doc/styleguide/kss-assets/vendor/prism.css b/doc/styleguide/kss-assets/vendor/prism.css
deleted file mode 100644
index 8ad68e6..0000000
--- a/doc/styleguide/kss-assets/vendor/prism.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	color: black;
-	text-shadow: 0 1px white;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	direction: ltr;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	text-shadow: none;
-	background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	text-shadow: none;
-	background: #b3d4fc;
-}
-
-@media print {
-	code[class*="language-"],
-	pre[class*="language-"] {
-		text-shadow: none;
-	}
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	overflow: auto;
-	margin: 0;
-	border: 1px solid #CCCCCC;
-	padding: 1em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background: #f5f5f5;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: slategray;
-}
-
-.token.punctuation {
-	color: #999;
-}
-
-.namespace {
-	opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-	color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-	color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-	color: #a67f59;
-	background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-	color: #07a;
-}
-
-.token.function {
-	color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-	color: #e90;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}
-
diff --git a/doc/styleguide/kss-assets/vendor/prism.js b/doc/styleguide/kss-assets/vendor/prism.js
deleted file mode 100644
index 76acb44..0000000
--- a/doc/styleguide/kss-assets/vendor/prism.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e];if(2==arguments.length){a=arguments[1];for(var l in a)a.hasOwnProperty(l)&&(i[l]=a[l]);return i}var o={};for(var s in i)if(i.hasOwnProperty(s)){if(s==n)for(var l in a)a.hasOwnProperty(l)&&(o[l]=a[l]);o[s]=i[s]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,n,a){for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,o,s=a;s&&!e.test(s.className);)s=s.parentNode;s&&(l=(s.className.match(e)||[,""])[1],o=t.languages[l]),a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var u=a.textContent,g={element:a,language:l,grammar:o,code:u};if(!u||!o)return t.hooks.run("complete",g),void 0;if(t.hooks.run("before-highlight",g),r&&_self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g),t.hooks.run("complete",g)},c.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g),t.hooks.run("complete",g)},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var o=n[l];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+"</"+i.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;_self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;
-Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[^\s>\/]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&amp;/,"&"))});;
-Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/i,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));;
-Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};;
-Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/(?!\d)[a-z0-9_$]+(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/i,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});;
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-avatars.html b/doc/styleguide/section-avatars.html
deleted file mode 100644
index 584a39b..0000000
--- a/doc/styleguide/section-avatars.html
+++ /dev/null
@@ -1,228 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-avatars" 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-avatars">
-              Avatars
-            </a>
-          </h1>
-
-            <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>
-</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-badgets.html b/doc/styleguide/section-badgets.html
deleted file mode 100644
index 471dd4d..0000000
--- a/doc/styleguide/section-badgets.html
+++ /dev/null
@@ -1,220 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-badgets" 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-badgets">
-              Badges
-            </a>
-          </h1>
-
-            <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>
-</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-base.html b/doc/styleguide/section-base.html
deleted file mode 100644
index ffb5585..0000000
--- a/doc/styleguide/section-base.html
+++ /dev/null
@@ -1,368 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</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-base.html">
-            <span class="kss-nav__name">Base</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-base.html#kssref-base-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-base.html#kssref-base-backgrounds-gradient">
-                    <span class="kss-nav__name">Gradient 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-base.html#kssref-base-backgrounds-transparent">
-                    <span class="kss-nav__name">Transparent Backgrounds</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-base" 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-base">
-              Base
-            </a>
-          </h1>
-
-
-        </div>
-
-
-
-      </div>
-      <div id="kssref-base-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-base-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-base-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-base-backgrounds-gradient">
-              Gradient Backgrounds
-            </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 194
-          </div>
-
-      </div>
-      <div id="kssref-base-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-base-backgrounds-transparent">
-              Transparent Backgrounds
-            </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>
-</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-blocks.html b/doc/styleguide/section-blocks.html
deleted file mode 100644
index 757290e..0000000
--- a/doc/styleguide/section-blocks.html
+++ /dev/null
@@ -1,538 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</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-blocks.html">
-            <span class="kss-nav__name">Blocks</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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-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-blocks.html#kssref-blocks-toc">
-                    <span class="kss-nav__name">Table of contents</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-blocks" 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-blocks">
-              Blocks
-            </a>
-          </h1>
-
-
-        </div>
-
-
-
-      </div>
-      <div id="kssref-blocks-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-blocks-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-blocks-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-blocks-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-blocks-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-blocks-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-blocks-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-blocks-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-blocks-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-blocks-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-blocks-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-blocks-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-browser.html b/doc/styleguide/section-browser.html
deleted file mode 100644
index 3049e17..0000000
--- a/doc/styleguide/section-browser.html
+++ /dev/null
@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" >
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-avatars.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-badgets.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-browser.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Screenshots</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-buttons.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Buttons</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Slide</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Typography</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-browser" 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-browser">
-            <span class="kss-title__ref">
-              4
-              <span class="kss-title__permalink-hash">
-                  #Browser
-              </span>
-            </span>
-            Screenshots
-          </a>
-        </h1>
-
-          <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>
-</article>
-
-<!-- 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-buttons.html b/doc/styleguide/section-buttons.html
deleted file mode 100644
index 92aefdf..0000000
--- a/doc/styleguide/section-buttons.html
+++ /dev/null
@@ -1,227 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-buttons" 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-buttons">
-              Buttons
-            </a>
-          </h1>
-
-
-        </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>
-</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-cards.html b/doc/styleguide/section-cards.html
deleted file mode 100644
index 8f995a1..0000000
--- a/doc/styleguide/section-cards.html
+++ /dev/null
@@ -1,232 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-cards" 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-cards">
-              Cards
-            </a>
-          </h1>
-
-            <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>
-</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-classes.html b/doc/styleguide/section-classes.html
deleted file mode 100644
index a40b264..0000000
--- a/doc/styleguide/section-classes.html
+++ /dev/null
@@ -1,228 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" >
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-classes.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Classes</span>
-        </a>
-            <ul class="kss-nav__menu-child">
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-classes.html#kssref-classes-layout">
-                  <span class="kss-nav__ref ">1.1</span
-                  ><span class="kss-nav__name">Classes.Layout</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-classes.html#kssref-classes-layout-shadow">
-                  <span class="kss-nav__ref kss-nav__ref-child">1.1.1</span
-                  ><span class="kss-nav__name">Shadows</span>
-                </a>
-              </li>
-            </ul>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-classes" 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-classes">
-            <span class="kss-title__ref">
-              1
-              <span class="kss-title__permalink-hash">
-                  #Classes
-              </span>
-            </span>
-            Classes
-          </a>
-        </h1>
-
-
-
-      </div>
-
-
-
-    </div>
-    <section id="kssref-classes-layout" 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-classes-layout">
-            <span class="kss-title__ref">
-              1.1
-              <span class="kss-title__permalink-hash">
-                  #Classes.Layout
-              </span>
-            </span>
-            Classes.Layout
-          </a>
-        </h2>
-
-
-
-      </div>
-
-
-
-    </section>
-    <section id="kssref-classes-layout-shadow" 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-classes-layout-shadow">
-            <span class="kss-title__ref">
-              1.1.1
-              <span class="kss-title__permalink-hash">
-                  #Classes.Layout.Shadow
-              </span>
-            </span>
-            Shadows
-          </a>
-        </h3>
-
-          <p class="kss-toolbar">
-              <a href="#kssref-classes-layout-shadow" data-kss-fullscreen="kssref-classes-layout-shadow">
-                <span class="kss-toolbar__tooltip">Toggle full screen</span>
-                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
-                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
-                </svg>
-                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
-                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
-                </svg>
-              </a>
-              <a href="item-classes-layout-shadow.html" target="_blank">
-                <span class="kss-toolbar__tooltip">Open in new window</span>
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
-                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
-                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
-                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
-                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
-                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
-                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
-                </svg>
-              </a>
-            <a href="#kssref-classes-layout-shadow" data-kss-guides="true">
-              <span class="kss-toolbar__tooltip">Toggle example guides</span>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
-                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
-                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
-                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
-                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
-                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
-                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
-                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
-                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
-                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
-                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
-              </svg>
-            </a>
-            <a href="#kssref-classes-layout-shadow" data-kss-markup="true">
-              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
-                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
-                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
-              </svg>
-            </a>
-          </p>
-
-          <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"><ul><li>Option 1</li><li>Option 2</li><li>Option 3</li><li>Option 4</li></ul></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;&lt;ul&gt;&lt;li&gt;Option 1&lt;/li&gt;&lt;li&gt;Option 2&lt;/li&gt;&lt;li&gt;Option 3&lt;/li&gt;&lt;li&gt;Option 4&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;</code></pre>
-          </details>
-
-        <div class="kss-source kss-style">
-          Source: <code>_base.scss</code>, line 73
-        </div>
-
-    </section>
-</article>
-
-<!-- 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-components.html b/doc/styleguide/section-components.html
deleted file mode 100644
index f81aaa5..0000000
--- a/doc/styleguide/section-components.html
+++ /dev/null
@@ -1,352 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides</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" >
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
-        </a>
-            <ul class="kss-nav__menu-child">
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-article">
-                  <span class="kss-nav__ref ">5.1</span
-                  ><span class="kss-nav__name">Article</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide">
-                  <span class="kss-nav__ref kss-nav__ref-child">5.1.1</span
-                  ><span class="kss-nav__name">Components.article.post-title (ꜛ this controls the organization of your style guide</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-button-organization-just-as-before-">
-                  <span class="kss-nav__ref ">5.2</span
-                  ><span class="kss-nav__name">Buttons (title, same as before)</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-buttons">
-                  <span class="kss-nav__ref ">5.3</span
-                  ><span class="kss-nav__name">Components.Buttons</span>
-                </a>
-              </li>
-              <li class="kss-nav__menu-item">
-                <a class="kss-nav__menu-link" href="section-components.html#kssref-components-buttons-bold">
-                  <span class="kss-nav__ref kss-nav__ref-child">5.3.1</span
-                  ><span class="kss-nav__name">Bold Button</span>
-                </a>
-              </li>
-            </ul>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-<article role="main" class="kss-main">
-
-    <div id="kssref-components" 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-components">
-            <span class="kss-title__ref">
-              5
-              <span class="kss-title__permalink-hash">
-                  #Components
-              </span>
-            </span>
-            Components
-          </a>
-        </h1>
-
-          <div class="kss-description">
-            <p>Components are ingredients of our design system. They may be made up of smaller groups of styles.</p>
-
-          </div>
-
-      </div>
-
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 169
-        </div>
-
-    </div>
-    <section id="kssref-components-article" 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-components-article">
-            <span class="kss-title__ref">
-              5.1
-              <span class="kss-title__permalink-hash">
-                  #Components.article
-              </span>
-            </span>
-            Article
-          </a>
-        </h2>
-
-          <div class="kss-description">
-            <p>An article is made up of a title, featured image, and some default
-typographic settings for links, italics, bold, and blockquotes.</p>
-
-          </div>
-
-      </div>
-
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 177
-        </div>
-
-    </section>
-    <section id="kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide" 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-components-article-post-title-this-controls-the-organization-of-your-style-guide">
-            <span class="kss-title__ref">
-              5.1.1
-              <span class="kss-title__permalink-hash">
-                  #Components.article.post-title (ꜛ this controls the organization of your style guide
-              </span>
-            </span>
-            Components.article.post-title (ꜛ this controls the organization of your style guide
-          </a>
-        </h3>
-
-
-      </div>
-
-
-
-    </section>
-    <section id="kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide-here-i-m-filing-this-component-inside-components-article-post-title-" class="kss-section kss-section--depth-4 ">
-
-      <div class="kss-style">
-        <h4 class="kss-title kss-title--level-4">
-          <a class="kss-title__permalink" href="#kssref-components-article-post-title-this-controls-the-organization-of-your-style-guide-here-i-m-filing-this-component-inside-components-article-post-title-">
-            <span class="kss-title__ref">
-              5.1.1.1
-              <span class="kss-title__permalink-hash">
-                  #Components.article.post-title (ꜛ this controls the organization of your style guide. Here, I&#x27;m filing this component inside Components / Article / Post Title)
-              </span>
-            </span>
-            Post Title (this will be the title of your component)
-          </a>
-        </h4>
-
-          <div class="kss-description">
-            <p>Large, <strong>in charge</strong>, and centered. (this is the description of your component. you can use markdown in here.)</p>
-<p>Markup (define the markup to be used in your styleguide):</p>
-<h1 class="post-title">A Post Title</h1>
-          </div>
-
-      </div>
-
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 142
-        </div>
-
-    </section>
-    <section id="kssref-components-button-organization-just-as-before-" 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-components-button-organization-just-as-before-">
-            <span class="kss-title__ref">
-              5.2
-              <span class="kss-title__permalink-hash">
-                  #Components.button (organization, just as before)
-              </span>
-            </span>
-            Buttons (title, same as before)
-          </a>
-        </h2>
-
-          <div class="kss-description">
-            <p>Various button styles. (description, just as before)</p>
-<p>(a new modifiers section)
-:hover - When user hovers over button.
-:focus - When button is focused.
-.button--small - A small button.
-.button--large - A large button.</p>
-
-          </div>
-
-      </div>
-
-        <div class="kss-modifier__wrapper">
-          <div class="kss-modifier__heading kss-style">
-            Example
-          </div>
-
-
-          <div class="kss-modifier__example">
-            (we add the `` to every element that has a modifier)
-Link Button
-<button class="button ">Button Element</button>
-<input class="button " type="button" value="Input Button" />
-            <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">(we add the &#x60;&#x60; to every element that has a modifier)
-Link Button
-&lt;button class&#x3D;&quot;button &quot;&gt;Button Element&lt;/button&gt;
-&lt;input class&#x3D;&quot;button &quot; type&#x3D;&quot;button&quot; value&#x3D;&quot;Input Button&quot; /&gt;</code></pre>
-          </details>
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 227
-        </div>
-
-    </section>
-    <section id="kssref-components-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-components-buttons">
-            <span class="kss-title__ref">
-              5.3
-              <span class="kss-title__permalink-hash">
-                  #Components.Buttons
-              </span>
-            </span>
-            Components.Buttons
-          </a>
-        </h2>
-
-
-      </div>
-
-
-
-    </section>
-    <section id="kssref-components-buttons-bold" 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-components-buttons-bold">
-            <span class="kss-title__ref">
-              5.3.1
-              <span class="kss-title__permalink-hash">
-                  #Components.Buttons.bold
-              </span>
-            </span>
-            Bold Button
-          </a>
-        </h3>
-
-          <div class="kss-description">
-            <p>Use this class for a bolder, stronger looking button.</p>
-
-          </div>
-
-      </div>
-
-        <div class="kss-modifier__wrapper">
-          <div class="kss-modifier__heading kss-style">
-            Example
-          </div>
-
-
-          <div class="kss-modifier__example">
-            <button class="btn btn-bold">Click Me</button>
-            <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;button class&#x3D;&quot;btn btn-bold&quot;&gt;Click Me&lt;/button&gt;</code></pre>
-          </details>
-
-        <div class="kss-source kss-style">
-          Source: <code>_vars.scss</code>, line 34
-        </div>
-
-    </section>
-</article>
-
-<!-- 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-content.html b/doc/styleguide/section-content.html
deleted file mode 100644
index d81d133..0000000
--- a/doc/styleguide/section-content.html
+++ /dev/null
@@ -1,282 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</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-content.html">
-            <span class="kss-nav__name">Content</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-content.html#kssref-content-resume">
-                    <span class="kss-nav__name">Work / Resumé / CV</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-content" 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-content">
-              Content
-            </a>
-          </h1>
-
-
-        </div>
-
-
-
-      </div>
-      <div id="kssref-content-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-content-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>
-</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-flexblock.html b/doc/styleguide/section-contents.html
similarity index 84%
rename from doc/styleguide/section-flexblock.html
rename to doc/styleguide/section-contents.html
index 1042c37..1ff29ab 100644
--- a/doc/styleguide/section-flexblock.html
+++ b/doc/styleguide/section-contents.html
@@ -35,126 +35,81 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</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-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
+          <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-flexblock.html#kssref-flexblock-activity">
-                    <span class="kss-nav__name"> Activity</span>
+                  <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-flexblock.html#kssref-flexblock-blink">
-                    <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-flexblock.html#kssref-flexblock-clients">
+                  <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-flexblock.html#kssref-flexblock-features">
+                  <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-flexblock.html#kssref-flexblock-gallery">
-                    <span class="kss-nav__name">Gallery</span>
+                  <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 kss-nav__ref-child" href="section-flexblock.html#kssref-flexblock-gallery-overlay">
+                  <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-flexblock.html#kssref-flexblock-metrics">
+                  <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-flexblock.html#kssref-flexblock-plans">
-                    <span class="kss-nav__name">Plans</span>
+                  <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-flexblock.html#kssref-flexblock-reasons">
+                  <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-flexblock.html#kssref-flexblock-specs">
+                  <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-flexblock.html#kssref-flexblock-steps">
+                  <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-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -162,47 +117,17 @@
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-flexblock" class="kss-section kss-section--depth-1 ">
+      <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-flexblock">
-              Flexblock
+            <a class="kss-title__permalink" href="#kssref-contents">
+              Contents
             </a>
           </h1>
 
@@ -212,12 +137,12 @@
 
 
       </div>
-      <div id="kssref-flexblock-activity" class="kss-section kss-section--depth-2 ">
+      <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-flexblock-activity">
-               Activity
+            <a class="kss-title__permalink" href="#kssref-contents-activity">
+               CVs, News ad Activity
             </a>
           </h2>
 
@@ -333,15 +258,258 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-activity.scss</code>, line 5
+            Source: <code>modules/_flexblock-activity.scss</code>, line 1
           </div>
 
       </div>
-      <div id="kssref-flexblock-blink" class="kss-section kss-section--depth-2 ">
+      <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-flexblock-blink">
+            <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>
@@ -481,259 +649,16 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock.scss</code>, line 6
+            Source: <code>modules/_flexblock.scss</code>, line 1
           </div>
 
       </div>
-      <div id="kssref-flexblock-clients" class="kss-section kss-section--depth-2 ">
+      <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-flexblock-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 5
-          </div>
-
-      </div>
-      <div id="kssref-flexblock-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-flexblock-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 5
-          </div>
-
-      </div>
-      <div id="kssref-flexblock-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-flexblock-gallery">
-              Gallery
+            <a class="kss-title__permalink" href="#kssref-contents-gallery">
+              Galleries (portfolios, teams...)
             </a>
           </h2>
 
@@ -833,15 +758,15 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-gallery.scss</code>, line 7
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 1
           </div>
 
       </div>
-      <div id="kssref-flexblock-gallery-overlay" class="kss-section kss-section--depth-3 ">
+      <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-flexblock-gallery-overlay">
+            <a class="kss-title__permalink" href="#kssref-contents-gallery-overlay">
               Gallery + Overflow
             </a>
           </h3>
@@ -930,15 +855,15 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-gallery.scss</code>, line 50
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 44
           </div>
 
       </div>
-      <div id="kssref-flexblock-metrics" class="kss-section kss-section--depth-2 ">
+      <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-flexblock-metrics">
+            <a class="kss-title__permalink" href="#kssref-contents-metrics">
               Metrics
             </a>
           </h2>
@@ -1032,16 +957,16 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-metrics.scss</code>, line 5
+            Source: <code>modules/_flexblock-metrics.scss</code>, line 1
           </div>
 
       </div>
-      <div id="kssref-flexblock-plans" class="kss-section kss-section--depth-2 ">
+      <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-flexblock-plans">
-              Plans
+            <a class="kss-title__permalink" href="#kssref-contents-plans">
+              Plans / Pricing
             </a>
           </h2>
 
@@ -1179,15 +1104,15 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-plans.scss</code>, line 5
+            Source: <code>modules/_flexblock-plans.scss</code>, line 1
           </div>
 
       </div>
-      <div id="kssref-flexblock-reasons" class="kss-section kss-section--depth-2 ">
+      <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-flexblock-reasons">
+            <a class="kss-title__permalink" href="#kssref-contents-reasons">
               Reasons
             </a>
           </h2>
@@ -1238,15 +1163,98 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-reasons.scss</code>, line 5
+            Source: <code>modules/_flexblock-reasons.scss</code>, line 1
           </div>
 
       </div>
-      <div id="kssref-flexblock-specs" class="kss-section kss-section--depth-2 ">
+      <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-flexblock-specs">
+            <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>
@@ -1317,15 +1325,15 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-specs.scss</code>, line 5
+            Source: <code>modules/_flexblock-specs.scss</code>, line 1
           </div>
 
       </div>
-      <div id="kssref-flexblock-steps" class="kss-section kss-section--depth-2 ">
+      <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-flexblock-steps">
+            <a class="kss-title__permalink" href="#kssref-contents-steps">
                Steps
             </a>
           </h2>
@@ -1408,7 +1416,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-steps.scss</code>, line 6
+            Source: <code>modules/_flexblock-steps.scss</code>, line 1
           </div>
 
       </div>
diff --git a/doc/styleguide/section-elements.html b/doc/styleguide/section-elements.html
deleted file mode 100644
index df69e48..0000000
--- a/doc/styleguide/section-elements.html
+++ /dev/null
@@ -1,336 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</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-elements.html">
-            <span class="kss-nav__name">Elements</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-elements.html#kssref-elements-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-elements.html#kssref-elements-try">
-                    <span class="kss-nav__name">Try</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-elements" 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-elements">
-              Elements
-            </a>
-          </h1>
-
-
-        </div>
-
-
-
-      </div>
-      <div id="kssref-elements-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-elements-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-elements-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-elements-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>
-</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-forms.html b/doc/styleguide/section-forms.html
deleted file mode 100644
index e4c73d1..0000000
--- a/doc/styleguide/section-forms.html
+++ /dev/null
@@ -1,242 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</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-forms.html">
-            <span class="kss-nav__name">Forms</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-forms.html#kssref-forms-user">
-                    <span class="kss-nav__name">User</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-forms" 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-forms">
-              Forms
-            </a>
-          </h1>
-
-
-        </div>
-
-
-
-      </div>
-      <div id="kssref-forms-user" 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-forms-user">
-              User
-            </a>
-          </h2>
-
-
-        </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>
-</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-grid.html b/doc/styleguide/section-grid.html
deleted file mode 100644
index fb2c23b..0000000
--- a/doc/styleguide/section-grid.html
+++ /dev/null
@@ -1,262 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-grid" 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-grid">
-              Grid
-            </a>
-          </h1>
-
-            <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>
-</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
index 6dbe5d5..9a29be0 100644
--- a/doc/styleguide/section-landings.html
+++ b/doc/styleguide/section-landings.html
@@ -2,7 +2,7 @@
 <html class="no-js" lang="en">
 <head>
   <meta charset="utf-8">
-  <title>WebSlides</title>
+  <title>WebSlides - Documentation 1.5.0</title>
 
   <meta name="description" content="">
   <meta name="generator" content="kss-node">
@@ -13,152 +13,472 @@
 
 </head>
 <body id="kss-node" >
-
-<div class="kss-sidebar kss-style">
-  <header class="kss-header">
-    <h1 class="kss-doc-title">WebSlides</h1>
-  </header>
-  <nav class="kss-nav">
-    <ul class="kss-nav__menu">
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
-          <span class="kss-nav__ref">0</span
-          ><span class="kss-nav__name">Overview</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-base.html">
-          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-landings.html">
-          <span class="kss-nav__ref">3</span><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" href="section-landings.html#kssref-landings-intro">
-                  <span class="kss-nav__ref ">3.1</span
-                  ><span class="kss-nav__name">Intro</span>
-                </a>
-              </li>
-            </ul>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layout</span>
-        </a>
-      </li>
-      <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
-        </a>
-      </li>
+<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>
-<article 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">
-            <span class="kss-title__ref">
-              3
-              <span class="kss-title__permalink-hash">
-                  #Landings
-              </span>
-            </span>
-            Landings
+<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>
-        </h1>
+        </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 class="kss-description">
-            <p>Bla bla bla</p>
 
-          </div>
 
       </div>
+      <div id="kssref-landings-cards" class="kss-section kss-section--depth-2 ">
 
-        <div class="kss-modifier__wrapper">
-          <div class="kss-modifier__heading kss-style">
-            Example
-          </div>
+        <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 class="kss-modifier__example">
-            <h1 class="text-landing">Landings</h1>
-            <div class="kss-modifier__example-footer"></div>
-          </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-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
 
-        <div class="kss-source kss-style">
-          Source: <code>_typography.scss</code>, line 228
-        </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>
-    <section id="kssref-landings-intro" class="kss-section kss-section--depth-2 ">
+  </div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
 
-      <div class="kss-style">
-        <h2 class="kss-title kss-title--level-2">
-          <a class="kss-title__permalink" href="#kssref-landings-intro">
-            <span class="kss-title__ref">
-              3.1
-              <span class="kss-title__permalink-hash">
-                  #Landings.Intro
-              </span>
-            </span>
-            Intro
-          </a>
-        </h2>
+          </div>
 
-          <div class="kss-description">
-            <p>Bla bla bla</p>
+            <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-modifier__wrapper">
-          <div class="kss-modifier__heading kss-style">
-            Example
-          </div>
+        <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 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-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 class="kss-source kss-style">
-          Source: <code>_typography.scss</code>, line 207
         </div>
 
-    </section>
-</article>
+          <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>
diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html
deleted file mode 100644
index ecab66f..0000000
--- a/doc/styleguide/section-layout.html
+++ /dev/null
@@ -1,499 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</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-layout.html">
-            <span class="kss-nav__name">Layout</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-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-sizes">
-                    <span class="kss-nav__name">Resizing</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-layout" 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-layout">
-              Layout
-            </a>
-          </h1>
-
-
-        </div>
-
-
-
-      </div>
-      <div id="kssref-layout-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-layout-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-layout-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-layout-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-layout-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-layout-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-layout-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-layout-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>
-</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-longform.html b/doc/styleguide/section-longform.html
deleted file mode 100644
index a263dbf..0000000
--- a/doc/styleguide/section-longform.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-longform" 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-longform">
-              Longform
-            </a>
-          </h1>
-
-
-        </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>
-</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
index fe07529..3cb76da 100644
--- a/doc/styleguide/section-media.html
+++ b/doc/styleguide/section-media.html
@@ -35,69 +35,19 @@
             <span class="kss-nav__name">Introduction</span>
           </a>
         </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
+        <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-base.html">
-            <span class="kss-nav__name">Base</span>
+          <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-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</span>
+          <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">
@@ -106,8 +56,28 @@
           </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-embed">
-                    <span class="kss-nav__name">Fullscreen</span>
+                  <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">
@@ -115,38 +85,23 @@
                     <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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
       </ul>
     </nav>
   </div>
@@ -167,18 +122,17 @@
 
 
       </div>
-      <div id="kssref-media-embed" class="kss-section kss-section--depth-2 ">
+      <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-embed">
-              Fullscreen
+            <a class="kss-title__permalink" href="#kssref-media-avatars">
+              Avatars
             </a>
           </h2>
 
             <div class="kss-description">
-              <p>Responsive background video
-<a href="https://fvsch.com/code/video-background/">https://fvsch.com/code/video-background/</a></p>
+              <p>You&#39;ll love this</p>
 
             </div>
 
@@ -191,11 +145,12 @@
 
 
             <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>
+              <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>
 
@@ -205,15 +160,168 @@
               <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>
+              <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/_media.scss</code>, line 35
+            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>
@@ -266,6 +374,122 @@
           </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>
 
diff --git a/doc/styleguide/section-navigation.html b/doc/styleguide/section-navigation.html
deleted file mode 100644
index 58ad0a0..0000000
--- a/doc/styleguide/section-navigation.html
+++ /dev/null
@@ -1,326 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-navigation" 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-navigation">
-              Navigation
-            </a>
-          </h1>
-
-            <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">
-              <nav role="navigation" class="">
-  <ul>
-    <li><a href="">About</a></li>
-    <li><a href="">Clients</a></li>
-    <li class="facebook">
-      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
-        Facebook
-      </a>
-    </li>
-    <li class="twitter">
-      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
-        @WebSlides
-      </a>
-    </li>
-  </ul>
-</nav>
-              <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">
-                <nav role="navigation" class="navbar">
-  <ul>
-    <li><a href="">About</a></li>
-    <li><a href="">Clients</a></li>
-    <li class="facebook">
-      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
-        Facebook
-      </a>
-    </li>
-    <li class="twitter">
-      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
-        @WebSlides
-      </a>
-    </li>
-  </ul>
-</nav>
-                <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">
-                <nav role="navigation" class="aligncenter">
-  <ul>
-    <li><a href="">About</a></li>
-    <li><a href="">Clients</a></li>
-    <li class="facebook">
-      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
-        Facebook
-      </a>
-    </li>
-    <li class="twitter">
-      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
-        @WebSlides
-      </a>
-    </li>
-  </ul>
-</nav>
-                <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">
-                <nav role="navigation" class="alignright">
-  <ul>
-    <li><a href="">About</a></li>
-    <li><a href="">Clients</a></li>
-    <li class="facebook">
-      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
-        Facebook
-      </a>
-    </li>
-    <li class="twitter">
-      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
-        @WebSlides
-      </a>
-    </li>
-  </ul>
-</nav>
-                <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;nav role&#x3D;&quot;navigation&quot; class&#x3D;&quot;[modifier class]&quot;&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;Clients&lt;/a&gt;&lt;/li&gt;
-    &lt;li class&#x3D;&quot;facebook&quot;&gt;
-      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://facebook.com/webslides&quot; title&#x3D;&quot;Facebook&quot;&gt;
-        Facebook
-      &lt;/a&gt;
-    &lt;/li&gt;
-    &lt;li class&#x3D;&quot;twitter&quot;&gt;
-      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://twitter.com/webslides&quot; title&#x3D;&quot;Twitter&quot;&gt;
-        @WebSlides
-      &lt;/a&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/nav&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_navigation.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-screenshots.html b/doc/styleguide/section-screenshots.html
deleted file mode 100644
index a091e0e..0000000
--- a/doc/styleguide/section-screenshots.html
+++ /dev/null
@@ -1,224 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-screenshots" 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-screenshots">
-              Screenshots
-            </a>
-          </h1>
-
-            <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/doc/styleguide/section-slide.html b/doc/styleguide/section-slide.html
deleted file mode 100644
index 5eff257..0000000
--- a/doc/styleguide/section-slide.html
+++ /dev/null
@@ -1,491 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</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-slide.html">
-            <span class="kss-nav__name">Slide</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-slide.html#kssref-slide-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 kss-nav__ref-child" href="section-slide.html#kssref-slide-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-slide.html#kssref-slide-background-video">
-                    <span class="kss-nav__name">Video</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-slide" 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-slide">
-              Slide
-            </a>
-          </h1>
-
-
-        </div>
-
-
-
-      </div>
-      <div id="kssref-slide-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-slide-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-slide-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-slide-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-slide-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-slide-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>
-</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-slides.html b/doc/styleguide/section-slides.html
deleted file mode 100644
index 30e2b45..0000000
--- a/doc/styleguide/section-slides.html
+++ /dev/null
@@ -1,415 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</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-slides.html">
-            <span class="kss-nav__name">fullscreen</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-slides.html#kssref-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 " href="section-slides.html#kssref-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 " href="section-slides.html#kssref-slides-top">
-                    <span class="kss-nav__name">Align top</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-slides.html">
-            <span class="kss-nav__name">Slides</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-slides.html#kssref-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 " href="section-slides.html#kssref-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 " href="section-slides.html#kssref-slides-top">
-                    <span class="kss-nav__name">Align top</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-typography.html">
-            <span class="kss-nav__name">Typography</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-slides" 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-slides">
-              fullscreen
-            </a>
-          </h1>
-
-            <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-slides" 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-slides">
-              Slides
-            </a>
-          </h1>
-
-            <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-slides-bottom" 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-slides-bottom">
-              Align bottom
-            </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 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-slides-top" 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-slides-top">
-              Align top
-            </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 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>
-</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-typography.html b/doc/styleguide/section-typography.html
deleted file mode 100644
index 47610af..0000000
--- a/doc/styleguide/section-typography.html
+++ /dev/null
@@ -1,958 +0,0 @@
-<!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 ">
-          <a class="kss-nav__menu-link " href="section-avatars.html">
-            <span class="kss-nav__name">Avatars</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-badgets.html">
-            <span class="kss-nav__name">Badges</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-base.html">
-            <span class="kss-nav__name">Base</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-blocks.html">
-            <span class="kss-nav__name">Blocks</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-buttons.html">
-            <span class="kss-nav__name">Buttons</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-cards.html">
-            <span class="kss-nav__name">Cards</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-content.html">
-            <span class="kss-nav__name">Content</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-elements.html">
-            <span class="kss-nav__name">Elements</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-flexblock.html">
-            <span class="kss-nav__name">Flexblock</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-forms.html">
-            <span class="kss-nav__name">Forms</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-grid.html">
-            <span class="kss-nav__name">Grid</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-layout.html">
-            <span class="kss-nav__name">Layout</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-longform.html">
-            <span class="kss-nav__name">Longform</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>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-navigation.html">
-            <span class="kss-nav__name">Navigation</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item ">
-          <a class="kss-nav__menu-link " href="section-screenshots.html">
-            <span class="kss-nav__name">Screenshots</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slide.html">
-            <span class="kss-nav__name">Slide</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">fullscreen</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link " href="section-slides.html">
-            <span class="kss-nav__name">Slides</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-typography.html">
-            <span class="kss-nav__name">Typography</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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-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-typography.html#kssref-typography-uppercase">
-                    <span class="kss-nav__name">Uppercase</span>
-                  </a>
-                </li>
-              </ul>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-typography" 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-typography">
-              Typography
-            </a>
-          </h1>
-
-
-        </div>
-
-
-
-      </div>
-      <div id="kssref-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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-typography-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/package.json b/package.json
index c95e831..0e23922 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "dev": "webpack-dev-server",
     "test": "jest && codecov",
     "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"
   },
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index 5085e83..c82b661 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -79,7 +79,7 @@ nav a[rel='external'] em,
 //   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>
 //
-// Styleguide Layout.Shadow
+// Styleguide Architecture.Shadow
 .shadow {
   position: relative;
 
@@ -135,7 +135,7 @@ footer nav {
 //   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>
 //
-// Styleguide Layout.Radius
+// Styleguide Architecture.Radius
 .radius {
   border-radius: .4rem;
 }
@@ -152,7 +152,7 @@ footer nav {
 // .alignleft - Align left.
 // .aligncenter - Align center.
 //
-// Styleguide Layout.Alignment
+// Styleguide Architecture.Alignment
 .alignright {
   float: right;
 }
@@ -209,7 +209,7 @@ figure.alignleft {
 // .size-30 - resize to 30%.
 // .size-20 - resize to 20%.
 //
-// Styleguide Layout.Sizes
+// Styleguide Architecture.Sizes
 $sizes: 80, 70, 60, 50, 40, 30, 20;
 
 /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
diff --git a/src/scss/_color.scss b/src/scss/_color.scss
index 50dfb86..58fdb7c 100644
--- a/src/scss/_color.scss
+++ b/src/scss/_color.scss
@@ -123,7 +123,7 @@ Slides - Backgrounds <section class="bg-primary">
 // <span class="bg-white size-20">White #fff</span>
 // <span class="bg-facebook size-20">Facebook #3b5998</span>
 //
-// Styleguide Base.backgrounds
+// Styleguide Architecture.Backgrounds
 @each $name, $color in $bg-colors {
   .bg-#{$name} {
     background-color: $color;
@@ -165,7 +165,7 @@ Slides - Backgrounds <section class="bg-primary">
   color: #666;
 }
 
-// Transparent Backgrounds
+// Backgrounds - Transparent
 //
 // Colors we use for backgrounds.
 //
@@ -176,8 +176,7 @@ Slides - Backgrounds <section class="bg-primary">
 //   <div class="bg-trans-gradient">Gradient</div>
 // </div>
 //
-// Styleguide Base.backgrounds.transparent
-/*Transparent/Opacity*/
+// Styleguide Architecture.backgrounds.transparent
 .bg-trans-dark {
   background: rgba($black, .8);
 }
@@ -191,7 +190,7 @@ Slides - Backgrounds <section class="bg-primary">
   background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%);
 }
 
-// Gradient Backgrounds
+// Backgrounds - Gradient
 //
 // Colors we use for backgrounds.
 //
@@ -200,7 +199,7 @@ Slides - Backgrounds <section class="bg-primary">
 //   <div class="bg-gradient-v">Vertical</div>
 //   <div class="bg-gradient-r">Radial</div>
 //
-// Styleguide Base.backgrounds.gradient
+// Styleguide Architecture.backgrounds.gradient
 /*Horizontal Gradient*/
 .bg-gradient-h {
   background: linear-gradient(134deg, #32b 0, #62b 100%);
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
index f682720..8242d7c 100644
--- a/src/scss/_typography.scss
+++ b/src/scss/_typography.scss
@@ -210,7 +210,7 @@ h3 [class*='bg-'] {
 // Markup:
 // <p class="text-intro">Create a simple web presence.</p>
 //
-// Styleguide Typography.Intro
+// Styleguide Architecture.Intro
 .text-intro,
 [class*='content-'] p {
   font-size: 2.4rem;
@@ -224,7 +224,7 @@ h3 [class*='bg-'] {
 // Markup:
 // <p class="text-serif">Create a simple web presence.</p>
 //
-// Styleguide Typography.Serif
+// Styleguide Architecture.Serif
 .text-serif,
 h1 span {
   font-family: 'Maitree', times, serif;
@@ -237,7 +237,7 @@ h1 span {
 // Markup:
 // <h1 class="text-landing">Landings</h1>
 //
-// Styleguide Typography.Landings
+// Styleguide Architecture.Landings
 .text-landing {
   letter-spacing: .4rem;
   text-transform: uppercase;
@@ -254,7 +254,7 @@ h1 span {
 // Markup:
 // <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
 //
-// Styleguide Typography.Subtitle
+// Styleguide Architecture.Subtitle
 .text-subtitle {
   letter-spacing: .2rem;
   margin-bottom: 0;
@@ -278,7 +278,7 @@ h1 span {
 // Markup:
 // <p class="text-uppercase">Create a simple web presence.</p>
 //
-// Styleguide Typography.Uppercase
+// Styleguide Architecture.Uppercase
 .text-uppercase {
   text-transform: uppercase;
 }
@@ -288,7 +288,7 @@ h1 span {
 // Markup:
 // <p class="text-lowercase">Create a simple web presence.</p>
 //
-// Styleguide Typography.Lowercase
+// Styleguide Architecture.Lowercase
 .text-lowercase {
   text-transform: lowercase;
 }
@@ -300,7 +300,7 @@ h1 span {
 // Markup:
 // <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
 //
-// Styleguide Typography.Emoji
+// Styleguide Architecture.Emoji
 .text-emoji {
   font-size: 6.8rem;
   line-height: 8.8rem;
@@ -318,7 +318,7 @@ h1 span {
 // Markup:
 // <p class="text-data">23,478,289</p>
 //
-// Styleguide Typography.Data
+// Styleguide Architecture.Data
 .text-data {
   font-size: 6.4rem;
   line-height: 8rem;
@@ -335,7 +335,7 @@ h1 span {
 // Markup:
 // <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
 //
-// Styleguide Typography.Label
+// Styleguide Architecture.Label
 .text-label {
   display: inline-block;
   font-weight: 600;
@@ -350,7 +350,7 @@ h1 span {
 // Markup:
 // <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
 //
-// Styleguide Typography.Columns
+// Styleguide Architecture.Columns
 @media  (min-width: 768px) {
   .text-cols {
     column-count: 2;
@@ -380,7 +380,7 @@ h1 span {
 // Markup:
 // <p class="text-context">Why WebSlides?</p>
 //
-// Styleguide Typography.Context
+// Styleguide Architecture.Context
 .text-context {
   position: relative;
 
@@ -408,7 +408,7 @@ h1 span {
 // Markup:
 // <p class="text-symbols">* * *</p>
 //
-// Styleguide Typography.Symbols
+// Styleguide Architecture.Symbols
 .text-symbols {
   font-weight: 600;
   letter-spacing: .8rem;
@@ -422,7 +422,7 @@ h1 span {
 // Markup:
 // <p class="text-separator">Separator</p>
 //
-// Styleguide Typography.Separator
+// Styleguide Architecture.Separator
 .text-separator {
   margin-top: 2.4rem;
 
@@ -456,7 +456,7 @@ h1 span {
 // <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>
 //
-// Styleguide Typography.Pull_Quote
+// Styleguide Architecture.Pull_Quote
 [class*='text-pull'] {
   font-size: 2.4rem;
   font-weight: 400;
@@ -525,7 +525,7 @@ figure[class*='text-pull-'] {
 //   </dd>
 // </dl>
 //
-// Styleguide Typography.Interviews
+// Styleguide Architecture.Interviews
 .text-interview dt {
   font-weight: 600;
   margin-bottom: 0;
@@ -550,7 +550,7 @@ figure[class*='text-pull-'] {
 // Markup:
 // <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
 //
-// Styleguide Typography.Info
+// Styleguide Architecture.Info
 .text-info {
   font-size: 1.6rem;
   line-height: 2.4rem;
diff --git a/src/scss/modules/_avatars.scss b/src/scss/modules/_avatars.scss
index 49dd9b4..ea6a3ec 100644
--- a/src/scss/modules/_avatars.scss
+++ b/src/scss/modules/_avatars.scss
@@ -14,7 +14,7 @@
 // <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" />
 //
-// Styleguide Avatars
+// Styleguide Media.Avatars
 cite img,
 img[class*='avatar-'] {
   display: inline-block;
diff --git a/src/scss/modules/_badges.scss b/src/scss/modules/_badges.scss
index e0a4a58..ba88533 100644
--- a/src/scss/modules/_badges.scss
+++ b/src/scss/modules/_badges.scss
@@ -6,7 +6,7 @@
 // <p class="badge-android">Google Play</p>
 // <p class="badge-ios">App Store</p>
 //
-// Styleguide Badgets
+// Styleguide Media.Badgets
 [class*='badge-'] {
   background-repeat: no-repeat;
   background-size: cover;
diff --git a/src/scss/modules/_browser.scss b/src/scss/modules/_browser.scss
index dc4ac75..600b645 100644
--- a/src/scss/modules/_browser.scss
+++ b/src/scss/modules/_browser.scss
@@ -8,7 +8,7 @@
 //   <figcaption>Foddie</figcaption>
 // </figure>
 //
-// Styleguide Screenshots
+// Styleguide Media.Screenshots
 .browser {
   border-radius: .3rem;
   margin: 0 auto 3.2rem;
diff --git a/src/scss/modules/_button.scss b/src/scss/modules/_button.scss
index afaf42d..52860a2 100644
--- a/src/scss/modules/_button.scss
+++ b/src/scss/modules/_button.scss
@@ -5,7 +5,7 @@
 //
 // .radius - Rounded corners
 //
-// Styleguide Buttons
+// Styleguide Architecture.Buttons
 [class*='button'] {
   @media (min-width: 500px) {
     & + & {
diff --git a/src/scss/modules/_cards.scss b/src/scss/modules/_cards.scss
index 82a5765..d4dab26 100644
--- a/src/scss/modules/_cards.scss
+++ b/src/scss/modules/_cards.scss
@@ -12,7 +12,7 @@
 //     </div>
 //   </div>
 //
-// Styleguide Cards
+// Styleguide Landings.Cards
 [class*='card-'] {
   &,
   & > a {
diff --git a/src/scss/modules/_flexblock-activity.scss b/src/scss/modules/_flexblock-activity.scss
index 182a4bf..63104eb 100644
--- a/src/scss/modules/_flexblock-activity.scss
+++ b/src/scss/modules/_flexblock-activity.scss
@@ -1,8 +1,4 @@
-/*===========================================
-6.9 Block Activity <ul class="activity">
-CV / News
-============================================= */
-//  Activity
+//  CVs, News ad Activity
 //
 // Bla bla bla
 //
@@ -51,7 +47,7 @@ CV / News
 //   </li>
 // </ul>
 //
-// Styleguide Flexblock.Activity
+// Styleguide Contents.Activity
 .flexblock.activity {
   flex-direction: column;
 
diff --git a/src/scss/modules/_flexblock-clients.scss b/src/scss/modules/_flexblock-clients.scss
index 816abb1..5d1ba6c 100644
--- a/src/scss/modules/_flexblock-clients.scss
+++ b/src/scss/modules/_flexblock-clients.scss
@@ -1,7 +1,3 @@
-/*=====================================================================
-6.2 Clients Logos <ul class="flexblock clients">
-======================================================================= */
-
 // Clients
 //
 // Highlight clients information
@@ -34,7 +30,7 @@
 //
 // .border - with border
 //
-// Styleguide Flexblock.Clients
+// Styleguide Contents.Clients
 
 .flexblock.clients.blink li > a,
 .flexblock.clients li {
diff --git a/src/scss/modules/_flexblock-features.scss b/src/scss/modules/_flexblock-features.scss
index 9f8951b..94d92fa 100644
--- a/src/scss/modules/_flexblock-features.scss
+++ b/src/scss/modules/_flexblock-features.scss
@@ -1,7 +1,3 @@
-/*====================================================================
-6.1 Features <ul class="flexblock features">
-====================================================================== */
-
 // Features
 //
 // Special features
@@ -33,7 +29,7 @@
 //
 // .border - with border
 //
-// Styleguide Flexblock.Features
+// Styleguide Contents.Features
 .flexblock.features {
   > li {
     border-radius: .4rem;
diff --git a/src/scss/modules/_flexblock-gallery.scss b/src/scss/modules/_flexblock-gallery.scss
index ef40b60..f81149c 100644
--- a/src/scss/modules/_flexblock-gallery.scss
+++ b/src/scss/modules/_flexblock-gallery.scss
@@ -1,10 +1,4 @@
-/*=================================================
-6.7 Gallery - <ul class="flexblock gallery">
-Block Thumbnails li+.overlay+image
-img size recommended:800x600px
-=================================================== */
-
-// Gallery
+// Galleries (portfolios, teams...)
 //
 // Beautiful gallery
 //
@@ -45,7 +39,7 @@ img size recommended:800x600px
 //   </li>
 // </ul>
 //
-// Styleguide Flexblock.Gallery
+// Styleguide Contents.Gallery
 
 // Gallery + Overflow
 //
@@ -82,7 +76,7 @@ img size recommended:800x600px
 //   </li>
 // </ul>
 //
-// Styleguide Flexblock.Gallery.Overlay
+// Styleguide Contents.Gallery.Overlay
 
 .flexblock.gallery {
   li {
diff --git a/src/scss/modules/_flexblock-metrics.scss b/src/scss/modules/_flexblock-metrics.scss
index 616b930..7cb23e4 100644
--- a/src/scss/modules/_flexblock-metrics.scss
+++ b/src/scss/modules/_flexblock-metrics.scss
@@ -1,7 +1,3 @@
-/*=================================================
-6.4 Block Numbers - <ul class="flexblock metrics">
-=================================================== */
-
 // Metrics
 //
 // Bla bla bla
@@ -27,7 +23,7 @@
 //
 // .border - with border
 //
-// Styleguide Flexblock.Metrics
+// Styleguide Contents.Metrics
 .metrics li {
   text-align: center;
   width: 100%;
diff --git a/src/scss/modules/_flexblock-plans.scss b/src/scss/modules/_flexblock-plans.scss
index a3e3596..57284d0 100644
--- a/src/scss/modules/_flexblock-plans.scss
+++ b/src/scss/modules/_flexblock-plans.scss
@@ -1,8 +1,4 @@
-/*===============================================
-6.8 Plans / Pricing <ul class="flexblock plans">
-================================================= */
-
-// Plans
+// Plans / Pricing
 //
 // Bla bla bla
 //
@@ -42,7 +38,7 @@
 //
 // .blink - block linkable
 //
-// Styleguide Flexblock.Plans
+// Styleguide Contents.Plans
 .flexblock.plans {
   > li {
     border-radius: 3px;
diff --git a/src/scss/modules/_flexblock-reasons.scss b/src/scss/modules/_flexblock-reasons.scss
index e712f9d..6e8e060 100644
--- a/src/scss/modules/_flexblock-reasons.scss
+++ b/src/scss/modules/_flexblock-reasons.scss
@@ -1,7 +1,3 @@
-/*=================================================
-6.6 Reasons/Why/Numbers (counter-increment)
-<ul class="flexblock reasons">
-=================================================== */
 // Reasons
 //
 // Bla bla bla
@@ -18,7 +14,7 @@
 //   </li>
 // </ul>
 //
-// Styleguide Flexblock.Reasons
+// Styleguide Contents.Reasons
 .flexblock.reasons {
   li {
     counter-increment: list;
diff --git a/src/scss/modules/_flexblock-specs.scss b/src/scss/modules/_flexblock-specs.scss
index 7f3e161..3bc8b7c 100644
--- a/src/scss/modules/_flexblock-specs.scss
+++ b/src/scss/modules/_flexblock-specs.scss
@@ -1,7 +1,3 @@
-/*=====================================================
-6.5 Specs/Items: <ul class="flexblock specs">
-======================================================= */
-
 // Specs
 //
 // Bla bla bla
@@ -28,7 +24,7 @@
 //     </li>
 //     </ul>
 //
-// Styleguide Flexblock.Specs
+// Styleguide Contents.Specs
 
 .specs li {
   text-align: left;
diff --git a/src/scss/modules/_flexblock-steps.scss b/src/scss/modules/_flexblock-steps.scss
index e8e70fa..1feb104 100644
--- a/src/scss/modules/_flexblock-steps.scss
+++ b/src/scss/modules/_flexblock-steps.scss
@@ -1,8 +1,3 @@
-/*==================================================
-6.3 flexblock.steps <ul class="flexblock steps">
-About, Philosophy...
-=================================================== */
-
 //  Steps
 //
 // Bla bla bla
@@ -35,7 +30,7 @@ About, Philosophy...
 //   </li>
 // </ul>
 //
-// Styleguide Flexblock.Steps
+// Styleguide Contents.Steps
 .steps li {
   width: 100%;
 
diff --git a/src/scss/modules/_flexblock.scss b/src/scss/modules/_flexblock.scss
index 6d25319..5382004 100644
--- a/src/scss/modules/_flexblock.scss
+++ b/src/scss/modules/_flexblock.scss
@@ -1,8 +1,3 @@
-/*===============================================================
-6. Magic blocks with flexbox (Auto-fill & Equal Height)
-Blocks Links li>a = .flexblock.blink (.blink required)
-================================================================= */
-
 // Flexblocks
 //
 // Auto-fill & Equal height columns
@@ -34,7 +29,7 @@ Blocks Links li>a = .flexblock.blink (.blink required)
 // .blink - Linkable block
 // .border - With border
 //
-// Styleguide Flexblock.Blink
+// Styleguide Contents.Flexblocks
 .flexblock {
   clear: both;
   display: flex;
diff --git a/src/scss/modules/_form.scss b/src/scss/modules/_form.scss
index c9ec1f9..52dc5ae 100644
--- a/src/scss/modules/_form.scss
+++ b/src/scss/modules/_form.scss
@@ -98,7 +98,7 @@ input[type='submit'] {
 // Markup:
 // <a href="#" class="try">Try element</a>
 //
-// Styleguide Elements.Try
+// Styleguide Architecture.Try
 .try {
   display: block;
   font-size: 1.6rem;
@@ -136,7 +136,7 @@ button:disabled:hover {
   cursor: not-allowed;
 }
 
-// User
+// Login form
 //
 // Markup:
 // <div class="user">
@@ -144,7 +144,7 @@ button:disabled:hover {
 //   <button>Log in</button>
 // </div>
 //
-// Styleguide Forms.User
+// Styleguide Architecture.Forms.User
 .user {
   input {
     margin-bottom: 0;
diff --git a/src/scss/modules/_grid.scss b/src/scss/modules/_grid.scss
index 4e2b153..65a2591 100644
--- a/src/scss/modules/_grid.scss
+++ b/src/scss/modules/_grid.scss
@@ -18,7 +18,7 @@
 //
 // .vertical-align - Vertical align
 //
-// Styleguide Grid
+// Styleguide Architecture.Grid
 .grid {
   clear: both;
   display: flex;
diff --git a/src/scss/modules/_longform.scss b/src/scss/modules/_longform.scss
index 07d5181..112d296 100644
--- a/src/scss/modules/_longform.scss
+++ b/src/scss/modules/_longform.scss
@@ -5,7 +5,7 @@
 //   <p>Lorem ipsum</p>
 // </section>
 //
-// Styleguide Longform
+// Styleguide Landings.Longform
 .longform {
   width: 72rem;
   /* Why 72rem=720px?
diff --git a/src/scss/modules/_media.scss b/src/scss/modules/_media.scss
index 85be9e0..33b19ef 100644
--- a/src/scss/modules/_media.scss
+++ b/src/scss/modules/_media.scss
@@ -46,7 +46,7 @@
   //   </div>
   // </div>
   //
-  // Styleguide Media.Embed
+  // Styleguide Media.Fullscreen.Embed
   .fullscreen > & {
     bottom: 0;
     height: auto;
diff --git a/src/scss/modules/_navigation.scss b/src/scss/modules/_navigation.scss
index 2e8d031..0af9677 100644
--- a/src/scss/modules/_navigation.scss
+++ b/src/scss/modules/_navigation.scss
@@ -24,7 +24,7 @@
 // .aligncenter - Center alignment
 // .alignright - Right alignment
 //
-// Styleguide Navigation
+// Styleguide Architecture.Navigation
 nav ul {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/scss/modules/_promos.scss b/src/scss/modules/_promos.scss
index eeb1863..9c0da29 100644
--- a/src/scss/modules/_promos.scss
+++ b/src/scss/modules/_promos.scss
@@ -11,7 +11,7 @@
 //   </div>
 // </div>
 //
-// Styleguide Blocks.CTA
+// Styleguide Landings.CTA
 .cta {
   display: flex;
   flex-wrap: wrap;
@@ -85,7 +85,7 @@
 //   </p>
 // </div>
 //
-// Styleguide Blocks.cta-cover
+// Styleguide Landings.cta-cover
 .cta-cover {
   display: table;
   width: 100%;
diff --git a/src/scss/modules/_quotes.scss b/src/scss/modules/_quotes.scss
index 893cafb..dbb328b 100644
--- a/src/scss/modules/_quotes.scss
+++ b/src/scss/modules/_quotes.scss
@@ -5,7 +5,7 @@
 //   <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
 // </blockquote>
 //
-// Styleguide Blocks.Quotes
+// Styleguide Landings.Quotes
 blockquote {
   display: inline-block;
   position: relative;
@@ -30,7 +30,7 @@ dd blockquote p:last-child {
 // 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>
 //
-// Styleguide Blocks.Cites
+// Styleguide Landings.Cites
 cite {
   display: block;
   text-align: center;
diff --git a/src/scss/modules/_slides-bg.scss b/src/scss/modules/_slides-bg.scss
index edc2e2f..355b635 100644
--- a/src/scss/modules/_slides-bg.scss
+++ b/src/scss/modules/_slides-bg.scss
@@ -32,7 +32,7 @@
 // .background-left - Left.
 // .background-right - Right.
 //
-// Styleguide Slide.Background
+// Styleguide Architecture.Background
 .background {
   background-position: center;
   background-size: cover;
@@ -102,7 +102,7 @@
   //   </div>
   // </section>
   //
-  // Styleguide Slide.Background.Video
+  // Styleguide Media.Background.Video
   &-video {
     height: 100%;
     object-fit: fill;
@@ -144,7 +144,7 @@
 //   <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
 // </section>
 //
-// Styleguide Slide.Background.Anim
+// Styleguide Media.Background.Anim
 .background.anim {
   animation: anim 80s linear infinite;
   background-position: center top;
diff --git a/src/scss/modules/_slides-navigation.scss b/src/scss/modules/_slides-navigation.scss
index 977b964..79768b3 100644
--- a/src/scss/modules/_slides-navigation.scss
+++ b/src/scss/modules/_slides-navigation.scss
@@ -7,7 +7,7 @@
 //   <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
 // </div>
 //
-// Styleguide Blocks.Navigation
+// Styleguide Architecture.Navigation
 #navigation {
   animation: fadeIn 8s;
   bottom: 0;
diff --git a/src/scss/modules/_slides.scss b/src/scss/modules/_slides.scss
index 81bf1ed..691a5e6 100644
--- a/src/scss/modules/_slides.scss
+++ b/src/scss/modules/_slides.scss
@@ -9,7 +9,7 @@
 //   <p>Content</p>
 // </section>
 //
-// Styleguide Slides
+// Styleguide Architecture.Slides
 section * {
   animation: fadeIn .6s ease-in-out;
 }
@@ -49,7 +49,7 @@ section,
 //   <p>Content</p>
 // </section>
 //
-// Styleguide Slides
+// Styleguide Architecture.Slides
 .fullscreen {
   padding: 0;
   /* Fixed/Visible header?
@@ -66,7 +66,7 @@ section,
 //   <p>Content</p>
 // </section>
 //
-// Styleguide Slides.Top
+// Styleguide Architecture.Slides.Top
 .slide-top {
   justify-content: flex-start;
 }
@@ -80,7 +80,7 @@ section,
 //   <p>Content</p>
 // </section>
 //
-// Styleguide Slides.Bottom
+// Styleguide Architecture.Slides.Bottom
 .slide-bottom {
   justify-content: flex-end;
 }
diff --git a/src/scss/modules/_tables.scss b/src/scss/modules/_tables.scss
index 010d018..d936c6a 100644
--- a/src/scss/modules/_tables.scss
+++ b/src/scss/modules/_tables.scss
@@ -32,7 +32,7 @@
 //   </tbody>
 // </table>
 //
-// Styleguide Elements.Tables
+// Styleguide Architecture.Tables
 table {
   margin-bottom: 3.2rem;
   margin-top: 3.2rem;
diff --git a/src/scss/modules/_toc.scss b/src/scss/modules/_toc.scss
index b2435ea..8509129 100644
--- a/src/scss/modules/_toc.scss
+++ b/src/scss/modules/_toc.scss
@@ -27,7 +27,7 @@
 //   </ol>
 // </div>
 //
-// Styleguide Blocks.TOC
+// Styleguide Landings.TOC
 .toc,
 .toc ol > li:before,
 .chapter {
diff --git a/src/scss/modules/_work.scss b/src/scss/modules/_work.scss
index 827a291..c88e595 100644
--- a/src/scss/modules/_work.scss
+++ b/src/scss/modules/_work.scss
@@ -26,7 +26,7 @@
 //   </li>
 // </ul>
 //
-// Styleguide Content.Resume
+// Styleguide Contents.Resume
 .work {
   clear: both;
   display: flex;