Merge pull request #174 from picturepan2/feature/0.2.11 v0.2.11

Feature/0.2.11

1 files changed, 214 insertions, 21 deletions

diff --git a/docs/elements.html b/docs/elements.html
index d1545b0..88d64c8 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -8,8 +8,8 @@
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Elements - Spectre.css</title>
   <link rel="stylesheet" href="css/spectre.css" />
+  <link rel="stylesheet" href="css/spectre-icons.css" />
   <link rel="stylesheet" href="css/docs.css" />
-  <link rel="stylesheet" href="font/style.css" />
 </head>
 <body>
   <section class="section section-header bg-gray">
@@ -50,6 +50,9 @@
                 <a href="elements.html#forms">Forms</a>
               </li>
               <li class="nav-item">
+                <a href="elements.html#icons">Icons</a>
+              </li>
+              <li class="nav-item">
                 <a href="elements.html#labels">Labels</a>
               </li>
               <li class="nav-item">
@@ -408,14 +411,14 @@
               <button class="btn btn-primary btn-sm">small</button>
             </div>
             <div class="column col-3 col-xs-12">
-              <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-markunread"></i></button>
-              <button class="btn btn-action btn-primary"><i class="icon icon-markunread"></i></button>
-              <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-markunread"></i></button>
+              <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
+              <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
+              <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button>
             </div>
             <div class="column col-3 col-xs-12">
-              <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-markunread"></i></button>
-              <button class="btn btn-action btn-primary circle"><i class="icon icon-markunread"></i></button>
-              <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-markunread"></i></button>
+              <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button>
+              <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button>
+              <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button>
             </div>
           </div>
           <section class="notes">
@@ -429,15 +432,18 @@
 
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-block&quot;</span>&gt;block button&lt;<span class="tag">/button</span>&gt;
 
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
 </code></pre>
 
           <div class="columns">
             <div class="column">
-              <button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button>
-              <button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button>
-              <button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button>
+              <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+              <button class="btn btn-primary btn-lg">large</button>
+              <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+              <button class="btn btn-primary">normal</button>
+              <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+              <button class="btn btn-primary btn-sm">small</button>
             </div>
           </div>
           <section class="notes">
@@ -445,9 +451,9 @@
           </section>
 
 <!-- buttons example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-lg&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; large&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; normal&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; small&lt;<span class="tag">/button</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-lg&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; large&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; normal&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; small&lt;<span class="tag">/button</span>&gt;
 </code></pre>
 
           <header class="text-center"><h4>Button groups</h4></header>
@@ -1005,6 +1011,188 @@
           </div>
         </section>
 
+        <section id="icons" class="container">
+          <header class="text-center"><h3>Icons <small class="label">experimental</small></h3></header>
+          <section class="notes">
+            <p><strong>Icons</strong> 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>
+          </section>
+          <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-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-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-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 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-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-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-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 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-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-link"></i>
+              </button>
+              <p>icon-link</p>
+            </div>
+          </div>
+
+<!-- icons example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-menu&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+</code></pre>
+
+        </section>
+
         <section id="labels" class="container">
           <header class="text-center"><h3>Labels</h3></header>
           <section class="notes">
@@ -1034,12 +1222,17 @@
           <header class="text-center"><h3>Codes</h3></header>
           <section class="notes">
             <p><strong>Codes</strong> are inline and multiline code snippets.</p>
-            <p>For inline code, you can use the element <code>&lt;code&gt;</code>. </p>
-            <p>For multiline code snippet blocks, you can use <code>&lt;pre&gt;</code> with the <code>code</code> class as a container, and add <code>&lt;code&gt;</code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p>
+            <p>For inline code, you can use the element <code>&lt;code&gt;</code>. For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p>
           </section>
 
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+  Submit
+&lt;<span class="tag">/button</span>&gt;
+</code></pre>
+
 <!-- codes example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">&quot;code&quot;</span> <span class="atn">data-lang</span>=<span class="atv">&quot;HTML&quot;</span>&gt;&lt;<span class="tag">code</span>&gt;<span class="com">&lt;!-- code snippets --&gt;</span>
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">&quot;code&quot;</span> <span class="atn">data-lang</span>=<span class="atv">&quot;HTML&quot;</span>&gt;&lt;<span class="tag">code</span>&gt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;com&quot;</span>&gt;&amp;lt;!-- code snippets --&amp;gt;&lt;<span class="tag">/span</span>&gt;
 &amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;button&lt;<span class="tag">/span</span>&gt; &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atn&quot;</span>&gt;class&lt;<span class="tag">/span</span>&gt;=&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atv&quot;</span>&gt;&amp;quot;btn&amp;quot;</span>&lt;<span class="tag">/span</span>&gt;&amp;gt;
   Submit
 &amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;/button&lt;<span class="tag">/span</span>&gt;&amp;gt;
@@ -1055,7 +1248,7 @@
             <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
           </section>
           <div class="columns">
-            <div class="column col-9 col-xs-12">
+            <div class="column col-12">
               <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
             </div>
           </div>
@@ -1067,7 +1260,7 @@
             <p>You can use the element <code>&lt;figure&gt;</code> for an image with a caption. Add the <code>figure</code> class to &lt;figure&gt; element. The images with the <code>img-responsive</code> class will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment.  </p>
           </section>
           <div class="columns">
-            <div class="column col-9 col-xs-12">
+            <div class="column col-12">
               <figure class="figure">
                 <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"/>
                 <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
@@ -1085,7 +1278,7 @@
             <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p>
           </section>
           <div class="columns">
-            <div class="column col-9 col-xs-12">
+            <div class="column col-12">
               <div class="video-responsive">
                 <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" frameborder="0" allowfullscreen></iframe>
               </div>