Stylesheet documentation early stage

doc/kss/templates/default/builder.js

@@ -0,0 +1,137 @@
+'use strict';
+
+/**
+ * This module is used to load the base KSS builder class needed by this builder
+ * and to define any custom CLI options or extend any base class methods.
+ *
+ * Note: this module is optional. If a builder does not export a KssBuilderBase
+ * sub-class as a module, then kss-node will assume the builder wants to use
+ * the KssBuilderBaseHandlebars class.
+ *
+ * This file's name should follow standard node.js require() conventions. It
+ * should either be named index.js or have its name set in the "main" property
+ * of the builder's package.json. See
+ * http://nodejs.org/api/modules.html#modules_folders_as_modules
+ *
+ * @module kss/builder/handlebars
+ */
+
+
+// We want to extend kss-node's Handlebars builder so we can add options that
+// are used in our templates.
+let KssBuilderBaseHandlebars;
+
+try {
+  // In order for a builder to be "kss clone"-able, it must use the
+  // require('kss/builder/path') syntax.
+  KssBuilderBaseHandlebars = require('kss/builder/base/handlebars');
+} catch (e) {
+  // The above require() line will always work.
+  //
+  // Unless you are one of the developers of kss-node and are using a git clone
+  // of kss-node where this code will not be inside a "node_modules/kss" folder
+  // which would allow node.js to find it with require('kss/anything'), forcing
+  // you to write a long-winded comment and catch the error and try again using
+  // a relative path.
+  KssBuilderBaseHandlebars = require('../base/handlebars');
+}
+
+/**
+ * A kss-node builder that takes input files and builds a style guide using
+ * Handlebars templates.
+ */
+class KssBuilderHandlebars extends KssBuilderBaseHandlebars {
+  /**
+   * Create a builder object.
+   */
+  constructor() {
+    // First call the constructor of KssBuilderBaseHandlebars.
+    super();
+
+    // Then tell kss which Yargs-like options this builder adds.
+    this.addOptionDefinitions({
+      title: {
+        group: 'Style guide:',
+        string: true,
+        multiple: false,
+        describe: 'Title of the style guide',
+        default: 'KSS Style Guide'
+      }
+    });
+  }
+
+  /**
+   * Allow the builder to preform pre-build tasks or modify the KssStyleGuide
+   * object.
+   *
+   * The method can be set by any KssBuilderBase sub-class to do any custom
+   * tasks after the KssStyleGuide object is created and before the HTML style
+   * guide is built.
+   *
+   * The builder could also take this opportunity to do tasks like special
+   * handling of "custom" properties or running Sass or Bower tasks.
+   *
+   * The parent class sets up access for this builder to an object containing
+   * the options of the requested build (as `this.options`), and the global
+   * Handlebars object (as `this.Handlebars`).
+   *
+   * @param {KssStyleGuide} styleGuide The KSS style guide in object format.
+   * @returns {Promise.<KssStyleGuide>} A `Promise` object resolving to a
+   *   `KssStyleGuide` object.
+   */
+  prepare(styleGuide) {
+    // First call the prepare() of the parent KssBuilderBaseHandlebars class.
+    // Since it returns a Promise, we do our prep work in a then().
+    return super.prepare(styleGuide).then(styleGuide => {
+      // Load this builder's extra Handlebars helpers.
+
+      // Allow a builder user to override the {{section [reference]}} helper
+      // with the --extend setting. Since a user's handlebars helpers are
+      // loaded first, we need to check if this helper already exists.
+      if (!this.Handlebars.helpers['section']) {
+        /**
+         * Returns a single section, found by its reference
+         * @param  {String} reference The reference to search for.
+         */
+        this.Handlebars.registerHelper('section', function(reference, options) {
+          let section = options.data.root.styleGuide.sections(reference);
+
+          return section.toJSON ? options.fn(section.toJSON()) : options.inverse('');
+        });
+      }
+
+      // Allow a builder user to override the {{eachSection [query]}} helper
+      // with the --extend setting.
+      if (!this.Handlebars.helpers['eachSection']) {
+        /**
+         * Loop over a section query. If a number is supplied, will convert into
+         * a query for all children and descendants of that reference.
+         * @param  {Mixed} query The section query
+         */
+        this.Handlebars.registerHelper('eachSection', function(query, options) {
+          let styleGuide = options.data.root.styleGuide;
+
+          if (!query.match(/\bx\b|\*/g)) {
+            query = query + '.*';
+          }
+          let sections = styleGuide.sections(query);
+          if (!sections.length) {
+            return options.inverse('');
+          }
+
+          let l = sections.length;
+          let buffer = '';
+          for (let i = 0; i < l; i += 1) {
+            buffer += options.fn(sections[i].toJSON());
+          }
+
+          return buffer;
+        });
+      }
+
+      return Promise.resolve(styleGuide);
+    });
+  }
+}
+
+module.exports = KssBuilderHandlebars;

