kss - buttons, forms and grid

doc/styleguide/index.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/item-avatars.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/item-badgets.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

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

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

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

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/item-base-backgrounds.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/item-base.html

@@ -71,29 +71,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/item-buttons.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -101,22 +116,35 @@
 
         <div class="kss-modifier__wrapper">
           <div class="kss-modifier__heading kss-style">
-            Example
+            Examples
           </div>
 
+            <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
 
           <div class="kss-modifier__example">
-            <a href="#" class="button">Download</a>
+            <a href="#" class="button ">Download</a>
             <div class="kss-modifier__example-footer"></div>
           </div>
 
+            <div class="kss-modifier__name kss-style">
+              .radius
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Rounded corners
+            </div>
+            <div class="kss-modifier__example">
+              <a href="#" class="button radius">Download</a>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
         </div>
 
           <details class="kss-markup kss-style">
             <summary>
                 Markup
             </summary>
-            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button&quot;&gt;Download&lt;/a&gt;</code></pre>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
           </details>
 
         <div class="kss-source kss-style">

doc/styleguide/item-cards.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/item-elements-try.html

@@ -0,0 +1,175 @@
+<!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-avatars.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-badgets.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-buttons.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-cards.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-flexblock.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-screenshots.html">
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-typography.html">
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-elements-try" class="kss-section kss-section--depth-2 is-fullscreen">
+
+      <div class="kss-style">
+        <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-elements-try">
+            <span class="kss-title__ref">
+              6.1
+              <span class="kss-title__permalink-hash">
+                  #Elements.Try
+              </span>
+            </span>
+            Try
+          </a>
+        </h2>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example
+          </div>
+
+
+          <div class="kss-modifier__example">
+            <a href="#" class="try">Try element</a>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;try&quot;&gt;Try element&lt;/a&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_form.scss</code>, line 96
+        </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-elements.html

@@ -0,0 +1,161 @@
+<!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-avatars.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-badgets.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-buttons.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-cards.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-elements.html#kssref-elements-try">
+                  <span class="kss-nav__ref ">6.1</span
+                  ><span class="kss-nav__name">Try</span>
+                </a>
+              </li>
+            </ul>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-flexblock.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-screenshots.html">
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-typography.html">
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-elements" 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-elements">
+            <span class="kss-title__ref">
+              6
+              <span class="kss-title__permalink-hash">
+                  #Elements
+              </span>
+            </span>
+            Elements
+          </a>
+        </h1>
+
+
+      </div>
+
+
+
+    </div>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-flexblock-activity.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-activity">
             <span class="kss-title__ref">
-              6.1
+              7.1
               <span class="kss-title__permalink-hash">
                   #Flexblock.Activity
               </span>

doc/styleguide/item-flexblock-blink.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-blink">
             <span class="kss-title__ref">
-              6.2
+              7.2
               <span class="kss-title__permalink-hash">
                   #Flexblock.Blink
               </span>

doc/styleguide/item-flexblock-clients.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-clients">
             <span class="kss-title__ref">
-              6.3
+              7.3
               <span class="kss-title__permalink-hash">
                   #Flexblock.Clients
               </span>

doc/styleguide/item-flexblock-features.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-features">
             <span class="kss-title__ref">
-              6.4
+              7.4
               <span class="kss-title__permalink-hash">
                   #Flexblock.Features
               </span>

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

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h3 class="kss-title kss-title--level-3">
           <a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
             <span class="kss-title__ref">
-              6.5.1
+              7.5.1
               <span class="kss-title__permalink-hash">
                   #Flexblock.Gallery.Overlay
               </span>

doc/styleguide/item-flexblock-gallery.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-gallery">
             <span class="kss-title__ref">
-              6.5
+              7.5
               <span class="kss-title__permalink-hash">
                   #Flexblock.Gallery
               </span>

doc/styleguide/item-flexblock-metrics.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-metrics">
             <span class="kss-title__ref">
-              6.6
+              7.6
               <span class="kss-title__permalink-hash">
                   #Flexblock.Metrics
               </span>

doc/styleguide/item-flexblock-plans.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-plans">
             <span class="kss-title__ref">
-              6.7
+              7.7
               <span class="kss-title__permalink-hash">
                   #Flexblock.Plans
               </span>

doc/styleguide/item-flexblock-reasons.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-reasons">
             <span class="kss-title__ref">
-              6.8
+              7.8
               <span class="kss-title__permalink-hash">
                   #Flexblock.Reasons
               </span>

doc/styleguide/item-flexblock-specs.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-specs">
             <span class="kss-title__ref">
-              6.9
+              7.9
               <span class="kss-title__permalink-hash">
                   #Flexblock.Specs
               </span>

doc/styleguide/item-flexblock-steps.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-steps">
             <span class="kss-title__ref">
-              6.10
+              7.10
               <span class="kss-title__permalink-hash">
                   #Flexblock.Steps
               </span>

doc/styleguide/item-flexblock.html

@@ -51,97 +51,112 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
         </a>
             <ul class="kss-nav__menu-child">
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-activity">
-                  <span class="kss-nav__ref ">6.1</span
+                  <span class="kss-nav__ref ">7.1</span
                   ><span class="kss-nav__name"> Activity</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink">
