kss - adding new section Demos

doc/kss/templates/default/index.hbs

@@ -108,6 +108,19 @@
           {{/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">

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

@@ -537,6 +537,14 @@
       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-container {
   display: grid;
@@ -576,19 +584,19 @@
 #kssref-layout-radius .radius {
   padding: 2.4rem; }
 
-#kssref-base-backgrounds span[class*='bg'] {
+#kssref-architecture-backgrounds span[class*='bg'] {
   display: inline-block;
   margin-left: -4px;
   padding: 1.2rem; }
 
-#kssref-base-backgrounds-transparent div[class*='bg'] {
+#kssref-architecture-backgrounds-transparent div[class*='bg'] {
   margin: 0;
   padding: 2rem; }
-  #kssref-base-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
+  #kssref-architecture-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
     margin: 3rem;
     padding: 6rem; }
 
-#kssref-base-backgrounds-gradient div[class*='bg'] {
+#kssref-architecture-backgrounds-gradient div[class*='bg'] {
   margin: 3rem;
   padding: 4rem; }
 

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

@@ -865,6 +865,20 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
       padding: 0 10px;
     }
   }
+
+  .kss__demos {
+    list-style: none;
+
+    li {
+      margin-left: 0;
+    }
+
+    a {
+      color: $kss-colors-link-active;
+      font-size: $kss-font-size / 1.2;
+      font-weight: bold;
+    }
+  }
 }
 
 .kss-container {
@@ -924,7 +938,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds {
+#kssref-architecture-backgrounds {
   & span[class*='bg'] {
     display: inline-block;
     margin-left: -4px;
@@ -932,7 +946,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds-transparent {
+#kssref-architecture-backgrounds-transparent {
   & div[class*='bg'] {
     margin: 0;
     padding: 2rem;
@@ -944,7 +958,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds-gradient {
+#kssref-architecture-backgrounds-gradient {
   & div[class*='bg'] {
     margin: 3rem;
     padding: 4rem;

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/styleguide/item-architecture-alignment.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-architecture-background.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

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

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

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

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-backgrounds.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-buttons.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-architecture-columns.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-context.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-data.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-emoji.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-forms-user.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-forms.html

@@ -74,6 +74,7 @@
 
 
 
+
       </div>
   </div>
 </div>

doc/styleguide/item-architecture-grid.html

@@ -77,6 +77,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-architecture-info.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-interviews.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-intro.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-label.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-landings.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-lowercase.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-navigation.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-pull_quote.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-radius.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-separator.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-serif.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-shadow.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-sizes.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

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

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

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

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-architecture-slides.html

@@ -78,6 +78,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-subtitle.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-symbols.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-tables.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-try.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture-uppercase.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-architecture.html

@@ -261,6 +261,7 @@
 
 
 
+
       </div>
   </div>
 </div>

doc/styleguide/item-contents-activity.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-contents-clients.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-contents-features.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-contents-flexblocks.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-contents-gallery-overlay.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-contents-gallery.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-contents-metrics.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-contents-plans.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples

doc/styleguide/item-contents-reasons.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-contents-resume.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-contents-specs.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-contents-steps.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-contents.html

@@ -136,6 +136,7 @@
 
 
 
+
       </div>
   </div>
 </div>

doc/styleguide/item-landings-cards.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-landings-cites.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

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

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-landings-cta.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-landings-longform.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-landings-quotes.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-landings-toc.html

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-landings.html

@@ -111,6 +111,7 @@
 
 
 
+
       </div>
   </div>
 </div>

doc/styleguide/item-media-avatars.html

@@ -76,6 +76,18 @@
 
         </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
@@ -83,12 +95,12 @@
 
 
             <div class="kss-modifier__example">
-              <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
+              <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-40" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-48" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-56" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-64" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-72" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-80" />
               <div class="kss-modifier__example-footer"></div>
             </div>
 
@@ -98,12 +110,12 @@
               <summary>
                   Markup
               </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
+              <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-7.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-48&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
+&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">

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

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

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

@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-media-background.html

@@ -74,6 +74,7 @@
 
 
 
+
       </div>
   </div>
 </div>

doc/styleguide/item-media-badgets.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-media-embed.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

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

@@ -77,6 +77,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-media-fullscreen.html

@@ -74,6 +74,7 @@
 
 
 
+
       </div>
   </div>
 </div>

doc/styleguide/item-media-screenshots.html

@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/item-media.html

@@ -121,6 +121,7 @@
 
 
 
+
       </div>
   </div>
 </div>

doc/styleguide/kss-assets/images/down_arrow.svg

@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="svg2"
-   viewBox="0 0 10 5.3402697"
-   height="1.5071428mm"
-   width="2.8222222mm">
-  <defs
-     id="defs4" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-29.375,-457.64693)"
-     id="layer1">
-    <path
-       id="path4138"
-       d="m 29.535681,458.41252 4.234404,4.23441 c 0.453686,0.45369 0.756144,0.45369 1.20983,0 l 4.234404,-4.23441 c 0.453687,-0.45368 -0.151229,-1.0586 -0.604915,-0.60491 l -4.234404,4.2344 -4.234405,-4.2344 c -0.453686,-0.45369 -1.058601,0.15123 -0.604914,0.60491 z"
-       style="fill:#858c92;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-  </g>
-</svg>

doc/styleguide/kss-assets/images/up_arrow.svg

@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="svg2"
-   viewBox="0 0 10 5.3402697"
-   height="1.5071428mm"
-   width="2.8222222mm">
-  <defs
-     id="defs4" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-29.375,-457.64693)"
-     id="layer1">
-    <path
-       id="path4138"
-       d="m 29.535681,462.22161 4.234404,-4.23441 c 0.453686,-0.45369 0.756144,-0.45369 1.20983,0 l 4.234404,4.23441 c 0.453687,0.45368 -0.151229,1.0586 -0.604915,0.60491 l -4.234404,-4.2344 -4.234405,4.2344 c -0.453686,0.45369 -1.058601,-0.15123 -0.604914,-0.60491 z"
-       style="fill:#858c92;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-  </g>
-</svg>

doc/styleguide/kss-assets/kss.css

@@ -537,6 +537,14 @@
       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-container {
   display: grid;
@@ -576,19 +584,19 @@
 #kssref-layout-radius .radius {
   padding: 2.4rem; }
 
-#kssref-base-backgrounds span[class*='bg'] {
+#kssref-architecture-backgrounds span[class*='bg'] {
   display: inline-block;
   margin-left: -4px;
   padding: 1.2rem; }
 
-#kssref-base-backgrounds-transparent div[class*='bg'] {
+#kssref-architecture-backgrounds-transparent div[class*='bg'] {
   margin: 0;
   padding: 2rem; }
-  #kssref-base-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
+  #kssref-architecture-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
     margin: 3rem;
     padding: 6rem; }
 
-#kssref-base-backgrounds-gradient div[class*='bg'] {
+#kssref-architecture-backgrounds-gradient div[class*='bg'] {
   margin: 3rem;
   padding: 4rem; }
 

doc/styleguide/kss-assets/kss.scss

@@ -865,6 +865,20 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
       padding: 0 10px;
     }
   }