doc/kss/templates/default/index.hbs

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>{{options.title}}</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">
+  {{{styles}}}
+</head>
+<body id="kss-node" {{#if template.isItem}}class="kss-fullscreen-mode"{{/if}}>
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">{{options.title}}</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>
+    {{#each menu}}
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-{{referenceURI}}.html">
+          <span class="kss-nav__ref">{{referenceNumber}}</span><span class="kss-nav__name">{{header}}</span>
+        </a>
+        {{#if isActive}}
+          {{#if children}}
+            <ul class="kss-nav__menu-child">
+            {{#each children}}
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-{{../referenceURI}}.html#kssref-{{referenceURI}}">
+                  <span class="kss-nav__ref {{#if isGrandChild}}kss-nav__ref-child{{/if}}">{{referenceNumber}}</span
+                  ><span class="kss-nav__name">{{header}}</span>
+                </a>
+              </li>
+            {{/each}}
+            </ul>
+          {{/if}}
+        {{/if}}
+      </li>
+    {{/each}}
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+{{#if template.isHomepage}}
+  {{#if homepage}}
+    <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
+      {{{homepage}}}
+    </div>
+  {{/if}}
+{{else}}
+
+  {{!
+    Display each section, in order.
+
+    The "root" element comes first in this loop, and can be detected using
+    the "#if @first" block as seen below.
+  }}
+  {{#each sections}}
+    <{{#if @first}}div{{else}}section{{/if}} id="kssref-{{referenceURI}}" class="kss-section kss-section--depth-{{depth}} {{#if @root.template.isItem}}is-fullscreen{{/if}}">
+
+      <div class="kss-style">
+        <h{{depth}} class="kss-title kss-title--level-{{depth}}">
+          <a class="kss-title__permalink" href="#kssref-{{referenceURI}}">
+            <span class="kss-title__ref">
+              {{referenceNumber}}
+              <span class="kss-title__permalink-hash">
+                {{#if @root.hasNumericReferences}}
+                  #permalink
+                {{else}}
+                  #{{reference}}
+                {{/if}}
+              </span>
+            </span>
+            {{header}}
+          </a>
+        </h{{depth}}>
+
+        {{#if description}}
+          <div class="kss-description">
+            {{{description}}}
+          </div>
+        {{/if}}
+
+        {{#if parameters}}
+          <div class="kss-parameters__title">Parameters:</div>
+          <ul class="kss-parameters">
+          {{#each parameters}}
+            <li class="kss-parameters__item">
+              <div class="kss-parameters__name"><code>{{name}}</code></div>
+              <div class="kss-parameters__description">
+                {{{description}}}
+                {{#if defaultValue}}
+                  <div class="kss-parameters__default-value">
+                    Defaults to: <code>{{defaultValue}}</code>
+                  </div>
+                {{/if}}
+              </div>
+            </li>
+          {{/each}}
+          </ul>
+        {{/if}}
+      </div>
+
+      {{#if example}}
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example{{#if modifiers}}s{{/if}}
+          </div>
+
+          {{#if modifiers}}
+            <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+          {{/if}}
+
+          <div class="kss-modifier__example">
+            {{{example}}}
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+          {{#each modifiers}}
+            <div class="kss-modifier__name kss-style">
+              {{name}}
+            </div>
+            <div class="kss-modifier__description kss-style">
+              {{{description}}}
+            </div>
+            <div class="kss-modifier__example">
+              {{{markup}}}
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+          {{/each}}
+        </div>
+
+        {{#if markup}}
+          <details class="kss-markup kss-style">
+            <summary>
+              {{#if markupFile }}
+                Markup: <code>{{ markupFile }}</code>
+              {{else}}
+                Markup
+              {{/if}}
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">{{markup}}</code></pre>
+          </details>
+        {{/if}}
+      {{/if}}
+
+      {{#if source.filename}}
+        <div class="kss-source kss-style">
+          Source: <code>{{source.filename}}</code>, line {{source.line}}
+        </div>
+      {{/if}}
+
+    </{{#if @first}}div{{else}}section{{/if}}>
+  {{/each}}
+{{/if}}
+</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>
+{{{scripts}}}
+
+{{! This will only be included in the demo page. }}
+{{#if options.demo}}
+  <footer class="kss-github">
+    <!-- https://github.com/blog/273-github-ribbons -->
+    <a href="https://github.com/kss-node/kss-node"><img src="kss-assets/github-fork--black.png" alt="Fork me on GitHub"></a>
+  </footer>
+{{/if}}
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/kss/templates/default/kss-assets/WARNING.txt

@@ -0,0 +1,2 @@
+WARNING: This folder is deleted and re-recreated each time the style guide is
+built. Do NOT put your own files in this folder.

doc/kss/templates/default/kss-assets/kss-fullscreen.js

@@ -0,0 +1,59 @@
+(function (window, document) {
+  'use strict';
+
+  // Set the configuration values on object creation.
+  // - idPrefix: The string that uniquely prefixes the ID of all elements that
+  //   can receive the fullscreen focus.
+  // - bodyClass: The class that is set on the body element when the fullscreen
+  //   mode is toggled on.
+  // - elementClass: the class that is set on the element that is receiving the
+  //   fullscreen focus.
+  var KssFullScreen = function (config) {
+    this.idPrefix = config.idPrefix || 'kss-fullscreen-';
+    this.bodyClass = config.bodyClass || 'kss-fullscreen-mode';
+    this.elementClass = config.elementClass || 'is-fullscreen';
+
+    this.init();
+  };
+
+  // Initialize the page to see if the fullscreen mode should be immediately
+  // turned on.
+  KssFullScreen.prototype.init = function () {
+    // Check the location hash to see if it matches the idPrefix.
+    if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) {
+      this.setFocus(window.location.hash.slice(1 + this.idPrefix.length));
+    }
+
+    var self = this;
+    // Initialize all fullscreen toggle buttons.
+    document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) {
+      // Get the section reference from the data attribute.
+      button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen);
+    });
+  };
+
+  // Activation function that takes the ID of the element that will receive
+  // fullscreen focus.
+  KssFullScreen.prototype.setFocus = function (id) {
+    var el;
+
+    // Find the element with the given ID and start fullscreen mode.
+    if (el = document.getElementById(id)) {
+      el.classList.toggle('is-fullscreen');
+      document.body.classList.toggle('kss-fullscreen-mode');
+
+      // When enabling the focus mode, change the location hash.
+      if (el.classList.contains('is-fullscreen')) {
+        window.location.hash = '#' + this.idPrefix + id;
+        // Don't follow the link location.
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  // Export to DOM global space.
+  window.KssFullScreen = KssFullScreen;
+
+})(window, document);

doc/kss/templates/default/kss-assets/kss-guides.js

@@ -0,0 +1,26 @@
+(function (window, document) {
+  'use strict';
+
+  var KssGuides = function (config) {
+    this.bodyClass = config.bodyClass || 'kss-guides-mode';
+
+    this.init();
+  };
+
+  KssGuides.prototype.init = function () {
+    var self = this;
+    // Initialize all guides toggle buttons.
+    document.querySelectorAll('a[data-kss-guides]').forEach(function (el) {
+      el.onclick = self.showGuides.bind(self);
+    });
+  };
+
+  // Toggle the guides mode.
+  KssGuides.prototype.showGuides = function () {
+    document.getElementsByTagName('body')[0].classList.toggle(this.bodyClass);
+  };
+
+  // Export to DOM global space.
+  window.KssGuides = KssGuides;
+
+})(window, document);

doc/kss/templates/default/kss-assets/kss-markup.js

@@ -0,0 +1,40 @@
+(function (window, document) {
+  'use strict';
+
+  var KssMarkup = function (config) {
+    this.bodyClass = config.bodyClass || 'kss-markup-mode';
+    this.detailsClass = config.detailsClass || 'kss-markup';
+
+    this.init();
+  };
+
+  KssMarkup.prototype.init = function () {
+    var self = this;
+    // Initialize all markup toggle buttons.
+    document.querySelectorAll('a[data-kss-markup]').forEach(function (el) {
+      el.onclick = self.showGuides.bind(self);
+    });
+  };
+
+  // Activation function that takes the ID of the element that will receive
+  // fullscreen focus.
+  KssMarkup.prototype.showGuides = function () {
+    var body = document.getElementsByTagName('body')[0],
+      enabled = body.classList.contains(this.bodyClass);
+
+    document.querySelectorAll('.' + this.detailsClass).forEach(function (el) {
+      if (enabled) {
+        el.removeAttribute('open');
+      } else {
+        el.setAttribute('open', '');
+      }
+    });
+
+    // Toggle the markup mode.
+    body.classList.toggle(this.bodyClass);
+  };
+
+  // Export to DOM global space.
+  window.KssMarkup = KssMarkup;
+
+})(window, document);

doc/kss/templates/default/kss-assets/kss.css

@@ -0,0 +1,597 @@
+.kss-style {
+  color: #444;
+  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px; }
+  .kss-style a {
+    color: #0645ad;
+    text-decoration: none;
+    transition-property: color;
+    transition-duration: 0.5s; }
+    .kss-style a:visited {
+      color: #0645ad; }
+    .kss-style a:hover, .kss-style a:focus {
+      color: #2272f7; }
+    .kss-style a:active {
+      color: #faa700; }
+    .kss-style a:hover, .kss-style a:active {
+      outline: 0; }
+  .kss-style p {
+    margin: 12px 0 24px 0; }
+  .kss-style h1, .kss-style h2, .kss-style h3, .kss-style h4, .kss-style h5, .kss-style h6 {
+    margin: 24px 0 0 0;
+    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+    color: #111;
+    line-height: 1.15em; }
+  .kss-style h4, .kss-style h5, .kss-style h6 {
+    font-weight: bold; }
+  .kss-style h1 {
+    font-size: 40px; }
+  .kss-style h2 {
+    font-size: 36px; }
+  .kss-style h3 {
+    font-size: 34px; }
+  .kss-style h4 {
+    font-size: 32px; }
+  .kss-style h5 {
+    font-size: 30px; }
+  .kss-style h6 {
+    font-size: 28px; }
+  .kss-style blockquote {
+    color: #666;
+    margin: 0;
+    padding-left: 24px;
+    border-left: 0.5em #d9d9d9 solid; }
+  .kss-style hr {
+    display: block;
+    height: 2px;
+    border: 0;
+    border-top: 1px solid #dddddd;
+    border-bottom: 1px solid #e6e6e6;
+    margin: 24px 0;
+    padding: 0; }
+  .kss-style pre, .kss-style code, .kss-style kbd, .kss-style samp {
+    font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace;
+    color: #2b2b2b;
+    font-size: 1em; }
+  .kss-style pre {
+    white-space: pre;
+    overflow: scroll; }
+  .kss-style ins {
+    color: #111;
+    background: #ff9;
+    text-decoration: none; }
+  .kss-style mark {
+    color: #111;
+    background: #ff0;
+    font-weight: bold; }
+  .kss-style sub, .kss-style sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline; }
+  .kss-style sup {
+    top: -0.5em; }
+  .kss-style sub {
+    bottom: -0.25em; }
+  .kss-style ul, .kss-style ol {
+    margin: 24px 0;
+    padding: 0 0 0 24px; }
+  .kss-style li p:last-child {
+    margin: 0; }
+  .kss-style dd {
+    margin: 0 0 0 24px; }
+  .kss-style img {
+    max-width: 100%;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+    vertical-align: middle; }
+  .kss-style table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+  .kss-style td {
+    vertical-align: top; }
+  @media print {
+    .kss-style a, .kss-style a:visited {
+      text-decoration: underline; }
+    .kss-style hr {
+      height: 1px;
+      border: 0;
+      border-bottom: 1px solid black; }
+    .kss-style a[href]:after {
+      content: " (" attr(href) ")"; }
+    .kss-style a[href^="javascript:"]:after, .kss-style a[href^="#"]:after {
+      content: ""; }
+    .kss-style abbr[title]:after {
+      content: " (" attr(title) ")"; }
+    .kss-style pre, .kss-style blockquote {
+      border: 1px solid #999;
+      padding-right: 1em;
+      page-break-inside: avoid; }
+    .kss-style tr, .kss-style img {
+      page-break-inside: avoid; }
+    .kss-style img {
+      max-width: 100% !important; }
+    .kss-style p, .kss-style h2, .kss-style h3 {
+      orphans: 3;
+      widows: 3; }
+    .kss-style h2, .kss-style h3 {
+      page-break-after: avoid; } }
+
+#kss-node {
+  margin: 0;
+  padding: 20px;
+  background: #fff; }
+  #kss-node.kss-fullscreen-mode .kss-sidebar,
+  #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen),
+  #kss-node.kss-fullscreen-mode .kss-github {
+    display: none; }
+  @media screen and (min-width: 769px) {
+    #kss-node {
+      padding: 0; }
+      #kss-node .kss-main,
+      #kss-node .kss-sidebar {
+        float: left;
+        margin-right: -100%;
+        box-sizing: border-box; } }
+  #kss-node .kss-main {
+    width: 100%;
+    margin: 0 auto; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-main {
+        width: 80%;
+        margin-left: 20%;
+        padding: 0 20px 0 30px; } }
+  #kss-node .kss-sidebar {
+    border-bottom: 1px solid #ddd; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-sidebar {
+        position: fixed;
+        width: 20%;
+        height: 100%;
+        overflow: auto;
+        padding: 0 10px 0 20px;
+        border-bottom: 0;
+        background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee);
+        background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee);
+        background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee);
+        background-image: url(noise-low.png), radial-gradient(#fff, #eee);
+        box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.7); } }
+
+#kss-node .kss-doc-title {
+  margin: 0; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-doc-title {
+      font-size: 1.5em; } }
+
+#kss-node .kss-header,
+#kss-node .kss-nav {
+  position: relative; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-header,
+    #kss-node .kss-nav {
+      margin-top: 2em; } }
+  #kss-node .kss-header ul, #kss-node .kss-header ol, #kss-node .kss-header li,
+  #kss-node .kss-nav ul,
+  #kss-node .kss-nav ol,
+  #kss-node .kss-nav li {
+    display: block;
+    float: none; }
+  #kss-node .kss-header li,
+  #kss-node .kss-nav li {
+    margin-left: 3.2rem; }
+
+#kss-node .kss-nav__menu {
+  margin-top: 12px;
+  margin-bottom: 12px;
+  padding: 0;
+  list-style-type: none; }
+
+#kss-node .kss-nav__menu-item {
+  display: inline-block;
+  padding-right: 24px; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-nav__menu-item {
+      display: list-item;
+      padding-right: 0; } }
+
+#kss-node .kss-nav__menu-link {
+  position: relative;
+  display: inline-block; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-nav__menu-link:before {
+      content: ' ';
+      position: absolute;
+      left: -20px;
+      width: 0;
+      height: 100%;
+      background-color: transparent; } }
+  #kss-node .kss-nav__menu-link.is-in-viewport:before {
+    background-color: #000;
+    width: 5px;
+    transition: background-color .4s, width .6s; }
+
+#kss-node .kss-nav__menu-child {
+  display: none; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-nav__menu-child {
+      display: block;
+      list-style-type: none;
+      margin: 0;
+      padding: 0; }
+      #kss-node .kss-nav__menu-child li:first-child {
+        margin-top: 10px;
+        border-top: 1px solid #ccc;
+        padding: 10px 0 0; }
+      #kss-node .kss-nav__menu-child li:last-child {
+        margin-bottom: 10px;
+        border-bottom: 1px solid #ccc;
+        padding: 0 0 10px; } }
+
+#kss-node .kss-nav__ref {
+  color: #333;
+  font-weight: bold; }
+  #kss-node .kss-nav__ref:after {
+    content: ' '; }
+
+#kss-node .kss-nav__ref-child {
+  font-weight: normal; }
+
+#kss-node {
+  /* SPAN elements with the classes below are added by prettyprint. */
+  /* plain text */
+  /* string content */
+  /* a keyword */
+  /* a comment */
+  /* a type name */
+  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  /* a markup tag name */
+  /* a markup attribute name */
+  /* a markup attribute value */
+  /* a declaration; a variable name */
+  /* a function name */
+  /* Use higher contrast and text-weight for printable form. */
+  /* Specify class=linenums on a pre to get line numbering */ }
+  #kss-node .kss-section {
+    padding-top: 2.4rem;
+    padding-bottom: 2.4rem; }
+    #kss-node .kss-section.is-fullscreen {
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      margin: 0 !important;
+      min-width: 0 !important;
+      max-width: none !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      box-sizing: border-box !important;
+      object-fit: contain !important;
+      transform: none !important;
+      overflow: auto !important;
+      padding: 20px; }
+  #kss-node .kss-title {
+    margin-bottom: 0; }
+  #kss-node .is-fullscreen .kss-title {
+    margin-top: 0; }
+  #kss-node .kss-title__ref {
+    display: block;
+    font-size: 16px;
+    line-height: 16px;
+    color: #666; }
+    #kss-node .kss-title__ref:before {
+      content: 'Section '; }
+  #kss-node .kss-title__permalink {
+    display: block;
+    color: #000;
+    text-decoration: none; }
+    #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {
+      color: #0645ad; }
+      @media screen and (min-width: 607px) {
+        #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash {
+          display: inline; } }
+  #kss-node .kss-title__permalink-hash {
+    display: none;
+    color: #ccc; }
+  #kss-node .kss-toolbar {
+    margin: 6px 0 24px;
+    display: inline-block;
+    border: 1px solid #eee;
+    background-color: #f9f9f9;
+    border-right-color: #e0e0e0;
+    border-bottom-color: #e0e0e0;
+    line-height: 1;
+    padding: 3px; }
+    #kss-node .kss-toolbar a {
+      box-sizing: content-box;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      padding: 3px;
+      vertical-align: top;
+      position: relative;
+      overflow: visible; }
+      #kss-node .kss-toolbar a + a {
+        margin-left: 6px; }
+      #kss-node .kss-toolbar a .kss-toolbar__icon-fill {
+        fill: #ccc; }
+      #kss-node .kss-toolbar a svg.on {
+        display: none; }
+      #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {
+        border-color: #000; }
+        #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {
+          fill: #000; }
+  #kss-node .kss-toolbar__tooltip {
+    position: absolute;
+    z-index: 1;
+    display: inline-block;
+    bottom: 100%;
+    left: -10px;
+    margin-bottom: 5px;
+    border: solid 1px #666;
+    padding: 8px 10px 6px;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+    white-space: nowrap;
+    color: #000;
+    background: #fff;
+    cursor: help;
+    opacity: 0;
+    transition: opacity 0.25s;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    word-wrap: normal; }
+    #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 15px;
+      width: 0;
+      height: 0;
+      border-width: 7px 5px 0;
+      border-color: #666 transparent;
+      border-style: solid; }
+    #kss-node .kss-toolbar__tooltip:after {
+      bottom: -6px;
+      border-top-color: #fff; }
+  #kss-node a:focus > .kss-toolbar__tooltip,
+  #kss-node a:hover > .kss-toolbar__tooltip {
+    opacity: 1;
+    clip: auto;
+    height: auto;
+    width: auto;
+    overflow: visible; }
+  #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
+  #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],
+  #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {
+    border-color: #666;
+    background-color: #666; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {
+      fill: #fff; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {
+      display: block; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {
+      display: none; }
+  #kss-node .kss-parameters {
+    display: table;
+    list-style-type: none;
+    margin-top: 0;
+    margin-left: 0;
+    padding-left: 0; }
+  #kss-node .kss-parameters__title {
+    font-weight: bold; }
+  #kss-node .kss-parameters__item {
+    display: table-row; }
+  #kss-node .kss-parameters__name {
+    display: table-cell;
+    padding-right: 20px;
+    white-space: nowrap; }
+  #kss-node .kss-parameters__description {
+    display: table-cell; }
+  #kss-node .kss-parameters__default-value code {
+    white-space: nowrap; }
+  #kss-node .kss-modifier__wrapper {
+    border: 1px solid #ccc;
+    padding: 0 10px 10px; }
+  #kss-node .is-fullscreen .kss-modifier__wrapper {
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 0;
+    padding-right: 0;
+    border: none; }
+  #kss-node .kss-modifier__heading {
+    margin: 0 -10px 10px -10px;
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    background-color: #eee;
+    font-weight: bold; }
+  #kss-node .is-fullscreen .kss-modifier__heading {
+    margin: 0 20px 10px;
+    border: 1px solid #ccc; }
+  #kss-node .kss-modifier__default-name {
+    font-weight: bold;
+    margin-bottom: 12px; }
+  #kss-node .is-fullscreen .kss-modifier__default-name {
+    margin-left: 20px;
+    margin-right: 20px; }
+  #kss-node .kss-modifier__name {
+    float: left;
+    padding-right: 10px;
+    font-weight: bold; }
+  #kss-node .is-fullscreen .kss-modifier__name {
+    margin-left: 20px; }
+  #kss-node .kss-modifier__description {
+    margin-bottom: 12px; }
+  #kss-node .is-fullscreen .kss-modifier__description {
+    margin-right: 20px; }
+  #kss-node .kss-modifier__example {
+    clear: left;
+    border: 2px dashed transparent;
+    position: relative;
+    z-index: 0;
+    margin: -2px -2px 22px; }
+    #kss-node .kss-modifier__example:last-child {
+      margin-bottom: 0; }
+  #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:before,
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:after {
+    z-index: -1;
+    box-sizing: border-box;
+    content: '';
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    border: 2px solid #000; }
+  #kss-node.kss-guides-mode .kss-modifier__example {
+    border-color: #000; }
+    #kss-node.kss-guides-mode .kss-modifier__example:before {
+      top: -5px;
+      left: -5px;
+      border-top: 0;
+      border-left: 0; }
+    #kss-node.kss-guides-mode .kss-modifier__example:after {
+      top: -5px;
+      right: -5px;
+      border-top: 0;
+      border-right: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {
+    left: auto;
+    right: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after {
+    right: auto;
+    left: 0; }
+  #kss-node .kss-modifier__example-footer {
+    clear: both; }
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:before {
+    bottom: -5px;
+    left: -5px;
+    border-bottom: 0;
+    border-left: 0; }
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:after {
+    bottom: -5px;
+    right: -5px;
+    border-right: 0;
+    border-bottom: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before {
+    left: auto;
+    right: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after {
+    right: auto;
+    left: 0; }
+  #kss-node .kss-markup {
+    margin: 24px 0;
+    border: 1px solid #ccc; }
+    #kss-node .kss-markup[open] summary {
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 3px; }
+    #kss-node .kss-markup summary {
+      padding-left: 10px; }
+    #kss-node .kss-markup pre {
+      margin: 0; }
+  #kss-node .kss-source {
+    font-size: 80%; }
+  #kss-node .kss-github {
+    display: none; }
+    @media screen and (min-width: 501px) {
+      #kss-node .kss-github {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0; } }
+    #kss-node .kss-github img {
+      border: 0; }
+  #kss-node .pln {
+    color: #000; }
+  #kss-node .str {
+    color: #080; }
+  #kss-node .kwd {
+    color: #008; }
+  #kss-node .com {
+    color: #800; }
+  #kss-node .typ {
+    color: #606; }
+  #kss-node .lit {
+    color: #066; }
+  #kss-node .pun, #kss-node .opn, #kss-node .clo {
+    color: #660; }
+  #kss-node .tag {
+    color: #008; }
+  #kss-node .atn {
+    color: #606; }
+  #kss-node .atv {
+    color: #080; }
+  #kss-node .dec, #kss-node .var {
+    color: #606; }
+  #kss-node .fun {
+    color: red; }
+  @media print, projection {
+    #kss-node .str {
+      color: #060; }
+    #kss-node .kwd {
+      color: #006;
+      font-weight: bold; }
+    #kss-node .com {
+      color: #600;
+      font-style: italic; }
+    #kss-node .typ {
+      color: #404;
+      font-weight: bold; }
+    #kss-node .lit {
+      color: #044; }
+    #kss-node .pun, #kss-node .opn, #kss-node .clo {
+      color: #440; }
+    #kss-node .tag {
+      color: #006;
+      font-weight: bold; }
+    #kss-node .atn {
+      color: #404; }
+    #kss-node .atv {
+      color: #060; } }
+  #kss-node ol.linenums {
+    margin: 0;
+    padding: 0 0 3px 0;
+    list-style-type: none;
+    /* Alternate shading for lines */ }
+    #kss-node ol.linenums li {
+      min-height: 24px;
+      border-bottom: 1px solid #eee;
+      padding: 0 10px;
+      background: #fff; }
+      #kss-node ol.linenums li:first-child {
+        padding-top: 3px; }
+    #kss-node ol.linenums li.L0,
+    #kss-node ol.linenums li.L2,
+    #kss-node ol.linenums li.L4,
+    #kss-node ol.linenums li.L6,
+    #kss-node ol.linenums li.L8 {
+      background: #fcfcfc; }
+
+#kssref-layout-radius .radius {
+  padding: 2.4rem; }
+
+#kssref-base-backgrounds span[class*=bg] {
+  display: inline-block;
+  padding: 1.2rem;
+  margin-left: -4px; }
+
+#kssref-base-backgrounds-transparent div[class*=bg] {
+  padding: 2rem;
+  margin: 0; }
+  #kssref-base-backgrounds-transparent div[class*=bg] > div[class*=bg] {
+    padding: 6rem;
+    margin: 3rem; }
+
+#kssref-base-backgrounds-gradient div[class*=bg] {
+  padding: 4rem;
+  margin: 3rem; }