-                  <span class="kss-nav__ref ">6.2</span
+                  <span class="kss-nav__ref ">7.2</span
                   ><span class="kss-nav__name">Flexblocks</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-clients">
-                  <span class="kss-nav__ref ">6.3</span
+                  <span class="kss-nav__ref ">7.3</span
                   ><span class="kss-nav__name">Clients</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-features">
-                  <span class="kss-nav__ref ">6.4</span
+                  <span class="kss-nav__ref ">7.4</span
                   ><span class="kss-nav__name">Features</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery">
-                  <span class="kss-nav__ref ">6.5</span
+                  <span class="kss-nav__ref ">7.5</span
                   ><span class="kss-nav__name">Gallery</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery-overlay">
-                  <span class="kss-nav__ref kss-nav__ref-child">6.5.1</span
+                  <span class="kss-nav__ref kss-nav__ref-child">7.5.1</span
                   ><span class="kss-nav__name">Gallery + Overflow</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-metrics">
-                  <span class="kss-nav__ref ">6.6</span
+                  <span class="kss-nav__ref ">7.6</span
                   ><span class="kss-nav__name">Metrics</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-plans">
-                  <span class="kss-nav__ref ">6.7</span
+                  <span class="kss-nav__ref ">7.7</span
                   ><span class="kss-nav__name">Plans</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-reasons">
-                  <span class="kss-nav__ref ">6.8</span
+                  <span class="kss-nav__ref ">7.8</span
                   ><span class="kss-nav__name">Reasons</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-specs">
-                  <span class="kss-nav__ref ">6.9</span
+                  <span class="kss-nav__ref ">7.9</span
                   ><span class="kss-nav__name">Specs</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-steps">
-                  <span class="kss-nav__ref ">6.10</span
+                  <span class="kss-nav__ref ">7.10</span
                   ><span class="kss-nav__name"> Steps</span>
                 </a>
               </li>
             </ul>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -155,7 +170,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-flexblock">
             <span class="kss-title__ref">
-              6
+              7
               <span class="kss-title__permalink-hash">
                   #Flexblock
               </span>

doc/styleguide/item-forms-user.html

@@ -0,0 +1,181 @@
+<!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-avatars.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-badgets.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-buttons.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-cards.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-flexblock.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-screenshots.html">
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-typography.html">
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-forms-user" class="kss-section kss-section--depth-2 is-fullscreen">
+
+      <div class="kss-style">
+        <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-forms-user">
+            <span class="kss-title__ref">
+              8.1
+              <span class="kss-title__permalink-hash">
+                  #Forms.User
+              </span>
+            </span>
+            User
+          </a>
+        </h2>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example
+          </div>
+
+
+          <div class="kss-modifier__example">
+            <div class="user">
+  <input type="text" placeholder="Username" />
+  <button>Log in</button>
+</div>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;user&quot;&gt;
+  &lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;Username&quot; /&gt;
+  &lt;button&gt;Log in&lt;/button&gt;
+&lt;/div&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_form.scss</code>, line 139
+        </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-forms.html

@@ -0,0 +1,161 @@
+<!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-avatars.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-badgets.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-buttons.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-cards.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-flexblock.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-user">
+                  <span class="kss-nav__ref ">8.1</span
+                  ><span class="kss-nav__name">User</span>
+                </a>
+              </li>
+            </ul>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-screenshots.html">
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-typography.html">
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-forms" class="kss-section kss-section--depth-1 is-fullscreen">
+
+      <div class="kss-style">
+        <h1 class="kss-title kss-title--level-1">
+          <a class="kss-title__permalink" href="#kssref-forms">
+            <span class="kss-title__ref">
+              8
+              <span class="kss-title__permalink-hash">
+                  #Forms
+              </span>
+            </span>
+            Forms
+          </a>
+        </h1>
+
+
+      </div>
+
+
+
+    </div>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-grid.html

@@ -0,0 +1,223 @@
+<!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-avatars.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-badgets.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-buttons.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-cards.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-flexblock.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-screenshots.html">
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-typography.html">
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-grid" 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-grid">
+            <span class="kss-title__ref">
+              9
+              <span class="kss-title__permalink-hash">
+                  #Grid
+              </span>
+            </span>
+            Grid
+          </a>
+        </h1>
+
+          <div class="kss-description">
+            <p>Basic Grid (Flexible blocks)
+Auto-fill &amp; Equal height</p>
+
+          </div>
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Examples
+          </div>
+
+            <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+
+          <div class="kss-modifier__example">
+            <div class="grid ">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+            <div class="kss-modifier__name kss-style">
+              .vertical-align
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Vertical align
+            </div>
+            <div class="kss-modifier__example">
+              <div class="grid vertical-align">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+    &lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_grid.scss</code>, line 1
+        </div>
+
+    </div>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/item-layout-alignment.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layout-alignment">
             <span class="kss-title__ref">
-              7.1
+              10.1
               <span class="kss-title__permalink-hash">
                   #Layout.Alignment
               </span>

doc/styleguide/item-layout-radius.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layout-radius">
             <span class="kss-title__ref">
-              7.2
+              10.2
               <span class="kss-title__permalink-hash">
                   #Layout.Radius
               </span>

doc/styleguide/item-layout-shadow.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layout-shadow">
             <span class="kss-title__ref">
-              7.3
+              10.3
               <span class="kss-title__permalink-hash">
                   #Layout.Shadow
               </span>

