Add Icons Pug template

1 files changed, 186 insertions, 0 deletions

diff --git a/docs/elements.html b/docs/elements.html
index e7856f8..a9e4f8f 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1212,6 +1212,192 @@
           </div>
           <div class="container" id="icons">
             <h3 class="s-title"><a class="anchor" href="#icons" aria-hidden="true">#</a>Icons</h3>
+            <p>
+              Icons are single-element, responsive and pure CSS icons.
+              You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.
+            </p>
+            <h4 class="s-subtitle" id="icons-navigation"><a class="anchor" href="#icons-navigation" aria-hidden="true">#</a>Navigation icons</h4>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-up"></i></button>
+                <p>icon-arrow-up</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-right"></i></button>
+                <p>icon-arrow-right</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-down"></i></button>
+                <p>icon-arrow-down</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-left"></i></button>
+                <p>icon-arrow-left</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-upward"></i></button>
+                <p>icon-upward</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-forward"></i></button>
+                <p>icon-forward</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-downward"></i></button>
+                <p>icon-downward</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-back"></i></button>
+                <p>icon-back</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-caret"></i></button>
+                <p>icon-caret</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-menu"></i></button>
+                <p>icon-menu</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-apps"></i></button>
+                <p>icon-apps</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-more-horiz"></i></button>
+                <p>icon-more-horiz</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-more-vert"></i></button>
+                <p>icon-more-vert</p>
+              </div>
+            </div>
+            <h4 class="s-subtitle" id="icons-action"><a class="anchor" href="#icons-action" aria-hidden="true">#</a>Action icons</h4>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-resize-horiz"></i></button>
+                <p>icon-resize-horiz</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-resize-vert"></i></button>
+                <p>icon-resize-vert</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-plus"></i></button>
+                <p>icon-plus</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-minus"></i></button>
+                <p>icon-minus</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-cross"></i></button>
+                <p>icon-cross</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-check"></i></button>
+                <p>icon-check</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-stop"></i></button>
+                <p>icon-stop</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-shutdown"></i></button>
+                <p>icon-shutdown</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-refresh"></i></button>
+                <p>icon-refresh</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-search"></i></button>
+                <p>icon-search</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-flag"></i></button>
+                <p>icon-flag</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-bookmark"></i></button>
+                <p>icon-bookmark</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-edit"></i></button>
+                <p>icon-edit</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-delete"></i></button>
+                <p>icon-delete</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-share"></i></button>
+                <p>icon-share</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-download"></i></button>
+                <p>icon-download</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-upload"></i></button>
+                <p>icon-upload</p>
+              </div>
+            </div>
+            <h4 class="s-subtitle" id="icons-object"><a class="anchor" href="#icons-object" aria-hidden="true">#</a>Object icons</h4>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-mail"></i></button>
+                <p>icon-mail</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-people"></i></button>
+                <p>icon-people</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-message"></i></button>
+                <p>icon-message</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-photo"></i></button>
+                <p>icon-photo</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-time"></i></button>
+                <p>icon-time</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-location"></i></button>
+                <p>icon-location</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-link"></i></button>
+                <p>icon-link</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-emoji"></i></button>
+                <p>icon-emoji</p>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-menu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="icons-sizes"><a class="anchor" href="#icons-sizes" aria-hidden="true">#</a>Icon sizes</h4>
+            <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes.
+              You can set <code>font-size</code> to have different icon sizes.
+            </p>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <p><i class="icon icon-2x icon-mail"></i></p>
+                <p>icon-2x (32px)</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <p><i class="icon icon-3x icon-mail"></i></p>
+                <p>icon-3x (48px)</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <p><i class="icon icon-4x icon-mail"></i></p>
+                <p>icon-4x (64px)</p>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-2x icon-mail"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="labels">
             <h3 class="s-title"><a class="anchor" href="#labels" aria-hidden="true">#</a>Labels</h3>