doc/kss/templates/default/kss-assets/kss.js

@@ -0,0 +1,53 @@
+(function() {
+  var KssStateGenerator;
+
+  KssStateGenerator = (function() {
+    var pseudo_selectors;
+
+    pseudo_selectors = ['hover', 'enabled', 'disabled', 'active', 'visited', 'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type', 'first-child', 'last-child'];
+
+    function KssStateGenerator() {
+      var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2;
+      pseudos = new RegExp("(\\:" + (pseudo_selectors.join('|\\:')) + ")", "g");
+      try {
+        _ref = document.styleSheets;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          stylesheet = _ref[_i];
+          if (stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0) {
+            idxs = [];
+            _ref2 = stylesheet.cssRules;
+            for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) {
+              rule = _ref2[idx];
+              if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) {
+                replaceRule = function(matched, stuff) {
+                  return matched.replace(/\:/g, '.pseudo-class-');
+                };
+                this.insertRule(rule.cssText.replace(pseudos, replaceRule));
+              }
+              pseudos.lastIndex = 0;
+            }
+          }
+        }
+      } catch (_error) {}
+    }
+
+    KssStateGenerator.prototype.insertRule = function(rule) {
+      var headEl, styleEl;
+      headEl = document.getElementsByTagName('head')[0];
+      styleEl = document.createElement('style');
+      styleEl.type = 'text/css';
+      if (styleEl.styleSheet) {
+        styleEl.styleSheet.cssText = rule;
+      } else {
+        styleEl.appendChild(document.createTextNode(rule));
+      }
+      return headEl.appendChild(styleEl);
+    };
+
+    return KssStateGenerator;
+
+  })();
+
+  new KssStateGenerator;
+
+}).call(this);

doc/kss/templates/default/kss-assets/kss.scss