doc/styleguide/item-layout-sizes.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layout-sizes">
             <span class="kss-title__ref">
-              7.4
+              10.4
               <span class="kss-title__permalink-hash">
                   #Layout.Sizes
               </span>

doc/styleguide/item-layout.html

@@ -51,37 +51,52 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
             <ul class="kss-nav__menu-child">
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-alignment">
-                  <span class="kss-nav__ref ">7.1</span
+                  <span class="kss-nav__ref ">10.1</span
                   ><span class="kss-nav__name">Align content</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-radius">
-                  <span class="kss-nav__ref ">7.2</span
+                  <span class="kss-nav__ref ">10.2</span
                   ><span class="kss-nav__name">Radius</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-shadow">
-                  <span class="kss-nav__ref ">7.3</span
+                  <span class="kss-nav__ref ">10.3</span
                   ><span class="kss-nav__name">Shadows</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-sizes">
-                  <span class="kss-nav__ref ">7.4</span
+                  <span class="kss-nav__ref ">10.4</span
                   ><span class="kss-nav__name">Resizing</span>
                 </a>
               </li>
@@ -89,17 +104,17 @@
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -113,7 +128,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-layout">
             <span class="kss-title__ref">
-              7
+              10
               <span class="kss-title__permalink-hash">
                   #Layout
               </span>

doc/styleguide/item-screenshots.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-screenshots">
             <span class="kss-title__ref">
-              8
+              11
               <span class="kss-title__permalink-hash">
                   #Screenshots
               </span>

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

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h3 class="kss-title kss-title--level-3">
           <a class="kss-title__permalink" href="#kssref-slide-background-anim">
             <span class="kss-title__ref">
-              9.1.1
+              12.1.1
               <span class="kss-title__permalink-hash">
                   #Slide.Background.Anim
               </span>

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

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h3 class="kss-title kss-title--level-3">
           <a class="kss-title__permalink" href="#kssref-slide-background-video">
             <span class="kss-title__ref">
-              9.1.2
+              12.1.2
               <span class="kss-title__permalink-hash">
                   #Slide.Background.Video
               </span>

doc/styleguide/item-slide-background.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-slide-background">
             <span class="kss-title__ref">
-              9.1
+              12.1
               <span class="kss-title__permalink-hash">
                   #Slide.Background
               </span>

doc/styleguide/item-slide.html

@@ -51,41 +51,56 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</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 ">9.1</span
+                  <span class="kss-nav__ref ">12.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-anim">
-                  <span class="kss-nav__ref kss-nav__ref-child">9.1.1</span
+                  <span class="kss-nav__ref kss-nav__ref-child">12.1.1</span
                   ><span class="kss-nav__name">Animated</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">9.1.2</span
+                  <span class="kss-nav__ref kss-nav__ref-child">12.1.2</span
                   ><span class="kss-nav__name">Video</span>
                 </a>
               </li>
@@ -93,7 +108,7 @@
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -107,7 +122,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-slide">
             <span class="kss-title__ref">
-              9
+              12
               <span class="kss-title__permalink-hash">
                   #Slide
               </span>

doc/styleguide/item-typography-columns.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-columns">
             <span class="kss-title__ref">
-              10.1
+              13.1
               <span class="kss-title__permalink-hash">
                   #Typography.Columns
               </span>

doc/styleguide/item-typography-context.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-context">
             <span class="kss-title__ref">
-              10.2
+              13.2
               <span class="kss-title__permalink-hash">
                   #Typography.Context
               </span>

doc/styleguide/item-typography-data.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-data">
             <span class="kss-title__ref">
-              10.3
+              13.3
               <span class="kss-title__permalink-hash">
                   #Typography.Data
               </span>

doc/styleguide/item-typography-emoji.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-emoji">
             <span class="kss-title__ref">
-              10.4
+              13.4
               <span class="kss-title__permalink-hash">
                   #Typography.Emoji
               </span>

doc/styleguide/item-typography-info.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-info">
             <span class="kss-title__ref">
-              10.5
+              13.5
               <span class="kss-title__permalink-hash">
                   #Typography.Info
               </span>

doc/styleguide/item-typography-interviews.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-interviews">
             <span class="kss-title__ref">
-              10.6
+              13.6
               <span class="kss-title__permalink-hash">
                   #Typography.Interviews
               </span>

doc/styleguide/item-typography-intro.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-intro">
             <span class="kss-title__ref">
-              10.7
+              13.7
               <span class="kss-title__permalink-hash">
                   #Typography.Intro
               </span>

doc/styleguide/item-typography-label.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-label">
             <span class="kss-title__ref">
-              10.8
+              13.8
               <span class="kss-title__permalink-hash">
                   #Typography.Label
               </span>

doc/styleguide/item-typography-landings.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-landings">
             <span class="kss-title__ref">
-              10.9
+              13.9
               <span class="kss-title__permalink-hash">
                   #Typography.Landings
               </span>

doc/styleguide/item-typography-lowercase.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-lowercase">
             <span class="kss-title__ref">
-              10.10
+              13.10
               <span class="kss-title__permalink-hash">
                   #Typography.Lowercase
               </span>

doc/styleguide/item-typography-pull_quote.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-pull_quote">
             <span class="kss-title__ref">
