kss - typography

Fullscreen mode

.babelrc

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

.eslintrc

@@ -1,11 +1,15 @@
 {
   "env": {
+    "jest/globals": true,
     "browser": true
   },
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module"
   },
+  "plugins": [
+    "jest"
+  ],
   "rules": {
     "no-cond-assign": 0,
     "no-console": 2,
@@ -106,6 +110,7 @@
     "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
@@ -128,5 +133,3 @@
     "yield-star-spacing": [2, "after"]
   }
 }
-
-

.gitignore

@@ -5,6 +5,8 @@
 # Third Party #
 ###############
 node_modules/
+coverage
+.eslintcache
 
 # OS generated files #
 ######################

.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"

README.md

@@ -2,19 +2,36 @@
 
 [![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 the essentials. A new release (at least) every 8th day of the month — [https://webslides.tv/demos](https://webslides.tv/demos).
+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 minutes. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
+Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
 * * *
 
 
-### Why WebSlides? Productivity
-This is about telling the story, and sharing it in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
+### 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
 
@@ -54,25 +71,6 @@ This is about telling the story, and sharing it in a beautiful way. Just a basic
 <article id="webslides" class="vertical">
 ```
 
-### 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/
-```
-
 ### CSS Syntax (classes)
 
 - Typography: `.text-landing`, `.text-data`, `.text-intro`...

demos/classes.html

@@ -25,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">
@@ -1934,11 +1931,11 @@
 
     <!-- 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>
 

demos/components.html

@@ -25,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">
@@ -2903,7 +2900,7 @@
                   <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. 
+                  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-->
@@ -3139,7 +3136,7 @@
 
     <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
+
     <script>
       window.ws = new WebSlides();
     </script>

demos/index.html

@@ -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">

demos/interviews.html

@@ -3,76 +3,73 @@
   <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/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">
-    
+
     <!-- 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">
@@ -81,11 +78,11 @@
     <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">
@@ -112,10 +109,10 @@
         </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>
@@ -283,11 +280,11 @@
           </div>
           <!-- .end .wrap -->
         </section>
-        
+
       </article>
     </main>
     <!--main-->
-    
+
     <footer role="contentinfo">
       <div class="wrap">
         <div class="grid">
@@ -353,9 +350,9 @@
       </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>
+</html>

demos/keynote.html

@@ -25,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">
@@ -838,9 +835,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <h2><strong>Thank you!</strong></h2>
+          <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>
-          <p class="text-symbols">* * *</p>
         </section>
 
       </article>
@@ -849,7 +846,7 @@
 
     <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
+
     <script>
       window.ws = new WebSlides();
     </script>

demos/landings.html

@@ -25,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">
@@ -1924,13 +1921,13 @@
 
     <!-- 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/longforms.html

@@ -3,76 +3,73 @@
   <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/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">
-    
+
     <!-- 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">
@@ -81,11 +78,11 @@
     <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">
@@ -340,11 +337,11 @@
           </div>
           <!-- .end .wrap -->
         </section>
-        
+
       </article>
     </main>
     <!--main-->
-    
+
     <footer role="contentinfo">
       <div class="wrap">
         <div class="grid">
@@ -410,9 +407,9 @@
       </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>
+</html>

demos/media.html

@@ -3,72 +3,69 @@
   <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/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">
-    
+
     <!-- 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">
@@ -77,11 +74,11 @@
     <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">
@@ -108,16 +105,16 @@
         </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%) -->
@@ -192,7 +189,6 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <span class="background-bottom" style="background-image:url('https://source.unsplash.com/GQD3Av_9A88/1600x800)"></span>
           <div class="wrap aligncenter">
             <h3>
               <svg class="fa-camera">
@@ -724,7 +720,7 @@
             <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; 
+  <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>
@@ -732,7 +728,7 @@
               <!-- .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; 
+  <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>
@@ -749,7 +745,7 @@
               <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 data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
   &lt;/div&gt;
 &lt;/div&gt;</pre>
             </div>
@@ -876,7 +872,7 @@
                   <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. 
+                  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-->
@@ -887,7 +883,7 @@
         </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> 
+            <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>
@@ -932,20 +928,20 @@
           <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>
+</html>

demos/netflix-culture.html

@@ -3,47 +3,44 @@
   <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/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">
-    
+
     <!-- 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 -->
@@ -51,11 +48,11 @@
     <!-- 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 -->
@@ -64,9 +61,9 @@
     <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">
@@ -75,12 +72,12 @@
     <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">
@@ -106,16 +103,16 @@
         </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%) -->
@@ -365,11 +362,11 @@
           </div>
           <!-- .end .wrap -->
         </section>
-        
+
       </article>
     </main>
     <!--main-->
-    
+
     <footer>
       <div class="wrap">
         <p>
@@ -377,15 +374,15 @@
         </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>
+</html>

demos/portfolios.html

@@ -25,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">
@@ -1865,7 +1862,7 @@
 
     <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
+
     <script>
       window.ws = new WebSlides();
     </script>

demos/why-webslides.html

@@ -25,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">
@@ -341,7 +338,7 @@
 
     <!-- Required -->
     <script src="../static/js/webslides.js"></script>
-    
+
     <!-- Autoslide 5 seconds. If you don't want autoslide, remove: {autoslide: 5000} -->
     <script>
       window.ws = new WebSlides({ autoslide: 5000 });

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>

doc/styleguide/item-typography-pull_quote.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-typography-pull_quote" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-pull_quote">
+              Pulls
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Pull Quote Right/Left</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;69" title="Pull right" target="_blank">Pull right</a>
+              </li>
+          </ul>
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
+<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
+&lt;p class&#x3D;&quot;text-pull-right&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;
+&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
+&lt;p class&#x3D;&quot;text-pull-left&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 476
+          </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-separator.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-separator" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-separator">
+              Separator
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Stars <em> </em> *</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-separator">Separator</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-separator&quot;&gt;Separator&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 445
+          </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>