@@ -0,0 +1,792 @@
+// ------------------------------------------------------------------------------
+//   Variables - Colors, Fonts, etc.
+// ------------------------------------------------------------------------------
+$kss-colors-background    : #fff;
+
+$kss-colors-foreground    : #444;
+$kss-colors-heading       : #111;
+$kss-colors-quotes        : #666;
+
+$kss-colors-link          : #0645ad;
+$kss-colors-link-visited  : #0645ad;
+$kss-colors-link-hover    : lighten($kss-colors-link, 20%);
+$kss-colors-link-active   : #faa700;
+
+$kss-font-body            : Helvetica, 'Helvetica Neue', Arial, sans-serif;
+$kss-font-code            : Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
+
+$kss-font-size            : 16px;
+$kss-vertical-rhythm      : $kss-font-size * 1.5;
+
+// ------------------------------------------------------------------------------
+// Wrap all of this builder's base HTML styling inside a .kss-style selector.
+// ------------------------------------------------------------------------------
+
+.kss-style {
+  color: $kss-colors-foreground;
+  font-family: $kss-font-body;
+  font-size: $kss-font-size;
+  line-height: $kss-vertical-rhythm;
+
+  a {
+    color: $kss-colors-link;
+    text-decoration: none;
+    transition-property: color;
+    transition-duration: 0.5s;
+
+    &:visited { color: $kss-colors-link-visited; }
+    &:hover,
+    &:focus   { color: $kss-colors-link-hover;   }
+    &:active  { color: $kss-colors-link-active;  }
+
+    &:hover,
+    &:active {
+      outline: 0;
+    }
+  }
+
+  p {
+    margin: ($kss-vertical-rhythm/2) 0 $kss-vertical-rhythm 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: $kss-vertical-rhythm 0 0 0;
+    font-family: $kss-font-body;
+    color: $kss-colors-heading;
+    line-height: 1.15em;
+  }
+
+  h4, h5, h6 {
+    font-weight: bold;
+  }
+
+  h1 { font-size: $kss-font-size * 2.5;   }
+  h2 { font-size: $kss-font-size * 2.25;  }
+  h3 { font-size: $kss-font-size * 2.125; }
+  h4 { font-size: $kss-font-size * 2;     }
+  h5 { font-size: $kss-font-size * 1.875; }
+  h6 { font-size: $kss-font-size * 1.75;  }
+
+  blockquote {
+    color: $kss-colors-quotes;
+    margin: 0;
+    padding-left: $kss-vertical-rhythm;
+    border-left: 0.5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid;
+  }
+
+  hr {
+    display: block;
+    height: 2px;
+    border: 0;
+    border-top: 1px solid lighten($kss-colors-foreground, 60%);
+    border-bottom: 1px solid darken($kss-colors-background, 10%);
+    margin: $kss-vertical-rhythm 0;
+    padding: 0;
+  }
+
+  pre, code, kbd, samp {
+    font-family: $kss-font-code;
+    color: mix($kss-colors-foreground, $kss-colors-heading, 50%);
+    font-size: 1em;
+  }
+
+  pre {
+    white-space: pre;
+    overflow: scroll;
+  }
+
+  ins {
+    color: $kss-colors-heading;
+    background: #ff9;
+    text-decoration: none;
+  }
+
+  mark {
+    color: $kss-colors-heading;
+    background: #ff0;
+    font-weight: bold;
+  }
+
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sup { top: -0.5em;     }
+  sub { bottom: -0.25em; }
+
+  ul, ol {
+    margin: $kss-vertical-rhythm 0;
+    padding: 0 0 0 $kss-vertical-rhythm;
+  }
+  li p:last-child {
+    margin: 0;
+  }
+  dd {
+    margin: 0 0 0 $kss-vertical-rhythm;
+  }
+
+  img {
+    max-width:100%;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+    vertical-align: middle;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  td {
+    vertical-align: top;
+  }
+
+  @media print {
+    a, a:visited { text-decoration: underline; }
+    hr { height: 1px; border:0; border-bottom:1px solid black; }
+    a[href]:after { content: " (" attr(href) ")"; }
+    a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
+    abbr[title]:after { content: " (" attr(title) ")"; }
+    pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
+    tr, img { page-break-inside: avoid; }
+    img { max-width: 100% !important; }
+    p, h2, h3 { orphans: 3; widows: 3; }
+    h2, h3 { page-break-after: avoid; }
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Layout and page background
+// ------------------------------------------------------------------------------
+
+#kss-node {
+  margin: 0;
+  padding: 20px;
+  background: #fff;
+
+  &.kss-fullscreen-mode {
+    .kss-sidebar,
+    .kss-section:not(.is-fullscreen),
+    .kss-github {
+      display: none;
+    }
+  }
+
+  @media screen and (min-width: 769px) {
+    padding: 0;
+
+    .kss-main,
+    .kss-sidebar {
+      float: left;
+      margin-right: -100%;
+      box-sizing: border-box;
+    }
+  }
+
+  .kss-main {
+    width: 100%;
+    margin: 0 auto;
+
+    @media screen and (min-width: 769px) {
+      width: 80%;
+      margin-left: 20%;
+      padding: 0 20px 0 30px;
+    }
+  }
+
+  .kss-sidebar {
+    border-bottom:1px solid #ddd;
+
+    @media screen and (min-width: 769px) {
+      position: fixed;
+      width: 20%;
+      height: 100%;
+      overflow: auto;
+      padding: 0 10px 0 20px;
+      border-bottom: 0;
+      background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee);
+      background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee);
+      background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee);
+      background-image: url(noise-low.png), radial-gradient(#fff, #eee);
+      box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7);
+    }
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Sidebar-area components
+// ------------------------------------------------------------------------------
+
+#kss-node {
+
+  .kss-doc-title {
+    margin: 0;
+
+    @media screen and (min-width: 769px) {
+      font-size: 1.5em;
+    }
+  }
+
+  .kss-header,
+  .kss-nav {
+    position: relative;
+
+    @media screen and (min-width: 769px) {
+      margin-top: 2em;
+    }
+
+    & ul, & ol, & li {
+      display: block;
+      float: none;
+    }
+
+    & li {
+      margin-left: 3.2rem;
+    }
+  }
+
+  .kss-nav__menu {
+    margin-top: ($kss-vertical-rhythm/2);
+    margin-bottom: ($kss-vertical-rhythm/2);
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .kss-nav__menu-item {
+    display: inline-block;
+    padding-right: $kss-vertical-rhythm;
+
+    @media screen and (min-width: 769px) {
+      display: list-item;
+      padding-right: 0;
+    }
+  }
+
+  .kss-nav__menu-link {
+    position: relative;
+    display: inline-block;
+
+    &:before {
+      @media screen and (min-width: 769px) {
+        content: ' ';
+        position: absolute;
+        left: -20px;
+        width: 0;
+        height: 100%;
+        background-color: rgba(#000, 0);
+      }
+    }
+
+    &.is-in-viewport:before {
+      background-color: #000;
+      width: 5px;
+      transition: background-color .4s, width .6s;
+    }
+  }
+
+  .kss-nav__menu-child {
+    display: none;
+
+    @media screen and (min-width: 769px) {
+      display: block;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+
+      // @TODO: The ul is output even when there are no children. Fix this, so
+      // we can put these :first-child and :last child styles back on the ul.
+      li:first-child {
+        margin-top: 10px;
+        border-top: 1px solid #ccc;
+        padding: 10px 0 0;
+      }
+
+      li:last-child {
+        margin-bottom: 10px;
+        border-bottom: 1px solid #ccc;
+        padding: 0 0 10px;
+      }
+    }
+  }
+
+  .kss-nav__ref {
+    color: #333;
+    font-weight: bold;
+
+    &:after {
+      content: ' ';
+    }
+  }
+  .kss-nav__ref-child {
+    font-weight: normal;
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Content-area components
+// ------------------------------------------------------------------------------
+
+#kss-node {
+
+  .kss-section {
+    padding-top: 2.4rem;
+    padding-bottom: 2.4rem;
+
+    // "fullscreen" styles copied from Mozilla's default stylesheet.
+    &.is-fullscreen {
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      margin: 0 !important;
+      min-width: 0 !important;
+      max-width: none !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      box-sizing: border-box !important;
+      object-fit: contain !important;
+      transform: none !important;
+      // Turn on scrolling if needed.
+      overflow: auto !important;
+      padding: 20px;
+    }
+  }
+
+  .kss-title {
+    margin-bottom: 0;
+  }
+  .is-fullscreen .kss-title {
+    margin-top: 0;
+  }
+  .kss-title__ref {
+    display: block;
+    font-size: $kss-font-size;
+    line-height: $kss-font-size;
+    color: #666;
+
+    &:before {
+      content: 'Section ';
+    }
+  }
+  .kss-title__permalink {
+    display: block;
+    color: #000;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: $kss-colors-link;
+
+      @media screen and (min-width: 607px) {
+        .kss-title__permalink-hash {
+          display: inline;
+        }
+      }
+    }
+  }
+  .kss-title__permalink-hash {
+    display: none;
+    color: #ccc;
+  }
+
+  .kss-toolbar {
+    margin: 6px 0 24px;
+    display: inline-block;
+    border: 1px solid #eee;
+    background-color: #f9f9f9;
+    border-right-color: #e0e0e0;
+    border-bottom-color: #e0e0e0;
+    line-height: 1;
+    padding: 3px;
+
+    a {
+      box-sizing: content-box;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      padding: 3px;
+      vertical-align: top;
+      // Tooltip wrapper styles:
+      position: relative;
+      overflow: visible;
+
+      + a {
+        margin-left: 6px;
+      }
+
+      .kss-toolbar__icon-fill {
+        fill: #ccc;
+      }
+
+      svg.on {
+        display: none;
+      }
+
+      &:focus,
+      &:hover {
+        border-color: #000;
+
+        .kss-toolbar__icon-fill {
+          fill: #000;
+        }
+      }
+    }
+  }
+  .kss-toolbar__tooltip {
+    position: absolute;
+    z-index: 1;
+    display: inline-block;
+    bottom: 100%;
+    left: -10px;
+    margin-bottom: 5px;
+    border: solid 1px #666;
+    padding: 8px 10px 6px;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
+    white-space: nowrap;
+    color: #000;
+    background: #fff;
+    cursor: help;
+    opacity: 0;
+    transition: opacity 0.25s;
+    // Visually hidden
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    word-wrap: normal;
+
+    // Solid grey triangle.
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 15px;
+      width: 0;
+      height: 0;
+      border-width: 7px 5px 0;
+      border-color: #666 transparent;
+      border-style: solid;
+    }
+
+    // White triangle knock-out.
+    &:after {
+      bottom: -6px;
+      border-top-color: #fff;
+    }
+  }
+  a:focus,
+  a:hover {
+    > .kss-toolbar__tooltip {
+      opacity: 1;
+      // Visually hidden off
+      clip: auto;
+      height: auto;
+      width: auto;
+      overflow: visible;
+    }
+  }
+  .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
+  &.kss-guides-mode .kss-toolbar a[data-kss-guides],
+  &.kss-markup-mode .kss-toolbar a[data-kss-markup] {
+    border-color: #666;
+    background-color: #666;
+
+    .kss-toolbar__icon-fill {
+      fill: #fff;
+    }
+
+    svg.on {
+      display: block;
+    }
+
+    svg.off {
+      display: none;
+    }
+  }
+
+  .kss-parameters {
+    display: table;
+    list-style-type: none;
+    margin-top: 0;
+    margin-left: 0;
+    padding-left: 0;
+  }
+  .kss-parameters__title {
+    font-weight: bold;
+  }
+  .kss-parameters__item {
+    display: table-row;
+  }
+  .kss-parameters__name {
+    display: table-cell;
+    padding-right: 20px;
+    white-space: nowrap;
+  }
+  .kss-parameters__description {
+    display: table-cell;
+  }
+  .kss-parameters__default-value code {
+    white-space: nowrap;
+  }
+
+  .kss-modifier__wrapper {
+    border: 1px solid #ccc;
+    padding: 0 10px 10px;
+  }
+  .is-fullscreen .kss-modifier__wrapper {
+    // Un-do padding on .kss-section.
+    margin-left: -20px;
+    margin-right: -20px;
+    // Remove all padding on the wrapper
+    padding-left: 0;
+    padding-right: 0;
+    border: none;
+  }
+  .kss-modifier__heading {
+    margin: 0 -10px 10px -10px;
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    background-color: #eee;
+    font-weight: bold;
+  }
+  .is-fullscreen .kss-modifier__heading {
+    margin: 0 20px 10px;
+    border: 1px solid #ccc;
+  }
+  .kss-modifier__default-name {
+    font-weight: bold;
+    margin-bottom: ($kss-vertical-rhythm / 2);
+  }
+  .is-fullscreen .kss-modifier__default-name {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .kss-modifier__name {
+    float: left;
+    padding-right: 10px;
+    font-weight: bold;
+  }
+  .is-fullscreen .kss-modifier__name {
+    margin-left: 20px;
+  }
+  .kss-modifier__description {
+    margin-bottom: ($kss-vertical-rhythm / 2);
+  }
+  .is-fullscreen .kss-modifier__description {
+    margin-right: 20px;
+  }
+  .kss-modifier__example {
+    clear: left;
+    border: 2px dashed transparent;
+    position: relative; // Contain the example's absolute positioning.
+    z-index: 0; // Establishes a local stacking context.
+    margin: -2px -2px ($kss-vertical-rhythm - 2px);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  &.kss-guides-mode .kss-modifier__example,
+  &.kss-guides-mode .kss-modifier__example-footer {
+    &:before,
+    &:after {
+      z-index: -1;
+      box-sizing: border-box;
+      content: '';
+      position: absolute;
+      width: 5px;
+      height: 5px;
+      border: 2px solid #000;
+    }
+  }
+  &.kss-guides-mode .kss-modifier__example {
+    border-color: #000;
+
+    &:before {
+      top: -5px;
+      left: -5px;
+      border-top: 0;
+      border-left: 0;
+    }
+    &:after {
+      top: -5px;
+      right: -5px;
+      border-top: 0;
+      border-right: 0;
+    }
+  }
+  &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example {
+    &:before {
+      left: auto;
+      right: 0;
+    }
+    &:after {
+      right: auto;
+      left: 0;
+    }
+  }
+  .kss-modifier__example-footer {
+    clear: both;
+  }
+  &.kss-guides-mode .kss-modifier__example-footer {
+    &:before {
+      bottom: -5px;
+      left: -5px;
+      border-bottom: 0;
+      border-left: 0;
+    }
+    &:after {
+      bottom: -5px;
+      right: -5px;
+      border-right: 0;
+      border-bottom: 0;
+    }
+  }
+  &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer {
+    &:before {
+      left: auto;
+      right: 0;
+    }
+    &:after {
+      right: auto;
+      left: 0;
+    }
+  }
+
+  .kss-markup {
+    margin: $kss-vertical-rhythm 0;
+    border: 1px solid #ccc;
+
+    &[open] summary {
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 3px;
+    }
+
+    summary {
+      padding-left: 10px;
+    }
+
+    pre {
+      margin: 0;
+    }
+  }
+
+  .kss-source {
+    font-size: 80%;
+  }
+
+  .kss-github {
+    display:none;
+
+    @media screen and (min-width: 501px) {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    img {
+      border: 0;
+    }
+  }
+
+  // ------------------------------------------------------------------------------
+  // prettify.js styles
+  // ------------------------------------------------------------------------------
+
+  /* SPAN elements with the classes below are added by prettyprint. */
+  .pln { color: #000 }  /* plain text */
+
+  .str { color: #080 }  /* string content */
+  .kwd { color: #008 }  /* a keyword */
+  .com { color: #800 }  /* a comment */
+  .typ { color: #606 }  /* a type name */
+  .lit { color: #066 }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+
+  /* Use higher contrast and text-weight for printable form. */
+  @media print, projection {
+    .str { color: #060 }
+    .kwd { color: #006; font-weight: bold }
+    .com { color: #600; font-style: italic }
+    .typ { color: #404; font-weight: bold }
+    .lit { color: #044 }
+    .pun, .opn, .clo { color: #440 }
+    .tag { color: #006; font-weight: bold }
+    .atn { color: #404 }
+    .atv { color: #060 }
+  }
+
+  /* Specify class=linenums on a pre to get line numbering */
+  ol.linenums {
+    margin: 0;
+    padding: 0 0 3px 0;
+    list-style-type: none;
+
+    li {
+      min-height: $kss-vertical-rhythm;
+      border-bottom: 1px solid #eee;
+      padding: 0 10px;
+      background: #fff;
+
+      &:first-child {
+        padding-top: 3px;
+      }
+    }
+    /* Alternate shading for lines */
+    li.L0,
+    li.L2,
+    li.L4,
+    li.L6,
+    li.L8 {
+      background: #fcfcfc;
+    }
+  }
+}
+
+// WebSlides
+
+#kssref-layout-radius {
+  & .radius {
+    padding: 2.4rem;
+  }
+}
+
+#kssref-base-backgrounds {
+  & span[class*=bg] {
+    display: inline-block;
+    padding: 1.2rem;
+    margin-left: -4px;
+  }
+}
+
+#kssref-base-backgrounds-transparent {
+  & div[class*=bg] {
+    padding: 2rem;
+    margin: 0;
+
+    & > div[class*=bg] {
+      padding: 6rem;
+      margin: 3rem;
+    }
+  }
+}
+
+#kssref-base-backgrounds-gradient {
+  & div[class*=bg] {
+    padding: 4rem;
+    margin: 3rem;
+  }
+}

doc/kss/templates/default/kss-assets/sample-inline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+</svg>

doc/kss/templates/default/kss-assets/sample.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+</svg>

doc/kss/templates/default/kss-assets/scrollspy.js

@@ -0,0 +1,147 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+function ScrollSpy (wrapper, opt) {
+
+  this.doc = document;
+  this.wrapper = (typeof wrapper === 'string') ? this.doc.querySelector(wrapper) : wrapper;
+  this.nav = this.wrapper.querySelectorAll(opt.nav);
+
+  this.contents = [];
+  this.win = window;
+
+  this.winH = this.win.innerHeight;
+
+  this.className = opt.className;
+
+  this.callback = opt.callback;
+
+  this.init();
+}
+
+ScrollSpy.prototype.init = function () {
+  this.contents = this.getContents();
+  this.attachEvent();
+};
+
+ScrollSpy.prototype.getContents = function () {
+  var targetList = [];
+
+  for (var i = 0, max = this.nav.length; i < max; i++) {
+    var href = this.nav[i].href;
+
+    targetList.push(this.doc.getElementById(href.split('#')[1]));
+  }
+
+  return targetList;
+};
+
+ScrollSpy.prototype.attachEvent = function () {
+  this.win.addEventListener('load', (function () {
+    this.spy(this.callback);
+  }).bind(this));
+
+
+  var scrollingTimer;
+
+  this.win.addEventListener('scroll', (function () {
+    if (scrollingTimer) {
+      clearTimeout(scrollingTimer);
+    }
+
+    var _this = this;
+
+    scrollingTimer = setTimeout(function () {
+      _this.spy(_this.callback);
+    }, 10);
+  }).bind(this));
+
+
+  var resizingTimer;
+
+  this.win.addEventListener('resize', (function () {
+    if (resizingTimer) {
+      clearTimeout(resizingTimer);
+    }
+
+    var _this = this;
+
+    resizingTimer = setTimeout(function () {
+      _this.spy(_this.callback);
+    }, 10);
+  }).bind(this));
+};
+
+ScrollSpy.prototype.spy = function (cb) {
+  var elems = this.getElemsViewState();
+
+  this.markNav(elems);
+
+  if (typeof cb === 'function') {
+    cb(elems);
+  }
+};
+
+ScrollSpy.prototype.getElemsViewState = function () {
+  var elemsInView = [],
+    elemsOutView = [],
+    viewStatusList = [];
+
+  for (var i = 0, max = this.contents.length; i < max; i++) {
+    var currentContent = this.contents[i],
+      isInView = this.isInView(currentContent);
+
+    if (isInView) {
+      elemsInView.push(currentContent);
+    } else {
+      elemsOutView.push(currentContent);
+    }
+    viewStatusList.push(isInView);
+  }
+
+  return {
+    inView: elemsInView,
+    outView: elemsOutView,
+    viewStatusList: viewStatusList
+  };
+};
+
+ScrollSpy.prototype.isInView = function (el) {
+  var winH = this.winH,
+    scrollTop = this.doc.documentElement.scrollTop || this.doc.body.scrollTop,
+    scrollBottom = scrollTop + winH,
+    rect = el.getBoundingClientRect(),
+    elTop = rect.top + scrollTop,
+    elBottom = elTop + el.offsetHeight;
+
+  return (elTop < scrollBottom) && (elBottom > scrollTop);
+};
+
+ScrollSpy.prototype.markNav = function (elems) {
+  var navItems = this.nav,
+    isAlreadyMarked = false;
+
+  for (var i = 0, max = navItems.length; i < max; i++) {
+    if (elems.viewStatusList[i] && !isAlreadyMarked) {
+      isAlreadyMarked = true;
+      navItems[i].classList.add(this.className);
+    } else {
+      navItems[i].classList.remove(this.className);
+    }
+  }
+};
+
+
+module.exports = ScrollSpy;
+
+},{}],2:[function(require,module,exports){
+(function (global){
+/**
+ * ScrollSpy
+ *
+ */
+
+var ScrollSpy = require('./modules/scrollspy');
+
+global.ScrollSpy = module.exports = ScrollSpy;
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./modules/scrollspy":1}]},{},[2]);

doc/kss/templates/default/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "kss-node-handlebars-builder",
+  "version": "3.0.0",
+  "description": "The default builder for kss-node.",
+  "main": "builder.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "sass": "./node_modules/.bin/node-sass --output-style compressed kss-assets/kss.scss kss-assets/kss.css"
+  },
+  "devDependencies": {
+    "node-sass": "^3.4.2"
+  }
+}

doc/styleguide/index.html

@@ -0,0 +1,76 @@
+<!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-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">
+</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>

doc/styleguide/item-base-backgrounds-gradient.html

@@ -0,0 +1,128 @@
+<!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-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">
+            <span class="kss-title__ref">
+              1.1.1
+              <span class="kss-title__permalink-hash">
+                  #Base.backgrounds.gradient
+              </span>
+            </span>
+            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>
+</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>

doc/styleguide/item-base-backgrounds-transparent.html

@@ -0,0 +1,132 @@
+<!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-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">
+            <span class="kss-title__ref">
+              1.1.2
+              <span class="kss-title__permalink-hash">
+                  #Base.backgrounds.transparent
+              </span>
+            </span>
+            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>
+</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>

doc/styleguide/item-base-backgrounds.html

@@ -0,0 +1,148 @@
+<!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-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">
+            <span class="kss-title__ref">
+              1.1
+              <span class="kss-title__permalink-hash">
+                  #Base.backgrounds
+              </span>
+            </span>
+            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</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>

doc/styleguide/item-base-colors.html

@@ -0,0 +1,148 @@
+<!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>

doc/styleguide/item-base-elements.html

@@ -0,0 +1,111 @@
+<!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>

doc/styleguide/item-base-typography.html

@@ -0,0 +1,111 @@
+<!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>

doc/styleguide/item-base.html

@@ -0,0 +1,118 @@
+<!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>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds">
+                  <span class="kss-nav__ref ">1.1</span
+                  ><span class="kss-nav__name">Backgrounds</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds-gradient">
+                  <span class="kss-nav__ref kss-nav__ref-child">1.1.1</span
+                  ><span class="kss-nav__name">Gradient Backgrounds</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds-transparent">
+                  <span class="kss-nav__ref kss-nav__ref-child">1.1.2</span
+                  ><span class="kss-nav__name">Transparent Backgrounds</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">2</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article 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">
+            <span class="kss-title__ref">
+              1
+              <span class="kss-title__permalink-hash">
+                  #Base
+              </span>
+            </span>
+            Base
+          </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>

doc/styleguide/item-classes-layout-shadow.html

@@ -0,0 +1,150 @@
+<!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>

doc/styleguide/item-classes-layout.html

@@ -0,0 +1,94 @@
+<!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>

doc/styleguide/item-classes.html

@@ -0,0 +1,108 @@
+<!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>

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

@@ -0,0 +1,116 @@
+<!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>

doc/styleguide/item-components-article-post-title-this-controls-the-organization-of-your-style-guide.html

@@ -0,0 +1,108 @@
+<!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>

doc/styleguide/item-components-article.html

@@ -0,0 +1,116 @@
+<!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>

doc/styleguide/item-components-button-organization-just-as-before-.html

@@ -0,0 +1,145 @@
+<!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>

doc/styleguide/item-components-buttons-bold.html

@@ -0,0 +1,134 @@
+<!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>

doc/styleguide/item-components-buttons.html

@@ -0,0 +1,108 @@
+<!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>

doc/styleguide/item-components.html

@@ -0,0 +1,147 @@
+<!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>

doc/styleguide/item-layout-alignment.html

@@ -0,0 +1,168 @@
+<!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-layout-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">
+            <span class="kss-title__ref">
+              2.1
+              <span class="kss-title__permalink-hash">
+                  #Layout.Alignment
+              </span>
+            </span>
+            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>
+</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>

doc/styleguide/item-layout-radius.html

@@ -0,0 +1,128 @@
+<!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-layout-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">
+            <span class="kss-title__ref">
+              2.2
+              <span class="kss-title__permalink-hash">
+                  #Layout.Radius
+              </span>
+            </span>
+            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>
+</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>

doc/styleguide/item-layout-shadow.html

@@ -0,0 +1,128 @@
+<!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-layout-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">
+            <span class="kss-title__ref">
+              2.3
+              <span class="kss-title__permalink-hash">
+                  #Layout.Shadow
+              </span>
+            </span>
+            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>
+</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>

doc/styleguide/item-layout-sizes.html

@@ -0,0 +1,193 @@
+<!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-layout-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">
+            <span class="kss-title__ref">
+              2.4
+              <span class="kss-title__permalink-hash">
+                  #Layout.Sizes
+              </span>
+            </span>
+            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>
+</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>

doc/styleguide/item-layout.html

@@ -0,0 +1,124 @@
+<!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>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-alignment">
+                  <span class="kss-nav__ref ">2.1</span
+                  ><span class="kss-nav__name">Align content</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-radius">
+                  <span class="kss-nav__ref ">2.2</span
+                  ><span class="kss-nav__name">Radius</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-shadow">
+                  <span class="kss-nav__ref ">2.3</span
+                  ><span class="kss-nav__name">Shadows</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-sizes">
+                  <span class="kss-nav__ref ">2.4</span
+                  ><span class="kss-nav__name">Resizing</span>
+                </a>
+              </li>
+            </ul>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article 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">
+            <span class="kss-title__ref">
+              2
+              <span class="kss-title__permalink-hash">
+                  #Layout
+              </span>
+            </span>
+            Layout
+          </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>

doc/styleguide/kss-assets/WARNING.txt

@@ -0,0 +1,2 @@
+WARNING: This folder is deleted and re-recreated each time the style guide is
+built. Do NOT put your own files in this folder.

doc/styleguide/kss-assets/css/kss-body.scss

@@ -0,0 +1,5 @@
+.kss-body {
+  margin: 0;
+  padding: 0;
+  background: $white;
+}

doc/styleguide/kss-assets/css/kss-colors.scss

@@ -0,0 +1,53 @@
+.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; }
+

doc/styleguide/kss-assets/css/kss-documentation.scss

@@ -0,0 +1,196 @@
+$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; }

doc/styleguide/kss-assets/css/kss-header.scss

@@ -0,0 +1,91 @@
+$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); }
+}

doc/styleguide/kss-assets/css/kss-markdown.scss

@@ -0,0 +1,122 @@
+$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;
+  }
+}

doc/styleguide/kss-assets/css/kss-navigation.scss

@@ -0,0 +1,109 @@
+$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);
+  }
+}

doc/styleguide/kss-assets/css/kss-settings.scss

@@ -0,0 +1,13 @@
+// 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;

doc/styleguide/kss-assets/css/kss-title.scss

@@ -0,0 +1,12 @@
+$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;
+}

doc/styleguide/kss-assets/css/kss-tools.scss

@@ -0,0 +1,30 @@
+@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; }
+  }
+}

doc/styleguide/kss-assets/css/kss.css

@@ -0,0 +1,507 @@
+.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; }