-              10.11
+              13.11
               <span class="kss-title__permalink-hash">
                   #Typography.Pull_Quote
               </span>

doc/styleguide/item-typography-separator.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-separator">
             <span class="kss-title__ref">
-              10.12
+              13.12
               <span class="kss-title__permalink-hash">
                   #Typography.Separator
               </span>

doc/styleguide/item-typography-serif.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-serif">
             <span class="kss-title__ref">
-              10.13
+              13.13
               <span class="kss-title__permalink-hash">
                   #Typography.Serif
               </span>

doc/styleguide/item-typography-subtitle.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-subtitle">
             <span class="kss-title__ref">
-              10.14
+              13.14
               <span class="kss-title__permalink-hash">
                   #Typography.Subtitle
               </span>

doc/styleguide/item-typography-symbols.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-symbols">
             <span class="kss-title__ref">
-              10.15
+              13.15
               <span class="kss-title__permalink-hash">
                   #Typography.Symbols
               </span>

doc/styleguide/item-typography-uppercase.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-uppercase">
             <span class="kss-title__ref">
-              10.16
+              13.16
               <span class="kss-title__permalink-hash">
                   #Typography.Uppercase
               </span>

doc/styleguide/item-typography.html

@@ -51,124 +51,139 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
             <ul class="kss-nav__menu-child">
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-columns">
-                  <span class="kss-nav__ref ">10.1</span
+                  <span class="kss-nav__ref ">13.1</span
                   ><span class="kss-nav__name">Columns</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-context">
-                  <span class="kss-nav__ref ">10.2</span
+                  <span class="kss-nav__ref ">13.2</span
                   ><span class="kss-nav__name">Context</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-data">
-                  <span class="kss-nav__ref ">10.3</span
+                  <span class="kss-nav__ref ">13.3</span
                   ><span class="kss-nav__name">Data</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-emoji">
-                  <span class="kss-nav__ref ">10.4</span
+                  <span class="kss-nav__ref ">13.4</span
                   ><span class="kss-nav__name">Emoji</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-info">
-                  <span class="kss-nav__ref ">10.5</span
+                  <span class="kss-nav__ref ">13.5</span
                   ><span class="kss-nav__name">Info Messages</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-interviews">
-                  <span class="kss-nav__ref ">10.6</span
+                  <span class="kss-nav__ref ">13.6</span
                   ><span class="kss-nav__name">Interviews</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-intro">
-                  <span class="kss-nav__ref ">10.7</span
+                  <span class="kss-nav__ref ">13.7</span
                   ><span class="kss-nav__name">Intro</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-label">
-                  <span class="kss-nav__ref ">10.8</span
+                  <span class="kss-nav__ref ">13.8</span
                   ><span class="kss-nav__name">Label</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-landings">
-                  <span class="kss-nav__ref ">10.9</span
+                  <span class="kss-nav__ref ">13.9</span
                   ><span class="kss-nav__name">Landings</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-lowercase">
-                  <span class="kss-nav__ref ">10.10</span
+                  <span class="kss-nav__ref ">13.10</span
                   ><span class="kss-nav__name">Lowercase</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-pull_quote">
-                  <span class="kss-nav__ref ">10.11</span
+                  <span class="kss-nav__ref ">13.11</span
                   ><span class="kss-nav__name">Pull Quote</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-separator">
-                  <span class="kss-nav__ref ">10.12</span
+                  <span class="kss-nav__ref ">13.12</span
                   ><span class="kss-nav__name">Separator</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-serif">
-                  <span class="kss-nav__ref ">10.13</span
+                  <span class="kss-nav__ref ">13.13</span
                   ><span class="kss-nav__name">Serif</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-subtitle">
-                  <span class="kss-nav__ref ">10.14</span
+                  <span class="kss-nav__ref ">13.14</span
                   ><span class="kss-nav__name">Subtitule</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-symbols">
-                  <span class="kss-nav__ref ">10.15</span
+                  <span class="kss-nav__ref ">13.15</span
                   ><span class="kss-nav__name">Symbols</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-uppercase">
-                  <span class="kss-nav__ref ">10.16</span
+                  <span class="kss-nav__ref ">13.16</span
                   ><span class="kss-nav__name">Uppercase</span>
                 </a>
               </li>
@@ -185,7 +200,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-typography">
             <span class="kss-title__ref">
-              10
+              13
               <span class="kss-title__permalink-hash">
                   #Typography
               </span>

doc/styleguide/section-avatars.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/section-badgets.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/section-base.html

@@ -71,29 +71,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/section-buttons.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -101,22 +116,35 @@
 
         <div class="kss-modifier__wrapper">
           <div class="kss-modifier__heading kss-style">
-            Example
+            Examples
           </div>
 
+            <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
 
           <div class="kss-modifier__example">
-            <a href="#" class="button">Download</a>
+            <a href="#" class="button ">Download</a>
             <div class="kss-modifier__example-footer"></div>
           </div>
 
+            <div class="kss-modifier__name kss-style">
+              .radius
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Rounded corners
+            </div>
+            <div class="kss-modifier__example">
+              <a href="#" class="button radius">Download</a>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
         </div>
 
           <details class="kss-markup kss-style">
             <summary>
                 Markup
             </summary>
