KSS - backgrounds, colors, ...

doc/styleguide/index.html

@@ -36,6 +36,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

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

@@ -36,6 +36,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

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

@@ -36,6 +36,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/item-base-backgrounds.html

@@ -36,6 +36,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/item-base.html

@@ -56,6 +56,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/item-layout-alignment.html

@@ -36,6 +36,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/item-layout-radius.html

@@ -36,6 +36,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/item-layout-shadow.html

@@ -36,6 +36,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/item-layout-sizes.html

@@ -36,6 +36,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/item-layout.html

@@ -62,6 +62,11 @@
               </li>
             </ul>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/item-slide-background-position.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">WebSlides</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-slide-background-position" class="kss-section kss-section--depth-3 is-fullscreen">
+
+      <div class="kss-style">
+        <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-slide-background-position">
+            <span class="kss-title__ref">
+              3.1.1
+              <span class="kss-title__permalink-hash">
+                  #Slide.Background.Position
+              </span>
+            </span>
+            Slide backgrounds
+          </a>
+        </h3>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Examples
+          </div>
+
+            <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+
+          <div class="kss-modifier__example">
+            <section>
+  <span class="" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+            <div class="kss-modifier__name kss-style">
+              .background
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-top" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-bottom" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center-top" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left-top" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right-top" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center-bottom" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left-bottom" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right-bottom" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;span class&#x3D;&quot;[modifier class]&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/250/250/&#x27;)&quot;&gt;&lt;/span&gt;
+&lt;/section&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_slides-bg.scss</code>, line 15
+        </div>
+
+    </div>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

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

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">WebSlides</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-slide-background-video" class="kss-section kss-section--depth-3 is-fullscreen">
+
+      <div class="kss-style">
+        <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-slide-background-video">
+            <span class="kss-title__ref">
+              3.1.1
+              <span class="kss-title__permalink-hash">
+                  #Slide.Background.Video
+              </span>
+            </span>
+            Video
+          </a>
+        </h3>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example
+          </div>
+
+
+          <div class="kss-modifier__example">
+            <section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;video class&#x3D;&quot;background-video&quot; autoplay poster&#x3D;&quot;https://webslides.tv/static/images/working.jpg&quot;&gt;
+    &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/working.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+  &lt;/video&gt;
+  &lt;div class&#x3D;&quot;wrap&quot;&gt;
+    &lt;p&gt;&lt;code&gt;.background-video&lt;/code&gt;&lt;/p&gt;
+    &lt;h2&gt;&lt;strong&gt;WebSlides is the easiest way to make HTML presentations. Inspire and engage.&lt;/strong&gt;&lt;/h2&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_slides-bg.scss</code>, line 92
+        </div>
+
+    </div>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-slide-background.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">WebSlides</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-slide-background" class="kss-section kss-section--depth-2 is-fullscreen">
+
+      <div class="kss-style">
+        <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-slide-background">
+            <span class="kss-title__ref">
+              3.1
+              <span class="kss-title__permalink-hash">
+                  #Slide.Background
+              </span>
+            </span>
+            Backgrounds
+          </a>
+        </h2>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Examples
+          </div>
+
+            <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+
+          <div class="kss-modifier__example">
+            <section>
+  <span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+            <div class="kss-modifier__name kss-style">
+              .background
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
+&lt;/section&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_slides-bg.scss</code>, line 15
+        </div>
+
+    </div>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-slide.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">WebSlides</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background">
+                  <span class="kss-nav__ref ">3.1</span
+                  ><span class="kss-nav__name">Backgrounds</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background-video">
+                  <span class="kss-nav__ref kss-nav__ref-child">3.1.1</span
+                  ><span class="kss-nav__name">Video</span>
+                </a>
+              </li>
+            </ul>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-slide" class="kss-section kss-section--depth-1 is-fullscreen">
+
+      <div class="kss-style">
+        <h1 class="kss-title kss-title--level-1">
+          <a class="kss-title__permalink" href="#kssref-slide">
+            <span class="kss-title__ref">
+              3
+              <span class="kss-title__permalink-hash">
+                  #Slide
+              </span>
+            </span>
+            Slide
+          </a>
+        </h1>
+
+
+      </div>
+
+
+
+    </div>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/section-base.html

@@ -56,6 +56,11 @@
           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/section-layout.html