doc/styleguide/kss-assets/css/kss.scss

@@ -0,0 +1,16 @@
+// 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';

doc/styleguide/kss-assets/js/kss.js

@@ -0,0 +1,130 @@
+(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);
+        }
+      });
+    }
+  })();
+
+
+})();

doc/styleguide/kss-assets/kss-fullscreen.js

@@ -0,0 +1,59 @@
+(function (window, document) {
+  'use strict';
+
+  // Set the configuration values on object creation.
+  // - idPrefix: The string that uniquely prefixes the ID of all elements that
+  //   can receive the fullscreen focus.
+  // - bodyClass: The class that is set on the body element when the fullscreen
+  //   mode is toggled on.
+  // - elementClass: the class that is set on the element that is receiving the
+  //   fullscreen focus.
+  var KssFullScreen = function (config) {
+    this.idPrefix = config.idPrefix || 'kss-fullscreen-';
+    this.bodyClass = config.bodyClass || 'kss-fullscreen-mode';
+    this.elementClass = config.elementClass || 'is-fullscreen';
+
+    this.init();
+  };
+
+  // Initialize the page to see if the fullscreen mode should be immediately
+  // turned on.
+  KssFullScreen.prototype.init = function () {
+    // Check the location hash to see if it matches the idPrefix.
+    if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) {
+      this.setFocus(window.location.hash.slice(1 + this.idPrefix.length));
+    }
+
+    var self = this;
+    // Initialize all fullscreen toggle buttons.
+    document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) {
+      // Get the section reference from the data attribute.
+      button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen);
+    });
+  };
+
+  // Activation function that takes the ID of the element that will receive
+  // fullscreen focus.
+  KssFullScreen.prototype.setFocus = function (id) {
+    var el;
+
+    // Find the element with the given ID and start fullscreen mode.
+    if (el = document.getElementById(id)) {
+      el.classList.toggle('is-fullscreen');
+      document.body.classList.toggle('kss-fullscreen-mode');
+
+      // When enabling the focus mode, change the location hash.
+      if (el.classList.contains('is-fullscreen')) {
+        window.location.hash = '#' + this.idPrefix + id;
+        // Don't follow the link location.
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  // Export to DOM global space.
+  window.KssFullScreen = KssFullScreen;
+
+})(window, document);

doc/styleguide/kss-assets/kss-guides.js

@@ -0,0 +1,26 @@
+(function (window, document) {
+  'use strict';
+
+  var KssGuides = function (config) {
+    this.bodyClass = config.bodyClass || 'kss-guides-mode';
+
+    this.init();
+  };
+
+  KssGuides.prototype.init = function () {
+    var self = this;
+    // Initialize all guides toggle buttons.
+    document.querySelectorAll('a[data-kss-guides]').forEach(function (el) {
+      el.onclick = self.showGuides.bind(self);
+    });
+  };
+
+  // Toggle the guides mode.
+  KssGuides.prototype.showGuides = function () {
+    document.getElementsByTagName('body')[0].classList.toggle(this.bodyClass);
+  };
+
+  // Export to DOM global space.
+  window.KssGuides = KssGuides;
+
+})(window, document);

doc/styleguide/kss-assets/kss-markup.js

@@ -0,0 +1,40 @@
+(function (window, document) {
+  'use strict';
+
+  var KssMarkup = function (config) {
+    this.bodyClass = config.bodyClass || 'kss-markup-mode';
+    this.detailsClass = config.detailsClass || 'kss-markup';
+
+    this.init();
+  };
+
+  KssMarkup.prototype.init = function () {
+    var self = this;
+    // Initialize all markup toggle buttons.
+    document.querySelectorAll('a[data-kss-markup]').forEach(function (el) {
+      el.onclick = self.showGuides.bind(self);
+    });
+  };
+
+  // Activation function that takes the ID of the element that will receive
+  // fullscreen focus.
+  KssMarkup.prototype.showGuides = function () {
+    var body = document.getElementsByTagName('body')[0],
+      enabled = body.classList.contains(this.bodyClass);
+
+    document.querySelectorAll('.' + this.detailsClass).forEach(function (el) {
+      if (enabled) {
+        el.removeAttribute('open');
+      } else {
+        el.setAttribute('open', '');
+      }
+    });
+
+    // Toggle the markup mode.
+    body.classList.toggle(this.bodyClass);
+  };
+
+  // Export to DOM global space.
+  window.KssMarkup = KssMarkup;
+
+})(window, document);

doc/styleguide/kss-assets/kss.css

@@ -0,0 +1,597 @@
+.kss-style {
+  color: #444;
+  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px; }
+  .kss-style a {
+    color: #0645ad;
+    text-decoration: none;
+    transition-property: color;
+    transition-duration: 0.5s; }
+    .kss-style a:visited {
+      color: #0645ad; }
+    .kss-style a:hover, .kss-style a:focus {
+      color: #2272f7; }
+    .kss-style a:active {
+      color: #faa700; }
+    .kss-style a:hover, .kss-style a:active {
+      outline: 0; }
+  .kss-style p {
+    margin: 12px 0 24px 0; }
+  .kss-style h1, .kss-style h2, .kss-style h3, .kss-style h4, .kss-style h5, .kss-style h6 {
+    margin: 24px 0 0 0;
+    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+    color: #111;
+    line-height: 1.15em; }
+  .kss-style h4, .kss-style h5, .kss-style h6 {
+    font-weight: bold; }
+  .kss-style h1 {
+    font-size: 40px; }
+  .kss-style h2 {
+    font-size: 36px; }
+  .kss-style h3 {
+    font-size: 34px; }
+  .kss-style h4 {
+    font-size: 32px; }
+  .kss-style h5 {
+    font-size: 30px; }
+  .kss-style h6 {
+    font-size: 28px; }
+  .kss-style blockquote {
+    color: #666;
+    margin: 0;
+    padding-left: 24px;
+    border-left: 0.5em #d9d9d9 solid; }
+  .kss-style hr {
+    display: block;
+    height: 2px;
+    border: 0;
+    border-top: 1px solid #dddddd;
+    border-bottom: 1px solid #e6e6e6;
+    margin: 24px 0;
+    padding: 0; }
+  .kss-style pre, .kss-style code, .kss-style kbd, .kss-style samp {
+    font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace;
+    color: #2b2b2b;
+    font-size: 1em; }
+  .kss-style pre {
+    white-space: pre;
+    overflow: scroll; }
+  .kss-style ins {
+    color: #111;
+    background: #ff9;
+    text-decoration: none; }
+  .kss-style mark {
+    color: #111;
+    background: #ff0;
+    font-weight: bold; }
+  .kss-style sub, .kss-style sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline; }
+  .kss-style sup {
+    top: -0.5em; }
+  .kss-style sub {
+    bottom: -0.25em; }
+  .kss-style ul, .kss-style ol {
+    margin: 24px 0;
+    padding: 0 0 0 24px; }
+  .kss-style li p:last-child {
+    margin: 0; }
+  .kss-style dd {
+    margin: 0 0 0 24px; }
+  .kss-style img {
+    max-width: 100%;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+    vertical-align: middle; }
+  .kss-style table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+  .kss-style td {
+    vertical-align: top; }
+  @media print {
+    .kss-style a, .kss-style a:visited {
+      text-decoration: underline; }
+    .kss-style hr {
+      height: 1px;
+      border: 0;
+      border-bottom: 1px solid black; }
+    .kss-style a[href]:after {
+      content: " (" attr(href) ")"; }
+    .kss-style a[href^="javascript:"]:after, .kss-style a[href^="#"]:after {
+      content: ""; }
+    .kss-style abbr[title]:after {
+      content: " (" attr(title) ")"; }
+    .kss-style pre, .kss-style blockquote {
+      border: 1px solid #999;
+      padding-right: 1em;
+      page-break-inside: avoid; }
+    .kss-style tr, .kss-style img {
+      page-break-inside: avoid; }
+    .kss-style img {
+      max-width: 100% !important; }
+    .kss-style p, .kss-style h2, .kss-style h3 {
+      orphans: 3;
+      widows: 3; }
+    .kss-style h2, .kss-style h3 {
+      page-break-after: avoid; } }
+
+#kss-node {
+  margin: 0;
+  padding: 20px;
+  background: #fff; }
+  #kss-node.kss-fullscreen-mode .kss-sidebar,
+  #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen),
+  #kss-node.kss-fullscreen-mode .kss-github {
+    display: none; }
+  @media screen and (min-width: 769px) {
+    #kss-node {
+      padding: 0; }
+      #kss-node .kss-main,
+      #kss-node .kss-sidebar {
+        float: left;
+        margin-right: -100%;
+        box-sizing: border-box; } }
+  #kss-node .kss-main {
+    width: 100%;
+    margin: 0 auto; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-main {
+        width: 80%;
+        margin-left: 20%;
+        padding: 0 20px 0 30px; } }
+  #kss-node .kss-sidebar {
+    border-bottom: 1px solid #ddd; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-sidebar {
+        position: fixed;
+        width: 20%;
+        height: 100%;
+        overflow: auto;
+        padding: 0 10px 0 20px;
+        border-bottom: 0;
+        background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee);
+        background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee);
+        background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee);
+        background-image: url(noise-low.png), radial-gradient(#fff, #eee);
+        box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.7); } }
+
+#kss-node .kss-doc-title {
+  margin: 0; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-doc-title {
+      font-size: 1.5em; } }
+
+#kss-node .kss-header,
+#kss-node .kss-nav {
+  position: relative; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-header,
+    #kss-node .kss-nav {
+      margin-top: 2em; } }
+  #kss-node .kss-header ul, #kss-node .kss-header ol, #kss-node .kss-header li,
+  #kss-node .kss-nav ul,
+  #kss-node .kss-nav ol,
+  #kss-node .kss-nav li {
+    display: block;
+    float: none; }
+  #kss-node .kss-header li,
+  #kss-node .kss-nav li {
+    margin-left: 3.2rem; }
+
+#kss-node .kss-nav__menu {
+  margin-top: 12px;
+  margin-bottom: 12px;
+  padding: 0;
+  list-style-type: none; }
+
+#kss-node .kss-nav__menu-item {
+  display: inline-block;
+  padding-right: 24px; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-nav__menu-item {
+      display: list-item;
+      padding-right: 0; } }
+
+#kss-node .kss-nav__menu-link {
+  position: relative;
+  display: inline-block; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-nav__menu-link:before {
+      content: ' ';
+      position: absolute;
+      left: -20px;
+      width: 0;
+      height: 100%;
+      background-color: transparent; } }
+  #kss-node .kss-nav__menu-link.is-in-viewport:before {
+    background-color: #000;
+    width: 5px;
+    transition: background-color .4s, width .6s; }
+
+#kss-node .kss-nav__menu-child {
+  display: none; }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-nav__menu-child {
+      display: block;
+      list-style-type: none;
+      margin: 0;
+      padding: 0; }
+      #kss-node .kss-nav__menu-child li:first-child {
+        margin-top: 10px;
+        border-top: 1px solid #ccc;
+        padding: 10px 0 0; }
+      #kss-node .kss-nav__menu-child li:last-child {
+        margin-bottom: 10px;
+        border-bottom: 1px solid #ccc;
+        padding: 0 0 10px; } }
+
+#kss-node .kss-nav__ref {
+  color: #333;
+  font-weight: bold; }
+  #kss-node .kss-nav__ref:after {
+    content: ' '; }
+
+#kss-node .kss-nav__ref-child {
+  font-weight: normal; }
+
+#kss-node {
+  /* SPAN elements with the classes below are added by prettyprint. */
+  /* plain text */
+  /* string content */
+  /* a keyword */
+  /* a comment */
+  /* a type name */
+  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  /* a markup tag name */
+  /* a markup attribute name */
+  /* a markup attribute value */
+  /* a declaration; a variable name */
+  /* a function name */
+  /* Use higher contrast and text-weight for printable form. */
+  /* Specify class=linenums on a pre to get line numbering */ }
+  #kss-node .kss-section {
+    padding-top: 2.4rem;
+    padding-bottom: 2.4rem; }
+    #kss-node .kss-section.is-fullscreen {
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      margin: 0 !important;
+      min-width: 0 !important;
+      max-width: none !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      box-sizing: border-box !important;
+      object-fit: contain !important;
+      transform: none !important;
+      overflow: auto !important;
+      padding: 20px; }
+  #kss-node .kss-title {
+    margin-bottom: 0; }
+  #kss-node .is-fullscreen .kss-title {
+    margin-top: 0; }
+  #kss-node .kss-title__ref {
+    display: block;
+    font-size: 16px;
+    line-height: 16px;
+    color: #666; }
+    #kss-node .kss-title__ref:before {
+      content: 'Section '; }
+  #kss-node .kss-title__permalink {
+    display: block;
+    color: #000;
+    text-decoration: none; }
+    #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {
+      color: #0645ad; }
+      @media screen and (min-width: 607px) {
+        #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash {
+          display: inline; } }
+  #kss-node .kss-title__permalink-hash {
+    display: none;
+    color: #ccc; }
+  #kss-node .kss-toolbar {
+    margin: 6px 0 24px;
+    display: inline-block;
+    border: 1px solid #eee;
+    background-color: #f9f9f9;
+    border-right-color: #e0e0e0;
+    border-bottom-color: #e0e0e0;
+    line-height: 1;
+    padding: 3px; }
+    #kss-node .kss-toolbar a {
+      box-sizing: content-box;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      padding: 3px;
+      vertical-align: top;
+      position: relative;
+      overflow: visible; }
+      #kss-node .kss-toolbar a + a {
+        margin-left: 6px; }
+      #kss-node .kss-toolbar a .kss-toolbar__icon-fill {
+        fill: #ccc; }
+      #kss-node .kss-toolbar a svg.on {
+        display: none; }
+      #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {
+        border-color: #000; }
+        #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {
+          fill: #000; }
+  #kss-node .kss-toolbar__tooltip {
+    position: absolute;
+    z-index: 1;
+    display: inline-block;
+    bottom: 100%;
+    left: -10px;
+    margin-bottom: 5px;
+    border: solid 1px #666;
+    padding: 8px 10px 6px;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+    white-space: nowrap;
+    color: #000;
+    background: #fff;
+    cursor: help;
+    opacity: 0;
+    transition: opacity 0.25s;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    word-wrap: normal; }
+    #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 15px;
+      width: 0;
+      height: 0;
+      border-width: 7px 5px 0;
+      border-color: #666 transparent;
+      border-style: solid; }
+    #kss-node .kss-toolbar__tooltip:after {
+      bottom: -6px;
+      border-top-color: #fff; }
+  #kss-node a:focus > .kss-toolbar__tooltip,
+  #kss-node a:hover > .kss-toolbar__tooltip {
+    opacity: 1;
+    clip: auto;
+    height: auto;
+    width: auto;
+    overflow: visible; }
+  #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
+  #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],
+  #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {
+    border-color: #666;
+    background-color: #666; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {
+      fill: #fff; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {
+      display: block; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {
+      display: none; }
+  #kss-node .kss-parameters {
+    display: table;
+    list-style-type: none;
+    margin-top: 0;
+    margin-left: 0;
+    padding-left: 0; }
+  #kss-node .kss-parameters__title {
+    font-weight: bold; }
+  #kss-node .kss-parameters__item {
+    display: table-row; }
+  #kss-node .kss-parameters__name {
+    display: table-cell;
+    padding-right: 20px;
+    white-space: nowrap; }
+  #kss-node .kss-parameters__description {
+    display: table-cell; }
+  #kss-node .kss-parameters__default-value code {
+    white-space: nowrap; }
+  #kss-node .kss-modifier__wrapper {
+    border: 1px solid #ccc;
+    padding: 0 10px 10px; }
+  #kss-node .is-fullscreen .kss-modifier__wrapper {
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 0;
+    padding-right: 0;
+    border: none; }
+  #kss-node .kss-modifier__heading {
+    margin: 0 -10px 10px -10px;
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    background-color: #eee;
+    font-weight: bold; }
+  #kss-node .is-fullscreen .kss-modifier__heading {
+    margin: 0 20px 10px;
+    border: 1px solid #ccc; }
+  #kss-node .kss-modifier__default-name {
+    font-weight: bold;
+    margin-bottom: 12px; }
+  #kss-node .is-fullscreen .kss-modifier__default-name {
+    margin-left: 20px;
+    margin-right: 20px; }
+  #kss-node .kss-modifier__name {
+    float: left;
+    padding-right: 10px;
+    font-weight: bold; }
+  #kss-node .is-fullscreen .kss-modifier__name {
+    margin-left: 20px; }
+  #kss-node .kss-modifier__description {
+    margin-bottom: 12px; }
+  #kss-node .is-fullscreen .kss-modifier__description {
+    margin-right: 20px; }
+  #kss-node .kss-modifier__example {
+    clear: left;
+    border: 2px dashed transparent;
+    position: relative;
+    z-index: 0;
+    margin: -2px -2px 22px; }
+    #kss-node .kss-modifier__example:last-child {
+      margin-bottom: 0; }
+  #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:before,
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:after {
+    z-index: -1;
+    box-sizing: border-box;
+    content: '';
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    border: 2px solid #000; }
+  #kss-node.kss-guides-mode .kss-modifier__example {
+    border-color: #000; }
+    #kss-node.kss-guides-mode .kss-modifier__example:before {
+      top: -5px;
+      left: -5px;
+      border-top: 0;
+      border-left: 0; }
+    #kss-node.kss-guides-mode .kss-modifier__example:after {
+      top: -5px;
+      right: -5px;
+      border-top: 0;
+      border-right: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {
+    left: auto;
+    right: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after {
+    right: auto;
+    left: 0; }
+  #kss-node .kss-modifier__example-footer {
+    clear: both; }
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:before {
+    bottom: -5px;
+    left: -5px;
+    border-bottom: 0;
+    border-left: 0; }
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:after {
+    bottom: -5px;
+    right: -5px;
+    border-right: 0;
+    border-bottom: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before {
+    left: auto;
+    right: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after {
+    right: auto;
+    left: 0; }
+  #kss-node .kss-markup {
+    margin: 24px 0;
+    border: 1px solid #ccc; }
+    #kss-node .kss-markup[open] summary {
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 3px; }
+    #kss-node .kss-markup summary {
+      padding-left: 10px; }
+    #kss-node .kss-markup pre {
+      margin: 0; }
+  #kss-node .kss-source {
+    font-size: 80%; }
+  #kss-node .kss-github {
+    display: none; }
+    @media screen and (min-width: 501px) {
+      #kss-node .kss-github {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0; } }
+    #kss-node .kss-github img {
+      border: 0; }
+  #kss-node .pln {
+    color: #000; }
+  #kss-node .str {
+    color: #080; }
+  #kss-node .kwd {
+    color: #008; }
+  #kss-node .com {
+    color: #800; }
+  #kss-node .typ {
+    color: #606; }
+  #kss-node .lit {
+    color: #066; }
+  #kss-node .pun, #kss-node .opn, #kss-node .clo {
+    color: #660; }
+  #kss-node .tag {
+    color: #008; }
+  #kss-node .atn {
+    color: #606; }
+  #kss-node .atv {
+    color: #080; }
+  #kss-node .dec, #kss-node .var {
+    color: #606; }
+  #kss-node .fun {
+    color: red; }
+  @media print, projection {
+    #kss-node .str {
+      color: #060; }
+    #kss-node .kwd {
+      color: #006;
+      font-weight: bold; }
+    #kss-node .com {
+      color: #600;
+      font-style: italic; }
+    #kss-node .typ {
+      color: #404;
+      font-weight: bold; }
+    #kss-node .lit {
+      color: #044; }
+    #kss-node .pun, #kss-node .opn, #kss-node .clo {
+      color: #440; }
+    #kss-node .tag {
+      color: #006;
+      font-weight: bold; }
+    #kss-node .atn {
+      color: #404; }
+    #kss-node .atv {
+      color: #060; } }
+  #kss-node ol.linenums {
+    margin: 0;
+    padding: 0 0 3px 0;
+    list-style-type: none;
+    /* Alternate shading for lines */ }
+    #kss-node ol.linenums li {
+      min-height: 24px;
+      border-bottom: 1px solid #eee;
+      padding: 0 10px;
+      background: #fff; }
+      #kss-node ol.linenums li:first-child {
+        padding-top: 3px; }
+    #kss-node ol.linenums li.L0,
+    #kss-node ol.linenums li.L2,
+    #kss-node ol.linenums li.L4,
+    #kss-node ol.linenums li.L6,
+    #kss-node ol.linenums li.L8 {
+      background: #fcfcfc; }
+
+#kssref-layout-radius .radius {
+  padding: 2.4rem; }
+
+#kssref-base-backgrounds span[class*=bg] {
+  display: inline-block;
+  padding: 1.2rem;
+  margin-left: -4px; }
+
+#kssref-base-backgrounds-transparent div[class*=bg] {
+  padding: 2rem;
+  margin: 0; }
+  #kssref-base-backgrounds-transparent div[class*=bg] > div[class*=bg] {
+    padding: 6rem;
+    margin: 3rem; }
+
+#kssref-base-backgrounds-gradient div[class*=bg] {
+  padding: 4rem;
+  margin: 3rem; }