-            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button&quot;&gt;Download&lt;/a&gt;</code></pre>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
           </details>
 
         <div class="kss-source kss-style">

doc/styleguide/section-cards.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>

doc/styleguide/section-elements.html

@@ -0,0 +1,204 @@
+<!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-avatars.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-badgets.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-buttons.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-cards.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-elements.html#kssref-elements-try">
+                  <span class="kss-nav__ref ">6.1</span
+                  ><span class="kss-nav__name">Try</span>
+                </a>
+              </li>
+            </ul>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-flexblock.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-screenshots.html">
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-typography.html">
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-elements" 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-elements">
+            <span class="kss-title__ref">
+              6
+              <span class="kss-title__permalink-hash">
+                  #Elements
+              </span>
+            </span>
+            Elements
+          </a>
+        </h1>
+
+
+      </div>
+
+
+
+    </div>
+    <section id="kssref-elements-try" 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-elements-try">
+            <span class="kss-title__ref">
+              6.1
+              <span class="kss-title__permalink-hash">
+                  #Elements.Try
+              </span>
+            </span>
+            Try
+          </a>
+        </h2>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example
+          </div>
+
+
+          <div class="kss-modifier__example">
+            <a href="#" class="try">Try element</a>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;try&quot;&gt;Try element&lt;/a&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_form.scss</code>, line 96
+        </div>
+
+    </section>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/section-flexblock.html

@@ -51,97 +51,112 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
         </a>
             <ul class="kss-nav__menu-child">
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-activity">
-                  <span class="kss-nav__ref ">6.1</span
+                  <span class="kss-nav__ref ">7.1</span
                   ><span class="kss-nav__name"> Activity</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink">
-                  <span class="kss-nav__ref ">6.2</span
+                  <span class="kss-nav__ref ">7.2</span
                   ><span class="kss-nav__name">Flexblocks</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-clients">
-                  <span class="kss-nav__ref ">6.3</span
+                  <span class="kss-nav__ref ">7.3</span
                   ><span class="kss-nav__name">Clients</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-features">
-                  <span class="kss-nav__ref ">6.4</span
+                  <span class="kss-nav__ref ">7.4</span
                   ><span class="kss-nav__name">Features</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery">
-                  <span class="kss-nav__ref ">6.5</span
+                  <span class="kss-nav__ref ">7.5</span
                   ><span class="kss-nav__name">Gallery</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery-overlay">
-                  <span class="kss-nav__ref kss-nav__ref-child">6.5.1</span
+                  <span class="kss-nav__ref kss-nav__ref-child">7.5.1</span
                   ><span class="kss-nav__name">Gallery + Overflow</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-metrics">
-                  <span class="kss-nav__ref ">6.6</span
+                  <span class="kss-nav__ref ">7.6</span
                   ><span class="kss-nav__name">Metrics</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-plans">
-                  <span class="kss-nav__ref ">6.7</span
+                  <span class="kss-nav__ref ">7.7</span
                   ><span class="kss-nav__name">Plans</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-reasons">
-                  <span class="kss-nav__ref ">6.8</span
+                  <span class="kss-nav__ref ">7.8</span
                   ><span class="kss-nav__name">Reasons</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-specs">
-                  <span class="kss-nav__ref ">6.9</span
+                  <span class="kss-nav__ref ">7.9</span
                   ><span class="kss-nav__name">Specs</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-steps">
-                  <span class="kss-nav__ref ">6.10</span
+                  <span class="kss-nav__ref ">7.10</span
                   ><span class="kss-nav__name"> Steps</span>
                 </a>
               </li>
             </ul>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -155,7 +170,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-flexblock">
             <span class="kss-title__ref">
-              6
+              7
               <span class="kss-title__permalink-hash">
                   #Flexblock
               </span>
@@ -176,7 +191,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-activity">
             <span class="kss-title__ref">
-              6.1
+              7.1
               <span class="kss-title__permalink-hash">
                   #Flexblock.Activity
               </span>
@@ -307,7 +322,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-blink">
             <span class="kss-title__ref">
-              6.2
+              7.2
               <span class="kss-title__permalink-hash">
                   #Flexblock.Blink
               </span>
@@ -461,7 +476,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-clients">
             <span class="kss-title__ref">
-              6.3
+              7.3
               <span class="kss-title__permalink-hash">
                   #Flexblock.Clients
               </span>
@@ -590,7 +605,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-features">
             <span class="kss-title__ref">
-              6.4
+              7.4
               <span class="kss-title__permalink-hash">
                   #Flexblock.Features
               </span>
@@ -716,7 +731,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-gallery">
             <span class="kss-title__ref">
-              6.5
+              7.5
               <span class="kss-title__permalink-hash">
                   #Flexblock.Gallery
               </span>
@@ -831,7 +846,7 @@
         <h3 class="kss-title kss-title--level-3">
           <a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
             <span class="kss-title__ref">
-              6.5.1
+              7.5.1
               <span class="kss-title__permalink-hash">
                   #Flexblock.Gallery.Overlay
               </span>
@@ -934,7 +949,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-metrics">
             <span class="kss-title__ref">
-              6.6
+              7.6
               <span class="kss-title__permalink-hash">
                   #Flexblock.Metrics
               </span>
@@ -1042,7 +1057,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-plans">
             <span class="kss-title__ref">
