Merge pull request #551 from picturepan2/0.5.8 v0.5.8

0.5.8

19 files changed, 80 insertions, 64 deletions

diff --git a/docs/components/accordions.html b/docs/components/accordions.html
index e01e561..ab31324 100644
--- a/docs/components/accordions.html
+++ b/docs/components/accordions.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -321,7 +321,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/avatars.html b/docs/components/avatars.html
index 18225d7..7201f60 100644
--- a/docs/components/avatars.html
+++ b/docs/components/avatars.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -289,7 +289,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/badges.html b/docs/components/badges.html
index ffd166e..23ac528 100644
--- a/docs/components/badges.html
+++ b/docs/components/badges.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -260,7 +260,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/bars.html b/docs/components/bars.html
index 8640e54..f3e64bb 100644
--- a/docs/components/bars.html
+++ b/docs/components/bars.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -300,7 +300,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/breadcrumbs.html b/docs/components/breadcrumbs.html
index 841f1eb..a38729c 100644
--- a/docs/components/breadcrumbs.html
+++ b/docs/components/breadcrumbs.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -254,7 +254,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/cards.html b/docs/components/cards.html
index 4daf089..9212fff 100644
--- a/docs/components/cards.html
+++ b/docs/components/cards.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -306,7 +306,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/chips.html b/docs/components/chips.html
index 9f23f70..fd08136 100644
--- a/docs/components/chips.html
+++ b/docs/components/chips.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -243,7 +243,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/empty.html b/docs/components/empty.html
index c37fc76..505edac 100644
--- a/docs/components/empty.html
+++ b/docs/components/empty.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -269,7 +269,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/menu.html b/docs/components/menu.html
index 5cf7f56..9607923 100644
--- a/docs/components/menu.html
+++ b/docs/components/menu.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -222,12 +222,18 @@
                     </div>
                   </li>
                   <li class="divider"></li>
-                  <li class="menu-item">
+                  <li class="menu-item"><a class="active" href="#menus">My profile</a>
+                    <div class="menu-badge">
+                      <label class="form-checkbox">
+                        <input type="checkbox"><i class="form-icon"></i>Public
+                      </label>
+                    </div>
+                  </li>
+                  <li class="menu-item"><a href="#menus">Settings</a>
                     <div class="menu-badge">
                       <label class="label label-primary">2</label>
-                    </div><a class="active" href="#menus">My profile</a>
+                    </div>
                   </li>
-                  <li class="menu-item"><a href="#menus">Settings</a></li>
                   <li class="menu-item"><a href="#menus">Logout</a></li>
                 </ul>
               </div>
@@ -264,7 +270,7 @@
               You can separate menu items with a <code>divider</code>.
               Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
             </p>
-            <p>Menus also have <a href="elements.html#forms" target="_blank">Form controls</a> (checkbox, radio and checkbox) support.</p>
+            <p>Menus also have <a href="../elements/forms.html" target="_blank">Form controls</a> (checkbox, radio and checkbox) support.</p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- menu header text --&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"LINKS"</span>&gt;</span>
@@ -286,12 +292,22 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- menu item with badge --&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Settings
     <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>My profile<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Public
+      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
   </code></pre>
@@ -370,7 +386,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/modals.html b/docs/components/modals.html
index 39a6437..70ebddd 100644
--- a/docs/components/modals.html
+++ b/docs/components/modals.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -346,7 +346,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/nav.html b/docs/components/nav.html
index 3c0b7d7..2b4b08c 100644
--- a/docs/components/nav.html
+++ b/docs/components/nav.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -266,7 +266,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/pagination.html b/docs/components/pagination.html
index 0757b47..e839929 100644
--- a/docs/components/pagination.html
+++ b/docs/components/pagination.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -299,7 +299,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/panels.html b/docs/components/panels.html
index 1c549c2..83bceb8 100644
--- a/docs/components/panels.html
+++ b/docs/components/panels.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -346,7 +346,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/popovers.html b/docs/components/popovers.html
index 358d0fc..73af0f7 100644
--- a/docs/components/popovers.html
+++ b/docs/components/popovers.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -307,7 +307,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/steps.html b/docs/components/steps.html
index 63a6c01..7d6f443 100644
--- a/docs/components/steps.html
+++ b/docs/components/steps.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -254,7 +254,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/tabs.html b/docs/components/tabs.html
index d18a659..7ca3590 100644
--- a/docs/components/tabs.html
+++ b/docs/components/tabs.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -313,7 +313,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/tiles.html b/docs/components/tiles.html
index 45dde1d..99bf7a9 100644
--- a/docs/components/tiles.html
+++ b/docs/components/tiles.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -306,7 +306,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/toasts.html b/docs/components/toasts.html
index acd477c..1e177d8 100644
--- a/docs/components/toasts.html
+++ b/docs/components/toasts.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -266,7 +266,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>
diff --git a/docs/components/tooltips.html b/docs/components/tooltips.html
index 11dbee8..1a0612c 100644
--- a/docs/components/tooltips.html
+++ b/docs/components/tooltips.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -250,7 +250,7 @@ Multiline">left tooltip</button>
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>