Add Icons Pug template

2 files changed, 383 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>
diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug
index e69de29..b67f1a5 100644
--- a/docs/src/contents/icons.pug
+++ b/docs/src/contents/icons.pug
@@ -0,0 +1,197 @@
+p
+  | Icons are single-element, responsive and pure CSS icons.
+  | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{'<head>'} to have these CSS icons.
+
++docs-subheading('icons-navigation', 'Navigation icons')
+
+.columns
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-arrow-up
+    p icon-arrow-up
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-arrow-right
+    p icon-arrow-right
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-arrow-down
+    p icon-arrow-down
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-arrow-left
+    p icon-arrow-left
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-upward
+    p icon-upward
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-forward
+    p icon-forward
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-downward
+    p icon-downward
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-back
+    p icon-back
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-caret
+    p icon-caret
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-menu
+    p icon-menu
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-apps
+    p icon-apps
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-more-horiz
+    p icon-more-horiz
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-more-vert
+    p icon-more-vert
+
++docs-subheading('icons-action', 'Action icons')
+
+.columns
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-resize-horiz
+    p icon-resize-horiz
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-resize-vert
+    p icon-resize-vert
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-plus
+    p icon-plus
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-minus
+    p icon-minus
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-cross
+    p icon-cross
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-check
+    p icon-check
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-stop
+    p icon-stop
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-shutdown
+    p icon-shutdown
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-refresh
+    p icon-refresh
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-search
+    p icon-search
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-flag
+    p icon-flag
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-bookmark
+    p icon-bookmark
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-edit
+    p icon-edit
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-delete
+    p icon-delete
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-share
+    p icon-share
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-download
+    p icon-download
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-upload
+    p icon-upload
+
++docs-subheading('icons-object', 'Object icons')
+
+.columns
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-mail
+    p icon-mail
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-people
+    p icon-people
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-message
+    p icon-message
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-photo
+    p icon-photo
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-time
+    p icon-time
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-location
+    p icon-location
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-link
+    p icon-link
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-emoji
+    p icon-emoji
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <i class="icon icon-menu"></i>
+
++docs-subheading('icons-sizes', 'Icon sizes')
+
+p
+  | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
+  | You can set #[code font-size] to have different icon sizes.
+
+.columns
+  .column.col-3.col-md-6
+    p
+      i.icon.icon-2x.icon-mail
+    p icon-2x (32px)
+  .column.col-3.col-md-6
+    p
+      i.icon.icon-3x.icon-mail
+    p icon-3x (48px)
+  .column.col-3.col-md-6
+    p
+      i.icon.icon-4x.icon-mail
+    p icon-4x (64px)
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <i class="icon icon-2x icon-mail"></i>
\ No newline at end of file