doc/styleguide/kss-assets/kss.js

@@ -0,0 +1,53 @@
+(function() {
+  var KssStateGenerator;
+
+  KssStateGenerator = (function() {
+    var pseudo_selectors;
+
+    pseudo_selectors = ['hover', 'enabled', 'disabled', 'active', 'visited', 'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type', 'first-child', 'last-child'];
+
+    function KssStateGenerator() {
+      var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2;
+      pseudos = new RegExp("(\\:" + (pseudo_selectors.join('|\\:')) + ")", "g");
+      try {
+        _ref = document.styleSheets;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          stylesheet = _ref[_i];
+          if (stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0) {
+            idxs = [];
+            _ref2 = stylesheet.cssRules;
+            for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) {
+              rule = _ref2[idx];
+              if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) {
+                replaceRule = function(matched, stuff) {
+                  return matched.replace(/\:/g, '.pseudo-class-');
+                };
+                this.insertRule(rule.cssText.replace(pseudos, replaceRule));
+              }
+              pseudos.lastIndex = 0;
+            }
+          }
+        }
+      } catch (_error) {}
+    }
+
+    KssStateGenerator.prototype.insertRule = function(rule) {
+      var headEl, styleEl;
+      headEl = document.getElementsByTagName('head')[0];
+      styleEl = document.createElement('style');
+      styleEl.type = 'text/css';
+      if (styleEl.styleSheet) {
+        styleEl.styleSheet.cssText = rule;
+      } else {
+        styleEl.appendChild(document.createTextNode(rule));
+      }
+      return headEl.appendChild(styleEl);
+    };
+
+    return KssStateGenerator;
+
+  })();
+
+  new KssStateGenerator;
+
+}).call(this);

doc/styleguide/kss-assets/kss.scss