-              6.7
+              7.7
               <span class="kss-title__permalink-hash">
                   #Flexblock.Plans
               </span>
@@ -1195,7 +1210,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-reasons">
             <span class="kss-title__ref">
-              6.8
+              7.8
               <span class="kss-title__permalink-hash">
                   #Flexblock.Reasons
               </span>
@@ -1260,7 +1275,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-specs">
             <span class="kss-title__ref">
-              6.9
+              7.9
               <span class="kss-title__permalink-hash">
                   #Flexblock.Specs
               </span>
@@ -1345,7 +1360,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-flexblock-steps">
             <span class="kss-title__ref">
-              6.10
+              7.10
               <span class="kss-title__permalink-hash">
                   #Flexblock.Steps
               </span>

doc/styleguide/section-forms.html

@@ -0,0 +1,210 @@
+<!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-avatars.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-badgets.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-buttons.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-cards.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-flexblock.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+            <ul class="kss-nav__menu-child">
+              <li class="kss-nav__menu-item">
+                <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-user">
+                  <span class="kss-nav__ref ">8.1</span
+                  ><span class="kss-nav__name">User</span>
+                </a>
+              </li>
+            </ul>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-screenshots.html">
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-typography.html">
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-forms" 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-forms">
+            <span class="kss-title__ref">
+              8
+              <span class="kss-title__permalink-hash">
+                  #Forms
+              </span>
+            </span>
+            Forms
+          </a>
+        </h1>
+
+
+      </div>
+
+
+
+    </div>
+    <section id="kssref-forms-user" 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-forms-user">
+            <span class="kss-title__ref">
+              8.1
+              <span class="kss-title__permalink-hash">
+                  #Forms.User
+              </span>
+            </span>
+            User
+          </a>
+        </h2>
+
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example
+          </div>
+
+
+          <div class="kss-modifier__example">
+            <div class="user">
+  <input type="text" placeholder="Username" />
+  <button>Log in</button>
+</div>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;user&quot;&gt;
+  &lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;Username&quot; /&gt;
+  &lt;button&gt;Log in&lt;/button&gt;
+&lt;/div&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_form.scss</code>, line 139
+        </div>
+
+    </section>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/section-grid.html

@@ -0,0 +1,223 @@
+<!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-avatars.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-badgets.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-buttons.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-cards.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-flexblock.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layout.html">
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-screenshots.html">
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-slide.html">
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-typography.html">
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+    <div id="kssref-grid" 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-grid">
+            <span class="kss-title__ref">
+              9
+              <span class="kss-title__permalink-hash">
+                  #Grid
+              </span>
+            </span>
+            Grid
+          </a>
+        </h1>
+
+          <div class="kss-description">
+            <p>Basic Grid (Flexible blocks)
+Auto-fill &amp; Equal height</p>
+
+          </div>
+
+      </div>
+
+        <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Examples
+          </div>
+
+            <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+
+          <div class="kss-modifier__example">
+            <div class="grid ">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+            <div class="kss-modifier__name kss-style">
+              .vertical-align
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Vertical align
+            </div>
+            <div class="kss-modifier__example">
+              <div class="grid vertical-align">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+        </div>
+
+          <details class="kss-markup kss-style">
+            <summary>
+                Markup
+            </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+    &lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+          </details>
+
+        <div class="kss-source kss-style">
+          Source: <code>modules/_grid.scss</code>, line 1
+        </div>
+
+    </div>
+</article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>

doc/styleguide/section-layout.html

@@ -51,37 +51,52 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
             <ul class="kss-nav__menu-child">
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-alignment">
-                  <span class="kss-nav__ref ">7.1</span
+                  <span class="kss-nav__ref ">10.1</span
                   ><span class="kss-nav__name">Align content</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-radius">
-                  <span class="kss-nav__ref ">7.2</span
+                  <span class="kss-nav__ref ">10.2</span
                   ><span class="kss-nav__name">Radius</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-shadow">
-                  <span class="kss-nav__ref ">7.3</span
+                  <span class="kss-nav__ref ">10.3</span
                   ><span class="kss-nav__name">Shadows</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-sizes">
-                  <span class="kss-nav__ref ">7.4</span
+                  <span class="kss-nav__ref ">10.4</span
                   ><span class="kss-nav__name">Resizing</span>
                 </a>
               </li>
@@ -89,17 +104,17 @@
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -113,7 +128,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-layout">
             <span class="kss-title__ref">
-              7
+              10
               <span class="kss-title__permalink-hash">
                   #Layout
               </span>
@@ -134,7 +149,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layout-alignment">
             <span class="kss-title__ref">
-              7.1
+              10.1
               <span class="kss-title__permalink-hash">
                   #Layout.Alignment
               </span>
@@ -225,7 +240,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layout-radius">
             <span class="kss-title__ref">
-              7.2
+              10.2
               <span class="kss-title__permalink-hash">
                   #Layout.Radius
               </span>
@@ -276,7 +291,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layout-shadow">
             <span class="kss-title__ref">
-              7.3
+              10.3
               <span class="kss-title__permalink-hash">
                   #Layout.Shadow
               </span>
@@ -327,7 +342,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layout-sizes">
             <span class="kss-title__ref">
-              7.4
+              10.4
               <span class="kss-title__permalink-hash">
                   #Layout.Sizes
               </span>

