kss - typography

Fullscreen mode

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    ["es2015", {"modules": false}]
+  ],
+
+  "env": {
+    "test": {
+      "plugins": ["transform-es2015-modules-commonjs"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,21 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 233
+end_of_line = lf
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,135 @@
+{
+  "env": {
+    "jest/globals": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "jest"
+  ],
+  "rules": {
+    "no-cond-assign": 0,
+    "no-console": 2,
+    "no-constant-condition": 2,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-empty-character-class": 2,
+    "no-empty": [2, {
+      "allowEmptyCatch": true
+    }],
+    "no-ex-assign": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-semi": 2,
+    "no-func-assign": 2,
+    "no-inner-declarations": 2,
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-obj-calls": 2,
+    "no-regex-spaces": 2,
+    "no-sparse-arrays": 2,
+    "no-unexpected-multiline": 2,
+    "no-unreachable": 2,
+    "no-unsafe-finally": 2,
+    "use-isnan": 2,
+    "valid-jsdoc": [2, {
+      "requireParamDescription": false,
+      "requireReturnDescription": false,
+      "requireReturn": false,
+      "prefer": {"returns": "return"}
+    }],
+    "valid-typeof": 2,
+    "max-len": [1, 80, 2],
+
+    // Best Practices
+    "eqeqeq": 0,
+    "guard-for-in": 2,
+    "no-alert": 0,
+    "no-caller": 2,
+    "no-case-declarations": 2,
+    "no-empty-pattern": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-fallthrough": 2,
+    "no-invalid-this": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-new-wrappers": 2,
+    "no-octal": 2,
+    "no-redeclare": 2,
+    "no-self-assign": 2,
+    "no-throw-literal": 2,
+    "no-unused-labels": 2,
+    "no-with": 2,
+    "no-delete-var": 2,
+    "no-undef": 2,
+    "no-unused-vars": [2, {"args": "none"}],
+    // Stylistic Issues
+    // ----------------------------------------------
+    "array-bracket-spacing": [2, "never"],
+    "brace-style": 2,
+    "camelcase": [2, {"properties": "never"}],
+    "comma-dangle": [2, "never"],
+    "comma-spacing": 2,
+    "comma-style": 2,
+    "computed-property-spacing": 2,
+    "eol-last": 2,
+    "func-call-spacing": 2,
+    "key-spacing": 2,
+    "keyword-spacing": 0,
+    "linebreak-style": 2,
+    "new-cap": 2,
+    "no-array-constructor": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multiple-empty-lines": [2, {"max": 2}],
+    "no-new-object": 2,
+    "no-trailing-spaces": 2,
+    "object-curly-spacing": 2,
+    "one-var": [2, {
+      "var": "never",
+      "let": "never",
+      "const": "never"
+    }],
+    "padded-blocks": [2, "never"],
+    "quote-props": [2, "consistent"],
+    "quotes": [2, "single", {"allowTemplateLiterals": true}],
+    "require-jsdoc": [2, {
+      "require": {
+        "FunctionDeclaration": true,
+        "MethodDefinition": true,
+        "ClassDeclaration": true
+      }
+    }],
+    "semi-spacing": 2,
+    "semi": 2,
+    "space-before-blocks": 2,
+    "space-before-function-paren": [2, "never"],
+    "spaced-comment": [2, "always"],
+    "space-in-parens": [2, "never"],
+
+    // ECMAScript 6
+    // http://eslint.org/docs/rules/#ecmascript-6
+    // ------------------------------------------
+    "arrow-parens": [2, "as-needed"],
+    "constructor-super": 2,
+    "generator-star-spacing": [2, "after"],
+    "no-const-assign": 0,
+    "no-dupe-class-members": 0,
+    "no-new-symbol": 2,
+    "no-this-before-super": 2,
+    "no-var": 2,
+    "prefer-rest-params": 2,
+    "prefer-spread": 2,
+    "prefer-const": 2,
+    "prefer-arrow-callback": 2,
+    "prefer-template": 2,
+    "require-yield": 2,
+    "rest-spread-spacing": 2,
+    "yield-star-spacing": [2, "after"]
+  }
+}

.gitignore

@@ -0,0 +1,19 @@
+# IDE files #
+#############
+.idea/
+
+# Third Party #
+###############
+node_modules/
+coverage
+.eslintcache
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

.sass-lint.yml

@@ -0,0 +1,97 @@
+files:
+  include:
+    - 'src/scss/**/*.scss'
+    - 'doc/kss/templates/**/*.scss'
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  # Extends
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2
+
+  # Mixins
+  mixins-before-declarations: 2
+
+  # Line Spacing
+  one-declaration-per-line: 2
+  empty-line-between-blocks: 2
+  single-line-per-selector: 2
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 2
+  no-color-literals: 2
+  no-combinators: 0
+  no-debug: 2
+  no-disallowed-properties: 0
+  no-duplicate-properties: 2
+  no-empty-rulesets: 2
+  no-extends: 0
+  no-ids: 0
+  no-important: 2
+  no-invalid-hex: 2
+  no-mergeable-selectors: 2
+  no-misspelled-properties: 2
+  no-qualifying-elements: 0
+  no-trailing-whitespace: 2
+  no-trailing-zero: 2
+  no-transition-all: 0
+  no-universal-selectors: 0
+  no-url-domains: 0
+  no-url-protocols: 0
+  no-vendor-prefixes: 2
+  no-warn: 2
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 2
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+
+  # Name Formats
+  class-name-format: 0
+  function-name-format: 2
+  id-name-format: 0
+  mixin-name-format: 2
+  placeholder-name-format: 2
+  variable-name-format: 2
+
+  # Style Guide
+  attribute-quotes: 2
+  bem-depth: 0
+  border-zero: 2
+  brace-style: 2
+  clean-import-paths: 2
+  empty-args: 2
+  hex-length: 2
+  hex-notation: 2
+  indentation: 2
+  leading-zero: 2
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth: 2
+  property-sort-order: 2
+  pseudo-element: 0
+  quotes: 2
+  shorthand-values: 2
+  url-quotes: 2
+  variable-for-property: 0
+  zero-unit: 2
+
+  # Inner Spacing
+  space-after-comma: 2
+  space-before-colon: 2
+  space-after-colon: 2
+  space-before-brace: 2
+  space-before-bang: 2
+  space-after-bang: 2
+  space-between-parens: 2
+  space-around-operator: 2
+
+  # Final Items
+  trailing-semicolon: 2
+  final-newline: 2

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - "6"
+  - "7"

CHANGELOG.md

@@ -1,13 +1,124 @@
-## 0.2 (2017-02-22)
+# 1.3.0 (2017-04-20)
 
-- Auto slide (Demo: why-webslides.html)
+## Misc
 
-## 0.1.1 (2017-02-11)
+- 4 new demos: Longforms, Interviews, Netflix Culture, and Media (YouTube API, videos, images, maps...)
+- Deps updated.
+- Now using [eslint](http://eslint.org/) to enforce code style.
+- Adding a new badge so the release number is quickly seen.
+- [[#51](https://github.com/webslides/webslides/issues/51)] Autoslide is now a plugin.
+- Docs moved to [Wiki](https://github.com/webslides/WebSlides/wiki)!
+- Moved to org!
+- Demos: GitHub links updated.
+
+## New features
+
+- Videos
+  - [[#72](https://github.com/webslides/webslides/issues/72)] Integration with YouTube's API.
+  - [[#54](https://github.com/webslides/webslides/issues/54)] Added video and youtube plugins to allow autoplaying videos (and pausing) entering and leaving the slide.
+  - [[#68](https://github.com/webslides/webslides/issues/68)] Responsive background videos (`<video>`).
+- [[#46](https://github.com/webslides/webslides/issues/46)] Added slide animation for mobile devices. `.slideInLeft` and `.slideInRight`.
+- Added longform elements.
+- Naming conventions: 
+  - Introducing `.text-emoji`.
+  - Introducing `.text-quote`.
+  - Introducing `.text-interview` = `dl.text-interview`, dt (name), dd (question/answer).
+  - `.card` is now a `card: width: 100%`.
+- [[#51](https://github.com/webslides/webslides/issues/51)] Autoslide now pauses if a focusable element gains focus.
+- [[#56](https://github.com/webslides/webslides/issues/56)] Added option to disable looping.
+- [[#74](https://github.com/webslides/webslides/issues/74)] Added `ws-ready` to actually lock the scroll.
+- Fluid `.wrap` (`width: 90%`).
+- `.gallery li:nth-child(n+4)`: `auto-fill` removed. Now: equal width (useful for gallery layouts).
+- Added padding to `form[class*="bg-"]`.
+- A better CSS print: A4 landscape.
+
+## Bugfixes
+
+- Fixed issues with the grid.
+- [[#33](https://github.com/webslides/webslides/issues/33)] Fixed video issue.
+- [[#61](https://github.com/webslides/webslides/issues/61)] Fixed print issue which prevented to export the slides to PDF in an easy way.
+
+
+# 1.2.1 (2017-03-02)
+
+## Bugfixes
+
+- Scrollbar showing in Firefox
+
+# 1.2.0 (2017-03-02)
+
+## New Features
+
+- [[#48](https://github.com/webslides/webslides/issues/48)] Allows to navigate with AvPag & RePag to allow presentation devices to work.
+- [[#49](https://github.com/webslides/webslides/issues/49)] Allowing to go to first and last slides by using home and end keys respectively.
+- [[#50](https://github.com/webslides/webslides/issues/50)] Using the keyboard on inputs and editable content won't trigger any events that might cause navigation.
+- [[#47](https://github.com/webslides/webslides/issues/47)] Allowing options to be configured. [Read More](/docs/technical.md#options).
+
+# 1.1.0 (2017-02-28)
+
+## Bugfixes
+
+- Fixed a bug which caused Chrome on OSX to stutter a lot on vertical transitioning due to elastic scroll bounce.
+- [[#28](https://github.com/webslides/webslides/issues/28)] Fixed scroll on Firefox.
+- [[#38](https://github.com/webslides/webslides/issues/38)] Fixed a bug in Safari which lead to unexpected behaviour using any form of movements.
+- [[#10](https://github.com/webslides/webslides/issues/10)] Fixed animation flash on Safari.
+
+## New Features
+
+- [[#1](https://github.com/webslides/webslides/issues/1)] Adding option to click to go to the next slide. Read more [here](https://github.com/webslides/webslides/blob/master/docs/click-to-nav.md).
+- [[#1](https://github.com/webslides/webslides/issues/1)] Improved sliding with mouse scroll and touchpad. It's now possible to use scroll to move an horizontal presentation.
+It's also possible to scroll horizontally on horizontal presentations to move forward/backwards the presentation.
+
+## Regression
+
+- Introduced a minor bug on iOS Safari which leads to the bottom part of the page not being visible on the first scroll. This is likely a browser bug but it has been unearthed in this version due to a much needed improvement on scrolling behaviour bugs. We're trying to investigate a bit more and will provide a fix ASAP.
+
+# 1.0.0 (2017-02-23)
+
+This release is a special one since it sets up in the path of a better development environment. Although it's far from
+perfect, it's a solid beginning.
+
+All the code has been migrated from **jQuery** with ES5 to **vanilla JavaScript with ES2015 (or ES6) and is fully modular**.
+This means that WebSlides is a (base module)[src/js/modules/webslides.js] with a solid API (few public methods) and
+it's extended by (plugins)[src/js/plugins]. This leads to more granularity and less code to dive through while fixing a
+bug.
+
+**The benefit from this approach is that now it's really easy to extend WebSlides** to achieve what you need. You can also
+overwrite current plugins. Say you don't like the current navigation with arrows and want to create a menu instead, you
+can just write that for yourself with your custom needs and register it as `nav` and it will overwrite our nav with
+your code.
+
+We hope this leads to a better environment in which WebSlides can grow better.
+
+All the technical specs live now in [this document](docs/technical.md).
+
+## Bugfixes
+
+- Fixed a bug with back/next buttons on the browser which lead the nav bar to not work.
+
+## New Features
+
+- Linking to slides without window open.
+- Added custom events to listen for. `ws:init` whenever webslides is ready and `ws:slide-change` whenever a slide changes.
+- Added play/stop methods.
+
+## Breaking Changes
+
+- This "stable" release drops the jQuery requirement and leans on ES2015 for the architecture. Hence, it's no longer possible
+to use the library as before.
+
+# 0.2.0 (2017-02-22)
+
+## New Features
+
+- Adding autoslide option.
+
+# 0.1.1 (2017-02-11)
 
 - Transform the library into an object.
-- .tabs removed.
-- webslides-lite.js removed.
+- `.tabs` removed.
+- `webslides-lite.js` removed.
 
-## 0.1 (2017-01-08)
+# 0.1.0 (2017-01-08)
 
 - Initial release.

README.md

@@ -1,71 +1,22 @@
-# WebSlides = Good Karma
-Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — [https://webslides.tv/demos](https://webslides.tv/demos). 
+# WebSlides = Create stories with Karma
 
-A new release (at least) every 8th day of the month. Version 0.1: Jan 8, 2017.
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
+[![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)
+[![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)
+[![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)
 
-### Why WebSlides?
-Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
+Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos).
 
-### Features
+* * *
+### Download
+Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
+* * *
 
-- Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe.
-- Slide counter.
-- Permalinks: go to a specific slide.
-- Autoslide
-- Simple CSS alignments. Put content wherever you want (vertical centering...)
-- 40+ components: background images/videos, quotes, cards, covers...
-- Flexible blocks with auto-fill and equal height.
-- Fonts: Roboto, Maitree (Serif), and San Francisco.
-- Vertical rhythm (use multiples of 8).
-
-### Markup
-
-- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
-- Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.
-
-<pre>&lt;article id="webslides"&gt;
-    &lt;section&gt;
-    	&lt;h1&gt;Slide 1&lt;/h1&gt;
-    &lt;/section&gt;
-    &lt;section class="bg-black aligncenter"&gt;
-    <span class="code-comment">&lt;!-- .wrap = container 1200px --&gt;</span>
-    	&lt;div class="wrap"&gt;
-    		&lt;h1&gt;Slide 2&lt;/h1&gt;
-    	&lt;/div&gt;
-    &lt;/section&gt;
-&lt;/article&gt;</pre>
-
-#### Vertical Sliding
-
-<pre>&lt;article id="webslides" class="vertical"&gt;</pre>
-
-### How it works
-
-You need to add the follow javascript to initialize the webslides object.
-
-```javascript
-var slide = jQuery('#webslides').webslides();
-```
-
-#### Auto slide
-
-```javascript
-var slide = jQuery('#webslides').webslides({interval: 5000});
-```
-Now you can use the slide with these functions:
-
-```javascript
-// Moving to next slide
-slide.nextSlide();
-// Moving to previous slide
-slide.previousSlide();
-// Moving to a specific slide
-slide.goToSlide(n);
-```
 
 ### What's in the download?
 
-The download includes demos and images (devices and logos).
+The download includes demos and images (devices and logos). 
 All content is for demo purposes only. Images are property of their respective owners.
 
 ```
@@ -82,30 +33,74 @@ webslides/
 └── images/
 ```
 
+## Features
+
+- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
+- Slide counter.
+- Permalinks: go to a specific slide.
+- Autoslide.
+- Click to nav.
+- Simple CSS alignments. Put content wherever you want (vertical centering...)
+- 40+ components: background images/videos, quotes, cards, covers...
+- Flexible blocks with auto-fill and equal height.
+- Fonts: Roboto, Maitree (Serif), and San Francisco.
+- Vertical rhythm (use multiples of 8).
+
+## Markup
+
+- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
+- Each parent `<section>` in the `#webslides` element is an individual slide.
+
+```html
+<article id="webslides">
+    <section>
+        <h1>Slide 1</h1>
+    </section>
+    <section class="bg-black aligncenter">
+    <!-- .wrap = container 1200px -->
+        <div class="wrap">
+            <h1>Slide 2</h1>
+        </div>
+    </section>
+</article>
+```
+
+### Vertical Sliding
+
+```html
+<article id="webslides" class="vertical">
+```
+
 ### CSS Syntax (classes)
 
-- Typography: .text-landing, .text-data, .text-intro...
-- Background Colors: .bg-primary, .bg-apple, .bg-blue...
-- Background Images: .background,.background-center-bottom...
-- Cards: .card-50, .card-40...
-- Flexible Blocks: .flexblock.clients, .flexblock.metrics...
-
+- Typography: `.text-landing`, `.text-data`, `.text-intro`...
+- Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`...
+- Background Images: `.background`,`.background-center-bottom`...
+- Cards: `.card-50`, `.card-40`...
+- Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...
 
 ### Extensions
 
 You can add:
+
 - [Unsplash](https://unsplash.com) photos
 - [animate.css](https://daneden.github.io/animate.css)
 - [particles.js](https://github.com/VincentGarreau/particles.js)
+- [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
 - [pt](http://williamngan.github.io/pt/)
 
-### License
 
-WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT).
-Use it to make something cool.
+### Dive In!
 
+- Do not miss [our demos](https://webslides.tv/). 
+- Want to get techie? Read [our wiki](wiki):
+  - [FAQ](https://github.com/webslides/WebSlides/wiki)
+  - [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
+  - [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)
+  - [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)
+ 
 ### Credits
 
 - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
-- Thanks [@LuisSacristan](https://twitter.com/luissacristan) for the javascript code :)
+- Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
 - Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).

demos/classes.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
 
     <!-- CSS Base -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
-
-    <!-- CSS Colors -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +93,18 @@
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
           - Vertical sliding = <article id="webslides" class="vertical">
-          - <div class="wrap"> = container 1200px
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-black-blue aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <p class="text-subtitle">WebSlides Tutorial</p>
             <h1 class="text-landing">Classes</h1>
             <p class="text-symbols">* * * </p>
             <p>
-              <a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -119,7 +115,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2><strong>WebSlides Classes</strong></h2>
             <p class="text-intro">Friendly naming conventions.</p>
@@ -226,7 +222,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -244,7 +240,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px with fadein&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%) with fadein&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -405,7 +401,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.grid + .column</h2>
             <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -417,7 +413,7 @@
               </div>
               <!-- end .column -->
               <div class="column">
-                <figure><img src="../static/images/setup.png" alt="WebSlides Files"></figure>
+                <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
               </div>
               <!-- end .column -->
               <div class="column">
@@ -432,7 +428,7 @@
           <!-- end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.grid.<strong>vertical-align</strong> + .column</h2>
             <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -444,7 +440,7 @@
               </div>
               <!-- end .column -->
               <div class="column">
-                <figure><img src="../static/images/setup.png" alt="WebSlides Files"></figure>
+                <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
               </div>
               <!-- end .column -->
               <div class="column">
@@ -518,43 +514,6 @@
           </div>
           <!-- .end .wrap -->
         </section>
-        <section>
-          <div class="wrap">
-            <div class="card-50 bg-white">
-              <figure>
-                <img src="https://source.unsplash.com/POYDluw0tyw/800x600" alt="Big Ben, London">
-                <figcaption>
-                  <a href="https://unsplash.com/@dibert" title="David Dibert">
-                    <svg class="fa-camera">
-                      <use xlink:href="#fa-camera"></use>
-                    </svg>
-                    David Dibert (Unsplash)
-                  </a>
-                </figcaption>
-              </figure>
-              <!-- end figure-->
-              <div class="flex-content">
-                <h2>
-                  Discover London
-                </h2>
-                <p>.card-50.bg-white</p>
-                <ul class="description">
-                  <li>
-                    <strong title="Density">Density:</strong> 5,518/km<sup>2</sup>
-                  </li>
-                  <li><strong title="Population">Population:</strong> 8,673,713</li>
-                  <li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li>
-                </ul>
-                <p>
-                  There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region.
-                </p>
-              </div>
-              <!-- end .flex-content-->
-            </div>
-            <!-- end .card-50-->
-          </div>
-          <!-- .end .wrap -->
-        </section>
         <section>
          <div class="wrap">
           <div class="card-50 bg-white">
@@ -590,6 +549,43 @@
          </div>
           <!-- .end .wrap -->
         </section>
+        <section>
+          <div class="wrap">
+            <div class="card-50 bg-white">
+              <figure>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1241.8442158987712!2d-0.1268272!3d51.5005848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa9!2sBig+Ben!5e0!3m2!1ses!2ses!4v1491497625579" width="800" height="600" allowfullscreen></iframe>
+                <figcaption>
+                  <a href="https://maps.google.com" title="Google Maps">
+                    <svg class="fa-maps">
+                      <use xlink:href="#fa-maps"></use>
+                    </svg>
+                    Google Maps
+                  </a>
+                </figcaption>
+              </figure>
+              <!-- end figure-->
+              <div class="flex-content">
+                <h2>
+                  Discover London
+                </h2>
+                <p>.card-50.bg-white</p>
+                <ul class="description">
+                  <li>
+                    <strong title="Density">Density:</strong> 5,518/km<sup>2</sup>
+                  </li>
+                  <li><strong title="Population">Population:</strong> 8,673,713</li>
+                  <li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li>
+                </ul>
+                <p>
+                  There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region.
+                </p>
+              </div>
+              <!-- end .flex-content-->
+            </div>
+            <!-- end .card-50-->
+          </div>
+          <!-- .end .wrap -->
+        </section>
         <section class="fullscreen">
           <div class="card-50">
             <figure>
@@ -711,7 +707,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-h aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h1>Horizontal Gradient</h1>
             <p><code>section.bg-gradient-h</code></p>
@@ -726,7 +722,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-v aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h1>Vertical Gradient</h1>
             <p><code>section.bg-gradient-v</code></p>
@@ -768,10 +764,10 @@
             <div class="content-left">
               <h3>Fullscreen Background Images</h3>
               <pre>&lt;section&gt;
-	&lt;span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt;
-	&lt;section&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/section&gt;
+  &lt;span <strong>class="background"</strong> style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
               <p>How to <a href="https://source.unsplash.com/">embed Unsplash photos</a>?</p>
             </div>
@@ -856,7 +852,7 @@
         </section>
         <section class="aligncenter bg-black">
           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.background.anim</h2>
           </div>
@@ -1545,7 +1541,7 @@
           <!-- .end card-50 -->
         </section>
         <section class="bg-gradient-gray">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h3>.flexblock.reasons</h3>
             <hr>
@@ -1723,7 +1719,7 @@
           <p><code>.text-data</code></p>
         </section>
         <section>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <p class="text-context">Why WebSlides? .text-context</p>
             <h2>WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.</h2>
@@ -1828,7 +1824,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter text-serif">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides is incredibly easy and versatile.</h2>
@@ -1905,12 +1901,12 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -1933,16 +1929,15 @@
     </main>
     <!--main-->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+
+    <script>
+      window.ws = new WebSlides();
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>

demos/components.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
 
     <!-- CSS Base -->
-    <link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css">
-
-    <!-- CSS Colors -->
-    <link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +93,18 @@
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
           - Vertical sliding = <article id="webslides" class="vertical">
-          - <div class="wrap"> = container 1200px
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-black-blue aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <p class="text-subtitle">WebSlides Tutorial</p>
             <h1 class="text-landing">Components</h1>
             <p class="text-symbols">* * *</p>
             <p>
-              <a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -186,12 +182,12 @@
                     <li><a target="_blank" href="#slide=101">Background Videos</a></li>
                     <li><a target="_blank" href="#slide=103">Embedding videos, charts...</a></li>
                     <li><a target="_blank" href="#slide=108">Maps</a></li>
-                    <li><a target="_blank" href="#slide=109">500+ SVG Icons</a></li>
-                    <li><a target="_blank" href="#slide=110">Logos</a></li>
-                    <li><a target="_blank" href="#slide=111">Avatars</a></li>
-                    <li><a target="_blank" href="#slide=112">Devices</a></li>
-                    <li><a target="_blank" href="#slide=113">Screenshots</a></li>
-                    <li><a target="_blank" href="#slide=114">CSS Animations</a></li>
+                    <li><a target="_blank" href="#slide=110">500+ SVG Icons</a></li>
+                    <li><a target="_blank" href="#slide=111">Logos</a></li>
+                    <li><a target="_blank" href="#slide=112">Avatars</a></li>
+                    <li><a target="_blank" href="#slide=113">Devices</a></li>
+                    <li><a target="_blank" href="#slide=114">Screenshots</a></li>
+                    <li><a target="_blank" href="#slide=115">CSS Animations</a></li>
                   </ol>
                 </div>
               </li>
@@ -200,7 +196,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -218,7 +214,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px with fadein&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%) with fadein&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -319,7 +315,6 @@
         <section>
           <div class="wrap">
             <h1>Navigation</h1>
-
               <nav role="navigation">
                 <ul>
                   <li><a href="">About</a></li>
@@ -368,8 +363,7 @@
                 </ul>
               </nav>
               <p>nav.navbar</p>
-            
-            <hr>
+              <hr>
               <div class="grid">
                 <div class="column">
                   <h3>Company</h3>
@@ -428,8 +422,8 @@
                   </ul>
                 </div>
                 <!-- .end .column -->
-              </div>
-              <!-- .end .grid -->
+            </div>
+            <!-- end .tab-content -->
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1690,7 +1684,7 @@
             <p class="text-intro">Create a simple web presence easily. <br> Clean markup and lovely CSS.
             </p>
             <p>
-              <a href="https://github.com/jlantunez/webslides" class="button">
+              <a href="https://github.com/webslides/webslides" class="button">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -1721,18 +1715,18 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="cta-cover">
               <h1><strong>HTML Presentations</strong> Made Easy</h1>
               <p class="alignright">
-                <a class="button" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides">
+                <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
                   <svg class="fa-cloud-download">
                     <use xlink:href="#fa-cloud-download"></use>
                   </svg>
                   WebSlides
                 </a>
-                <span class="try"><a href="../demos/index.html" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/jlantunez/webslides" title="Github">Github</a></span>
+                <span class="try"><a href="../demos/index.html" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
               </p>
             </div>
             <ul class="flexblock features">
@@ -1794,10 +1788,51 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <h1 class="text-landing">Tell a Story</h1>
-            <p class="text-intro"><strong>Hi, this is WebSlides</strong>. HTML presentations made simple. <br>I'm a cute solution with clean markup and <strong>lovely CSS</strong>.</p>
+            <div id="tab-3" class="tab-content current">
+              <h1 class="text-landing">Tell a Story</h1>
+              <p class="text-intro"><strong>Hi, this is WebSlides</strong>. HTML presentations made simple. <br>I'm a cute solution with clean markup and <strong>lovely CSS</strong>.</p>
+            </div>
+            <div id="tab-4" class="tab-content">
+              <ul class="flexblock features">
+                <li>
+                  <div>
+                    <svg class="fa-heart-o">
+                      <use xlink:href="#fa-heart-o"></use>
+                    </svg>
+                    <h2>Indexed content</h2>
+                    Sharing is caring.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h2>
+                      <svg class="fa-magic">
+                        <use xlink:href="#fa-magic"></use>
+                      </svg>
+                      Just essential features
+                    </h2>
+                    Keyboard navigation...
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-bolt">
+                      <use xlink:href="#fa-bolt"></use>
+                    </svg>
+                    <h2>
+                      Prototype faster
+                    </h2>
+                    with clean code
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <ul class="tabs">
+              <li class="tab current" data-tab="tab-3">Purpose</li>
+              <li class="tab" data-tab="tab-4">Benefits</li>
+            </ul>
           </div>
         </section>
         <section class="bg-black aligncenter">
@@ -1900,7 +1935,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$56 Billion</h2>
             <h3>Revenue in Q3 2017</h3>
@@ -1967,7 +2002,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides was made to inspire people.</h2>
@@ -2104,7 +2139,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>iPhone 7</h2>
@@ -2384,7 +2419,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -2398,9 +2433,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good.</p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Sheryl_Sandberg">Sheryl Sandberg</a>, COO of Facebook.</cite></p>
             </blockquote>
@@ -2408,9 +2443,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-primary">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>Finally, everything you need to make HTML presentations in a simple way.</p>
               <p><cite><a href="https://twitter.com/jlantunez">@jlantunez</a></cite></p>
             </blockquote>
@@ -2496,7 +2531,7 @@
         </section>
         <section class="bg-black">
           <span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-70 aligncenter">
             <h2>Planning a vacation?</h2>
             <p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -2511,7 +2546,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-green">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -2585,7 +2620,7 @@
         </section>
         <section class="bg-primary">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-30">
             <p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
             <form action="/" method="post">
@@ -2625,10 +2660,10 @@
             </h3>
             <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
             <pre>&lt;section&gt;
-	&lt;span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+  &lt;span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
             <p>
               <svg class="fa-info">
@@ -2644,11 +2679,11 @@
           <div class="wrap size-50">
             <h1 class="text-landing text-shadow">Opacity</h1>
             <p><code>[class*="bg-"] > .background.light</code></p>
-            <pre>&lt;section class="bg-black"&gt;
-	&lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+            <pre>&lt;section&gt;
+  &lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
           </div>
         </section>
@@ -2657,11 +2692,11 @@
           <div class="wrap size-50">
             <h1 class="text-landing text-shadow">Opacity</h1>
             <p><code>[class*="bg-"] > .background.dark</code></p>
-            <pre>&lt;section class="bg-black"&gt;
-	&lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+            <pre>&lt;section&gt;
+  &lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
           </div>
         </section>
@@ -2730,7 +2765,7 @@
         </section>
         <section class="aligncenter bg-black">
           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2>.background.anim</h2>
           </div>
@@ -2738,26 +2773,36 @@
         </section>
         <section>
           <div class="wrap size-60">
-            <h3>Background Videos</h3>
-            <pre>&lt;video class="background-video" autoplay muted loop poster="image.jpg"&gt;
-  &lt;source src="video.mp4" type="video/mp4"&gt;
-&lt;/video&gt;</pre>
-            <p><code>.background-video</code></p>
+            <h3>Background videos</h3>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;video autoplay loop poster="image.jpg"&gt;
+      &lt;source src="video.mp4" type="video/mp4"&gt;
+    &lt;/video&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p>.fullscreen > .embed (responsive) > video</p>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-blue aligncenter">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-blue aligncenter">
+         <div class="embed dark">
+          <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
           </video>
-          <div class="wrap">
-            <h2><strong>Be Awesome</strong></h2>
-            <p>Overlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
           </div>
-          <!-- .end .wrap -->
+          <!-- .end .embed -->
+          <div class="wrap">
+            <h2><strong>Muted</strong></h2>
+            <p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
+           </div>
+           <!-- .end .wrap -->
         </section>
         <section class="bg-black aligncenter">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/MDGpwpMY2Ws/')"></span>
+          <!-- background with a frame frame -->
+          <span class="background frame"></span>
           <div class="wrap">
             <h2>Embedding Media</h2>
             <p>Videos, charts, maps...</p>
@@ -2767,12 +2812,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -2790,7 +2836,7 @@
           <div class="wrap size-60">
             <!-- Responsive video/iframe... Add <div class="embed"> -->
             <div class="embed">
-              <iframe width="800" height="450" src="https://www.youtube.com/embed/_m67JbGjWnc?list=PL27Ptt5XwkS39IrY8SeNaELghs_NLjMEs" allowfullscreen></iframe>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -2826,6 +2872,43 @@
           </div>
           <!-- .end .wrap -->
         </section>
+        <section>
+          <div class="wrap">
+            <div class="card-50 bg-white">
+              <figure>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
+                <figcaption>
+                  <a href="https://maps.google.com" title="Google Maps">
+                    <svg class="fa-map">
+                      <use xlink:href="#fa-map"></use>
+                    </svg>
+                    Google Maps
+                  </a>
+                </figcaption>
+              </figure>
+              <!-- end figure-->
+              <div class="flex-content">
+                <h2>
+                  Discover Seville
+                </h2>
+                <p>.card-50.bg-white</p>
+                <ul class="description">
+                  <li>
+                    <strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup>
+                  </li>
+                  <li><strong class="text-label" title="Population">Population:</strong> 703,021</li>
+                  <li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
+                </ul>
+                <p>
+                  There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcázar palace complex, the Cathedral and the General Archive of the Indies.
+                </p>
+              </div>
+              <!-- end .flex-content-->
+            </div>
+            <!-- end .card-50-->
+          </div>
+          <!-- .end .wrap -->
+        </section>
         <section>
           <div class="wrap size-50">
             <p class="text-subtitle">Optional &middot; 500+ icons</p>
@@ -2897,9 +2980,9 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>"An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism."</p>
               <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
             </blockquote>
@@ -2967,7 +3050,7 @@
               <h2>Screenshots</h2>
               <p>HTML/CSS Browser.</p>
               <pre>&lt;figure class="browser"&gt;
-	&lt;img alt="Screenshot" src="image.png"&gt;
+  &lt;img alt="Screenshot" src="image.png"&gt;
 &lt;/figure&gt;</pre>
             </div>
             <!-- .end .content-left -->
@@ -2985,7 +3068,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -3022,40 +3105,13 @@
           </div>
           <!-- .end .wrap -->
         </section>
-        <section>
-          <div class="wrap size-60">
-            <h3>WebSlides is clean, consistent, and <strong>extensible</strong>.</h3>
-            <p>If you want to add more animations, videos...</p>
-            <ul class="flexblock border blink">
-              <li>
-                <a href="https://github.com/daneden/animate.css/" title="Animate.css">
-                  <h2>Animate.css</h2>
-                  Highly recommended. It is so easy and cool.
-                </a>
-              </li>
-              <li>
-                <a href="https://github.com/VincentGarreau/particles.js" title="particles.js">
-                  <h2>particles.js</h2>
-                  A lightweight .js library for creating particles.
-                </a>
-              </li>
-              <li>
-                <a href="https://pixabay.com/en/videos" title="Pixabay">
-                  <h2>Pixabay</h2>
-                  Beautiful background videos. 100% license free.
-                </a>
-              </li>
-            </ul>
-          </div>
-          <!-- .end .wrap -->
-        </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in Seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -3078,16 +3134,15 @@
     </main>
     <!--main-->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+
+    <script>
+      window.ws = new WebSlides();
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>

demos/index.html

@@ -9,7 +9,7 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
       Thanks,
       @jlantunez.
@@ -26,10 +26,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
 
     <!-- CSS Base -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
-
-    <!-- CSS Colors -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +68,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,33 +83,33 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
 
     <main role="main">
-      <article id="webslides" class="vertical">
+      <article>  <!-- Slideshow? id="webslides" -->
 
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
           - Vertical sliding = <article id="webslides" class="vertical">
-          - <div class="wrap"> = container 1200px
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section>
           <span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1><strong>WebSlides Demos</strong></h1>
             <p class="text-intro">All of these presentations are free and responsive.<br>
               40+ <a href="../demos/components.html" title="WebSlides Components">components</a> with a solid <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
-            <p>Share your slides using <a target="_blank" href="https://twitter.com/search?f=tweets&q=%23webslides&src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
+            <p>Share your slides using <a href="https://twitter.com/search?q=%23webslides&amp;src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
           </div>
           <!-- .end .wrap -->
         </section>
         <section class="bg-white">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <ul class="flexblock gallery">
               <li>
@@ -121,7 +118,7 @@
                     <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
                     <figcaption>
                       <h2>Why WebSlides?</h2>
-                      <time datetime="2017-12-08T21:21:44-05:00">Jan 08, 2017</time>
+                      <time datetime="2017-01-08T16:21:44-08:00">Jan 08, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -132,7 +129,7 @@
                     <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
                     <figcaption>
                       <h2>Landings</h2>
-                      <time datetime="2017-01-07T19:21:26-05:00">Jan 07, 2017</time>
+                      <time datetime="2017-01-07T19:21:26-08:00">Jan 07, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -143,7 +140,7 @@
                     <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
                     <figcaption>
                       <h2>Portfolios</h2>
-                      <time datetime="2017-01-06T21:22:21-05:00">Jan 06, 2017</time>
+                      <time datetime="2017-01-06T21:22:21-08:00">Jan 06, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -154,7 +151,40 @@
                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
                     <figcaption>
                       <h2>Apple Keynote</h2>
-                      <time datetime="2017-01-05T20:13:48-05:00">Jan 05, 2017</time>
+                      <time datetime="2017-01-05T20:13:48-08:00">Jan 05, 2017</time>
+                    </figcaption>
+                  </figure>
+                </a>
+              </li>
+              <li>
+                <a href="../demos/netflix-culture.html" title="Netflix's Culture">
+                  <figure>
+                    <img alt="Thumbnail Netflix's Culture" src="https://webslides.tv/static/images/demos-netflix.png">
+                    <figcaption>
+                      <h2>Netflix's Culture</h2>
+                      <time datetime="2017-04-16T20:16:48-08:00">Mar 16, 2017</time>
+                    </figcaption>
+                  </figure>
+                </a>
+              </li>
+              <li>
+                <a href="../demos/longforms.html" title="Longform Articles">
+                  <figure>
+                    <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longforms.png">
+                    <figcaption>
+                      <h2>Longforms</h2>
+                      <time datetime="2017-04-15T20:16:48-08:00">Apr 15, 2017</time>
+                    </figcaption>
+                  </figure>
+                </a>
+              </li>
+              <li>
+                <a href="../demos/interviews.html" title="Interviews">
+                  <figure>
+                    <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
+                    <figcaption>
+                      <h2>Interviews</h2>
+                      <time datetime="2017-04-14T24:08:16-24:32">Apr 14, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -164,10 +194,10 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2 class="aligncenter">General Questions</h2>
-            <p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p>
+            <p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a> &middot; <a href="../demos/media.html" title="WebSlides Media">Media</a>.</p>
             <div class="grid">
               <div class="column">
                 <h6>Why WebSlides? Good karma</h6>
@@ -177,12 +207,12 @@
               </div>
               <!-- end .column -->
               <div class="column">
-                <figure><img src="../static/images/setup.png" alt="WebSlides Files"></figure>
+                <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
               </div>
               <!-- end .column -->
               <div class="column">
                 <h6>What can you do with WebSlides?</h6>
-                <p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/components.html#slide=98">background images</a>, <a href="../demos/components.html#slide=101">videos</a>...
+                <p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/media.html#slide=2">background images, videos</a>...
                 </p>
                 <h6>How easy is WebSlides?</h6>
                 <p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
@@ -194,12 +224,12 @@
           <!-- end .wrap -->
         </section>
         <section class="bg-white aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -222,16 +252,14 @@
     </main>
     <!-- end main -->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+    <script>
+      window.ws = new WebSlides();
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>

demos/interviews.html

@@ -0,0 +1,358 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CLEAN MARKUP = GOOD KARMA.
+      Hi source code lover,
+
+      you're a curious person and a fast learner ;)
+      Let's make something beautiful together. Contribute on Github:
+      https://github.com/webslides/webslides
+
+      Thanks!
+    -->
+
+    <!-- SEO -->
+    <title>WebSlides Demo: Longform Interviews</title>
+    <meta name="description" content="WebSlides is about telling stories. Create longform interviews with ease.">
+
+    <!-- URL CANONICAL -->
+    <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
+
+    <!-- CSS Base -->
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
+
+    <!-- Optional - CSS SVG Icons (Font Awesome) -->
+    <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
+
+    <!-- SOCIAL CARDS (ADD YOUR INFO) -->
+
+    <!-- FACEBOOK -->
+    <meta property="og:url" content="http://your-url.com/permalink">
+
+    <!-- EDIT -->
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="WebSlides Demo: Longform Interviews" />
+
+    <!-- EDIT -->
+    <meta property="og:description" content="Create longform interviews with ease. Just the essentials.">
+
+    <!-- EDIT -->
+    <meta property="og:updated_time" content="2017-03-28T12:17:24">
+
+    <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" >
+
+    <!-- EDIT -->
+    <meta property="og:image:width" content="800">
+    <meta property="og:image:height" content="429">
+
+    <!-- TWITTER -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@webslides">
+
+    <!-- EDIT -->
+    <meta name="twitter:creator" content="@jlantunez">
+
+    <!-- EDIT -->
+    <meta name="twitter:title" content="WebSlides Demo: Longform Interviews">
+
+    <!-- EDIT -->
+    <meta name="twitter:description" content="Create longform interviews with ease. Just the essentials.">
+
+    <!-- EDIT -->
+    <meta name="twitter:image" content="../static/images/share-webslides.jpg">
+
+    <!-- EDIT -->
+
+    <!-- FAVICONS -->
+    <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
+    <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
+    <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
+    <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
+    <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
+
+    <!-- Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#333333">
+
+  </head>
+  <body>
+    <header role="banner">
+      <nav role="navigation">
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </ul>
+      </nav>
+    </header>
+
+    <main role="main">
+      <article>
+
+        <section class="bg-black">
+          <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
+          <span class="background" style="background-image:url('https://source.unsplash.com/E695OZJiju4/1600x800')"></span>
+          <!--.wrap = container width: 90% -->
+          <div class="wrap">
+            <p class="text-subtitle">Powered by <a href="https://webslides.tv">WebSlides</a>.</p>
+            <h1>
+              <strong>Designing Interviews</strong>
+            </h1>
+            <p>All content is for demo purposes only.</p>
+            <p><img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar David Yang"> By David Yang. Nov 8th, 2024.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-white">
+          <!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
+          <div class="wrap longform">
+            <h2><strong>The Art of the Interview</strong></h2>
+            <p class="text-intro">The stories you tell, whether in text form, by way of video or through audio, are only as good as the information you gather.</p>
+            <p>Interviewing is the cornerstone of journalism. Interviews usually take place face to face and in person, although modern communications technologies such as the Internet have enabled conversations to happen in which parties are separated geographically, such as with videoconferencing software, and of course telephone interviews can happen without visual contact.</p>
+            <hr>
+            <dl class="text-interview">
+              <dt>David:</dt>
+              <dd>
+                <p><strong>Hi, this is a WebSlides Demo, where we interview the people who make us happy. I’m your host, David González. This week I interviewed lawyer Sheryl Hadid. Hi Sheryl!</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>Hi David!</p>
+              </dd>
+              <dt>David:</dt>
+              <dd>
+                <p><strong>Are interviews copyrighted? When does an interview become copyrightable?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>The answer is it depends. Copyright of speech given during an interview relies heavily on the "fixation" element of copyright law. When a work is fixed in a copy or recording, the work is created. This gives the work its copyright. Therefore, when an interview is physically recorded it becomes copyrighted.</p>
+              </dd>
+              <dt>David:</dt>
+              <dd>
+                <p><strong>How could the person being interviewed own the copyright to an interview?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>This may be a surprise but there are moments when the person being interviewed could in fact have copyright ownership in their words. For example, if the person being interviewed receives a list of questions from the interviewer and records their calculated responses, they could have copyright ownership in their answers because they not the interviewer actually wrote down or otherwise recorded their response.</p>
+              </dd>
+              <dd>
+                <blockquote class="text-quote">
+                  <p>People want to be smart. So, if you ask smart questions and show an interest in a particular subject they love sharing their insight.<code>.text-quote</code>.</p>
+                </blockquote>
+              </dd>
+              <dd>
+                <p>However, courts are hesitant to apply this concept broadly to spoken interviews because of the impact it could have on the First Amendment and the heavy caseload it would bring to an already overloaded court system. See Falwell v. Penthouse Intern., Ltd.  This also opens the door for other legal arguments such as fair use. Furthermore, there are times when contractual releases could affect the copyright and alter default copyright rules. </p>
+              </dd>
+            </dl>
+            <hr>
+            <div class="text-pull embed">
+              <iframe width="800" height="450" src="https://www.youtube.com/embed/7xYZ3rMT8_A?rel=0&amp;controls=0" allowfullscreen></iframe>
+            </div>
+            <!--.text-pull.embed (responsive video) -->
+            <hr>
+            <dl class="text-interview">
+              <dt>David:</dt>
+              <dd>
+                <p><strong>What are some methods to record an interview and what should the person being interviewed do?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>Most often when problems with interview ownership arise it’s because persons being interviewed are unhappy with the way an interviewer uses their responses during interviews to mislead readers or viewers of a broadcast. This causes interviewees to claim their copyright was infringed because they claim to own the copyright to their speech during the interview.</p>
+              </dd>
+              <dt>David:</dt>
+              <dd>
+                <p><strong>When do problems with interview ownership arise, and who usually owns the copyright?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>The most successful way to fix an interview is for interviewers to audio record or hand write the responses of the person being interviewed. If the interview is recorded by hand, it is helpful if the writing is legible and clearly communicates the conversation because it may help solve questions about fixation.  Short hand that only describes excerpts from the interview typically are not enough to constitute fixation and copyright ownership. So please remember, if there is no fixation of the interview then no copyright exists in that interview.</p>
+              </dd>
+              <dd>
+                <p>Further, if you are being interviewed please be aware that you do not possess ownership over your responses in most situations. It is always best to briefly think about your answer before you respond to avoid the misuse of your words by others.  And if you truly don’t feel comfortable being interviewed by a particular media source, remember you always have the power to say no to doing the interview.</p>
+              </dd>
+            </dl>
+          </div>
+        </section>
+        <section>
+          <!--.wrap = container width: 90% -->
+          <div class="wrap size-50 aligncenter">
+            <h3><strong>Things you can do with WebSlides</strong></h3>
+            <p class="text-intro"><a href="/demos/why-webslides" title="Why WebSlides?">Presentations</a>, <a href="/demos/landings" title="Landings">landings</a>, <a href="/demos/portfolios" title="Portfolios">portfolios</a>, and <a href="/demos/longforms" title="Longforms">longforms</a>.</p>
+            <div class="bg-white shadow">
+              <ul class="flexblock reasons">
+                <li>
+                  <h2>An opportunity to engage.</h2>
+                  <p><a href="https://webslides.tv" title="WebSlides">WebSlides</a> is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
+                </li>
+                <li>
+                  <h2>Work better, faster.</h2>
+                  <p>Designers, marketers, and journalists can now focus on the content. Simply <a href="https://webslides.tv/demos" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p>
+                </li>
+              </ul>
+            </div>
+            <!-- .end .bg-white shadow -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-white">
+          <!--.wrap = container width: 90% -->
+          <div class="wrap longform">
+            <dl class="text-interview">
+              <dt>David:</dt>
+              <dd>
+                <p><strong>Is a web address (a domain name) subject to copyright law?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>No, for a variety of reasons web addresses (also known as a domain names or URLs) aren't protected by copyright. Even though copyright doesn’t protect domain names, that doesn’t mean domain names are entirely unprotected. Trademark law protects web addresses. And for a variety of reasons, companies are often more apt to go after individual instances of trademark infringement than individual copyright infringers. </p>
+              </dd>
+              <dt>David:</dt>
+              <dd>
+                <p><strong>Are there easier alternatives than copyright?</strong></p>
+              </dd>
+              <dt>Sheryl:</dt>
+              <dd>
+                <p>Some persons and organizations hope to make the rules about using and reusing work more user-friendly. These groups may make their work freely available under <a href="https://creativecommons.org/">Creative Commons</a> licenses or expressly abandon them into the public domain. </p>
+              </dd>
+              <dd>
+                <p>But just because an author employs either of these copyright alternatives, that doesn’t mean that they are completely free of legal issues. For example, imagine you’re an advertising designer for Virgin Mobile, and you need a photo of a pretty teenage girl for your latest ad. You find a photo on Flickr that is free to use under a Creative Commons Attribution license. You use the photo in your ad campaign and plaster the photo on bus stops across Australia. This is exactly what happened, and since the photographer was adequately credited and copyright issues were non-existent everybody lived happily ever after, right?</p>
+              </dd>
+              <dd>
+                <p>If you have any questions about alternatives to the standard copyright scheme or how these alternatives are being utilized by thousands of artists every day, feel free to contact <a href="https://www.newmediarights.org/about_us/contact_us">New Media Rights</a>.</p>
+              </dd>
+            </dl>
+            <p><a href="http://www.newmediarights.org/are_interviews_copyrighted" target="_blank">"Are interviews copyrighted"</a> by NewMediaRights is licensed under CC BY NC 3.0.</p>
+            <hr>
+            <h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
+            <p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
+            <form action="/" class="bg-light user" method="post">
+              <input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
+              <button type="submit" tabindex="2" title="Subscribe">Subscribe &rsaquo;</button>
+            </form>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!-- .wrap = container width: 90% -->
+          <div class="wrap aligncenter">
+            <h2><strong>Ready to start?</strong> </h2>
+            <p class="text-intro">Create your stories instantly.</p>
+            <p>
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
+                <svg class="fa-cloud-download">
+                  <use xlink:href="#fa-cloud-download"></use>
+                </svg>
+                Free Download
+              </a>
+              <span class="try">
+                <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
+                  <svg class="fa-paypal">
+                    <use xlink:href="#fa-paypal"></use>
+                  </svg>
+                  Pay what you want.
+                </a>
+              </span>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+
+      </article>
+    </main>
+    <!--main-->
+
+    <footer role="contentinfo">
+      <div class="wrap">
+        <div class="grid">
+          <div class="column">
+            <h3>Company</h3>
+            <ul>
+              <li><a href="#">About</a></li>
+              <li><a href="#">Team</a></li>
+              <li><a href="#">Blog</a></li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+          <div class="column">
+            <h3>Support</h3>
+            <ul>
+              <li><a href="#">Shipping &amp; Returns</a></li>
+              <li><a href="#">FAQ</a></li>
+              <li><a href="#">Contact</a></li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+          <div class="column">
+            <h3>Legal</h3>
+            <ul>
+              <li><a href="#">Terms of Service</a></li>
+              <li><a href="#">Privacy Policy</a></li>
+              <li><a href="#">Cookies</a></li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+          <div class="column">
+            <h3>Community</h3>
+            <ul>
+              <li>
+                <a href="#">
+                  <svg class="fa-facebook">
+                    <use xlink:href="#fa-facebook"></use>
+                  </svg>
+                  Facebook
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <svg class="fa-youtube">
+                    <use xlink:href="#fa-youtube"></use>
+                  </svg>
+                  YouTube
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <svg class="fa-twitter">
+                    <use xlink:href="#fa-twitter"></use>
+                  </svg>
+                  Twitter
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+        </div>
+        <!-- .end .grid -->
+      </div>
+      <!-- .end .wrap -->
+    </footer>
+
+    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
+    <script defer src="../static/js/svg-icons.js"></script>
+
+  </body>
+</html>

demos/keynote.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
 
     <!-- CSS Base -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
-
-    <!-- CSS Colors -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +93,18 @@
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
           - Vertical sliding = <article id="webslides" class="vertical">
-          - <div class="wrap"> = container 1200px
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1><img class="whitelogo" src="../static/images/logos/apple.svg" alt="Apple Logo"></h1>
           </div>
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h1>Make a Keynote presentation using HTML</h1>
             <p class="text-intro">WebSlides is an open source framework for building HTML presentations, landings, and portfolios.</p>
@@ -117,7 +113,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2>HTML presentations can be easy</h2>
           </div>
@@ -328,7 +324,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$48 Billion</h2>
             <h3>Revenue in Q4 2024</h3>
@@ -490,7 +486,7 @@
         </section>
         <section class="bg-apple">
           <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>Payments Made Simple</h2>
@@ -568,9 +564,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals.</p>
               <p>
                 <cite>
@@ -723,7 +719,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -737,18 +733,18 @@
         <section class="bg-apple">
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.</p>
               <pre>&lt;div class="embed"&gt;
- &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
- &lt;/iframe&gt;
+ &lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay &gt;&lt;/div&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
               <!-- <div class="embed"> = Responsive -->
               <div class="embed">
-                <iframe src="https://www.youtube.com/embed/CQY3KUR3VzM" allowfullscreen></iframe>
+                <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-no-controls></div>
               </div>
               <!-- end .embed -->
             </div>
@@ -759,26 +755,31 @@
         <section class="bg-apple fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/mtY0K2fiFOA" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="lvOKBQvbLhg" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-apple aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
+           </video>
+          </div><!-- .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>Be Awesome</strong></h2>
           </div>
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+        <section class="fullscreen bg-black aligncenter">
+          <div class="embed dark">
+             <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+            </video>
+          </div><!-- .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>Think Different</strong></h2>
-            <p>0verlay: <code>.bg-black > .background-video.dark</code> or .light</p>
+            <p>Overlay: <code>fullscreen.bg-black > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -810,12 +811,12 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong></h2>
             <p class="text-intro">120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -834,25 +835,24 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <h2><strong>Thank you!</strong></h2>
-          <p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p>
-          <p class="text-symbols">* * *</p>
+          <h2 class="text-emoji zoomIn">😎</h2>
+          <h3><strong>Thank you!</strong></h2>
+          <p><a href="https://twitter.com/webslides" title="@WebSlides on Twitter">@WebSlides</a></p>
         </section>
 
       </article>
     </main>
     <!--main-->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+
+    <script>
+      window.ws = new WebSlides();
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>

demos/landings.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
       -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
 
     <!-- CSS Base -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
-
-    <!-- CSS Colors -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -96,16 +92,16 @@
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
           - Vertical sliding = <article id="webslides" class="vertical">
-          - <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-purple aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1 class="text-landing">Landings</h1>
             <p class="text-symbols">* * * </p>
-            <p><a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides for free"><svg class="fa-github">
+            <p><a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides for free"><svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg> WebSlides</a>
             </p>
@@ -113,7 +109,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <p class="text-subtitle">The interface is your brand:</p>
             <h2>Create a stylish web presence easily</h2>
@@ -121,7 +117,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -139,7 +135,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -176,7 +172,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2 class="text-landing">Welcomes</h2>
             <p class="text-intro"><strong>WebSlides</strong> is an open source tool for telling stories.<br>
@@ -185,13 +181,13 @@
                <ul>
                  <li><a href="https://twitter.com/webslides">Twitter</a></li>
                  <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
-                 <li><a href="https://github.com/jlantunez/webslides">Github</a></li>
+                 <li><a href="https://github.com/webslides/webslides">Github</a></li>
                </ul>
              </nav>
           </div>
         </section>
         <section class="bg-secondary">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50 frame">
             <h2 class="text-serif aligncenter">How to Tell Your Story?</h2>
             <p class="text-symbols">* * *</p>
@@ -199,7 +195,7 @@
           </div>
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-60">
             <h3><strong>Why WebSlides?</strong> Good karma and productivity.</h3>
             <hr>
@@ -231,18 +227,18 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="cta-cover">
               <h1><strong>HTML Presentations</strong> Made Easy</h1>
               <p class="alignright">
-                <a class="button" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides">
+                <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
                   <svg class="fa-cloud-download">
                     <use xlink:href="#fa-cloud-download"></use>
                   </svg>
                   WebSlides
                 </a>
-                <span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/jlantunez/webslides" title="Github">Github</a></span>
+                <span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
               </p>
             </div>
             <ul class="flexblock features">
@@ -600,7 +596,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid">
               <div class="column">
@@ -880,7 +876,7 @@
         </section>
         <section>
           <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>iPhone 7</h2>
@@ -1447,7 +1443,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -1461,9 +1457,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers.
               </p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Zaha_Hadid">Zaha Hadid</a></cite></p>
@@ -1553,7 +1549,7 @@
         </section>
         <section class="bg-black">
           <span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-70 aligncenter">
             <h2>Planning a vacation?</h2>
             <p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -1568,7 +1564,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-white">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -1643,7 +1639,7 @@
         </section>
         <section class="bg-primary">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-30">
             <p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
             <form action="/" method="post">
@@ -1737,7 +1733,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1809,12 +1805,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -1832,7 +1829,7 @@
           <div class="wrap size-60">
             <!-- Responsive video/iframe... Add <div class="embed"> -->
             <div class="embed">
-              <iframe width="800" height="450" src="https://www.youtube.com/embed/vXeF6Uot8pk?list=PL27Ptt5XwkS3YU7n0p7Qer2j_DhTSi0jW" allowfullscreen></iframe>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -1841,28 +1838,32 @@
         <section class="fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/b4LrTkWq9jU" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+        <section class="fullscreen bg-black aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+           </video>
+          </div><!-- .end .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Every end is a new beginning</strong></h2>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-blue aligncenter">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+        <section class="fullscreen bg-blue aligncenter">
+         <div class="embed dark">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+           </video>
+          </div><!-- .end .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Overlay</strong></h2>
-            <p><code>section.bg-blue > .background-video.dark</code> or .light</p>
+            <p><code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1890,12 +1891,12 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -1918,12 +1919,11 @@
     </main>
     <!--main-->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+
+    <script>
+      window.ws = new WebSlides();
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->

demos/longforms.html

@@ -0,0 +1,415 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CLEAN MARKUP = GOOD KARMA.
+      Hi source code lover,
+
+      you're a curious person and a fast learner ;)
+      Let's make something beautiful together. Contribute on Github:
+      https://github.com/webslides/webslides
+
+      Thanks!
+    -->
+
+    <!-- SEO -->
+    <title>WebSlides Demo: Longforms</title>
+    <meta name="description" content="WebSlides is about telling stories. Create longform articles with ease.">
+
+    <!-- URL CANONICAL -->
+    <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
+
+    <!-- CSS Base -->
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
+
+    <!-- Optional - CSS SVG Icons (Font Awesome) -->
+    <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
+
+    <!-- SOCIAL CARDS (ADD YOUR INFO) -->
+
+    <!-- FACEBOOK -->
+    <meta property="og:url" content="https://webslides.tv/demos/why-webslides">
+
+    <!-- EDIT -->
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="WebSlides Demo: Longforms" />
+
+    <!-- EDIT -->
+    <meta property="og:description" content="Create longform articles with ease. Just the essentials.">
+
+    <!-- EDIT -->
+    <meta property="og:updated_time" content="2017-03-28T18:24:48">
+
+    <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" >
+
+    <!-- EDIT -->
+    <meta property="og:image:width" content="800">
+    <meta property="og:image:height" content="429">
+
+    <!-- TWITTER -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@webslides">
+
+    <!-- EDIT -->
+    <meta name="twitter:creator" content="@jlantunez">
+
+    <!-- EDIT -->
+    <meta name="twitter:title" content="WebSlides Demo: Longforms">
+
+    <!-- EDIT -->
+    <meta name="twitter:description" content="Create longform articles with ease. Just the essentials.">
+
+    <!-- EDIT -->
+    <meta name="twitter:image" content="../static/images/share-webslides.jpg">
+
+    <!-- EDIT -->
+
+    <!-- FAVICONS -->
+    <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
+    <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
+    <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
+    <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
+    <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
+
+    <!-- Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#333333">
+
+  </head>
+  <body>
+    <header role="banner">
+      <nav role="navigation">
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </ul>
+      </nav>
+    </header>
+    <main role="main">
+      <article>
+        <section>
+          <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
+          <span class="background-bottom" style="background-image:url('https://webslides.tv/static/images/nyc.jpg')"></span>
+          <!--.wrap = container width: 90% -->
+          <div class="wrap aligncenter">
+            <h1 class="text-landing">
+              <strong>Longform Demo</strong>
+            </h1>
+            <p class="text-intro">How to engage readers with longform journalism?<br> All content is for demo purposes only.
+            </p>
+            <p>
+              <a href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free" class="button zoomIn">
+                <svg class="fa-cloud-download">
+                  <use xlink:href="#fa-cloud-download"></use>
+                </svg>
+                WebSlides
+              </a>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-white">
+          <!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
+          <div class="wrap longform">
+            <h2><strong>The Art of Storytelling</strong></h2>
+            <p><a href="https://twitter.com/webslides" title="David Yang"><img class="avatar-40" src="../static/images/avatar.jpg" alt="David Yang"></a> David Yang. Nov 16th, 2032.</p>
+            <p class="text-intro">
+              WebSlides want to help tell stories that are meaningful. All content is for demo purposes only.
+            </p>
+            <p>People share content that makes them feel inspired. WebSlides is free and open source. We built it because we need a platform for beautiful storytelling. Longform journalism has grown in popularity over the past several years, with blogs and media organizations including <a href="https://medium.com">Medium</a>, <a href="http://highline.huffingtonpost.com/">The Huffington Post</a>, and <a href="http://nytimes.com">The New York Times</a> creating or expanding longform coverage and new companies such as <a href="https://atavist.com/">The Atavist</a>, <a href="https://longreads.com/">Longreads.com</a> and <a href="https://longform.com/">Longform.org</a> being founded to capitalize on the new interest.</p>
+            <hr>
+            <p class="aligncenter"><code>.wrap.longform</code> = 72rem (720px). <br>
+              Why? Reading efficiency is highest at <a href="http://uxmovement.com/content/how-margins-and-line-lengths-affect-user-reading/">90-95 characters per line</a>.
+            </p>
+            <hr>
+            <p>Longform journalism is a branch of journalism dedicated to longer articles with larger amounts of content. Typically this will be between 1,000 and 20,000 words.</p>
+            <p>Storytelling is the social and cultural activity of sharing stories, often with improvisation, theatrics, or embellishment. Stories or narratives have been shared in every culture as a means of entertainment, education, cultural preservation and instilling moral values.</p>
+            <p>Crucial elements of stories and storytelling include plot, characters and narrative point of view. The term 'storytelling' is used in a narrow sense to refer specifically to oral storytelling and also in a looser sense to refer to techniques used in other media to unfold or disclose the narrative of a story.</p>
+            <p>Storytelling predates writing, with the earliest forms of storytelling usually oral combined with gestures and expressions. In addition to being part of religious rituals, some archaeologists believe rock art may have served as a form of storytelling for many ancient cultures.</p>
+            <h2><strong>Alignments</strong></h2>
+            <p>This is an image of a Nao (robot), aligned to the right. It also has a small caption.</p>
+            <figure class="alignright">
+              <img src="https://source.unsplash.com/2EJCSULRwC8/600x400" alt="Robot">
+              <figcaption>
+                <p><code>figure.alignright</code></p>
+              </figcaption>
+            </figure>
+            <p>For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text.</p>
+            <p>Nao (pronounced now) is an autonomous, programmable humanoid robot developed by Aldebaran Robotics, a French robotics company headquartered in Paris. The robot's development began with the launch of Project Nao in 2004. On 15 August 2007, Nao replaced Sony's robot dog Aibo as the robot used in the RoboCup Standard Platform League (SPL), an international robot soccer competition. The Nao was used in RoboCup 2008 and 2009, and the NaoV3R was chosen as the platform for the SPL at RoboCup 2010.</p>
+            <hr>
+            <figure class="text-pull-left">
+              <img src="https://source.unsplash.com/cr6RJblqjyo/600x400" alt="Skater">
+              <figcaption>
+                <p><code>.text-pull-left</code></p>
+              </figcaption>
+            </figure>
+            <p>This is an image of a skate, aligned to the left. It also has a small caption. For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text</p>
+            <p>Typically one character is printed per keypress. The machine prints characters by making ink impressions of type elements similar to the sorts used in movable type letterpress printing.</p>
+            <hr>
+            <p>The story was then told using a combination of oral narrative, music, rock art and dance, which bring understanding and meaning of human existence through remembrance and enactment of stories. People have used the carved trunks of living trees and ephemeral media (such as sand and leaves) to record stories in pictures or with writing. Complex forms of tattooing may also represent stories, with information about genealogy, affiliation and social status.</p>
+            <blockquote class="text-pull-right">
+              <p>"The art of narrative is, by definition, an aesthetic enterprise, and there are a number of artistic elements that typically interact in well-developed stories." &mdash; <code>.text-pull-right</code>.</p>
+            </blockquote>
+            <p>With the advent of writing and the use of stable, portable media, stories were recorded, transcribed and shared over wide regions of the world. Stories have been carved, scratched, painted, printed or inked onto wood or bamboo, ivory and other bones, pottery, clay tablets, stone, palm-leaf books, skins (parchment), bark cloth, paper, silk, canvas and other textiles, recorded on film and stored electronically in digital form. Oral stories continue to be created, improvisationally by impromptu storytellers, as well as committed to memory and passed from generation to generation, despite the increasing popularity of written and televised media in much of the world.</p>
+            <hr>
+            <h3>Center aligned</h3>
+            <figure class="aligncenter">
+              <img src="https://source.unsplash.com/BnQULvE2mEA/800x600" alt="Scene from the Women’s March on Washington, DC.">
+              <figcaption>
+                <p><code>figure.aligncenter</code></p>
+              </figcaption>
+            </figure>
+            <p>This is a center aligned image. It also has a small caption. The sky (or celestial dome) is everything that lies above the surface of the Earth, including the atmosphere and outer space. The intensity of the sky varies greatly over the day, and the primary cause of that intensity differs as well. </p>
+            <hr>
+            <figure class="text-pull">
+              <img src="https://source.unsplash.com/9bdt03k4ujw/800x400" alt="Japan">
+              <figcaption>
+                <p><code>figure.text-pull</code></p>
+              </figcaption>
+            </figure>
+            <p>When the sun is well above the horizon, direct scattering of sunlight (Rayleigh scattering) is the overwhelmingly dominant source of light. However, in twilight, the period of time between sunset and night and between night and sunrise, the situation is more complicated.</p>
+          </div>
+        </section>
+        <section>
+          <div class="wrap size-80">
+            <h3><strong>Building a platform for storytelling</strong></h3>
+            <p><code>.text-cols (2 columns)</code>.</p>
+            <div class="text-cols">
+              <p>The art of narrative is, by definition, an aesthetic enterprise, and there are a number of artistic elements that typically interact in well-developed stories.</p>
+              <p>Human knowledge is based on stories and the human brain consists of cognitive machinery necessary to understand, remember and tell stories.</p>
+              <p>Humans are storytelling organisms that both individually and socially, lead storied lives. Stories mirror human thought as humans think in narrative structures and most often remember facts in story form. </p>
+              <p>Facts can be understood as smaller versions of a larger story, thus storytelling can supplement analytical thinking. Because storytelling requires auditory and visual senses from listeners, one can learn to organize their mental representation of a story, recognize structure of language and express his or her thoughts.</p>
+              <h4><strong>Stories with karma</strong></h4>
+              <p>For many multi-media communication complex institutions, communicating by using storytelling techniques can be a more compelling and effective route of delivering information than that of using only dry facts. Uses include:</p>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-white">
+          <div class="wrap longform">
+            <h1>Heading one</h1>
+            <h2>Heading two</h2>
+            <h3>Heading three</h3>
+            <h4>Heading four</h4>
+            <h5>Heading five</h5>
+            <h6>Heading six</h6>
+            <hr />
+            <h3>Ordered List</h3>
+            <ol>
+              <li>Medium = Beautiful articles.</li>
+              <li>Typeform = Beautiful forms.</li>
+              <li>WebSlides = Beautiful presentations and longforms.</li>
+            </ol>
+            <h3>Unordered List</h3>
+            <ul>
+              <li>List Item 1</li>
+              <li>List Item 2</li>
+              <li>List Item 3</li>
+            </ul>
+            <h3>Mixed List</h3>
+            <ol>
+              <li>
+                List Item 1
+                <ul>
+                  <li>List Item 1</li>
+                  <li>
+                    List Item 2
+                    <ol>
+                      <li>List Item 1</li>
+                      <li>
+                        List Item 2
+                        <ul>
+                          <li>List Item 1</li>
+                          <li>List Item 2</li>
+                          <li>List Item 3</li>
+                        </ul>
+                      </li>
+                      <li>List Item 3</li>
+                    </ol>
+                  </li>
+                  <li>List Item 3</li>
+                </ul>
+              </li>
+              <li>List Item 2</li>
+              <li>List Item 3</li>
+            </ol>
+            <hr />
+            <h3>Table Styles</h3>
+            <table>
+              <tbody>
+                <tr>
+                  <th>Table Header 1</th>
+                  <th>Table Header 2</th>
+                  <th>Table Header 3</th>
+                </tr>
+                <tr>
+                  <td>Division 1</td>
+                  <td>Division 2</td>
+                  <td>Division 3</td>
+                </tr>
+                <tr class="even">
+                  <td>Division 1</td>
+                  <td>Division 2</td>
+                  <td>Division 3</td>
+                </tr>
+                <tr>
+                  <td>Division 1</td>
+                  <td>Division 2</td>
+                  <td>Division 3</td>
+                </tr>
+              </tbody>
+            </table>
+            <hr>
+            <h2>Blockquote</h2>
+            <p>The blockquote tag can be used to display a quote from a person or from another site. It can be as long or as short as you like, and it is displayed like this:</p>
+            <blockquote>
+              <p>"Women, like men, should try to do the impossible. And when they fail, their failure should be a challenge to others."</p>
+              <p><cite>Amelia Earhart.</cite></p>
+            </blockquote>
+            <p>Modern storytelling has a broad purview. In addition to its traditional forms (fairytales, folktales, mythology, legends, fables etc.), it has extended itself to representing history, personal narrative, political commentary and evolving cultural norms. Contemporary storytelling is also widely used to address educational objectives.</p>
+            <blockquote class="text-pull">
+              <p>"Without freedom of thought, there can be no such thing as wisdom - and no such thing as public liberty without freedom of speech." <code>.text-pull </code> </p>
+              <p><cite>Benjamin Franklin.</cite></p>
+            </blockquote>
+            <p>Storytelling is increasingly used in advertising today in order to build customer loyalty. According to Giles Lury, this marketing trend echoes the deeply rooted need of all humans to be entertained. Stories are illustrative, easily memorable and allow any firm to create stronger emotional bonds with the customers.</p>
+            <p>A Nielsen study shows consumers want a more personal connection in the way they gather information. Our brains are far more engaged by storytelling than by cold, hard facts. When reading straight data, only the language parts of our brains work to decode the meaning. But when we read a story, not only do the language parts of our brains light up, but any other part of the brain that we would use if we were actually experiencing what we're reading about becomes activated as well. This means it's far easier for us to remember stories than hard facts.</p>
+            <blockquote class="text-quote">
+              <p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place.</p>
+              <p><cite>Sheryl Sandberg.</cite></p>
+            </blockquote>
+            <p>Storytelling is a means for sharing and interpreting experiences. Peter L. Berger says human life is narratively rooted, humans construct their lives and shape their world into homes in terms of these groundings and memories. <strong>Stories are universal in that they can bridge cultural, linguistic and age-related divides</strong>. Storytelling can be adaptive for all ages, leaving out the notion of age segregation.
+            </p>
+            <p>Storytelling can be used as a method to teach ethics, values and cultural norms and differences. Learning is most effective when it takes place in social environments that provide authentic social cues about how knowledge is to be applied. Stories function as a tool to pass on knowledge in a social context. So, every story has 3 parts. First, The setup (The Hero's world before the adventure starts). Second, The Confrontation (The hero's world turned upside down). Third, The Resolution (Hero conquer's villain, but it's not enough for Hero to survive. The Hero or World must be transformed). Any story can be framed in such format.</p>
+            <hr>
+            <h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
+            <p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
+            <form action="/" class="bg-light user" method="post">
+              <input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
+              <button type="submit" tabindex="2" title="Subscribe">Subscribe &rsaquo;</button>
+            </form>
+          </div>
+        </section>
+        <section>
+          <!-- .wrap = container width: 90% -->
+          <div class="wrap aligncenter">
+            <h2><strong>Ready to start?</strong> </h2>
+            <p class="text-intro">Create your stories instantly.</p>
+            <p>
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
+                <svg class="fa-cloud-download">
+                  <use xlink:href="#fa-cloud-download"></use>
+                </svg>
+                Free Download
+              </a>
+              <span class="try">
+                <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
+                  <svg class="fa-paypal">
+                    <use xlink:href="#fa-paypal"></use>
+                  </svg>
+                  Pay what you want.
+                </a>
+              </span>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+
+      </article>
+    </main>
+    <!--main-->
+
+    <footer role="contentinfo">
+      <div class="wrap">
+        <div class="grid">
+          <div class="column">
+            <h3>Company</h3>
+            <ul>
+              <li><a href="#">About</a></li>
+              <li><a href="#">Team</a></li>
+              <li><a href="#">Blog</a></li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+          <div class="column">
+            <h3>Support</h3>
+            <ul>
+              <li><a href="#">Shipping &amp; Returns</a></li>
+              <li><a href="#">FAQ</a></li>
+              <li><a href="#">Contact</a></li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+          <div class="column">
+            <h3>Legal</h3>
+            <ul>
+              <li><a href="#">Terms of Service</a></li>
+              <li><a href="#">Privacy Policy</a></li>
+              <li><a href="#">Cookies</a></li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+          <div class="column">
+            <h3>Community</h3>
+            <ul>
+              <li>
+                <a href="#">
+                  <svg class="fa-facebook">
+                    <use xlink:href="#fa-facebook"></use>
+                  </svg>
+                  Facebook
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <svg class="fa-youtube">
+                    <use xlink:href="#fa-youtube"></use>
+                  </svg>
+                  YouTube
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <svg class="fa-twitter">
+                    <use xlink:href="#fa-twitter"></use>
+                  </svg>
+                  Twitter
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .column -->
+        </div>
+        <!-- .end .grid -->
+      </div>
+      <!-- .end .wrap -->
+    </footer>
+
+    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
+    <script defer src="../static/js/svg-icons.js"></script>
+
+  </body>
+</html>

demos/media.html

@@ -0,0 +1,947 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CLEAN MARKUP = GOOD KARMA.
+      Hi source code lover,
+
+      you're a curious person and a fast learner ;)
+      Let's make something beautiful together. Contribute on Github:
+      https://github.com/webslides/webslides
+
+      Thanks!
+    -->
+
+    <!-- SEO -->
+    <title>WebSlides Tutorial: Videos, Images, and Maps</title>
+    <meta name="description" content="How to embed images, videos, and maps in your presentation.">
+
+    <!-- URL CANONICAL -->
+    <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
+
+    <!-- CSS Base -->
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
+
+    <!-- Optional - CSS SVG Icons (Font Awesome) -->
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
+
+    <!-- SOCIAL CARDS (ADD YOUR INFO) -->
+
+    <!-- FACEBOOK -->
+    <meta property="og:url" content="/" />
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="WebSlides Tutorial: Media" />
+
+    <!-- EDIT -->
+    <meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
+
+    <!-- EDIT -->
+    <meta property="og:updated_time" content="2017-01-04T17:25:31">
+
+    <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" >
+
+    <!-- EDIT -->
+
+    <!-- TWITTER -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@webslides">
+
+    <!-- EDIT -->
+    <meta name="twitter:creator" content="@jlantunez">
+
+    <!-- EDIT -->
+    <meta name="twitter:title" content="WebSlides Tutorial: Media">
+
+    <!-- EDIT -->
+    <meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
+
+    <!-- EDIT -->
+    <meta name="twitter:image" content="../static/images/share-webslides.jpg">
+
+    <!-- EDIT -->
+
+    <!-- FAVICONS -->
+    <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
+    <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
+    <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
+    <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
+    <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
+
+    <!-- Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#333333">
+
+  </head>
+  <body>
+    <header role="banner">
+      <nav role="navigation">
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </ul>
+      </nav>
+    </header>
+
+    <main role="main">
+      <article id="webslides">
+
+        <!-- Quick Guide
+          - Each parent <section> in the <article id="webslides"> element is an individual slide.
+          - Vertical sliding = <article id="webslides" class="vertical">
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
+        -->
+
+        <section class="bg-black-blue aligncenter">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <p class="text-subtitle">WebSlides Tutorial</p>
+            <h1 class="text-landing">Media</h1>
+            <p class="text-symbols">* * *</p>
+            <p>
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
+                <svg class="fa-github">
+                  <use xlink:href="#fa-github"></use>
+                </svg>
+                Free Download
+              </a>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="aligncenter">
+          <div class="wrap">
+            <h2><strong>A quick reference guide for beginners</strong></h2>
+            <p class="text-intro">Videos, images, maps, and charts.</p>
+            <ul class="flexblock border">
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=3">Images</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=4">Background Images</a></li>
+                    <li><a target="_blank" href="#slide=9">Overlays (light and dark)</a></li>
+                    <li><a target="_blank" href="#slide=11">500+ SVG Icons</a></li>
+                    <li><a target="_blank" href="#slide=13">Logos</a></li>
+                    <li><a target="_blank" href="#slide=14">Avatars</a></li>
+                    <li><a target="_blank" href="#slide=15">Devices</a></li>
+                    <li><a target="_blank" href="#slide=16">Screenshots</a></li>
+                  </ol>
+                </div>
+              </li>
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=17">Videos</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=18">Background Videos (hosted & overlay)</a></li>
+                    <li><a target="_blank" href="#slide=22">Embedding YouTube videos</a></li>
+                    <li><a target="_blank" href="#slide=24">Fullscreen YouTube videos</a></li>
+                    <li>
+                      <a target="_blank" href="#slide=26"><strong>YouTube API:</strong></a>
+                      <ol>
+                        <li><a target="_blank" href="#slide=27">Autoplay, loop, mute, and no controls</a></li>
+                        <li><a target="_blank" href="#slide=30">Fullscreen video</a></li>
+                        <li><a target="_blank" href="#slide=32">Background video with overlay</a></li>
+                      </ol>
+                    </li>
+                  </ol>
+                </div>
+              </li>
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=34">Maps & Charts</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=35">Embedding maps</a></li>
+                    <li><a target="_blank" href="#slide=36">Embedding the map in a card</a></li>
+                    <li><a target="_blank" href="#slide=37">Fullscreen maps</a></li>
+                    <li><a target="_blank" href="#slide=38">Embedding charts</a></li>
+                  </ol>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap aligncenter">
+            <h3>
+              <svg class="fa-camera">
+                <use xlink:href="#fa-camera"></use>
+              </svg>
+              Insert images wherever you want
+            </h3>
+            <p class="text-intro">15 different positions.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h3>15 Different Backgrounds</h3>
+            <ul class="text-cols">
+              <li><strong>.background</strong> (fullscreen)</li>
+              <li>.background-top (cover)</li>
+              <li>.background-bottom (cover)</li>
+              <li>.background.light (opacity)</li>
+              <li>.background.dark (opacity)</li>
+              <li>.background-center</li>
+              <li>.background-center-top</li>
+              <li>.background-center-bottom</li>
+              <li>.background-left</li>
+              <li>.background-left-top</li>
+              <li>.background-left-bottom</li>
+              <li>.background-right</li>
+              <li>.background-right-top</li>
+              <li>.background-right-bottom</li>
+              <li>.background-anim (animated)</li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-50">
+            <h4>
+              <svg class="fa-camera">
+                <use xlink:href="#fa-camera"></use>
+              </svg>
+              .background = Fullscreen Backgrounds
+            </h4>
+            <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
+            <pre>&lt;section&gt;
+  &lt;span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+            <p>
+              <svg class="fa-info">
+                <use xlink:href="#fa-info"></use>
+              </svg>
+              Position .background outside of .wrap container.
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>.background-(position)</h3>
+              <p><code>.background-right-bottom</code></p>
+              <ul class="flexblock specs">
+                <li>
+                  <div>
+                    <svg class="fa-wifi">
+                      <use xlink:href="#fa-wifi"></use>
+                    </svg>
+                    <h2>Ultra-Fast WiFi</h2>
+                    Simple and secure file sharing.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-battery-full">
+                      <use xlink:href="#fa-battery-full"></use>
+                    </svg>
+                    <h2>All day battery life</h2>
+                    Your battery worries may be over.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-life-ring">
+                      <use xlink:href="#fa-life-ring"></use>
+                    </svg>
+                    <h2>Lifetime Warranty </h2>
+                    We'll fix it or if we can't, we'll replace it.
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
+          <div class="wrap">
+            <div class="content-right">
+              <h3>.background-(position)</h3>
+              <p><code>.background-left-bottom</code></p>
+              <ul class="flexblock specs">
+                <li>
+                  <div>
+                    <svg class="fa-wifi">
+                      <use xlink:href="#fa-wifi"></use>
+                    </svg>
+                    <h2>Ultra-Fast WiFi</h2>
+                    Simple and secure file sharing.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-battery-full">
+                      <use xlink:href="#fa-battery-full"></use>
+                    </svg>
+                    <h2>All day battery life</h2>
+                    Your battery worries may be over.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-life-ring">
+                      <use xlink:href="#fa-life-ring"></use>
+                    </svg>
+                    <h2>Lifetime Warranty </h2>
+                    We'll fix it or if we can't, we'll replace it.
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="aligncenter bg-black">
+          <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <h2>.background.anim</h2>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black aligncenter">
+          <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+          <div class="wrap size-50">
+            <h1 class="text-landing text-shadow">Opacity</h1>
+            <p><code>[class*="bg-"] > .background.light</code></p>
+            <pre>&lt;section class="bg-black"&gt;
+  &lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+          </div>
+        </section>
+        <section class="bg-black aligncenter">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span>
+          <div class="wrap size-50">
+            <h1 class="text-landing text-shadow">Opacity</h1>
+            <p><code>[class*="bg-"] > .background.dark</code></p>
+            <pre>&lt;section class="bg-black"&gt;
+  &lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+          </div>
+        </section>
+        <section>
+          <div class="wrap size-50">
+            <p class="text-subtitle">Optional &middot; 500+ icons</p>
+            <h2>
+              <a href="http://fontawesome.io/icons/">
+                <svg class="fa-flag">
+                  <use xlink:href="#fa-flag"></use>
+                </svg>
+                Font Awesome
+              </a>
+              as SVG icons
+            </h2>
+            <pre>&lt;svg class="fa-flag"&gt;
+	&lt;use xlink:href="#fa-flag"&gt;&lt;/use&gt;
+&lt;/svg&gt;</pre>
+            <p>How to change icons?</p>
+            <ol class="text-cols">
+              <li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
+              <li>Create a free account.</li>
+              <li>Select new icons.</li>
+              <li>Publish as SVG sprite.</li>
+              <li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-green">
+          <div class="wrap">
+            <h3>ul.flexblock.metrics.border</h3>
+            <!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
+            <ul class="flexblock metrics border">
+              <li> Founded
+                <span>2024</span>
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-users">
+                    <use xlink:href="#fa-users"></use>
+                  </svg>
+                </span>
+                24M Subscribers
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-line-chart">
+                    <use xlink:href="#fa-line-chart"></use>
+                  </svg>
+                </span>
+                Revenue: $16M
+              </li>
+              <li>
+                Monthly Growth
+                <span>64%</span>
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-building-o">
+                    <use xlink:href="#fa-building-o"></use>
+                  </svg>
+                </span>
+                8 Offices
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-smile-o">
+                    <use xlink:href="#fa-smile-o"></use>
+                  </svg>
+                </span>
+                48 Employees
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-usd">
+                    <use xlink:href="#fa-usd"></use>
+                  </svg>
+                </span>
+                EBITDA: $2,4M
+              </li>
+              <li>
+                <span>
+                  <svg class="fa-university">
+                    <use xlink:href="#fa-university"></use>
+                  </svg>
+                </span>
+                Bank: $32M
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h2>Transparent Logos</h2>
+            <p>
+              Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
+            </p>
+            <hr>
+            <ul class="flexblock blink">
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img src="../static/images/logos/google.svg" alt="Google">
+                    <p><strong>Height recommended</strong>: 48px</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
+                    <p><code>img.blacklogo</code></p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img class="graylogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
+                    <p><code>img.graylogo</code></p>
+                  </div>
+                </a>
+              </li>
+              <li class="bg-blue">
+                <a href="" title="Block Link = .blink">
+                  <div>
+                    <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
+                    <p><code>img.whitelogo</code></p>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <blockquote class="text-quote">
+              <p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p>
+              <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
+            </blockquote>
+            <hr>
+            <p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="grid vertical-align">
+              <div class="column">
+                <h2>Devices</h2>
+                <ul class="flexblock specs">
+                  <li>
+                    <div>
+                      <svg class="fa-wifi">
+                        <use xlink:href="#fa-wifi"></use>
+                      </svg>
+                      <h2>Ultra-Fast WiFi</h2>
+                      Simple and secure file sharing.
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <svg class="fa-battery-full">
+                        <use xlink:href="#fa-battery-full"></use>
+                      </svg>
+                      <h2>All day battery life</h2>
+                      Your battery worries may be over.
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <svg class="fa-life-ring">
+                        <use xlink:href="#fa-life-ring"></use>
+                      </svg>
+                      <h2>Lifetime Warranty </h2>
+                      We'll fix it or if we can't, we'll replace it.
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <!-- end .column-->
+              <div class="column">
+                <figure>
+                  <img class="aligncenter" src="../static/images/iphone.png" alt="iPhone">
+                </figure>
+              </div>
+              <!-- end .column-->
+            </div>
+            <!-- end .grid-->
+          </div>
+          <!-- end .wrap-->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <figure class="browser">
+                <img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg">
+              </figure>
+            </div>
+            <!-- .end .content-left -->
+            <div class="content-left">
+              <h2>Screenshots</h2>
+              <p>HTML/CSS Browser.</p>
+              <pre>&lt;figure class="browser"&gt;
+  &lt;img alt="Screenshot" src="image.jpg"&gt;
+&lt;/figure&gt;</pre>
+            </div>
+            <!-- .end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-blue">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
+          <!-- background with a frame frame -->
+          <span class="background frame"></span>
+          <div class="wrap aligncenter">
+            <h2>
+              Videos
+            </h2>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3>Background videos</h3>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;video autoplay loop poster="image.jpg"&gt;
+      &lt;source src="video.mp4" type="video/mp4"&gt;
+    &lt;/video&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p>.fullscreen > .embed (responsive) > video</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen aligncenter">
+          <div class="embed">
+            <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+            </video>
+          </div>
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3>Background videos</h3>
+            <p>Transparent overlay:</p>
+            <pre><strong>&lt;section class="fullscreen bg-blue"&gt;</strong>
+  &lt;div class="embed <strong>dark</strong>"&gt;
+    &lt;video autoplay muted loop poster="image.jpg"&gt;
+      &lt;source src="video.mp4" type="video/mp4"&gt;
+    &lt;/video&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p>.fullscreen.bg-blue > .embed.dark (or .light) > video</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen bg-blue aligncenter">
+          <div class="embed dark">
+            <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+            </video>
+          </div>
+          <!-- .end .embed -->
+          <div class="wrap">
+            <h2><strong>Muted</strong></h2>
+            <p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>Responsive Videos</h3>
+              <p>Just copy and paste the code from YouTube to your slide.</p>
+              <pre>&lt;div class="embed"&gt;
+ <strong>&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
+ &lt;/iframe&gt;</strong>
+&lt;/div&gt;</pre>
+              <p><code>.embed</code> (responsive)</p>
+            </div>
+            <!-- end .content-left -->
+            <div class="content-left">
+              <!-- <div class="embed"> = Responsive -->
+              <div class="embed">
+                <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
+              </div>
+              <!-- end .embed -->
+            </div>
+            <!-- end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <!-- Responsive video/iframe... Add <div class="embed"> -->
+            <div class="embed">
+              <iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
+            </div>
+            <!-- .end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3>Fullscreen YouTube Video</h3>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;iframe src="https://www.youtube.com/embed/iY05U7GaU5I"&gt;
+    &lt;/iframe&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <!-- Fullscreen Video -->
+          <div class="embed">
+            <iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section class="frame">
+          <p class="aligncenter">
+            <svg class="fa-thumbs-up large">
+              <use xlink:href="#fa-thumbs-up"></use>
+            </svg>
+          </p>
+          <div class="wrap size-60 bg-white">
+            <h3>
+              <a href="https://developers.google.com/youtube">
+                <svg class="fa-youtube">
+                  <use xlink:href="#fa-youtube"></use>
+                </svg>
+                YouTube API
+              </a>
+            </h3>
+            <p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p>
+            <p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h3>
+              <svg class="fa-youtube">
+                <use xlink:href="#fa-youtube"></use>
+              </svg>
+              YouTube API Parameters
+            </h3>
+            <p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
+            <hr>
+            <div class="grid">
+              <div class="column">
+                <pre>&lt;div class="embed"&gt;
+  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt;
+  &lt;/div&gt;</strong>
+&lt;/div&gt;</pre>
+                <p>autoplay + loop</p>
+              </div>
+              <!-- .end .column -->
+              <div class="column">
+                <pre>&lt;div class="embed"&gt;
+  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt;
+  &lt;/div&gt;</strong>
+&lt;/div&gt;</pre>
+                <p>autoplay + mute + no controls.</p>
+              </div>
+              <!-- .end .column -->
+            </div>
+            <!-- .end .grid -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>YouTube API</h3>
+              <p><code>autoplay + loop</code></p>
+              <pre>&lt;div class="embed"&gt;
+  &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+            </div>
+            <!-- end .content-left -->
+            <div class="content-left">
+              <!-- <div class="embed"> = Responsive -->
+              <div class="embed">
+                <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
+              </div>
+              <!-- end .embed -->
+            </div>
+            <!-- end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="frame">
+          <div class="wrap size-60 bg-white">
+            <h3>
+              <svg class="fa-info-circle large">
+                <use xlink:href="#fa-info-circle"></use>
+              </svg>
+              <strong>Autoplay Feature</strong>
+            </h3>
+            <p class="text-intro">Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-70">
+            <h3><strong>Let's make some magic with the YouTube API</strong></h3>
+            <p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
+            <hr>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&lt;/div&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p>The video will automatically play when the slide is loaded.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <!-- Fullscreen Video -->
+          <div class="embed">
+            <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section>
+          <div class="wrap size-70">
+            <h3><strong>Fullscreen YouTube video background</strong></h3>
+            <p>Overlaying a transparent background on an embedded Youtube video:</p>
+            <hr>
+            <pre><strong>&lt;section class="fullscreen bg-black"&gt;</strong>
+  &lt;div class="embed dark"&gt;
+    &lt;div data-youtube data-youtube-id=&quot;c9psfOxJysw&quot; <strong>data-autoplay data-loop data-mute data-no-controls</strong>&lt;/div&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen bg-blue">
+          <!-- Fullscreen Video -->
+          <div class="embed dark">
+            <div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
+          </div>
+          <!-- .end .embed -->
+          <div class="wrap aligncenter">
+            <h2><strong>Overlay</strong></h2>
+            <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-primary">
+          <span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
+          <div class="wrap aligncenter">
+            <h3>
+              <svg class="fa-map">
+                <use xlink:href="#fa-map"></use>
+              </svg>
+              Maps & Charts
+            </h3>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black-blue">
+          <div class="wrap size-50">
+            <p class="text-context">Status of Net Neutrality around the world.</p>
+            <div class="embed">
+              <iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
+            </div>
+            <!-- .end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="card-50 bg-white">
+              <figure>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
+                <figcaption>
+                  <a href="https://maps.google.com" title="Google Maps">
+                    <svg class="fa-map">
+                      <use xlink:href="#fa-map"></use>
+                    </svg>
+                    Google Maps
+                  </a>
+                </figcaption>
+              </figure>
+              <!-- end figure-->
+              <div class="flex-content">
+                <h2>
+                  Discover Seville
+                </h2>
+                <p>.card-50.bg-white</p>
+                <ul class="description">
+                  <li>
+                    <strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup>
+                  </li>
+                  <li><strong class="text-label" title="Population">Population:</strong> 703,021</li>
+                  <li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
+                </ul>
+                <p>
+                  There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies.
+                </p>
+              </div>
+              <!-- end .flex-content-->
+            </div>
+            <!-- end .card-50-->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <div class="embed">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
+            <!-- Responsive video/iframe/chart... Add <div class="embed"> -->
+            <div class="embed">
+              <!-- I love Quartz's charts -->
+              <div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div>
+              <script src="https://www.theatlas.com/javascripts/atlas.js"></script>
+            </div>
+            <!-- end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="aligncenter">
+          <!-- .wrap = container width: 90% -->
+          <div class="wrap">
+            <h2><strong>Start in seconds</strong></h2>
+            <p class="text-intro">120+ prebuilt slides ready to use.</p>
+            <p>
+              <a href="https://webslides.tv/webslides-latest.zip" class="button ga-track" data-ga-text="Download WebSlides (last slide demos)" title="Download WebSlides">
+                <svg class="fa-cloud-download">
+                  <use xlink:href="#fa-cloud-download"></use>
+                </svg>
+                Free Download
+              </a>
+              <span class="try">
+                <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
+                  <svg class="fa-paypal">
+                    <use xlink:href="#fa-paypal"></use>
+                  </svg>
+                  Pay what you want.
+                </a>
+              </span>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-primary aligncenter">
+          <h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2>
+          <h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3>
+        </section>
+
+      </article>
+    </main>
+    <!--main-->
+    <!-- Required -->
+
+    <script src="../static/js/webslides.js"></script>
+
+    <script>
+      window.ws = new WebSlides();
+    </script>
+
+    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
+    <script defer src="../static/js/svg-icons.js"></script>
+
+  </body>
+</html>

demos/netflix-culture.html

@@ -0,0 +1,388 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CLEAN MARKUP = GOOD KARMA.
+      Hi source code lover,
+
+      you're a curious person and a fast learner ;)
+      Let's make something beautiful together. Contribute on Github:
+      https://github.com/webslides/webslides
+
+      Thanks!
+    -->
+
+    <!-- SEO -->
+    <title>Netflix's Culture &middot; WebSlides</title>
+    <meta name="description" content="Patty McCord wrote the document called 'Netflix Culture: Freedom & Responsibility'.It's one of the most important documents ever to come out of Silicon Valley.">
+
+    <!-- URL CANONICAL -->
+    <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
+
+    <!-- CSS Base -->
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
+
+    <!-- Optional - CSS SVG Icons (Font Awesome) -->
+    <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
+
+    <!-- SOCIAL CARDS (ADD YOUR INFO) -->
+
+    <!-- FACEBOOK -->
+    <!-- EDIT -->
+    <meta property="og:url" content="http://your-url.com/permalink">
+
+    <!-- EDIT -->
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="WebSlides: Netflix's Culture" />
+    <meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage.">
+
+    <!-- EDIT -->
+    <meta property="og:updated_time" content="2017-04-16T16:24:56">
+    <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" >
+    <!-- EDIT -->
+    <meta property="og:image:width" content="800">
+    <meta property="og:image:height" content="429">
+
+    <!-- TWITTER -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@webslides">
+
+    <!-- EDIT -->
+    <meta name="twitter:creator" content="@jlantunez">
+    <!-- EDIT -->
+    <meta name="twitter:title" content="WebSlides: Netflix's Culture">
+    <!-- EDIT -->
+    <meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage.">
+    <!-- EDIT -->
+    <meta name="twitter:image" content="../static/images/share-webslides.jpg">
+
+    <!-- EDIT -->
+
+    <!-- FAVICONS -->
+    <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
+    <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
+    <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
+    <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
+    <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
+
+    <!-- Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#333333">
+  </head>
+
+  <body>
+    <header role="banner">
+      <nav role="navigation">
+        <p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </ul>
+      </nav>
+    </header>
+
+    <main role="main">
+      <article id="webslides">
+
+        <!-- Quick Guide
+          - Each parent <section> in the <article id="webslides"> element is an individual slide.
+          - Vertical sliding = <article id="webslides" class="vertical">
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
+        -->
+
+        <section class="bg-red">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap aligncenter">
+            <h1>
+              <strong>Netflix's Culture</strong>
+            </h1>
+            <p class="text-symbols">* * * </p>
+            <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free">
+              <svg class="fa-cloud-download">
+                <use xlink:href="#fa-cloud-download"></use>
+              </svg> WebSlides</a>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-50 bg-white">
+            <h2>
+              <svg class="fa-info-circle large">
+                <use xlink:href="#fa-info-circle"></use>
+              </svg>
+              <strong>A bit of context</strong>
+            </h2>
+            <hr>
+            <p><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> created <a href="https://jobs.netflix.com/life-at-netflix">Netflix's culture</a>. She wrote the document called <strong>"Netflix Culture: Freedom & Responsibility."</strong> (2009). So far, it's been shared over 16 million times on <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <div class="grid vertical-align">
+              <div class="column">
+                <h3><strong>We seek excellence</strong></h3>
+              </div>
+              <div class="column">
+                <p class="text-intro">We value candor, transparency, and courage. <strong>We embrace context and avoid control</strong>, seeking insight and understanding to make sound decisions.
+                </p>
+              </div>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-red">
+          <span class="background" style="background-image:url('https://source.unsplash.com/BYYu5nvQoUM/1600x800')"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap aligncenter fadeInUp">
+            <h3><strong>Diversity & Inclusiveness</strong></h3>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap size-50">
+            <h2><strong>7 Aspects</strong> of our Culture</h2>
+            <hr>
+            <ol class="text-cols">
+              <li><strong>Values are what we Value</strong></li>
+              <li>High Performance</li>
+              <li>Freedom & Responsibility</li>
+              <li>Context, not Control</li>
+              <li>Highly Alined, Loosely Coupled</li>
+              <li>Pay Top of Market</li>
+              <li>Promotions & Development</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap size-50 bg-white">
+            <h3><strong>1/7 Values are what we value</strong></h3>
+            <p class="text-intro">Make your values mean something.</p>
+            <hr>
+            <p>Many companies have nice sounding value statements displayed in the lobby. Enron, whose leaders went to jail, and which went <strong>bankrupt from <a href="https://www.youtube.com/watch?v=jrEf8uabe7E">fraud</a></strong> had these values displayed in their lobby: <strong>integrity, communication, respect, and excellence</strong>.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap size-50">
+            <h2><strong>9 Behaviors</strong></h2>
+            <p class="text-intro">At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.</p>
+            <hr>
+            <ol class="text-cols">
+              <li>Judgment</li>
+              <li>Communication</li>
+              <li>Impact</li>
+              <li>Curiosity</li>
+              <li>Innovation</li>
+              <li>Courage</li>
+              <li>Passion</li>
+              <li>Honesty</li>
+              <li>Selflessness</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap size-50">
+            <h2><strong>7 Aspects</strong> of our Culture</h2>
+            <hr>
+            <ol class="text-cols">
+              <li><strong>Values are what we Value</strong></li>
+              <li><strong>High Performance</strong></li>
+              <li>Freedom & Responsibility</li>
+              <li>Context, not Control</li>
+              <li>Highly Alined, Loosely Coupled</li>
+              <li>Pay Top of Market</li>
+              <li>Promotions & Development</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/8lUTnkZXZSA/1600x800')"></span>
+          <div class="wrap">
+            <h3><strong>2/7 High Performance</strong></h3>
+            <ul class="flexblock features">
+              <li>
+                <div>
+                  <h2>
+                    <svg class="fa-users">
+                      <use xlink:href="#fa-users"></use>
+                    </svg>
+                    We're a team
+                  </h2>
+                  not a family.
+                </div>
+              </li>
+              <li>
+                <div>
+                  <h2>
+                    <svg class="fa-trophy">
+                      <use xlink:href="#fa-trophy"></use>
+                    </svg>
+                    We're a pro sports team
+                  </h2>
+                  not a kid's recreational team.
+                </div>
+              </li>
+              <li>
+                <div>
+                  <h2>
+                    <svg class="fa-star">
+                      <use xlink:href="#fa-star"></use>
+                    </svg>
+                    We have stars
+                  </h2>
+                  in every position.
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <span class="background" style="background-image:url('https://source.unsplash.com/M-H70CDJnDI/1600x800')"></span>
+          <div class="wrap size-60 bg-trans-dark">
+            <h4><strong>Why are we so manic on high performance?</strong></h4>
+            <p class="text-intro">In procedural work, the best are 2x better than the average.</p>
+            <hr>
+            <p class="text-intro">In creative work, the best are 10x better than the average, so huge premium on creating effective teams of the best.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black">
+          <span class="background" style="background-image:url('https://source.unsplash.com/26qZsuRwm0c/1600x800')"></span>
+          <div class="wrap aligncenter">
+            <h2><strong>Content that people love</strong></h2>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <div class="embed">
+            <video autoplay loop poster="https://webslides.tv/static/images/netflix.jpg">
+              <source src="https://webslides.tv/static/videos/netflix.mp4" type="video/mp4">
+            </video>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section>
+          <div class="wrap size-50">
+            <h3><strong>3/7 Freedom & Responsibility</strong></h3>
+            <p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p>
+            <hr>
+            <p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's best interest" (5 words long).</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h3><strong>"Act in Netflix's best interest"</strong> generally means...</h3>
+            <ul class="flexblock border">
+            <li>
+              Expense only what you would otherwise not spend.
+            </li>
+            <li>
+              Travel as you would if it were your own money.
+            </li>
+            <li>
+              What gifts you can accept?
+              Disclose non-trivial vendor gifts.
+            </li>
+            <li>
+              Take from Netflix only when it is inefficient to not take (calls...)
+            </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-50 bg-white">
+            <h4><strong>Summary of Freedom & Responsibility</strong></h4>
+            <hr>
+            <ol>
+              <li>As we grow, minimize rules.</li>
+              <li>Inhibit chaos with ever more high performance people.</li>
+              <li><strong>Flexibility is more important than efficiency</strong> in the long term.</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="grid">
+              <div class="column">
+                <p class="text-context">
+                  This is a homage.
+                </p>
+                <p class="text-intro"><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> wrote <strong>"Netflix Culture: Freedom & Responsibility"</strong>. Go to <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> to read the whole document.</p>
+              </div>
+              <div class="column">
+               <div>
+                <div class="embed">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/uvG0aCbuG60?rel=0&amp;controls=0"  allowfullscreen></iframe>
+                </div>
+                <!-- normalize flexbox -->
+               </div>
+               <!-- end .embed -->
+              </div>
+              <!-- end .column -->
+            </div>
+            <!-- end .grid -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+
+      </article>
+    </main>
+    <!--main-->
+
+    <footer>
+      <div class="wrap">
+        <p>
+          <span class="alignright"><a href="http://netflix.com" title="Netflix"><img src="../static/images/logos/netflix.svg" alt="Netflix"></a></span>
+        </p>
+      </div>
+    </footer>
+
+    <!-- Required -->
+    <script src="../static/js/webslides.js"></script>
+    <script>
+      window.ws = new WebSlides();
+    </script> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); -->
+
+    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
+    <script defer src="../static/js/svg-icons.js"></script>
+
+  </body>
+</html>

demos/portfolios.html

@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
       -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
 
     <!-- CSS Base -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
-
-    <!-- CSS Colors -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -71,7 +67,7 @@
         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +82,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -97,7 +93,7 @@
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
           - Vertical sliding = <article id="webslides" class="vertical">
-          - <div class="wrap"> = container 1200px
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-primary">
@@ -105,14 +101,14 @@
           <div class="wrap aligncenter">
             <h1 class="text-landing">Portfolios</h1>
             <p class="text-symbols">* * * </p>
-            <p><a class="button ghost" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
+            <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
                 <use xlink:href="#fa-cloud-download"></use>
               </svg> WebSlides</a>
             </p>
           </div>
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <p class="text-subtitle">Design faster, better.</p>
             <h2>Create a beautiful portfolio for your work</h2>
@@ -120,7 +116,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -138,7 +134,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -333,7 +329,7 @@
           </div>
         </section>
         <section class="bg-black-blue">
-          <span class="background dark" style="background-image:url('https://source.unsplash.com/nw6xREmkXkg/')"></span>
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/LW3FskrgQ9M/')"></span>
           <div class="wrap size-50">
             <p class="text-subtitle">Mercedes-Benz</p>
             <h2>Defining a new platform for the connected car</h2>
@@ -432,7 +428,7 @@
         <section class="aligncenter">
           <div class="wrap size-50">
             <figure class="browser">
-              <a href="#" title="Title"><img src="../static/images/cover-apple.jpg" alt="Screenshot"></a>
+              <a href="#" title="Title"><img src="https://webslides.tv/static/images/cover-apple.jpg" alt="Screenshot"></a>
             </figure>
             <p>HTML/CSS Browser: <code>.browser</code></p>
           </div>
@@ -569,7 +565,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$48 Billion</h2>
             <h3>Revenue in Q2 2019</h3>
@@ -1211,7 +1207,7 @@
         </section>
         <section>
           <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>Call to action</h2>
@@ -1389,7 +1385,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50 aligncenter">
               <h2><strong>Why WebSlides?</strong></h2>
               <blockquote>
@@ -1400,9 +1396,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>When I'm working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful, I know it is wrong.</p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Buckminster_Fuller">R. Buckminster Fuller</a>.</cite></p>
             </blockquote>
@@ -1619,7 +1615,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1720,12 +1716,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -1743,7 +1740,7 @@
           <div class="wrap size-60">
             <!-- Responsive video/iframe... Add <div class="embed"> -->
             <div class="embed">
-              <iframe width="800" height="450" src="https://www.youtube.com/embed/vXeF6Uot8pk?list=PL27Ptt5XwkS3YU7n0p7Qer2j_DhTSi0jW" allowfullscreen></iframe>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -1752,28 +1749,33 @@
         <section class="fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/b4LrTkWq9jU" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-black aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+           </video>
+          </div><!-- .end .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>We build brands with integrity and substance</strong></h2>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-blue">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-blue">
+         <div class="embed dark">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
-          <!-- .wrap = container 1200px -->
+           </video>
+          </div>
+          <!-- .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>We help with design direction</strong></h2>
-            <p>0verlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
+            <p>0verlay: <code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1858,16 +1860,15 @@
     </main>
     <!--main-->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+
+    <script>
+      window.ws = new WebSlides();
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>

demos/why-webslides.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en-US" prefix="og: http://ogp.me/ns#">
+<html lang="en" prefix="og: http://ogp.me/ns#">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -26,10 +25,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
 
     <!-- CSS Base -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
-
-    <!-- CSS Colors -->
-    <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
+    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
 
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
@@ -66,7 +62,6 @@
     <!-- Android -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#333333">
-
   </head>
   <body>
     <header role="banner">
@@ -74,7 +69,7 @@
         <p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -89,7 +84,7 @@
               <em>@WebSlides</em>
             </a>
           </li>
-          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
         </ul>
       </nav>
     </header>
@@ -100,11 +95,11 @@
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
           - Vertical sliding = <article id="webslides" class="vertical">
-          - <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <h1 class="text-landing">Good Karma</h1>
             <p class="text-intro">
@@ -115,7 +110,7 @@
                <ul>
                  <li><a href="https://twitter.com/webslides">Twitter</a></li>
                  <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
-                 <li><a href="https://github.com/jlantunez/webslides">Github</a></li>
+                 <li><a href="https://github.com/webslides/webslides">Github</a></li>
                </ul>
              </nav>
           </div>
@@ -124,7 +119,9 @@
         <section class="bg-black aligncenter">
           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
           <span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span>
-          <!--.wrap = container 1200px -->
+          <!-- background with a frame frame -->
+          <span class="background frame"></span>
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap fadeInUp">
             <h1>
               Everyone
@@ -137,7 +134,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -151,7 +148,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -169,7 +166,7 @@
   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
   &lt;section class="bg-primary"&gt;
     &lt;div class="wrap"&gt;
-      &lt;h2&gt;.wrap = container 1200px&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -182,7 +179,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides was made to inspire people.</h2>
@@ -303,7 +300,7 @@
                 </ul>
               </div>
               <div class="column">
-                <a href="https://github.com/jlantunez/webslides" title="Github"><img src="../static/images/setup.png" alt="WebSlides Files"></a>
+                <a href="https://github.com/webslides/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a>
               </div>
               <div class="column">
                 <h3>Extensible</h3>
@@ -339,13 +336,12 @@
     </main>
     <!--main-->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <!-- Required -->
     <script src="../static/js/webslides.js"></script>
 
-    <!-- Autoslide 5 seconds. If you don't want autoslide, remove: {interval: 5000} -->
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides({interval: 5000});
+    <!-- Autoslide 5 seconds. If you don't want autoslide, remove: {autoslide: 5000} -->
+    <script>
+      window.ws = new WebSlides({ autoslide: 5000 });
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->

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,219 @@
+<!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}}>
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="{{options.logo}}" alt="{{options.title}}" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+      {{#each options.mainmenu}}
+        <li><a href="{{url}}" target="_blank" class="{{class}}">{{title}}</a></li>
+      {{/each}}
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>{{options.title}}</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link {{#if template.isHomepage}}kss-nav__menu-link-active{{/if}}" href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+      {{#each menu}}
+        <li class="kss-nav__menu-item {{#if children}}kss-nav-has-children{{/if}}">
+          <a class="kss-nav__menu-link {{#if isActive}}kss-nav__menu-link-active{{/if}}" href="section-{{referenceURI}}.html">
+            <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 kss-nav__ref {{#if isGrandChild}}kss-nav__ref-child{{/if}}" href="section-{{../referenceURI}}.html#kssref-{{referenceURI}}">
+                    <span class="kss-nav__name">{{header}}</span>
+                  </a>
+                </li>
+              {{/each}}
+              </ul>
+            {{/if}}
+          {{/if}}
+        </li>
+      {{/each}}
+      </ul>
+    </nav>
+  </div>
+  <div 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}}
+      <div 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}}">
+              {{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 demos}}
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+            {{#Demos demos}}
+              <li>
+                <a href="{{demo.href}}" title="{{demo.title}}" target="_blank">{{demo.title}}</a>
+              </li>
+            {{/Demos}}
+          </ul>
+        {{/if}}
+
+        {{#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}}
+
+      </div>
+    {{/each}}
+  {{/if}}
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+{{{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/arrow_down.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="9.9999971"
+   height="5.5346432"
+   viewBox="0 0 9.9999977 5.5346432"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="arrow_down.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="79.100028"
+     inkscape:cx="4.9999972"
+     inkscape:cy="2.7673237"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:window-width="1301"
+     inkscape:window-height="744"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4147"
+       originx="-191.71574"
+       originy="-661.71576" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-191.71573,-385.11179)">
+    <path
+       style="fill:#5f6971;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 192.01499,386.13349 3.97364,3.97363 c 0.72248,0.72248 0.72248,0.72248 1.44495,-0.0206 l 3.99944,-3.92719 c 0.69668,-0.74828 -0.0258,-1.47076 -0.74828,-0.74828 l -3.94783,3.97363 -3.99944,-3.97363 c -0.72248,-0.72248 -1.44496,0 -0.72248,0.72248 z"
+       id="path4149"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>

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

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="9.9999971"
+   height="5.5346432"
+   viewBox="0 0 9.9999977 5.5346432"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="arrow_up.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="79.100028"
+     inkscape:cx="4.9999972"
+     inkscape:cy="2.7673237"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:window-width="1301"
+     inkscape:window-height="744"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4147"
+       originx="-191.71574"
+       originy="-661.71576" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-191.71573,-385.11179)">
+    <path
+       style="fill:#5f6971;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 192.01499,389.62473 3.97364,-3.97363 c 0.72248,-0.72248 0.72248,-0.72248 1.44495,0.0206 l 3.99944,3.92719 c 0.69668,0.74828 -0.0258,1.47076 -0.74828,0.74828 l -3.94783,-3.97363 -3.99944,3.97363 c -0.72248,0.72248 -1.44496,0 -0.72248,-0.72248 z"
+       id="path4149"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>

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

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="12.229629mm"
+   height="2.8222222mm"
+   viewBox="0 0 43.333329 9.9999999"
+   id="svg4272"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="browser_icon.svg">
+  <defs
+     id="defs4274" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="12.169231"
+     inkscape:cx="32.5"
+     inkscape:cy="7.5000031"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1301"
+     inkscape:window-height="744"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4820"
+       originx="-120"
+       originy="-719.99998" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4277">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-120,-322.36221)">
+    <circle
+       style="fill:#e7e7e9;fill-opacity:1;stroke:none"
+       id="path4822"
+       cx="125"
+       cy="327.36221"
+       r="5" />
+    <circle
+       r="5"
+       cy="327.36221"
+       cx="141.66667"
+       id="circle4824"
+       style="fill:#e7e7e9;fill-opacity:1;stroke:none" />
+    <circle
+       style="fill:#e7e7e9;fill-opacity:1;stroke:none"
+       id="circle4826"
+       cx="158.33333"
+       cy="327.36221"
+       r="5" />
+  </g>
+</svg>

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,654 @@
+[class*='kss-'] {
+  font-family: 'San Francisco'; }
+
+.kss-style {
+  color: #60676f;
+  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px; }
+  .kss-style a {
+    color: #d1783e;
+    text-decoration: none;
+    transition-duration: .5s;
+    transition-property: color; }
+    .kss-style a:visited {
+      color: #d1783e; }
+    .kss-style a:focus {
+      color: #e5b290; }
+    .kss-style a:active, .kss-style a:hover {
+      color: #d1783e; }
+    .kss-style a:hover, .kss-style a:active {
+      outline: 0; }
+    .kss-style a.kss-nav__menu-link {
+      color: #2e3337;
+      font-size: 1.3rem;
+      font-weight: 900; }
+    .kss-style a.kss-nav__menu-link-active {
+      color: #93cdcf; }
+  .kss-style p {
+    margin: 12px 0 24px; }
+  .kss-style h1,
+  .kss-style h2,
+  .kss-style h3,
+  .kss-style h4,
+  .kss-style h5,
+  .kss-style h6 {
+    color: #111;
+    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+    font-weight: 900;
+    line-height: 1.15em;
+    margin: 24px 0 0; }
+  .kss-style h4,
+  .kss-style h5,
+  .kss-style h6 {
+    font-weight: bold; }
+  .kss-style h1::before,
+  .kss-style h2::before {
+    color: #e2e3e5;
+    font-size: 17.6px;
+    position: absolute; }
+  .kss-style h1::after,
+  .kss-style h2::after {
+    border-bottom: 1px solid #f4f3f8;
+    content: '';
+    display: block;
+    height: 2.4rem;
+    margin-left: -90px;
+    width: 74vw; }
+  .kss-style h1 {
+    font-size: 40px; }
+    .kss-style h1::before {
+      content: ' #';
+      margin-left: -20px; }
+  .kss-style h2 {
+    font-size: 32px; }
+    .kss-style h2::before {
+      content: '##';
+      margin-left: -30px; }
+  .kss-style h3 {
+    font-size: 34px; }
+  .kss-style h4 {
+    font-size: 32px; }
+  .kss-style h5 {
+    font-size: 30px; }
+  .kss-style h6 {
+    font-size: 28px; }
+  .kss-style blockquote {
+    border-left: 0.5em #e6e6e6 solid;
+    color: #999;
+    margin: 0;
+    padding-left: 24px; }
+  .kss-style hr {
+    border: 0;
+    border-bottom: 1px solid #e6e6e6;
+    border-top: 1px solid white;
+    display: block;
+    height: 2px;
+    margin: 24px 0;
+    padding: 0; }
+  .kss-style pre,
+  .kss-style code,
+  .kss-style kbd,
+  .kss-style samp {
+    color: #393c40;
+    font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace;
+    font-size: 1em; }
+  .kss-style pre {
+    overflow: scroll;
+    white-space: pre; }
+  .kss-style ins {
+    background: #ff9;
+    color: #111;
+    text-decoration: none; }
+  .kss-style mark {
+    background: #ff0;
+    color: #111;
+    font-weight: bold; }
+  .kss-style sub,
+  .kss-style sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline; }
+  .kss-style sup {
+    top: -.5em; }
+  .kss-style sub {
+    bottom: -.25em; }
+  .kss-style ul,
+  .kss-style ol {
+    margin: 24px 0;
+    padding: 0 0 0 24px; }
+  .kss-style li p:last-child {
+    margin: 0; }
+  .kss-style dd {
+    margin: 0 0 0 24px; }
+  .kss-style img {
+    border: 0;
+    max-width: 100%;
+    vertical-align: middle; }
+  .kss-style table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+  .kss-style td {
+    vertical-align: top; }
+  @media print {
+    .kss-style a,
+    .kss-style a:visited {
+      text-decoration: underline; }
+    .kss-style hr {
+      border: 0;
+      border-bottom: 1px solid #000;
+      height: 1px; }
+    .kss-style a[href]:after {
+      content: " (" attr(href) ")"; }
+    .kss-style a[href^='javascript:']:after,
+    .kss-style a[href^='#']:after {
+      content: ''; }
+    .kss-style abbr[title]:after {
+      content: " (" attr(title) ")"; }
+    .kss-style pre,
+    .kss-style blockquote {
+      border: 1px solid #999;
+      padding-right: 1em;
+      page-break-inside: avoid; }
+    .kss-style tr,
+    .kss-style img {
+      page-break-inside: avoid; }
+    .kss-style img {
+      max-width: 100%; }
+    .kss-style p,
+    .kss-style h2,
+    .kss-style h3 {
+      orphans: 3;
+      widows: 3; }
+    .kss-style h2,
+    .kss-style h3 {
+      page-break-after: avoid; } }
+
+#kss-node {
+  background: #fff;
+  margin: 0;
+  padding: 20px;
+  /* SPAN elements with the classes below are added by prettyprint. */
+  /* Specify class=linenums on a pre to get line numbering */ }
+  #kss-node.kss-fullscreen-mode .kss-sidebar,
+  #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen),
+  #kss-node.kss-fullscreen-mode .kss-github {
+    display: none; }
+  @media screen and (min-width: 769px) {
+    #kss-node {
+      padding: 0; }
+      #kss-node .kss-main,
+      #kss-node .kss-sidebar {
+        border: 0;
+        border-right: 1px solid #e2e3e5;
+        box-sizing: border-box; } }
+  @media screen and (min-width: 769px) {
+    #kss-node .kss-main {
+      padding: 140px 90px; } }
+  #kss-node .kss-sidebar {
+    border-right: 1px solid #e2e3e5; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-sidebar {
+        border-bottom: 0;
+        padding: 150px 10px 0 20px; } }
+  #kss-node .kss-doc-title {
+    margin: 0; }
+    #kss-node .kss-doc-title img {
+      max-width: 40px;
+      vertical-align: middle; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-doc-title {
+        font-size: 1.5em; } }
+  #kss-node .kss-nav {
+    position: relative; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-nav {
+        margin-top: 2em; } }
+    #kss-node .kss-nav ul,
+    #kss-node .kss-nav ol,
+    #kss-node .kss-nav li {
+      display: block;
+      float: none; }
+    #kss-node .kss-nav li {
+      margin-left: 3.2rem; }
+    #kss-node .kss-nav .kss-nav-has-children > a::before {
+      content: url("./arrow_down.svg"); }
+    #kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before {
+      content: url("./arrow_up.svg"); }
+  #kss-node .kss-nav__menu {
+    list-style-type: none;
+    margin-bottom: 12px;
+    margin-top: 12px;
+    padding: 0; }
+  #kss-node .kss-nav__menu-item {
+    display: inline-block;
+    padding-right: 24px; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-nav__menu-item {
+        display: list-item;
+        padding-right: 0; } }
+  #kss-node .kss-nav__menu-link {
+    display: inline-block;
+    position: relative; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-nav__menu-link:before {
+        background-color: transparent;
+        content: ' ';
+        height: 100%;
+        left: -20px;
+        position: absolute;
+        width: 0; } }
+  #kss-node .kss-nav__menu-child {
+    display: none; }
+    @media screen and (min-width: 769px) {
+      #kss-node .kss-nav__menu-child {
+        display: block;
+        list-style-type: none;
+        margin: 0;
+        padding: 0; }
+        #kss-node .kss-nav__menu-child li {
+          padding: 15px 0 0; }
+          #kss-node .kss-nav__menu-child li:last-child {
+            padding: 15px 0; } }
+  #kss-node .kss-nav__ref {
+    color: #6a737a; }
+    #kss-node .kss-nav__ref:after {
+      content: ' '; }
+  #kss-node .kss-nav__ref-child {
+    font-weight: normal;
+    padding-left: 1.2rem; }
+  #kss-node .kss-section {
+    padding-bottom: 2.4rem;
+    padding-top: 2.4rem; }
+    #kss-node .kss-section.is-fullscreen {
+      bottom: 0;
+      box-sizing: border-box;
+      height: 100%;
+      left: 0;
+      margin: 0;
+      max-height: none;
+      max-width: none;
+      min-height: 0;
+      min-width: 0;
+      object-fit: contain;
+      overflow: auto;
+      padding: 20px;
+      position: fixed;
+      right: 0;
+      top: 0;
+      transform: none;
+      width: 100%; }
+  #kss-node .kss-title {
+    margin-bottom: 0; }
+  #kss-node .is-fullscreen .kss-title {
+    margin-top: 0; }
+  #kss-node .kss-title__ref {
+    color: #333;
+    display: block;
+    font-size: 16px;
+    line-height: 16px; }
+    #kss-node .kss-title__ref:before {
+      content: 'Section '; }
+  #kss-node .kss-title__permalink {
+    color: #000;
+    display: block;
+    text-decoration: none; }
+    #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {
+      color: #d1783e; }
+      @media screen and (min-width: 607px) {
+        #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash {
+          display: inline; } }
+  #kss-node .kss-title__permalink-hash {
+    color: #999;
+    display: none; }
+  #kss-node .kss-toolbar {
+    display: inline-block;
+    line-height: 1;
+    margin: 6px 0 24px;
+    padding: 3px; }
+    #kss-node .kss-toolbar a {
+      box-sizing: content-box;
+      display: inline-block;
+      height: 16px;
+      overflow: visible;
+      padding: 3px;
+      position: relative;
+      vertical-align: top;
+      width: 16px; }
+      #kss-node .kss-toolbar a + a {
+        margin-left: 6px; }
+      #kss-node .kss-toolbar a .kss-toolbar__icon-fill {
+        fill: #999; }
+      #kss-node .kss-toolbar a svg.on {
+        display: none; }
+      #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {
+        border-color: #000; }
+        #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {
+          fill: #000; }
+  #kss-node .kss-toolbar__tooltip {
+    background: #fff;
+    border: solid 1px #999;
+    bottom: 100%;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+    clip: rect(1px, 1px, 1px, 1px);
+    color: #000;
+    cursor: help;
+    display: inline-block;
+    height: 1px;
+    left: -10px;
+    margin-bottom: 5px;
+    opacity: 0;
+    overflow: hidden;
+    padding: 8px 10px 6px;
+    position: absolute;
+    transition: opacity .25s;
+    white-space: nowrap;
+    width: 1px;
+    word-wrap: normal;
+    z-index: 1; }
+    #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {
+      border-color: #999 transparent;
+      border-style: solid;
+      border-width: 7px 5px 0;
+      bottom: -8px;
+      content: '';
+      height: 0;
+      left: 15px;
+      position: absolute;
+      width: 0; }
+    #kss-node .kss-toolbar__tooltip:after {
+      border-top-color: #fff;
+      bottom: -6px; }
+  #kss-node a:focus > .kss-toolbar__tooltip,
+  #kss-node a:hover > .kss-toolbar__tooltip {
+    clip: auto;
+    height: auto;
+    opacity: 1;
+    overflow: visible;
+    width: auto; }
+  #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
+  #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],
+  #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {
+    background-color: #999;
+    border-color: #999; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {
+      fill: #fff; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {
+      display: block; }
+    #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,
+    #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,
+    #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {
+      display: none; }
+  #kss-node .kss-parameters {
+    display: table;
+    list-style-type: none;
+    margin-left: 0;
+    margin-top: 0;
+    padding-left: 0; }
+  #kss-node .kss-parameters__title {
+    font-weight: bold; }
+  #kss-node .kss-parameters__item {
+    display: table-row; }
+  #kss-node .kss-parameters__name {
+    display: table-cell;
+    padding-right: 20px;
+    white-space: nowrap; }
+  #kss-node .kss-parameters__description {
+    display: table-cell; }
+  #kss-node .kss-parameters__default-value code {
+    white-space: nowrap; }
+  #kss-node .is-fullscreen .kss-modifier__wrapper {
+    border: 0;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 0;
+    padding-right: 0; }
+  #kss-node .kss-modifier__heading {
+    margin: 2.4rem 0;
+    padding: 1.2rem 0; }
+    #kss-node .kss-modifier__heading::after {
+      border-bottom: 4px solid #f3f3f5;
+      content: '';
+      display: block;
+      padding-top: 1.2rem;
+      width: 40%; }
+  #kss-node .is-fullscreen .kss-modifier__heading {
+    border: 1px solid #999;
+    margin: 0 20px 10px; }
+  #kss-node .kss-modifier__default-name {
+    font-weight: bold;
+    margin-bottom: 12px; }
+  #kss-node .is-fullscreen .kss-modifier__default-name {
+    margin-left: 20px;
+    margin-right: 20px; }
+  #kss-node .kss-modifier__name {
+    float: left;
+    font-weight: bold;
+    padding-right: 10px; }
+  #kss-node .is-fullscreen .kss-modifier__name {
+    margin-left: 20px; }
+  #kss-node .kss-modifier__description {
+    margin-bottom: 12px; }
+  #kss-node .is-fullscreen .kss-modifier__description {
+    margin-right: 20px; }
+  #kss-node .kss-modifier__example {
+    border: 2px dashed transparent;
+    clear: left;
+    margin: -2px -2px 22px;
+    position: relative;
+    z-index: 0; }
+    #kss-node .kss-modifier__example:last-child {
+      margin-bottom: 0; }
+    #kss-node .kss-modifier__example .fullscreen {
+      border-radius: 6px;
+      padding-bottom: 50%; }
+      #kss-node .kss-modifier__example .fullscreen .embed {
+        height: calc(100% - 30px);
+        left: 5px;
+        position: absolute;
+        top: 25px;
+        width: calc(100% - 10px); }
+    #kss-node .kss-modifier__example section {
+      padding: 0;
+      position: relative; }
+      #kss-node .kss-modifier__example section::before {
+        position: absolute;
+        top: 0;
+        width: 100%; }
+      #kss-node .kss-modifier__example section p {
+        padding: 2.4rem; }
+    #kss-node .kss-modifier__example .fullscreen,
+    #kss-node .kss-modifier__example section {
+      border: 2px solid #e7e7e9; }
+      #kss-node .kss-modifier__example .fullscreen::before,
+      #kss-node .kss-modifier__example section::before {
+        background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5;
+        border-bottom: 2px solid #e7e7e9;
+        content: '';
+        display: block;
+        height: 20px; }
+  #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:before,
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:after {
+    border: 2px solid #000;
+    box-sizing: border-box;
+    content: '';
+    height: 5px;
+    position: absolute;
+    width: 5px;
+    z-index: -1; }
+  #kss-node.kss-guides-mode .kss-modifier__example {
+    border-color: #000; }
+    #kss-node.kss-guides-mode .kss-modifier__example:before {
+      border-left: 0;
+      border-top: 0;
+      left: -5px;
+      top: -5px; }
+    #kss-node.kss-guides-mode .kss-modifier__example:after {
+      border-right: 0;
+      border-top: 0;
+      right: -5px;
+      top: -5px; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {
+    left: auto;
+    right: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after {
+    left: 0;
+    right: auto; }
+  #kss-node .kss-modifier__example-footer {
+    clear: both; }
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:before {
+    border-bottom: 0;
+    border-left: 0;
+    bottom: -5px;
+    left: -5px; }
+  #kss-node.kss-guides-mode .kss-modifier__example-footer:after {
+    border-bottom: 0;
+    border-right: 0;
+    bottom: -5px;
+    right: -5px; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before {
+    left: auto;
+    right: 0; }
+  #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after {
+    left: 0;
+    right: auto; }
+  #kss-node .kss-markup {
+    border: 1px solid #e0e4e7;
+    border-radius: 3px;
+    margin: 24px 0;
+    padding: 20px; }
+    #kss-node .kss-markup[open] summary {
+      background: url("./arrow_up.svg") no-repeat right center; }
+    #kss-node .kss-markup summary {
+      background: url("./arrow_down.svg") no-repeat right center;
+      cursor: pointer; }
+    #kss-node .kss-markup pre {
+      background: #1d1f20;
+      overflow: auto;
+      padding: 20px; }
+      #kss-node .kss-markup pre code {
+        background: transparent; }
+  #kss-node .kss-source {
+    font-size: 70%;
+    font-style: italic; }
+  #kss-node .kss-github {
+    display: none; }
+    @media screen and (min-width: 501px) {
+      #kss-node .kss-github {
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 0; } }
+    #kss-node .kss-github img {
+      border: 0; }
+  #kss-node .tag {
+    color: #a7925a; }
+  #kss-node .atn {
+    color: #ddca7e; }
+  #kss-node .pun {
+    color: #fff; }
+  #kss-node .atv {
+    color: #96b38a; }
+  #kss-node .pln {
+    color: #fff; }
+  #kss-node ol.linenums {
+    list-style-type: none;
+    margin: 0;
+    padding: 0; }
+    #kss-node ol.linenums li {
+      line-height: 2rem;
+      margin: 0;
+      min-height: 24px;
+      padding: 0 10px; }
+  #kss-node .kss__demos {
+    list-style: none; }
+    #kss-node .kss__demos li {
+      margin-left: 0; }
+    #kss-node .kss__demos a {
+      color: #d1783e;
+      font-size: 13.33333px;
+      font-weight: bold; }
+  #kss-node .fullscreen > .embed {
+    position: relative; }
+  #kss-node #navigation {
+    opacity: 1;
+    position: relative; }
+  #kss-node #kssref-longforms-interviews .text-interview {
+    margin-left: 34%;
+    width: 66%; }
+
+.kss-container {
+  display: grid;
+  grid-template-columns: 25% 75%; }
+
+.kss-header {
+  background-color: #2f3742;
+  display: flex;
+  padding: 0 2.4rem;
+  position: fixed; }
+  .kss-header h1,
+  .kss-header li a {
+    color: #fff;
+    display: inline-block;
+    font-family: 'San Francisco';
+    font-size: .8em;
+    font-weight: bold;
+    line-height: 7.2rem;
+    padding: 0; }
+  .kss-header li a:hover {
+    color: #93cdcf; }
+  .kss-header .kss-menu-active {
+    border-bottom: 4px solid #93cdcf;
+    box-sizing: border-box;
+    color: #93cdcf; }
+
+.kss-sub-header {
+  background: #f3f3f5;
+  border-bottom: 4px solid #e7e7e9;
+  font-size: 14px;
+  padding: 1rem 2.4rem;
+  position: fixed;
+  top: 72px;
+  width: 100%;
+  z-index: 1; }
+
+#kssref-layout-radius .radius {
+  padding: 2.4rem; }
+
+#kssref-layout-backgrounds span[class*='bg'] {
+  display: inline-block;
+  margin-left: -4px;
+  padding: 1.2rem;
+  width: 25%; }
+
+#kssref-layout-backgrounds-transparent div[class*='bg'] {
+  margin: 0;
+  padding: 2rem; }
+  #kssref-layout-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
+    margin: 3rem;
+    padding: 6rem; }
+
+#kssref-layout-backgrounds-gradient div[class*='bg'] {
+  margin: 3rem;
+  padding: 4rem; }
+
+#kssref-slide-background-anim .slide {
+  clip: rect(0, 200px, 200px, 0);
+  position: absolute; }
+
+#kssref-slide-background-anim .kss-modifier__example {
+  height: 200px;
+  margin: 0 auto;
+  width: 200px; }
+
+.kss-description p {
+  padding-bottom: 1.2rem; }
+
+.kss-container-background-anim {
+  clip: rect(0 600px 400px 0); }

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/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/kss-extend/demos.js

@@ -0,0 +1,20 @@
+
+module.exports = function (Handlebars) {
+  'use strict';
+
+  Handlebars.registerHelper('Demos', function (doc, block) {
+    var accum = '';
+    var regex = /^\[([^\]]+)\]\(([^\)]+)\)$/gm;
+    var test;
+
+    while ((test = regex.exec(doc)) !== null) {
+      this.demo = {};
+      this.demo.title = test[1];
+      this.demo.href = test[2];
+
+      accum += block.fn(this);
+    }
+
+    return accum;
+  });
+};

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/kss/templates/homepage.md

@@ -0,0 +1,106 @@
+# WebSlides = Create stories with Karma
+
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
+[![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)
+[![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)
+[![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)
+
+Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos).
+
+* * *
+### Download
+Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
+* * *
+
+
+### What's in the download?
+
+The download includes demos and images (devices and logos). 
+All content is for demo purposes only. Images are property of their respective owners.
+
+```
+webslides/
+├── index.html
+├── css/
+│   ├── base.css
+│   └── colors.css
+│   └── svg-icons.css (optional)
+├── js/
+│   ├── webslides.js
+│   └── svg-icons.js (optional)
+└── demos/
+└── images/
+```
+
+## Features
+
+- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
+- Slide counter.
+- Permalinks: go to a specific slide.
+- Autoslide.
+- Click to nav.
+- Simple CSS alignments. Put content wherever you want (vertical centering...)
+- 40+ components: background images/videos, quotes, cards, covers...
+- Flexible blocks with auto-fill and equal height.
+- Fonts: Roboto, Maitree (Serif), and San Francisco.
+- Vertical rhythm (use multiples of 8).
+
+## Markup
+
+- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
+- Each parent `<section>` in the `#webslides` element is an individual slide.
+
+```html
+<article id="webslides">
+    <section>
+        <h1>Slide 1</h1>
+    </section>
+    <section class="bg-black aligncenter">
+    <!-- .wrap = container 1200px -->
+        <div class="wrap">
+            <h1>Slide 2</h1>
+        </div>
+    </section>
+</article>
+```
+
+### Vertical Sliding
+
+```html
+<article id="webslides" class="vertical">
+```
+
+### CSS Syntax (classes)
+
+- Typography: `.text-landing`, `.text-data`, `.text-intro`...
+- Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`...
+- Background Images: `.background`,`.background-center-bottom`...
+- Cards: `.card-50`, `.card-40`...
+- Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...
+
+### Extensions
+
+You can add:
+
+- [Unsplash](https://unsplash.com) photos
+- [animate.css](https://daneden.github.io/animate.css)
+- [particles.js](https://github.com/VincentGarreau/particles.js)
+- [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
+- [pt](http://williamngan.github.io/pt/)
+
+
+### Dive In!
+
+- Do not miss [our demos](https://webslides.tv/). 
+- Want to get techie? Read [our wiki](wiki):
+  - [FAQ](https://github.com/webslides/WebSlides/wiki)
+  - [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
+  - [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)
+  - [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)
+ 
+### Credits
+
+- WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
+- Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
+- Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).

doc/styleguide/index.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+      <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
+        <h1 id="webslides-create-stories-with-karma">WebSlides = Create stories with Karma</h1>
+<p><a href="http://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"></a>
+<a href="https://github.com/webslides/webslides/releases/latest"><img src="https://img.shields.io/github/release/webslides/webslides.svg" alt="Release"></a>
+<a href="https://codecov.io/gh/webslides/WebSlides"><img src="https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg" alt="codecov"></a>
+<a href="https://www.paypal.me/jlantunez/8"><img src="https://img.shields.io/badge/Donate-PayPal-green.svg" alt="Donate"></a>
+<a href="https://twitter.com/webslides"><img src="https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social" alt="Twitter"></a></p>
+<p>Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — <a href="https://webslides.tv/demos">https://webslides.tv/demos</a>.</p>
+<hr>
+<h3 id="download">Download</h3>
+<p>Simply choose a demo and customize it in seconds. Latest version: <a href="https://webslides.tv/webslides-latest.zip">webslides.tv/webslides-latest.zip</a>.</p>
+<hr>
+<h3 id="what-s-in-the-download-">What&#39;s in the download?</h3>
+<p>The download includes demos and images (devices and logos). 
+All content is for demo purposes only. Images are property of their respective owners.</p>
+<pre><code>webslides/
+├── index.html
+├── css/
+│   ├── base.css
+│   └── colors.css
+│   └── svg-icons.css (optional)
+├── js/
+│   ├── webslides.js
+│   └── svg-icons.js (optional)
+└── demos/
+└── images/
+</code></pre><h2 id="features">Features</h2>
+<ul>
+<li>Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.</li>
+<li>Slide counter.</li>
+<li>Permalinks: go to a specific slide.</li>
+<li>Autoslide.</li>
+<li>Click to nav.</li>
+<li>Simple CSS alignments. Put content wherever you want (vertical centering...)</li>
+<li>40+ components: background images/videos, quotes, cards, covers...</li>
+<li>Flexible blocks with auto-fill and equal height.</li>
+<li>Fonts: Roboto, Maitree (Serif), and San Francisco.</li>
+<li>Vertical rhythm (use multiples of 8).</li>
+</ul>
+<h2 id="markup">Markup</h2>
+<ul>
+<li>Code is clean and scalable. It uses intuitive markup with popular naming conventions. There&#39;s no need to overuse classes or nesting.</li>
+<li>Each parent <code>&lt;section&gt;</code> in the <code>#webslides</code> element is an individual slide.</li>
+</ul>
+<pre><code class="lang-html">&lt;article id=&quot;webslides&quot;&gt;
+    &lt;section&gt;
+        &lt;h1&gt;Slide 1&lt;/h1&gt;
+    &lt;/section&gt;
+    &lt;section class=&quot;bg-black aligncenter&quot;&gt;
+    &lt;!-- .wrap = container 1200px --&gt;
+        &lt;div class=&quot;wrap&quot;&gt;
+            &lt;h1&gt;Slide 2&lt;/h1&gt;
+        &lt;/div&gt;
+    &lt;/section&gt;
+&lt;/article&gt;
+</code></pre>
+<h3 id="vertical-sliding">Vertical Sliding</h3>
+<pre><code class="lang-html">&lt;article id=&quot;webslides&quot; class=&quot;vertical&quot;&gt;
+</code></pre>
+<h3 id="css-syntax-classes-">CSS Syntax (classes)</h3>
+<ul>
+<li>Typography: <code>.text-landing</code>, <code>.text-data</code>, <code>.text-intro</code>...</li>
+<li>Background Colors: <code>.bg-primary</code>, <code>.bg-apple</code>, <code>.bg-blue</code>...</li>
+<li>Background Images: <code>.background</code>,<code>.background-center-bottom</code>...</li>
+<li>Cards: <code>.card-50</code>, <code>.card-40</code>...</li>
+<li>Flexible Blocks: <code>.flexblock.clients</code>, <code>.flexblock.metrics</code>...</li>
+</ul>
+<h3 id="extensions">Extensions</h3>
+<p>You can add:</p>
+<ul>
+<li><a href="https://unsplash.com">Unsplash</a> photos</li>
+<li><a href="https://daneden.github.io/animate.css">animate.css</a></li>
+<li><a href="https://github.com/VincentGarreau/particles.js">particles.js</a></li>
+<li><a href="http://michalsnik.github.io/aos/">Animate on scroll</a> (Useful for longform articles)</li>
+<li><a href="http://williamngan.github.io/pt/">pt</a></li>
+</ul>
+<h3 id="dive-in-">Dive In!</h3>
+<ul>
+<li>Do not miss <a href="https://webslides.tv/">our demos</a>. </li>
+<li>Want to get techie? Read <a href="wiki">our wiki</a>:<ul>
+<li><a href="https://github.com/webslides/WebSlides/wiki">FAQ</a></li>
+<li><a href="https://github.com/webslides/WebSlides/wiki/Core-API">Core API</a></li>
+<li><a href="https://github.com/webslides/WebSlides/wiki/Plugin-docs">Plugin Docs</a></li>
+<li><a href="https://github.com/webslides/WebSlides/wiki/Plugin-development">Plugin Development</a></li>
+</ul>
+</li>
+</ul>
+<h3 id="credits">Credits</h3>
+<ul>
+<li>WebSlides was created by <a href="https://twitter.com/jlantunez">@jlantunez</a> using <a href="https://github.com/eudicots/Cactus">Cactus</a>.</li>
+<li>Javascript: <a href="https://twitter.com/Belelros">@Belelros</a> and <a href="https://twitter.com/luissacristan">@LuisSacristan</a>.</li>
+<li>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="https://twitter.com/jennschiffer">@JennSchiffer</a>.</li>
+</ul>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-forms-login.html

@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-forms-login" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-forms-login">
+              Login
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Creating a login form is a simple task, add every field you need: username, email, forget password?, buttons, ...</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;93" title="Microsoft login" target="_blank">Microsoft login</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <form action="/" method="post">
+  <fieldset>
+    <legend>Welcome back</legend>
+    <p><label>Username or Email</label>
+      <input tabindex="1" name="email" placeholder="your@email.com" required="" type="text">
+    </p>
+    <p><label>Password <span class="alignright"><a href="#" title="Forgot password?">Forgot?</a></span></label>
+      <input tabindex="2" name="password" placeholder="6 characters minimum" required="" type="password">
+    </p>
+    <p>
+      <button type="submit" tabindex="3" title="Login">Login ›</button>
+    </p>
+  </fieldset>
+</form>
+              <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;form action&#x3D;&quot;/&quot; method&#x3D;&quot;post&quot;&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Welcome back&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;Username or Email&lt;/label&gt;
+      &lt;input tabindex&#x3D;&quot;1&quot; name&#x3D;&quot;email&quot; placeholder&#x3D;&quot;your@email.com&quot; required&#x3D;&quot;&quot; type&#x3D;&quot;text&quot;&gt;
+    &lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;Password &lt;span class&#x3D;&quot;alignright&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Forgot password?&quot;&gt;Forgot?&lt;/a&gt;&lt;/span&gt;&lt;/label&gt;
+      &lt;input tabindex&#x3D;&quot;2&quot; name&#x3D;&quot;password&quot; placeholder&#x3D;&quot;6 characters minimum&quot; required&#x3D;&quot;&quot; type&#x3D;&quot;password&quot;&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;button type&#x3D;&quot;submit&quot; tabindex&#x3D;&quot;3&quot; title&#x3D;&quot;Login&quot;&gt;Login ›&lt;/button&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_form.scss</code>, line 164
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-forms-search.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-forms-search" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-forms-search">
+              Search
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>WebSlides provides a easy way for search forms creating. Connect it to your search engine and help your users to find information in your site. Longforms are part of a whole website, a search form allows to find more relevant information in your site.</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;92" title="Search form - Components" target="_blank">Search form - Components</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.</p>
+<form action="/" class="user" method="post">
+  <input name="location" tabindex="1" placeholder="Type here..." required="" type="search">
+  <button type="submit" tabindex="2" title="Search">Search ›</button>
+</form>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.&lt;/p&gt;
+&lt;form action&#x3D;&quot;/&quot; class&#x3D;&quot;user&quot; method&#x3D;&quot;post&quot;&gt;
+  &lt;input name&#x3D;&quot;location&quot; tabindex&#x3D;&quot;1&quot; placeholder&#x3D;&quot;Type here...&quot; required&#x3D;&quot;&quot; type&#x3D;&quot;search&quot;&gt;
+  &lt;button type&#x3D;&quot;submit&quot; tabindex&#x3D;&quot;2&quot; title&#x3D;&quot;Search&quot;&gt;Search ›&lt;/button&gt;
+&lt;/form&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_form.scss</code>, line 146
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-forms-try.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-forms-try" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-forms-try">
+              Try
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Highlight important links</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;120" title="Pay what you want..." target="_blank">Pay what you want...</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;53" title="Demos - Github" target="_blank">Demos - Github</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.</p>
+<p><a href="#" class="try">Important link</a></p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-intro&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.&lt;/p&gt;
+&lt;p&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;try&quot;&gt;Important link&lt;/a&gt;&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_form.scss</code>, line 96
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-forms.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-forms.html#kssref-forms-login">
+                    <span class="kss-nav__name">Login</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-forms.html#kssref-forms-search">
+                    <span class="kss-nav__name">Search</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-forms.html#kssref-forms-try">
+                    <span class="kss-nav__name">Try</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-forms" class="kss-section kss-section--depth-1 is-fullscreen">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-forms">
+              Forms
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio-badgets.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio-badgets" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-badgets">
+              Badges
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;52" title="Inside a Call to Action" target="_blank">Inside a Call to Action</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;56" title="Inside a Cover" target="_blank">Inside a Cover</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;57" title="Inside another Cover" target="_blank">Inside another Cover</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Inside a semi transparent layer" target="_blank">Inside a semi transparent layer</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="badge-android">Google Play</p>
+<p class="badge-ios">App Store</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;badge-android&quot;&gt;Google Play&lt;/p&gt;
+&lt;p class&#x3D;&quot;badge-ios&quot;&gt;App Store&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_badges.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio-buttons.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio-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-landings-and-portfolio-buttons">
+              Buttons
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;1" title="Transparent" target="_blank">Transparent</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Price list" target="_blank">Price list</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Another price list" target="_blank">Another price list</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;76" title="In cards" target="_blank">In cards</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <a href="#" class="button ">Download</a>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .radius
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Rounded corners
+              </div>
+              <div class="kss-modifier__example">
+                <a href="#" class="button radius">Download</a>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_button.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio-cards.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio-cards" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cards">
+              Cards
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;23" title="Card 50" target="_blank">Card 50</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="Where we are" target="_blank">Where we are</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;25" title="Fullscreen" target="_blank">Fullscreen</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;75" title="Card 60" target="_blank">Card 60</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+                <div class="card-50">
+    <figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
+    <div class="flex-content">
+      <h2>iPhone 7</h2>
+      <p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
+      <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
+    </div>
+  </div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">  &lt;div class&#x3D;&quot;card-50&quot;&gt;
+    &lt;figure&gt;&lt;img class&#x3D;&quot;aligncenter&quot; src&#x3D;&quot;/static/images/iphone.png&quot; alt&#x3D;&quot;iPhone&quot;&gt;&lt;/figure&gt;
+    &lt;div class&#x3D;&quot;flex-content&quot;&gt;
+      &lt;h2&gt;iPhone 7&lt;/h2&gt;
+      &lt;p class&#x3D;&quot;text-intro&quot;&gt;3D Touch, 12MP photos, and 4K video.&lt;/p&gt;
+      &lt;p&gt;Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_cards.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio-cta-cover.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio-cta-cover" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cta-cover">
+              Covers
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>TODO: needs a explanation</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;53" title="Demo" target="_blank">Demo</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="cta-cover">
+  <h1><strong>HTML Presentations</strong> Made Easy</h1>
+  <p class="alignright">
+    <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
+      WebSlides
+    </a>
+    <span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
+  </p>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;cta-cover&quot;&gt;
+  &lt;h1&gt;&lt;strong&gt;HTML Presentations&lt;/strong&gt; Made Easy&lt;/h1&gt;
+  &lt;p class&#x3D;&quot;alignright&quot;&gt;
+    &lt;a class&#x3D;&quot;button&quot; href&#x3D;&quot;https://webslides.tv/webslides-latest.zip&quot; title&#x3D;&quot;Download WebSlides&quot;&gt;
+      WebSlides
+    &lt;/a&gt;
+    &lt;span class&#x3D;&quot;try&quot;&gt;&lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;Demos&lt;/a&gt; · &lt;a href&#x3D;&quot;https://github.com/webslides/webslides&quot; title&#x3D;&quot;Github&quot;&gt;Github&lt;/a&gt;&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_promos.scss</code>, line 81
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio-cta.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio-cta" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cta">
+              Call to action
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>TODO: needs an explanation</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;58" title="Font demo" target="_blank">Font demo</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;78" title="An offer" target="_blank">An offer</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="cta">
+  <div class="number">
+    <p><span><sup>$</sup>40</span></p>
+  </div>
+  <div class="benefit">
+    <h2>Watch TV shows anytime, anywhere</h2>
+    <p>Lorem ipsum</p>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;cta&quot;&gt;
+  &lt;div class&#x3D;&quot;number&quot;&gt;
+    &lt;p&gt;&lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;40&lt;/span&gt;&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class&#x3D;&quot;benefit&quot;&gt;
+    &lt;h2&gt;Watch TV shows anytime, anywhere&lt;/h2&gt;
+    &lt;p&gt;Lorem ipsum&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_promos.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio-quotes.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio-quotes" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-quotes">
+              Quotes &amp; Cites
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;83" title="Why WebSlides?" target="_blank">Why WebSlides?</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;84" title="Sheryl Sandberg cite" target="_blank">Sheryl Sandberg cite</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;85" title="Example" target="_blank">Example</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;86" title="With picture" target="_blank">With picture</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;87" title="With side background" target="_blank">With side background</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <blockquote>
+  <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
+</blockquote>
+<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote&gt;
+  &lt;p&gt;&quot;I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides.&quot;&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;cite&gt; &lt;img class&#x3D;&quot;avatar-40&quot; src&#x3D;&quot;http://webslides.tv/static/images/avatar.jpg&quot; alt&#x3D;&quot;Avatar&quot;&gt; &lt;a href&#x3D;&quot;http://twitter.com/jlantunez/&quot;&gt;@jlantunez&lt;/a&gt;&lt;/cite&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_quotes.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio-resume.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio-resume" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-resume">
+              CV / Resumé
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;50" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="work">
+  <li class="work-label">
+    <p class="work-title">Work</p>
+    <p class="work-client">Client</p>
+    <p class="work-services">Services</p>
+    <p class="work-date">Year</p>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Redesign of Netflix</span></p>
+      <p class="work-client"><span>Netflix</span></p>
+      <p class="work-services"><span>Frontend</span></p>
+      <p class="work-date"><span>2015-2016</span></p>
+    </a>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Airbnb TV Commercials</span></p>
+      <p class="work-client"><span>Airbnb</span></p>
+      <p class="work-services"><span>Video, Storytelling</span></p>
+      <p class="work-date"><span>2015</span></p>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;work&quot;&gt;
+  &lt;li class&#x3D;&quot;work-label&quot;&gt;
+    &lt;p class&#x3D;&quot;work-title&quot;&gt;Work&lt;/p&gt;
+    &lt;p class&#x3D;&quot;work-client&quot;&gt;Client&lt;/p&gt;
+    &lt;p class&#x3D;&quot;work-services&quot;&gt;Services&lt;/p&gt;
+    &lt;p class&#x3D;&quot;work-date&quot;&gt;Year&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; rel&#x3D;&quot;external&quot;&gt;
+      &lt;p class&#x3D;&quot;work-title&quot;&gt;&lt;span&gt;Redesign of Netflix&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-client&quot;&gt;&lt;span&gt;Netflix&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-services&quot;&gt;&lt;span&gt;Frontend&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-date&quot;&gt;&lt;span&gt;2015-2016&lt;/span&gt;&lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; rel&#x3D;&quot;external&quot;&gt;
+      &lt;p class&#x3D;&quot;work-title&quot;&gt;&lt;span&gt;Airbnb TV Commercials&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-client&quot;&gt;&lt;span&gt;Airbnb&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-services&quot;&gt;&lt;span&gt;Video, Storytelling&lt;/span&gt;&lt;/p&gt;
+      &lt;p class&#x3D;&quot;work-date&quot;&gt;&lt;span&gt;2015&lt;/span&gt;&lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_work.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio-toc.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio-toc" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-toc">
+              Table of contents
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;69" title="Table of contents" target="_blank">Table of contents</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="toc">
+  <ol>
+    <li>
+      <a href="#" title="Go to Learning to see">
+      <span class="chapter">Prologue: Learning to See</span>
+      <span class="toc-page">01</span>
+      </a>
+    </li>
+    <li><a href="#" title="Go to What is Design?"><span class="chapter">What is Design?</span>
+      <span class="toc-page">04</span></a>
+    </li>
+    <li>
+      <a href="#" title="Go to What is Beauty?"><span class="chapter">What is Beauty?</span>
+      <span class="toc-page">08</span></a>
+      <ol>
+        <li><a href="#" title="Go to Harmony"><span class="chapter">Harmony</span>
+          <span class="toc-page">12</span></a>
+        </li>
+        <li><a href="#" title="Go to Simplicity vs. Clarity"><span class="chapter">Simplicity vs. Clarity</span>
+          <span class="toc-page">14</span></a>
+        </li>
+      </ol>
+    </li>
+  </ol>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;toc&quot;&gt;
+  &lt;ol&gt;
+    &lt;li&gt;
+      &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Learning to see&quot;&gt;
+      &lt;span class&#x3D;&quot;chapter&quot;&gt;Prologue: Learning to See&lt;/span&gt;
+      &lt;span class&#x3D;&quot;toc-page&quot;&gt;01&lt;/span&gt;
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to What is Design?&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;What is Design?&lt;/span&gt;
+      &lt;span class&#x3D;&quot;toc-page&quot;&gt;04&lt;/span&gt;&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to What is Beauty?&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;What is Beauty?&lt;/span&gt;
+      &lt;span class&#x3D;&quot;toc-page&quot;&gt;08&lt;/span&gt;&lt;/a&gt;
+      &lt;ol&gt;
+        &lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Harmony&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;Harmony&lt;/span&gt;
+          &lt;span class&#x3D;&quot;toc-page&quot;&gt;12&lt;/span&gt;&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Simplicity vs. Clarity&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;Simplicity vs. Clarity&lt;/span&gt;
+          &lt;span class&#x3D;&quot;toc-page&quot;&gt;14&lt;/span&gt;&lt;/a&gt;
+        &lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_toc.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-landings-and-portfolio.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-badgets">
+                    <span class="kss-nav__name">Badges</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-buttons">
+                    <span class="kss-nav__name">Buttons</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cards">
+                    <span class="kss-nav__name">Cards</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cta">
+                    <span class="kss-nav__name">Call to action</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cta-cover">
+                    <span class="kss-nav__name">Covers</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-quotes">
+                    <span class="kss-nav__name">Quotes &amp; Cites</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-resume">
+                    <span class="kss-nav__name">CV / Resumé</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-toc">
+                    <span class="kss-nav__name">Table of contents</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-landings-and-portfolio" class="kss-section kss-section--depth-1 is-fullscreen">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio">
+              Landings and portfolio
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-alignment.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-alignment" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-alignment">
+              Align content
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;7" title="Example right" target="_blank">Example right</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;6" title="Example left" target="_blank">Example left</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;8" title="Example right" target="_blank">Example right</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;5" title="In the header" target="_blank">In the header</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;58" title="In the footer" target="_blank">In the footer</a>
+              </li>
+          </ul>
+
+          <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 136
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-background-anim.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-background-anim" class="kss-section kss-section--depth-3 is-fullscreen">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-background-anim">
+              Animated
+            </a>
+          </h3>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;100" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="aligncenter bg-black">
+  <div class="kss-container-background-anim">
+    <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+  </div>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
+  &lt;div class&#x3D;&quot;kss-container-background-anim&quot;&gt;
+    &lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 152
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-background-video.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-background-video" class="kss-section kss-section--depth-3 is-fullscreen">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-background-video">
+              Video
+            </a>
+          </h3>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;34" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;video class&#x3D;&quot;background-video&quot; autoplay poster&#x3D;&quot;https://webslides.tv/static/images/working.jpg&quot;&gt;
+    &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/working.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+  &lt;/video&gt;
+  &lt;div class&#x3D;&quot;wrap&quot;&gt;
+    &lt;p&gt;&lt;code&gt;.background-video&lt;/code&gt;&lt;/p&gt;
+    &lt;h2&gt;&lt;strong&gt;WebSlides is the easiest way to make HTML presentations. Inspire and engage.&lt;/strong&gt;&lt;/h2&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 101
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-background.html

@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-background" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-background">
+              Backgrounds
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Example 1" target="_blank">Example 1</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;59" title="Example 2" target="_blank">Example 2</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;60" title="Example 3" target="_blank">Example 3</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;61" title="Example 4" target="_blank">Example 4</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;51" title="Right top" target="_blank">Right top</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;92" title="Right bottom" target="_blank">Right bottom</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;87" title="Left bottom" target="_blank">Left bottom</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <section>
+  <span class=" bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .background
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/800/800/city/&#x27;)&quot;&gt;&lt;/span&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 15
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

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

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-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-layout-backgrounds-gradient">
+              Backgrounds - Gradient
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+                <div class="bg-gradient-h">Horizontal</div>
+  <div class="bg-gradient-v">Vertical</div>
+  <div class="bg-gradient-r">Radial</div>
+Demos:
+[Horizontal](https://webslides.tv/demos/classes#slide=29)
+[Vertical](https://webslides.tv/demos/classes#slide=32)
+[Radial](https://webslides.tv/demos/classes#slide=31)
+              <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;
+Demos:
+[Horizontal](https://webslides.tv/demos/classes#slide&#x3D;29)
+[Vertical](https://webslides.tv/demos/classes#slide&#x3D;32)
+[Radial](https://webslides.tv/demos/classes#slide&#x3D;31)</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_color.scss</code>, line 201
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

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

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-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-layout-backgrounds-transparent">
+              Backgrounds - Transparent
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;28" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <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 173
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-backgrounds.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-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-layout-backgrounds">
+              Backgrounds
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="White" target="_blank">White</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;28" title="Several colors" target="_blank">Several colors</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;27" title="Examples" target="_blank">Examples</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <span class="bg-primary">Primary #44d</span>
+<span class="bg-secondary">Secondary #67d</span>
+<span class="bg-light">Light #f7f9fb</span>
+<span class="bg-black">Black #000</span>
+<span class="bg-black-blue">Black blue #123</span>
+<span class="bg-blue">Blue #346</span>
+<span class="bg-brown">Brown #f9f8f2</span>
+<span class="bg-gray">Gray #d5d9e2</span>
+<span class="bg-green">Green #077</span>
+<span class="bg-purple">Purple #62b</span>
+<span class="bg-red">Red #c23</span>
+<span class="bg-white">White #fff</span>
+<span class="bg-facebook">Facebook #3b5998</span>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary&quot;&gt;Primary #44d&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-secondary&quot;&gt;Secondary #67d&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-light&quot;&gt;Light #f7f9fb&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-black&quot;&gt;Black #000&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-black-blue&quot;&gt;Black blue #123&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-blue&quot;&gt;Blue #346&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-brown&quot;&gt;Brown #f9f8f2&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-gray&quot;&gt;Gray #d5d9e2&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-green&quot;&gt;Green #077&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-purple&quot;&gt;Purple #62b&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-red&quot;&gt;Red #c23&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-white&quot;&gt;White #fff&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-facebook&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_color.scss</code>, line 107
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-grid.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-grid" 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-grid">
+              Grid
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Basic Grid (Flexible blocks)
+Auto-fill &amp; Equal height</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;18" title="Example" target="_blank">Example</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;4" title="Example 2" target="_blank">Example 2</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;20" title="Sidebar + main" target="_blank">Sidebar + main</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;21" title="Main + sidebar" target="_blank">Main + sidebar</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;22" title="Sidebar + main + sidebar" target="_blank">Sidebar + main + sidebar</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;9" title="Columns" target="_blank">Columns</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <div class="grid ">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .vertical-align
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Vertical align
+              </div>
+              <div class="kss-modifier__example">
+                <div class="grid vertical-align">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+    &lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_grid.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-navbars.html

@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-navbars" 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-navbars">
+              Navbars
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Responsive Media (videos, iframe...)</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;8" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <nav role="navigation" class="">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .navbar
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Navigation bar
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="navbar">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .aligncenter
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center alignment
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="aligncenter">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .alignright
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right alignment
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="alignright">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;nav role&#x3D;&quot;navigation&quot; class&#x3D;&quot;[modifier class]&quot;&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;Clients&lt;/a&gt;&lt;/li&gt;
+    &lt;li class&#x3D;&quot;facebook&quot;&gt;
+      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://facebook.com/webslides&quot; title&#x3D;&quot;Facebook&quot;&gt;
+        Facebook
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li class&#x3D;&quot;twitter&quot;&gt;
+      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://twitter.com/webslides&quot; title&#x3D;&quot;Twitter&quot;&gt;
+        @WebSlides
+      &lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_navigation.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-sizes.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-sizes" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-sizes">
+              Sizes
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;25" title="50%" target="_blank">50%</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;26" title="30%" target="_blank">30%</a>
+              </li>
+          </ul>
+
+          <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 200
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-slide-navigation.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-slide-navigation" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-slide-navigation">
+              Slides navigation
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
+  &lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;→&lt;/a&gt;
+  &lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;←&lt;/a&gt;
+  &lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-navigation.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-slides-bottom.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-slides-bottom" 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-layout-slides-bottom">
+              Align bottom
+            </a>
+          </h3>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="slide-bottom">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-bottom&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 72
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-slides-fullscreen.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-slides-fullscreen" 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-layout-slides-fullscreen">
+              Fullscreen
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Slide with no padding (full card, .embed youtube video...)</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="fullscreen">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;fullscreen&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 43
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-slides-top.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-slides-top" 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-layout-slides-top">
+              Align top
+            </a>
+          </h3>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="slide-top">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-top&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 60
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-slides.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-slides" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-slides">
+              Slides
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Fullscreen. Vertically and horizontally centered.
+Fade transition to all slides.
+All HTML elements will have those styles</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section>
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-alignment">
+                    <span class="kss-nav__name">Align content</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-background">
+                    <span class="kss-nav__name">Backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-background-anim">
+                    <span class="kss-nav__name">Animated</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-background-video">
+                    <span class="kss-nav__name">Video</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-backgrounds">
+                    <span class="kss-nav__name">Layout.backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-backgrounds">
+                    <span class="kss-nav__name">Backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-backgrounds-gradient">
+                    <span class="kss-nav__name">Backgrounds - Gradient</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-backgrounds-transparent">
+                    <span class="kss-nav__name">Backgrounds - Transparent</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-grid">
+                    <span class="kss-nav__name">Grid</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-navbars">
+                    <span class="kss-nav__name">Navbars</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-sizes">
+                    <span class="kss-nav__name">Sizes</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-slide-navigation">
+                    <span class="kss-nav__name">Slides navigation</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-slides">
+                    <span class="kss-nav__name">Slides</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-bottom">
+                    <span class="kss-nav__name">Align bottom</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-fullscreen">
+                    <span class="kss-nav__name">Fullscreen</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-top">
+                    <span class="kss-nav__name">Align top</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout" class="kss-section kss-section--depth-1 is-fullscreen">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-layout">
+              Layout
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-longforms-interviews.html

@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-longforms-interviews" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-longforms-interviews">
+              Interviews
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Questions &amp; Answers</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/interviews" title="Interviews" target="_blank">Interviews</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <dl class="text-interview">
+  <dt>Driftwood</dt>
+  <dd>
+    <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>No. It's no good.</p>
+  </dd>
+  <dt>Driftwood</dt>
+  <dd>
+    <p>What's the matter with it?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>I don't know, let's hear it again.</p>
+  </dd>
+</dl>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class&#x3D;&quot;text-interview&quot;&gt;
+  &lt;dt&gt;Driftwood&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;It says, &quot;The party of the first part shall be known in this contract as the party of the first part.&quot; How do you like that? That&#x27;s pretty neat, eh?&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Fiorello&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;No. It&#x27;s no good.&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Driftwood&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;What&#x27;s the matter with it?&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Fiorello&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;I don&#x27;t know, let&#x27;s hear it again.&lt;/p&gt;
+  &lt;/dd&gt;
+&lt;/dl&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 534
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-longforms.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-longforms.html#kssref-longforms-interviews">
+                    <span class="kss-nav__name">Interviews</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-longforms" 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-longforms">
+              Longform
+            </a>
+          </h1>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/longforms" title="Longform" target="_blank">Longform</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="wrap longform">
+  <p>Lorem ipsum</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;wrap longform&quot;&gt;
+  &lt;p&gt;Lorem ipsum&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_longform.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-media-avatars.html

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-media-avatars" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-avatars">
+              Avatars
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>You&#39;ll love this</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;83" title="Quotes - Components" target="_blank">Quotes - Components</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;112" title="Avatars - Components" target="_blank">Avatars - Components</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-40" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-48" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-56" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-64" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-72" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-80" />
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-48&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_avatars.scss</code>, line 5
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-media-embed.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-media-embed" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-embed">
+              Embed
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Responsive Media (videos, iframe...)</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;16" title="Patty McCord" target="_blank">Patty McCord</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="embed">
+  <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+    <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+  </video>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;embed&quot;&gt;
+  &lt;video autoplay loop poster&#x3D;&quot;https://webslides.tv/static/images/peggy.jpg&quot;&gt;
+    &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/peggy.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_media.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-media-fullscreen-embed.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-media-fullscreen-embed" class="kss-section kss-section--depth-3 is-fullscreen">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-media-fullscreen-embed">
+              Fullscreen
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Responsive background video
+<a href="https://fvsch.com/code/video-background/">https://fvsch.com/code/video-background/</a></p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;12" title="Netflix" target="_blank">Netflix</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+    </video>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;fullscreen&quot;&gt;
+  &lt;div class&#x3D;&quot;embed&quot;&gt;
+    &lt;video autoplay loop poster&#x3D;&quot;https://webslides.tv/static/images/peggy.jpg&quot;&gt;
+      &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/peggy.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+    &lt;/video&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_media.scss</code>, line 39
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-media-fullscreen.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-media-fullscreen" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-fullscreen">
+              Media.Fullscreen
+            </a>
+          </h2>
+
+
+        </div>
+
+
+
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-media-screenshots.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-media-screenshots" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-media-screenshots">
+              Screenshots
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>HTML browser</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;114" title="Screenshot" target="_blank">Screenshot</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <figure class="browser">
+  <img src="http://lorempixel.com/1000/500/food/" />
+  <figcaption>Foddie</figcaption>
+</figure>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class&#x3D;&quot;browser&quot;&gt;
+  &lt;img src&#x3D;&quot;http://lorempixel.com/1000/500/food/&quot; /&gt;
+  &lt;figcaption&gt;Foddie&lt;/figcaption&gt;
+&lt;/figure&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_browser.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-media.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-avatars">
+                    <span class="kss-nav__name">Avatars</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-embed">
+                    <span class="kss-nav__name">Embed</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-fullscreen">
+                    <span class="kss-nav__name">Media.Fullscreen</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-fullscreen-embed">
+                    <span class="kss-nav__name">Fullscreen</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-screenshots">
+                    <span class="kss-nav__name">Screenshots</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-media" 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-media">
+              Media
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-activity.html

@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-activity" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-activity">
+               CVs, News ad Activity
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;43" title="CVs" target="_blank">CVs</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock activity">
+  <li>
+    <a href="#" title="UX Designer at ACME">
+      <div>
+        <p class="year">
+          2016
+        </p>
+        <p class="title">
+          UX Designer at ACME
+        </p>
+        <p class="summary">
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        </p>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="14 world famous buildings to inspire you">
+      <p class="year">
+        2 mins ago
+      </p>
+      <p class="title">
+        14 world famous buildings to inspire you
+      </p>
+      <p class="summary">
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
+      </p>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Co-Founder of GAMMA">
+      <p class="year">
+        2013
+      </p>
+      <p class="title">
+        Co-Founder of GAMMA
+      </p>
+      <p class="summary">
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      </p>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock activity&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;UX Designer at ACME&quot;&gt;
+      &lt;div&gt;
+        &lt;p class&#x3D;&quot;year&quot;&gt;
+          2016
+        &lt;/p&gt;
+        &lt;p class&#x3D;&quot;title&quot;&gt;
+          UX Designer at ACME
+        &lt;/p&gt;
+        &lt;p class&#x3D;&quot;summary&quot;&gt;
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        &lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;14 world famous buildings to inspire you&quot;&gt;
+      &lt;p class&#x3D;&quot;year&quot;&gt;
+        2 mins ago
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;title&quot;&gt;
+        14 world famous buildings to inspire you
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;summary&quot;&gt;
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world&#x27;s most famous buildings.
+      &lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Co-Founder of GAMMA&quot;&gt;
+      &lt;p class&#x3D;&quot;year&quot;&gt;
+        2013
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;title&quot;&gt;
+        Co-Founder of GAMMA
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;summary&quot;&gt;
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      &lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-activity.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-clients.html

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-clients" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-clients">
+              Clients
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Highlight clients information</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;37" title="Clients" target="_blank">Clients</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;38" title="With border" target="_blank">With border</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock clients ">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock clients border">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock clients [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
+      &lt;figure&gt;
+        &lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/google.svg&quot; alt&#x3D;&quot;Google&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h3&gt;Interfaces&lt;/h3&gt;
+          &lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
+      &lt;figure&gt;
+        &lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/microsoft.svg&quot; alt&#x3D;&quot;Microsoft&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h3&gt;Interfaces&lt;/h3&gt;
+          &lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-clients.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-features.html

@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-features" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-features">
+              Features
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Special features</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;40" title="Features" target="_blank">Features</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock features&quot;&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt; &lt;span&gt;100&lt;sup&gt;%&lt;/sup&gt;&lt;/span&gt; customizable&lt;/h2&gt;
+      Well documented.
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;48&lt;/span&gt;
+      &lt;h2&gt;Extra virgin olive oil&lt;/h2&gt;
+      The Spanish caviar.
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt;
+        Ultra-fast Wifi
+      &lt;/h2&gt;
+      Simple file sharing.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-features.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-gallery-overlay.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-gallery-overlay" class="kss-section kss-section--depth-3 is-fullscreen">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-gallery-overlay">
+              Gallery + Overflow
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Beautiful gallery with overlay content</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>New York</h2>
+        <p>1,234 rooms</p>
+      </div>
+      <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>uWatch</h2>
+        <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>Ellen Daniels</h2>
+        <p>CEO</p>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;New York&lt;/h2&gt;
+        &lt;p&gt;1,234 rooms&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;uWatch&lt;/h2&gt;
+        &lt;time datetime&#x3D;&quot;2017-12-17T21:23:34-05:00&quot;&gt;December 2017&lt;/time&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;Ellen Daniels&lt;/h2&gt;
+        &lt;p&gt;CEO&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 47
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-gallery.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-gallery" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-gallery">
+              Galleries (portfolios, teams...)
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Beautiful gallery</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;44" title="Portfolio" target="_blank">Portfolio</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+        <figcaption>
+          <h2>uWatch</h2>
+          <p>By Jane Doe</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+        <figcaption>
+          <h2>Ellen Daniels</h2>
+          <p>CEO</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+        <figcaption>
+          <h2>New York</h2>
+          <p>3,456 rooms</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;uWatch&lt;/h2&gt;
+          &lt;p&gt;By Jane Doe&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;Ellen Daniels&lt;/h2&gt;
+          &lt;p&gt;CEO&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;New York&lt;/h2&gt;
+          &lt;p&gt;3,456 rooms&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-metrics.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-metrics" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-metrics">
+              Metrics
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;47" title="Metrics" target="_blank">Metrics</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock metrics  ">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock metrics  border">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock metrics  [modifier class]&quot;&gt;
+  &lt;li&gt; Founded
+    &lt;span&gt;2016&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;span&gt;24M&lt;/span&gt;
+    Subscribers
+  &lt;/li&gt;
+  &lt;li&gt;
+    Revenue:
+    &lt;span&gt;$16M&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    Monthly Growth
+    &lt;span&gt;64%&lt;/span&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-metrics.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-plans.html

@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-plans" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-plans">
+              Plans / Pricing
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;48" title="Plans" target="_blank">Plans</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock plans ">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .blink
+              </div>
+              <div class="kss-modifier__description kss-style">
+                block linkable
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock plans blink">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock plans [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Basic&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;Free&lt;/span&gt;
+        &lt;p&gt;Good karma. Just the essential features. 100% customizable. Make it yours.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Medium&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;4,99 &lt;sup&gt;/month&lt;/sup&gt;&lt;/span&gt;
+        &lt;p&gt;Clean markup with popular naming conventions. Minimum effort.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Buy Now&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Premium &lt;sup&gt;(save 20%)&lt;/sup&gt;&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;40 &lt;sup&gt;/year&lt;/sup&gt;&lt;/span&gt;
+        &lt;p&gt;Prototype faster. Create landings and portfolios. Unlimited projects.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-plans.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-reasons.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-reasons" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-reasons">
+              Reasons
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;55" title="Reasons" target="_blank">Reasons</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock reasons">
+  <li>
+    <h2>Why WebSlides? Work better, faster.</h2>
+    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
+  </li>
+  <li>
+    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
+    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock reasons&quot;&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Why WebSlides? Work better, faster.&lt;/h2&gt;
+    &lt;p&gt;Designers and marketers can now focus on the content. Simply &lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;choose a demo&lt;/a&gt; and customize it in minutes. Be memorable! &lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;h2&gt; Good karma. Just the essentials and using lovely CSS.&lt;/h2&gt;
+    &lt;p&gt;WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.&lt;/p&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-reasons.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-specs.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-specs" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-specs">
+              Specs
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;37" title="Specs" target="_blank">Specs</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock specs">
+  <li>
+    <div>
+      <h2>Ultra-Fast WiFi</h2>
+      Simple and secure file sharing.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>All day battery life</h2>
+      Your battery worries may be over.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>Lifetime Warranty </h2>
+      We'll fix it or if we can't, we'll replace it.
+    </div>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
+      Simple and secure file sharing.
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt;All day battery life&lt;/h2&gt;
+      Your battery worries may be over.
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
+      We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-specs.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks-steps.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks-steps" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-steps">
+               Steps
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;39" title="Steps" target="_blank">Steps</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock steps">
+  <li>
+    <h2>01. Passion</h2>
+    <p>When you're really passionate about your job, you can change the world.</p>
+  </li>
+  <li>
+    <div class="process step-2"></div>
+    <h2>02. Purpose</h2>
+    <p>Why does this business exist? How are you different? Why matters?</p>
+  </li>
+  <li>
+    <div class="process step-3"></div>
+    <h2>03. Principles</h2>
+    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
+  </li>
+  <li>
+    <div class="process step-4"></div>
+    <h2>04. Process</h2>
+    <ul>
+      <li>Useful</li>
+      <li>Easy</li>
+      <li>Fast</li>
+      <li>Beautiful</li>
+    </ul>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock steps&quot;&gt;
+  &lt;li&gt;
+    &lt;h2&gt;01. Passion&lt;/h2&gt;
+    &lt;p&gt;When you&#x27;re really passionate about your job, you can change the world.&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-2&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;02. Purpose&lt;/h2&gt;
+    &lt;p&gt;Why does this business exist? How are you different? Why matters?&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-3&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;03. Principles&lt;/h2&gt;
+    &lt;p&gt;Leadership through usefulness, openness, empathy, and good taste.&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-4&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;04. Process&lt;/h2&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Useful&lt;/li&gt;
+      &lt;li&gt;Easy&lt;/li&gt;
+      &lt;li&gt;Fast&lt;/li&gt;
+      &lt;li&gt;Beautiful&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-steps.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-multipurpose-blocks.html

@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-activity">
+                    <span class="kss-nav__name"> CVs, News ad Activity</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-clients">
+                    <span class="kss-nav__name">Clients</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-features">
+                    <span class="kss-nav__name">Features</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-gallery">
+                    <span class="kss-nav__name">Galleries (portfolios, teams...)</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-gallery-overlay">
+                    <span class="kss-nav__name">Gallery + Overflow</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-metrics">
+                    <span class="kss-nav__name">Metrics</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-plans">
+                    <span class="kss-nav__name">Plans / Pricing</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-reasons">
+                    <span class="kss-nav__name">Reasons</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-specs">
+                    <span class="kss-nav__name">Specs</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-steps">
+                    <span class="kss-nav__name"> Steps</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks" class="kss-section kss-section--depth-1 is-fullscreen">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks">
+              Multipurpose blocks
+            </a>
+          </h1>
+
+            <div class="kss-description">
+              <p>Auto-fill &amp; Equal height columns</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;27" title="Normal" target="_blank">Normal</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;34" title="Block link" target="_blank">Block link</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;29" title="Border" target="_blank">Border</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock ">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .blink
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Linkable block
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock blink">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                With border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock border">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 1
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 2
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 3
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 4
+     &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-columns.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-columns" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-columns">
+              Columns
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Magazine Two Columns</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;65" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;text-cols&quot;&gt;&lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt; text&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Column 2&lt;/strong&gt; text&lt;/p&gt;&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 364
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-context.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-context" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-context">
+              Context
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Heading with border</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;64" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-context">Why WebSlides?</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-context&quot;&gt;Why WebSlides?&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 397
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-data.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-data" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-data">
+              Data
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Numbers (results, sales... )-</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;63" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-data">23,478,289</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-data&quot;&gt;23,478,289&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 326
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-emoji.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-emoji" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-emoji">
+              Emoji
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>You&#39;ll love this</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/keynote#slide&#x3D;40" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-emoji&quot;&gt;😀😁😂😅😉😋😎😍&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 305
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-info.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-info" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-info">
+              Info Messages
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Error, warning, success...</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-info&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 579
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-intro.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-intro" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-intro">
+              Intro
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Typography Classes = .text-</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;2" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-intro">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-intro&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 206
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-label.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-label" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-label">
+              Label
+            </a>
+          </h2>
+
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;66" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;&lt;span class&#x3D;&quot;text-label&quot;&gt;Website:&lt;/span&gt; &lt;a href&#x3D;&quot;#&quot;&gt;http://webslides.tv&lt;/a&gt;&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 348
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-landings.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-landings" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-landings">
+              Landings
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>h1,h2... Promo/Landings</p>
+
+            </div>
+
+        </div>
+
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;35" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <h1 class="text-landing">Landings</h1>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class&#x3D;&quot;text-landing&quot;&gt;Landings&lt;/h1&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 236
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-typography-lowercase.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography-lowercase" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-lowercase">
+              Lowercase
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-lowercase">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-lowercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 295
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>