@@ -0,0 +1,792 @@
+// ------------------------------------------------------------------------------
+//   Variables - Colors, Fonts, etc.
+// ------------------------------------------------------------------------------
+$kss-colors-background    : #fff;
+
+$kss-colors-foreground    : #444;
+$kss-colors-heading       : #111;
+$kss-colors-quotes        : #666;
+
+$kss-colors-link          : #0645ad;
+$kss-colors-link-visited  : #0645ad;
+$kss-colors-link-hover    : lighten($kss-colors-link, 20%);
+$kss-colors-link-active   : #faa700;
+
+$kss-font-body            : Helvetica, 'Helvetica Neue', Arial, sans-serif;
+$kss-font-code            : Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
+
+$kss-font-size            : 16px;
+$kss-vertical-rhythm      : $kss-font-size * 1.5;
+
+// ------------------------------------------------------------------------------
+// Wrap all of this builder's base HTML styling inside a .kss-style selector.
+// ------------------------------------------------------------------------------
+
+.kss-style {
+  color: $kss-colors-foreground;
+  font-family: $kss-font-body;
+  font-size: $kss-font-size;
+  line-height: $kss-vertical-rhythm;
+
+  a {
+    color: $kss-colors-link;
+    text-decoration: none;
+    transition-property: color;
+    transition-duration: 0.5s;
+
+    &:visited { color: $kss-colors-link-visited; }
+    &:hover,
+    &:focus   { color: $kss-colors-link-hover;   }
+    &:active  { color: $kss-colors-link-active;  }
+
+    &:hover,
+    &:active {
+      outline: 0;
+    }
+  }
+
+  p {
+    margin: ($kss-vertical-rhythm/2) 0 $kss-vertical-rhythm 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: $kss-vertical-rhythm 0 0 0;
+    font-family: $kss-font-body;
+    color: $kss-colors-heading;
+    line-height: 1.15em;
+  }
+
+  h4, h5, h6 {
+    font-weight: bold;
+  }
+
+  h1 { font-size: $kss-font-size * 2.5;   }
+  h2 { font-size: $kss-font-size * 2.25;  }
+  h3 { font-size: $kss-font-size * 2.125; }
+  h4 { font-size: $kss-font-size * 2;     }
+  h5 { font-size: $kss-font-size * 1.875; }
+  h6 { font-size: $kss-font-size * 1.75;  }
+
+  blockquote {
+    color: $kss-colors-quotes;
+    margin: 0;
+    padding-left: $kss-vertical-rhythm;
+    border-left: 0.5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid;
+  }
+
+  hr {
+    display: block;
+    height: 2px;
+    border: 0;
+    border-top: 1px solid lighten($kss-colors-foreground, 60%);
+    border-bottom: 1px solid darken($kss-colors-background, 10%);
+    margin: $kss-vertical-rhythm 0;
+    padding: 0;
+  }
+
+  pre, code, kbd, samp {
+    font-family: $kss-font-code;
+    color: mix($kss-colors-foreground, $kss-colors-heading, 50%);
+    font-size: 1em;
+  }
+
+  pre {
+    white-space: pre;
+    overflow: scroll;
+  }
+
+  ins {
+    color: $kss-colors-heading;
+    background: #ff9;
+    text-decoration: none;
+  }
+
+  mark {
+    color: $kss-colors-heading;
+    background: #ff0;
+    font-weight: bold;
+  }
+
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sup { top: -0.5em;     }
+  sub { bottom: -0.25em; }
+
+  ul, ol {
+    margin: $kss-vertical-rhythm 0;
+    padding: 0 0 0 $kss-vertical-rhythm;
+  }
+  li p:last-child {
+    margin: 0;
+  }
+  dd {
+    margin: 0 0 0 $kss-vertical-rhythm;
+  }
+
+  img {
+    max-width:100%;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+    vertical-align: middle;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  td {
+    vertical-align: top;
+  }
+
+  @media print {
+    a, a:visited { text-decoration: underline; }
+    hr { height: 1px; border:0; border-bottom:1px solid black; }
+    a[href]:after { content: " (" attr(href) ")"; }
+    a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
+    abbr[title]:after { content: " (" attr(title) ")"; }
+    pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
+    tr, img { page-break-inside: avoid; }
+    img { max-width: 100% !important; }
+    p, h2, h3 { orphans: 3; widows: 3; }
+    h2, h3 { page-break-after: avoid; }
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Layout and page background
+// ------------------------------------------------------------------------------
+
+#kss-node {
+  margin: 0;
+  padding: 20px;
+  background: #fff;
+
+  &.kss-fullscreen-mode {
+    .kss-sidebar,
+    .kss-section:not(.is-fullscreen),
+    .kss-github {
+      display: none;
+    }
+  }
+
+  @media screen and (min-width: 769px) {
+    padding: 0;
+
+    .kss-main,
+    .kss-sidebar {
+      float: left;
+      margin-right: -100%;
+      box-sizing: border-box;
+    }
+  }
+
+  .kss-main {
+    width: 100%;
+    margin: 0 auto;
+
+    @media screen and (min-width: 769px) {
+      width: 80%;
+      margin-left: 20%;
+      padding: 0 20px 0 30px;
+    }
+  }
+
+  .kss-sidebar {
+    border-bottom:1px solid #ddd;
+
+    @media screen and (min-width: 769px) {
+      position: fixed;
+      width: 20%;
+      height: 100%;
+      overflow: auto;
+      padding: 0 10px 0 20px;
+      border-bottom: 0;
+      background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee);
+      background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee);
+      background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee);
+      background-image: url(noise-low.png), radial-gradient(#fff, #eee);
+      box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7);
+    }
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Sidebar-area components
+// ------------------------------------------------------------------------------
+
+#kss-node {
+
+  .kss-doc-title {
+    margin: 0;
+
+    @media screen and (min-width: 769px) {
+      font-size: 1.5em;
+    }
+  }
+
+  .kss-header,
+  .kss-nav {
+    position: relative;
+
+    @media screen and (min-width: 769px) {
+      margin-top: 2em;
+    }
+
+    & ul, & ol, & li {
+      display: block;
+      float: none;
+    }
+
+    & li {
+      margin-left: 3.2rem;
+    }
+  }
+
+  .kss-nav__menu {
+    margin-top: ($kss-vertical-rhythm/2);
+    margin-bottom: ($kss-vertical-rhythm/2);
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .kss-nav__menu-item {
+    display: inline-block;
+    padding-right: $kss-vertical-rhythm;
+
+    @media screen and (min-width: 769px) {
+      display: list-item;
+      padding-right: 0;
+    }
+  }
+
+  .kss-nav__menu-link {
+    position: relative;
+    display: inline-block;
+
+    &:before {
+      @media screen and (min-width: 769px) {
+        content: ' ';
+        position: absolute;
+        left: -20px;
+        width: 0;
+        height: 100%;
+        background-color: rgba(#000, 0);
+      }
+    }
+
+    &.is-in-viewport:before {
+      background-color: #000;
+      width: 5px;
+      transition: background-color .4s, width .6s;
+    }
+  }
+
+  .kss-nav__menu-child {
+    display: none;
+
+    @media screen and (min-width: 769px) {
+      display: block;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+
+      // @TODO: The ul is output even when there are no children. Fix this, so
+      // we can put these :first-child and :last child styles back on the ul.
+      li:first-child {
+        margin-top: 10px;
+        border-top: 1px solid #ccc;
+        padding: 10px 0 0;
+      }
+
+      li:last-child {
+        margin-bottom: 10px;
+        border-bottom: 1px solid #ccc;
+        padding: 0 0 10px;
+      }
+    }
+  }
+
+  .kss-nav__ref {
+    color: #333;
+    font-weight: bold;
+
+    &:after {
+      content: ' ';
+    }
+  }
+  .kss-nav__ref-child {
+    font-weight: normal;
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Content-area components
+// ------------------------------------------------------------------------------
+
+#kss-node {
+
+  .kss-section {
+    padding-top: 2.4rem;
+    padding-bottom: 2.4rem;
+
+    // "fullscreen" styles copied from Mozilla's default stylesheet.
+    &.is-fullscreen {
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      margin: 0 !important;
+      min-width: 0 !important;
+      max-width: none !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      box-sizing: border-box !important;
+      object-fit: contain !important;
+      transform: none !important;
+      // Turn on scrolling if needed.
+      overflow: auto !important;
+      padding: 20px;
+    }
+  }
+
+  .kss-title {
+    margin-bottom: 0;
+  }
+  .is-fullscreen .kss-title {
+    margin-top: 0;
+  }
+  .kss-title__ref {
+    display: block;
+    font-size: $kss-font-size;
+    line-height: $kss-font-size;
+    color: #666;
+
+    &:before {
+      content: 'Section ';
+    }
+  }
+  .kss-title__permalink {
+    display: block;
+    color: #000;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: $kss-colors-link;
+
+      @media screen and (min-width: 607px) {
+        .kss-title__permalink-hash {
+          display: inline;
+        }
+      }
+    }
+  }
+  .kss-title__permalink-hash {
+    display: none;
+    color: #ccc;
+  }
+
+  .kss-toolbar {
+    margin: 6px 0 24px;
+    display: inline-block;
+    border: 1px solid #eee;
+    background-color: #f9f9f9;
+    border-right-color: #e0e0e0;
+    border-bottom-color: #e0e0e0;
+    line-height: 1;
+    padding: 3px;
+
+    a {
+      box-sizing: content-box;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      padding: 3px;
+      vertical-align: top;
+      // Tooltip wrapper styles:
+      position: relative;
+      overflow: visible;
+
+      + a {
+        margin-left: 6px;
+      }
+
+      .kss-toolbar__icon-fill {
+        fill: #ccc;
+      }
+
+      svg.on {
+        display: none;
+      }
+
+      &:focus,
+      &:hover {
+        border-color: #000;
+
+        .kss-toolbar__icon-fill {
+          fill: #000;
+        }
+      }
+    }
+  }
+  .kss-toolbar__tooltip {
+    position: absolute;
+    z-index: 1;
+    display: inline-block;
+    bottom: 100%;
+    left: -10px;
+    margin-bottom: 5px;
+    border: solid 1px #666;
+    padding: 8px 10px 6px;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
+    white-space: nowrap;
+    color: #000;
+    background: #fff;
+    cursor: help;
+    opacity: 0;
+    transition: opacity 0.25s;
+    // Visually hidden
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    word-wrap: normal;
+
+    // Solid grey triangle.
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 15px;
+      width: 0;
+      height: 0;
+      border-width: 7px 5px 0;
+      border-color: #666 transparent;
+      border-style: solid;
+    }
+
+    // White triangle knock-out.
+    &:after {
+      bottom: -6px;
+      border-top-color: #fff;
+    }
+  }
+  a:focus,
+  a:hover {
+    > .kss-toolbar__tooltip {
+      opacity: 1;
+      // Visually hidden off
+      clip: auto;
+      height: auto;
+      width: auto;
+      overflow: visible;
+    }
+  }
+  .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
+  &.kss-guides-mode .kss-toolbar a[data-kss-guides],
+  &.kss-markup-mode .kss-toolbar a[data-kss-markup] {
+    border-color: #666;
+    background-color: #666;
+
+    .kss-toolbar__icon-fill {
+      fill: #fff;
+    }
+
+    svg.on {
+      display: block;
+    }
+
+    svg.off {
+      display: none;
+    }
+  }
+
+  .kss-parameters {
+    display: table;
+    list-style-type: none;
+    margin-top: 0;
+    margin-left: 0;
+    padding-left: 0;
+  }
+  .kss-parameters__title {
+    font-weight: bold;
+  }
+  .kss-parameters__item {
+    display: table-row;
+  }
+  .kss-parameters__name {
+    display: table-cell;
+    padding-right: 20px;
+    white-space: nowrap;
+  }
+  .kss-parameters__description {
+    display: table-cell;
+  }
+  .kss-parameters__default-value code {
+    white-space: nowrap;
+  }
+
+  .kss-modifier__wrapper {
+    border: 1px solid #ccc;
+    padding: 0 10px 10px;
+  }
+  .is-fullscreen .kss-modifier__wrapper {
+    // Un-do padding on .kss-section.
+    margin-left: -20px;
+    margin-right: -20px;
+    // Remove all padding on the wrapper
+    padding-left: 0;
+    padding-right: 0;
+    border: none;
+  }
+  .kss-modifier__heading {
+    margin: 0 -10px 10px -10px;
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    background-color: #eee;
+    font-weight: bold;
+  }
+  .is-fullscreen .kss-modifier__heading {
+    margin: 0 20px 10px;
+    border: 1px solid #ccc;
+  }
+  .kss-modifier__default-name {
+    font-weight: bold;
+    margin-bottom: ($kss-vertical-rhythm / 2);
+  }
+  .is-fullscreen .kss-modifier__default-name {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .kss-modifier__name {
+    float: left;
+    padding-right: 10px;
+    font-weight: bold;
+  }
+  .is-fullscreen .kss-modifier__name {
+    margin-left: 20px;
+  }
+  .kss-modifier__description {
+    margin-bottom: ($kss-vertical-rhythm / 2);
+  }
+  .is-fullscreen .kss-modifier__description {
+    margin-right: 20px;
+  }
+  .kss-modifier__example {
+    clear: left;
+    border: 2px dashed transparent;
+    position: relative; // Contain the example's absolute positioning.
+    z-index: 0; // Establishes a local stacking context.
+    margin: -2px -2px ($kss-vertical-rhythm - 2px);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  &.kss-guides-mode .kss-modifier__example,
+  &.kss-guides-mode .kss-modifier__example-footer {
+    &:before,
+    &:after {
+      z-index: -1;
+      box-sizing: border-box;
+      content: '';
+      position: absolute;
+      width: 5px;
+      height: 5px;
+      border: 2px solid #000;
+    }
+  }
+  &.kss-guides-mode .kss-modifier__example {
+    border-color: #000;
+
+    &:before {
+      top: -5px;
+      left: -5px;
+      border-top: 0;
+      border-left: 0;
+    }
+    &:after {
+      top: -5px;
+      right: -5px;
+      border-top: 0;
+      border-right: 0;
+    }
+  }
+  &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example {
+    &:before {
+      left: auto;
+      right: 0;
+    }
+    &:after {
+      right: auto;
+      left: 0;
+    }
+  }
+  .kss-modifier__example-footer {
+    clear: both;
+  }
+  &.kss-guides-mode .kss-modifier__example-footer {
+    &:before {
+      bottom: -5px;
+      left: -5px;
+      border-bottom: 0;
+      border-left: 0;
+    }
+    &:after {
+      bottom: -5px;
+      right: -5px;
+      border-right: 0;
+      border-bottom: 0;
+    }
+  }
+  &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer {
+    &:before {
+      left: auto;
+      right: 0;
+    }
+    &:after {
+      right: auto;
+      left: 0;
+    }
+  }
+
+  .kss-markup {
+    margin: $kss-vertical-rhythm 0;
+    border: 1px solid #ccc;
+
+    &[open] summary {
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 3px;
+    }
+
+    summary {
+      padding-left: 10px;
+    }
+
+    pre {
+      margin: 0;
+    }
+  }
+
+  .kss-source {
+    font-size: 80%;
+  }
+
+  .kss-github {
+    display:none;
+
+    @media screen and (min-width: 501px) {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    img {
+      border: 0;
+    }
+  }
+
+  // ------------------------------------------------------------------------------
+  // prettify.js styles
+  // ------------------------------------------------------------------------------
+
+  /* SPAN elements with the classes below are added by prettyprint. */
+  .pln { color: #000 }  /* plain text */
+
+  .str { color: #080 }  /* string content */
+  .kwd { color: #008 }  /* a keyword */
+  .com { color: #800 }  /* a comment */
+  .typ { color: #606 }  /* a type name */
+  .lit { color: #066 }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+
+  /* Use higher contrast and text-weight for printable form. */
+  @media print, projection {
+    .str { color: #060 }
+    .kwd { color: #006; font-weight: bold }
+    .com { color: #600; font-style: italic }
+    .typ { color: #404; font-weight: bold }
+    .lit { color: #044 }
+    .pun, .opn, .clo { color: #440 }
+    .tag { color: #006; font-weight: bold }
+    .atn { color: #404 }
+    .atv { color: #060 }
+  }
+
+  /* Specify class=linenums on a pre to get line numbering */
+  ol.linenums {
+    margin: 0;
+    padding: 0 0 3px 0;
+    list-style-type: none;
+
+    li {
+      min-height: $kss-vertical-rhythm;
+      border-bottom: 1px solid #eee;
+      padding: 0 10px;
+      background: #fff;
+
+      &:first-child {
+        padding-top: 3px;
+      }
+    }
+    /* Alternate shading for lines */
+    li.L0,
+    li.L2,
+    li.L4,
+    li.L6,
+    li.L8 {
+      background: #fcfcfc;
+    }
+  }
+}
+
+// WebSlides
+
+#kssref-layout-radius {
+  & .radius {
+    padding: 2.4rem;
+  }
+}
+
+#kssref-base-backgrounds {
+  & span[class*=bg] {
+    display: inline-block;
+    padding: 1.2rem;
+    margin-left: -4px;
+  }
+}
+
+#kssref-base-backgrounds-transparent {
+  & div[class*=bg] {
+    padding: 2rem;
+    margin: 0;
+
+    & > div[class*=bg] {
+      padding: 6rem;
+      margin: 3rem;
+    }
+  }
+}
+
+#kssref-base-backgrounds-gradient {
+  & div[class*=bg] {
+    padding: 4rem;
+    margin: 3rem;
+  }
+}

doc/styleguide/kss-assets/sample-inline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+</svg>

doc/styleguide/kss-assets/sample.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+</svg>

doc/styleguide/kss-assets/scrollspy.js

@@ -0,0 +1,147 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+function ScrollSpy (wrapper, opt) {
+
+  this.doc = document;
+  this.wrapper = (typeof wrapper === 'string') ? this.doc.querySelector(wrapper) : wrapper;
+  this.nav = this.wrapper.querySelectorAll(opt.nav);
+
+  this.contents = [];
+  this.win = window;
+
+  this.winH = this.win.innerHeight;
+
+  this.className = opt.className;
+
+  this.callback = opt.callback;
+
+  this.init();
+}
+
+ScrollSpy.prototype.init = function () {
+  this.contents = this.getContents();
+  this.attachEvent();
+};
+
+ScrollSpy.prototype.getContents = function () {
+  var targetList = [];
+
+  for (var i = 0, max = this.nav.length; i < max; i++) {
+    var href = this.nav[i].href;
+
+    targetList.push(this.doc.getElementById(href.split('#')[1]));
+  }
+
+  return targetList;
+};
+
+ScrollSpy.prototype.attachEvent = function () {
+  this.win.addEventListener('load', (function () {
+    this.spy(this.callback);
+  }).bind(this));
+
+
+  var scrollingTimer;
+
+  this.win.addEventListener('scroll', (function () {
+    if (scrollingTimer) {
+      clearTimeout(scrollingTimer);
+    }
+
+    var _this = this;
+
+    scrollingTimer = setTimeout(function () {
+      _this.spy(_this.callback);
+    }, 10);
+  }).bind(this));
+
+
+  var resizingTimer;
+
+  this.win.addEventListener('resize', (function () {
+    if (resizingTimer) {
+      clearTimeout(resizingTimer);
+    }
+
+    var _this = this;
+
+    resizingTimer = setTimeout(function () {
+      _this.spy(_this.callback);
+    }, 10);
+  }).bind(this));
+};
+
+ScrollSpy.prototype.spy = function (cb) {
+  var elems = this.getElemsViewState();
+
+  this.markNav(elems);
+
+  if (typeof cb === 'function') {
+    cb(elems);
+  }
+};
+
+ScrollSpy.prototype.getElemsViewState = function () {
+  var elemsInView = [],
+    elemsOutView = [],
+    viewStatusList = [];
+
+  for (var i = 0, max = this.contents.length; i < max; i++) {
+    var currentContent = this.contents[i],
+      isInView = this.isInView(currentContent);
+
+    if (isInView) {
+      elemsInView.push(currentContent);
+    } else {
+      elemsOutView.push(currentContent);
+    }
+    viewStatusList.push(isInView);
+  }
+
+  return {
+    inView: elemsInView,
+    outView: elemsOutView,
+    viewStatusList: viewStatusList
+  };
+};
+
+ScrollSpy.prototype.isInView = function (el) {
+  var winH = this.winH,
+    scrollTop = this.doc.documentElement.scrollTop || this.doc.body.scrollTop,
+    scrollBottom = scrollTop + winH,
+    rect = el.getBoundingClientRect(),
+    elTop = rect.top + scrollTop,
+    elBottom = elTop + el.offsetHeight;
+
+  return (elTop < scrollBottom) && (elBottom > scrollTop);
+};
+
+ScrollSpy.prototype.markNav = function (elems) {
+  var navItems = this.nav,
+    isAlreadyMarked = false;
+
+  for (var i = 0, max = navItems.length; i < max; i++) {
+    if (elems.viewStatusList[i] && !isAlreadyMarked) {
+      isAlreadyMarked = true;
+      navItems[i].classList.add(this.className);
+    } else {
+      navItems[i].classList.remove(this.className);
+    }
+  }
+};
+
+
+module.exports = ScrollSpy;
+
+},{}],2:[function(require,module,exports){
+(function (global){
+/**
+ * ScrollSpy
+ *
+ */
+
+var ScrollSpy = require('./modules/scrollspy');
+
+global.ScrollSpy = module.exports = ScrollSpy;
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./modules/scrollspy":1}]},{},[2]);

doc/styleguide/kss-assets/vendor/prism.css

@@ -0,0 +1,138 @@
+/* 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;
+}
+

doc/styleguide/kss-assets/vendor/prism.js

@@ -0,0 +1,6 @@
+/* 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"}});;

doc/styleguide/section-base.html

@@ -0,0 +1,295 @@
+<!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>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds">
+                  <span class="kss-nav__ref ">1.1</span
+                  ><span class="kss-nav__name">Backgrounds</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds-gradient">
+                  <span class="kss-nav__ref kss-nav__ref-child">1.1.1</span
+                  ><span class="kss-nav__name">Gradient Backgrounds</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds-transparent">
+                  <span class="kss-nav__ref kss-nav__ref-child">1.1.2</span
+                  ><span class="kss-nav__name">Transparent Backgrounds</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">2</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article 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">
+            <span class="kss-title__ref">
+              1
+              <span class="kss-title__permalink-hash">
+                  #Base
+              </span>
+            </span>
+            Base
+          </a>
+        </h1>
+
+
+      </div>
+
+
+
+    </div>
+    <section 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">
+            <span class="kss-title__ref">
+              1.1
+              <span class="kss-title__permalink-hash">
+                  #Base.backgrounds
+              </span>
+            </span>
+            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</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>
+
+    </section>
+    <section 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">
+            <span class="kss-title__ref">
+              1.1.1
+              <span class="kss-title__permalink-hash">
+                  #Base.backgrounds.gradient
+              </span>
+            </span>
+            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>
+
+    </section>
+    <section 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">
+            <span class="kss-title__ref">
+              1.1.2
+              <span class="kss-title__permalink-hash">
+                  #Base.backgrounds.transparent
+              </span>
+            </span>
+            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>
+
+    </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>

doc/styleguide/section-classes.html

@@ -0,0 +1,228 @@
+<!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>

doc/styleguide/section-components.html

@@ -0,0 +1,352 @@
+<!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>

doc/styleguide/section-layout.html

@@ -0,0 +1,433 @@
+<!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-layout.html">
+          <span class="kss-nav__ref">2</span><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" href="section-layout.html#kssref-layout-alignment">
+                  <span class="kss-nav__ref ">2.1</span
+                  ><span class="kss-nav__name">Align content</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-radius">
+                  <span class="kss-nav__ref ">2.2</span
+                  ><span class="kss-nav__name">Radius</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-shadow">
+                  <span class="kss-nav__ref ">2.3</span
+                  ><span class="kss-nav__name">Shadows</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-sizes">
+                  <span class="kss-nav__ref ">2.4</span
+                  ><span class="kss-nav__name">Resizing</span>
+                </a>
+              </li>
+            </ul>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article 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">
+            <span class="kss-title__ref">
+              2
+              <span class="kss-title__permalink-hash">
+                  #Layout
+              </span>
+            </span>
+            Layout
+          </a>
+        </h1>
+
+
+      </div>
+
+
+
+    </div>
+    <section 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">
+            <span class="kss-title__ref">
+              2.1
+              <span class="kss-title__permalink-hash">
+                  #Layout.Alignment
+              </span>
+            </span>
+            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>
+
+    </section>
+    <section 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">
+            <span class="kss-title__ref">
+              2.2
+              <span class="kss-title__permalink-hash">
+                  #Layout.Radius
+              </span>
+            </span>
+            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>
+
+    </section>
+    <section 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">
+            <span class="kss-title__ref">
+              2.3
+              <span class="kss-title__permalink-hash">
+                  #Layout.Shadow
+              </span>
+            </span>
+            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>
+
+    </section>
+    <section 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">
+            <span class="kss-title__ref">
+              2.4
+              <span class="kss-title__permalink-hash">
+                  #Layout.Sizes
+              </span>
+            </span>
+            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>
+
+    </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>

kss-config.json

@@ -0,0 +1,14 @@
+{
+  "title": "WebSlides",
+
+  "source": "src/scss/",
+
+  "destination": "doc/styleguide/",
+
+  "builder": "doc/kss/templates/default/",
+
+  "css": [
+    "../../static/css/webslides.css"
+  ]
+
+}

package.json

@@ -42,6 +42,8 @@
     "eslint-plugin-jest": "^20.0.3",
     "extract-text-webpack-plugin": "^3.0.0",
     "jest": "^20.0.4",
+    "kss": "^3.0.0-beta.18",
+    "michelangelo": "^0.6.1",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.0.2",
     "postcss-loader": "^2.0.6",
@@ -65,7 +67,8 @@
     "lint:tests": "eslint ./test --cache --ignore-pattern .gitignore",
     "lint:css": "sass-lint -v -f stylish",
     "dev": "webpack-dev-server",
-    "test": "jest && codecov"
+    "test": "jest && codecov",
+    "kss": "kss --config kss-config.json"
   },
   "jest": {
     "collectCoverage": true

src/scss/_base.scss

@@ -70,6 +70,16 @@ nav a[rel='external'] em,
   width: 1px;
 }
 
+// Shadows
+//
+// Drops a shadow under the layer. The layer containing the shadow has to have a solid background
+//
+// Markup:
+// <div class="bg-white shadow">
+//   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+// </div>
+//
+// Styleguide Layout.Shadow
 .shadow {
   position: relative;
 
@@ -116,10 +126,33 @@ footer nav {
   padding: 2.4rem;
 }
 
+// Radius
+//
+// Adds a rounded radis
+//
+// Markup:
+// <div class="bg-black radius">
+//   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+// </div>
+//
+// Styleguide Layout.Radius
 .radius {
   border-radius: .4rem;
 }
 
+// Align content
+//
+// Markup:
+// <div>
+//   <img src="../../../static/images/iphone.png" class="size-50 {{modifier_class}}" />
+//   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+// </div>
+//
+// .alignright - Align right.
+// .alignleft - Align left.
+// .aligncenter - Align center.
+//
+// Styleguide Layout.Alignment
 .alignright {
   float: right;
 }
@@ -163,6 +196,20 @@ figure.alignleft {
   margin: .8rem 2.4rem .8rem 0;
 }
 
+// Resizing
+//
+// Markup:
+// <img src="../../../static/images/iphone.png" class="{{modifier_class}}" />
+//
+// .size-80 - resize to 80%.
+// .size-70 - resize to 70%.
+// .size-60 - resize to 60%.
+// .size-50 - resize to 50%.
+// .size-40 - resize to 40%.
+// .size-30 - resize to 30%.
+// .size-20 - resize to 20%.
+//
+// Styleguide Layout.Sizes
 $sizes: 80, 70, 60, 50, 40, 30, 20;
 
 /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */

src/scss/_color.scss

@@ -104,6 +104,26 @@ Slides - Backgrounds <section class="bg-primary">
 ================================================== */
 
 /*3 Corp Colors*/
+// Backgrounds
+//
+// Colors we use for backgrounds.
+//
+// Markup:
+// <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>
+//
+// Styleguide Base.backgrounds
 @each $name, $color in $bg-colors {
   .bg-#{$name} {
     background-color: $color;
@@ -145,6 +165,18 @@ Slides - Backgrounds <section class="bg-primary">
   color: #666;
 }
 
+// Transparent Backgrounds
+//
+// Colors we use for backgrounds.
+//
+// Markup:
+// <div class="bg-red">
+//   <div class="bg-trans-dark">Dark</div>
+//   <div class="bg-trans-light">Light</div>
+//   <div class="bg-trans-gradient">Gradient</div>
+// </div>
+//
+// Styleguide Base.backgrounds.transparent
 /*Transparent/Opacity*/
 .bg-trans-dark {
   background: rgba($black, .8);
@@ -159,6 +191,16 @@ Slides - Backgrounds <section class="bg-primary">
   background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%);
 }
 
+// Gradient Backgrounds
+//
+// Colors we use for backgrounds.
+//
+// Markup:
+//   <div class="bg-gradient-h">Horizontal</div>
+//   <div class="bg-gradient-v">Vertical</div>
+//   <div class="bg-gradient-r">Radial</div>
+//
+// Styleguide Base.backgrounds.gradient
 /*Horizontal Gradient*/
 .bg-gradient-h {
   background: linear-gradient(134deg, #32b 0, #62b 100%);