doc/styleguide/section-screenshots.html

@@ -51,29 +51,44 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -87,7 +102,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-screenshots">
             <span class="kss-title__ref">
-              8
+              11
               <span class="kss-title__permalink-hash">
                   #Screenshots
               </span>

doc/styleguide/section-slide.html

@@ -51,41 +51,56 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</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 ">9.1</span
+                  <span class="kss-nav__ref ">12.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-anim">
-                  <span class="kss-nav__ref kss-nav__ref-child">9.1.1</span
+                  <span class="kss-nav__ref kss-nav__ref-child">12.1.1</span
                   ><span class="kss-nav__name">Animated</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">9.1.2</span
+                  <span class="kss-nav__ref kss-nav__ref-child">12.1.2</span
                   ><span class="kss-nav__name">Video</span>
                 </a>
               </li>
@@ -93,7 +108,7 @@
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
       </li>
     </ul>
@@ -107,7 +122,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-slide">
             <span class="kss-title__ref">
-              9
+              12
               <span class="kss-title__permalink-hash">
                   #Slide
               </span>
@@ -128,7 +143,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-slide-background">
             <span class="kss-title__ref">
-              9.1
+              12.1
               <span class="kss-title__permalink-hash">
                   #Slide.Background
               </span>
@@ -322,7 +337,7 @@
         <h3 class="kss-title kss-title--level-3">
           <a class="kss-title__permalink" href="#kssref-slide-background-anim">
             <span class="kss-title__ref">
-              9.1.1
+              12.1.1
               <span class="kss-title__permalink-hash">
                   #Slide.Background.Anim
               </span>
@@ -369,7 +384,7 @@
         <h3 class="kss-title kss-title--level-3">
           <a class="kss-title__permalink" href="#kssref-slide-background-video">
             <span class="kss-title__ref">
-              9.1.2
+              12.1.2
               <span class="kss-title__permalink-hash">
                   #Slide.Background.Video
               </span>

doc/styleguide/section-typography.html

@@ -51,124 +51,139 @@
           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
         </a>
       </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+      </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-flexblock.html">
-          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
+        </a>
+      </li>
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-grid.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layout.html">
-          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
+          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-screenshots.html">
-          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
+          <span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-slide.html">
-          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
+          <span class="kss-nav__ref">12</span><span class="kss-nav__name">Slide</span>
         </a>
       </li>
       <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-typography.html">
-          <span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
+          <span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
         </a>
             <ul class="kss-nav__menu-child">
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-columns">
-                  <span class="kss-nav__ref ">10.1</span
+                  <span class="kss-nav__ref ">13.1</span
                   ><span class="kss-nav__name">Columns</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-context">
-                  <span class="kss-nav__ref ">10.2</span
+                  <span class="kss-nav__ref ">13.2</span
                   ><span class="kss-nav__name">Context</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-data">
-                  <span class="kss-nav__ref ">10.3</span
+                  <span class="kss-nav__ref ">13.3</span
                   ><span class="kss-nav__name">Data</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-emoji">
-                  <span class="kss-nav__ref ">10.4</span
+                  <span class="kss-nav__ref ">13.4</span
                   ><span class="kss-nav__name">Emoji</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-info">
-                  <span class="kss-nav__ref ">10.5</span
+                  <span class="kss-nav__ref ">13.5</span
                   ><span class="kss-nav__name">Info Messages</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-interviews">
-                  <span class="kss-nav__ref ">10.6</span
+                  <span class="kss-nav__ref ">13.6</span
                   ><span class="kss-nav__name">Interviews</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-intro">
-                  <span class="kss-nav__ref ">10.7</span
+                  <span class="kss-nav__ref ">13.7</span
                   ><span class="kss-nav__name">Intro</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-label">
-                  <span class="kss-nav__ref ">10.8</span
+                  <span class="kss-nav__ref ">13.8</span
                   ><span class="kss-nav__name">Label</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-landings">
-                  <span class="kss-nav__ref ">10.9</span
+                  <span class="kss-nav__ref ">13.9</span
                   ><span class="kss-nav__name">Landings</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-lowercase">
-                  <span class="kss-nav__ref ">10.10</span
+                  <span class="kss-nav__ref ">13.10</span
                   ><span class="kss-nav__name">Lowercase</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-pull_quote">
-                  <span class="kss-nav__ref ">10.11</span
+                  <span class="kss-nav__ref ">13.11</span
                   ><span class="kss-nav__name">Pull Quote</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-separator">
-                  <span class="kss-nav__ref ">10.12</span
+                  <span class="kss-nav__ref ">13.12</span
                   ><span class="kss-nav__name">Separator</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-serif">
-                  <span class="kss-nav__ref ">10.13</span
+                  <span class="kss-nav__ref ">13.13</span
                   ><span class="kss-nav__name">Serif</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-subtitle">
-                  <span class="kss-nav__ref ">10.14</span
+                  <span class="kss-nav__ref ">13.14</span
                   ><span class="kss-nav__name">Subtitule</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-symbols">
-                  <span class="kss-nav__ref ">10.15</span
+                  <span class="kss-nav__ref ">13.15</span
                   ><span class="kss-nav__name">Symbols</span>
                 </a>
               </li>
               <li class="kss-nav__menu-item">
                 <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-uppercase">