@@ -62,6 +62,11 @@
               </li>
             </ul>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
     </ul>
   </nav>
 </div>

doc/styleguide/section-slide.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">WebSlides</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
+        </a>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background">
+                  <span class="kss-nav__ref ">3.1</span
+                  ><span class="kss-nav__name">Backgrounds</span>
+                </a>
+              </li>
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background-video">
+                  <span class="kss-nav__ref kss-nav__ref-child">3.1.1</span
+                  ><span class="kss-nav__name">Video</span>
+                </a>
+              </li>
+            </ul>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-slide" class="kss-section kss-section--depth-1 ">
+
+      <div class="kss-style">
+        <h1 class="kss-title kss-title--level-1">
+          <a class="kss-title__permalink" href="#kssref-slide">
+            <span class="kss-title__ref">
+              3
+              <span class="kss-title__permalink-hash">
+                  #Slide
+              </span>
+            </span>
+            Slide
+          </a>
+        </h1>
+
+
+      </div>
+
+
+
+    </div>
+    <section id="kssref-slide-background" class="kss-section kss-section--depth-2 ">
+
+      <div class="kss-style">
+        <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-slide-background">
+            <span class="kss-title__ref">
+              3.1
+              <span class="kss-title__permalink-hash">
+                  #Slide.Background
+              </span>
+            </span>
+            Backgrounds
+          </a>
+        </h2>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Examples
+          </div>
+
+            <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+
+          <div class="kss-modifier__example">
+            <section>
+  <span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+            <div class="kss-modifier__name kss-style">
+              .background
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right-top
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right top.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-center-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Center bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right-bottom
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right bottom.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-left
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Left.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+            <div class="kss-modifier__name kss-style">
+              .background-right
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Right.
+            </div>
+            <div class="kss-modifier__example">
+              <section>
+  <span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
+&lt;/section&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_slides-bg.scss</code>, line 15
+        </div>
+
+    </section>
+    <section id="kssref-slide-background-video" class="kss-section kss-section--depth-3 ">
+
+      <div class="kss-style">
+        <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-slide-background-video">
+            <span class="kss-title__ref">
+              3.1.1
+              <span class="kss-title__permalink-hash">
+                  #Slide.Background.Video
+              </span>
+            </span>
+            Video
+          </a>
+        </h3>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example
+          </div>
+
+
+          <div class="kss-modifier__example">
+            <section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;video class&#x3D;&quot;background-video&quot; autoplay poster&#x3D;&quot;https://webslides.tv/static/images/working.jpg&quot;&gt;
+    &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/working.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+  &lt;/video&gt;
+  &lt;div class&#x3D;&quot;wrap&quot;&gt;
+    &lt;p&gt;&lt;code&gt;.background-video&lt;/code&gt;&lt;/p&gt;
+    &lt;h2&gt;&lt;strong&gt;WebSlides is the easiest way to make HTML presentations. Inspire and engage.&lt;/strong&gt;&lt;/h2&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_slides-bg.scss</code>, line 92
+        </div>
+
+    </section>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

src/scss/modules/_slides-bg.scss

@@ -12,6 +12,27 @@
 
 /*=== BG Positions === */
 
+// Backgrounds
+//
+// Markup:
+// <section>
+//   <span class="{{modifier_class}} bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+// </section>
+//
+// .background - Center.
+// .background-top - Top.
+// .background-bottom - Bottom.
+// .background-center - Center.
+// .background-center-top - Center top.
+// .background-left-top - Left top.
+// .background-right-top - Right top.
+// .background-center-bottom - Center bottom.
+// .background-left-bottom - Left bottom.
+// .background-right-bottom - Right bottom.
+// .background-left - Left.
+// .background-right - Right.
+//
+// Styleguide Slide.Background
 .background {
   background-position: center;
   background-size: cover;
@@ -68,10 +89,20 @@
     }
   }
 
-  /*fullscreen video
+  // Video
-    <video class="background-video">
+  //
-  */
+  // Markup:
-
+  // <section>
+  //   <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+  //     <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  //   </video>
+  //   <div class="wrap">
+  //     <p><code>.background-video</code></p>
+  //     <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  //   </div>
+  // </section>
+  //
+  // Styleguide Slide.Background.Video
   &-video {
     height: 100%;
     object-fit: fill;