+
+  .kss__demos {
+    list-style: none;
+
+    li {
+      margin-left: 0;
+    }
+
+    a {
+      color: $kss-colors-link-active;
+      font-size: $kss-font-size / 1.2;
+      font-weight: bold;
+    }
+  }
 }
 
 .kss-container {
@@ -924,7 +938,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds {
+#kssref-architecture-backgrounds {
   & span[class*='bg'] {
     display: inline-block;
     margin-left: -4px;
@@ -932,7 +946,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds-transparent {
+#kssref-architecture-backgrounds-transparent {
   & div[class*='bg'] {
     margin: 0;
     padding: 2rem;
@@ -944,7 +958,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds-gradient {
+#kssref-architecture-backgrounds-gradient {
   & div[class*='bg'] {
     margin: 3rem;
     padding: 4rem;

doc/styleguide/section-architecture.html

@@ -261,6 +261,7 @@
 
 
 
+
       </div>
       <div id="kssref-architecture-alignment" class="kss-section kss-section--depth-2 ">
 
@@ -274,6 +275,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -359,6 +361,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -549,6 +552,7 @@
 
 
 
+
       </div>
       <div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 ">
 
@@ -566,6 +570,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -631,6 +636,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -676,6 +682,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -721,6 +728,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -775,6 +783,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -816,6 +825,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -857,6 +867,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -898,6 +909,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -937,6 +949,7 @@
 
 
 
+
       </div>
       <div id="kssref-architecture-forms-user" class="kss-section kss-section--depth-3 ">
 
@@ -950,6 +963,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -998,6 +1012,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1082,6 +1097,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1123,6 +1139,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1198,6 +1215,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1235,6 +1253,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1276,6 +1295,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1313,6 +1333,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1354,6 +1375,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1444,6 +1466,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1493,6 +1516,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1540,6 +1564,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1585,6 +1610,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1626,6 +1652,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1667,6 +1694,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1708,6 +1736,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1822,6 +1851,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1869,6 +1899,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1910,6 +1941,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1966,6 +1998,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -2026,6 +2059,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -2067,6 +2101,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -2104,6 +2139,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -2199,6 +2235,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -2236,6 +2273,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/section-contents.html

@@ -136,6 +136,7 @@
 
 
 
+
       </div>
       <div id="kssref-contents-activity" class="kss-section kss-section--depth-2 ">
 
@@ -153,6 +154,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -278,6 +280,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -401,6 +404,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -521,6 +525,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -669,6 +674,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -778,6 +784,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -875,6 +882,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -977,6 +985,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1124,6 +1133,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1179,6 +1189,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1266,6 +1277,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1345,6 +1357,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/section-landings.html

@@ -111,6 +111,7 @@
 
 
 
+
       </div>
       <div id="kssref-landings-cards" class="kss-section kss-section--depth-2 ">
 
@@ -128,6 +129,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -179,6 +181,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -216,6 +219,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -269,6 +273,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -322,6 +327,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -363,6 +369,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -404,6 +411,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

doc/styleguide/section-media.html

@@ -121,6 +121,7 @@
 
 
 
+
       </div>
       <div id="kssref-media-avatars" class="kss-section kss-section--depth-2 ">
 
@@ -138,6 +139,18 @@
 
         </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
@@ -145,12 +158,12 @@
 
 
             <div class="kss-modifier__example">
-              <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
+              <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-40" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-48" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-56" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-64" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-72" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-80" />
               <div class="kss-modifier__example-footer"></div>
             </div>
 
@@ -160,12 +173,12 @@
               <summary>
                   Markup
               </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
+              <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-7.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-48&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
+&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">
@@ -187,6 +200,7 @@
 
 
 
+
       </div>
       <div id="kssref-media-background-anim" class="kss-section kss-section--depth-3 ">
 
@@ -200,6 +214,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -241,6 +256,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -298,6 +314,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -341,6 +358,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -388,6 +406,7 @@
 
 
 
+
       </div>
       <div id="kssref-media-fullscreen-embed" class="kss-section kss-section--depth-3 ">
 
@@ -406,6 +425,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -459,6 +479,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example

kss-config.json

@@ -11,6 +11,14 @@
     "../../static/css/webslides.css"
   ],
 
+  "custom": [
+    "Demos"
+  ],
+
+  "extend": [
+    "doc/kss/templates/default/kss-extend"
+  ],
+
   "mainmenu": [
     {"title" : "WebSlides", "url" : "../../index.html"},
     {"title" : "Documentation", "url" : "./"},

src/scss/modules/_avatars.scss

@@ -7,12 +7,16 @@
 // You'll love this
 //
 // Markup:
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-40" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-48" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-56" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-64" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-72" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-80" />
+//
+// Demos:
+// [Quotes - Components](https://webslides.tv/demos/components#slide=83)
+// [Avatars - Components](https://webslides.tv/demos/components#slide=112)
 //
 // Styleguide Media.Avatars
 cite img,