-                  <span class="kss-nav__ref ">10.16</span
+                  <span class="kss-nav__ref ">13.16</span
                   ><span class="kss-nav__name">Uppercase</span>
                 </a>
               </li>
@@ -185,7 +200,7 @@
         <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-typography">
             <span class="kss-title__ref">
-              10
+              13
               <span class="kss-title__permalink-hash">
                   #Typography
               </span>
@@ -206,7 +221,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-columns">
             <span class="kss-title__ref">
-              10.1
+              13.1
               <span class="kss-title__permalink-hash">
                   #Typography.Columns
               </span>
@@ -253,7 +268,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-context">
             <span class="kss-title__ref">
-              10.2
+              13.2
               <span class="kss-title__permalink-hash">
                   #Typography.Context
               </span>
@@ -300,7 +315,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-data">
             <span class="kss-title__ref">
-              10.3
+              13.3
               <span class="kss-title__permalink-hash">
                   #Typography.Data
               </span>
@@ -347,7 +362,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-emoji">
             <span class="kss-title__ref">
-              10.4
+              13.4
               <span class="kss-title__permalink-hash">
                   #Typography.Emoji
               </span>
@@ -394,7 +409,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-info">
             <span class="kss-title__ref">
-              10.5
+              13.5
               <span class="kss-title__permalink-hash">
                   #Typography.Info
               </span>
@@ -441,7 +456,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-interviews">
             <span class="kss-title__ref">
-              10.6
+              13.6
               <span class="kss-title__permalink-hash">
                   #Typography.Interviews
               </span>
@@ -522,7 +537,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-intro">
             <span class="kss-title__ref">
-              10.7
+              13.7
               <span class="kss-title__permalink-hash">
                   #Typography.Intro
               </span>
@@ -569,7 +584,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-label">
             <span class="kss-title__ref">
-              10.8
+              13.8
               <span class="kss-title__permalink-hash">
                   #Typography.Label
               </span>
@@ -612,7 +627,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-landings">
             <span class="kss-title__ref">
-              10.9
+              13.9
               <span class="kss-title__permalink-hash">
                   #Typography.Landings
               </span>
@@ -659,7 +674,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-lowercase">
             <span class="kss-title__ref">
-              10.10
+              13.10
               <span class="kss-title__permalink-hash">
                   #Typography.Lowercase
               </span>
@@ -702,7 +717,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-pull_quote">
             <span class="kss-title__ref">
-              10.11
+              13.11
               <span class="kss-title__permalink-hash">
                   #Typography.Pull_Quote
               </span>
@@ -755,7 +770,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-separator">
             <span class="kss-title__ref">
-              10.12
+              13.12
               <span class="kss-title__permalink-hash">
                   #Typography.Separator
               </span>
@@ -802,7 +817,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-serif">
             <span class="kss-title__ref">
-              10.13
+              13.13
               <span class="kss-title__permalink-hash">
                   #Typography.Serif
               </span>
@@ -849,7 +864,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-subtitle">
             <span class="kss-title__ref">
-              10.14
+              13.14
               <span class="kss-title__permalink-hash">
                   #Typography.Subtitle
               </span>
@@ -896,7 +911,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-symbols">
             <span class="kss-title__ref">
-              10.15
+              13.15
               <span class="kss-title__permalink-hash">
                   #Typography.Symbols
               </span>
@@ -943,7 +958,7 @@
         <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-typography-uppercase">
             <span class="kss-title__ref">
-              10.16
+              13.16
               <span class="kss-title__permalink-hash">
                   #Typography.Uppercase
               </span>

src/scss/modules/_button.scss

@@ -1,7 +1,9 @@
 // Buttons
 //
 // Markup:
-// <a href="#" class="button">Download</a>
+// <a href="#" class="button {{modifier_class}}">Download</a>
+//
+// .radius - Rounded corners
 //
 // Styleguide Buttons
 [class*='button'] {

src/scss/modules/_form.scss

@@ -93,6 +93,12 @@ input[type='submit'] {
   width: 50%;
 }
 
+// Try
+//
+// Markup:
+// <a href="#" class="try">Try element</a>
+//
+// Styleguide Elements.Try
 .try {
   display: block;
   font-size: 1.6rem;
@@ -130,6 +136,15 @@ button:disabled:hover {
   cursor: not-allowed;
 }
 
+// User
+//
+// Markup:
+// <div class="user">
+//   <input type="text" placeholder="Username" />
+//   <button>Log in</button>
+// </div>
+//
+// Styleguide Forms.User
 .user {
   input {
     margin-bottom: 0;

src/scss/modules/_grid.scss

@@ -1,6 +1,24 @@
-/*=== 1.4. Basic Grid (Flexible blocks)
+// Grid
-Auto-fill & Equal height === */
+//
-
+// Basic Grid (Flexible blocks)
+// Auto-fill & Equal height
+//
+// Markup:
+// <div class="grid {{modifier_class}}">
+//   <div class="column">
+//     <h3><strong>WebSlides is really easy</strong></h3>
+//     <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+//     <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+//   </div>
+//   <div class="column">
+//     <h3><strong>WebSlides is the clean</strong></h3>
+//     <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+//   </div>
+// </div>
+//
+// .vertical-align - Vertical align
+//
+// Styleguide Grid
 .grid {
   clear: both;
   display: flex;