Merge pull request #208 from picturepan2/0.2.14 v0.2.14

0.2.14

1 files changed, 55 insertions, 8 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index 9e11ab2..27706a7 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -75,7 +75,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="position" class="container">
-          <header class="text-center"><h3>Position utilities</h3></header>
+          <header class="text-center"><h3><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3></header>
           <section class="notes">
             <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
           </section>
@@ -103,7 +103,7 @@
         </section>
 
         <section id="display" class="container">
-          <header class="text-center"><h3>Display utilities</h3></header>
+          <header class="text-center"><h3><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3></header>
           <section class="notes">
             <p><strong>Display utilities</strong> are used for display and hidden things.</p>
           </section>
@@ -134,7 +134,7 @@
         </section>
 
         <section id="text" class="container">
-          <header class="text-center"><h3>Text utilities</h3></header>
+          <header class="text-center"><h3><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3></header>
           <section class="notes">
             <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p>
           </section>
@@ -176,7 +176,7 @@
         </section>
 
         <section id="shapes" class="container">
-          <header class="text-center"><h3>Shape utilities</h3></header>
+          <header class="text-center"><h3><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3></header>
           <section class="notes">
             <p><strong>Shape utilities</strong> are used for change element shapes.</p>
           </section>
@@ -191,7 +191,7 @@
         </section>
 
         <section id="divider" class="container">
-          <header class="text-center"><h3>Divider</h3></header>
+          <header class="text-center"><h3><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3></header>
           <section class="notes">
             <p>A <strong>Divider</strong> is used for separating elements.</p>
           </section>
@@ -206,17 +206,64 @@
             </div>
           </div>
 
+          <div class="columns">
+            <div class="column">
+              <form>
+                <div class="form-group">
+                  <label class="form-label" for="input-example-1">Email</label>
+                  <input class="form-input" type="text" id="input-example-1" placeholder="Email" />
+                </div>
+                <div class="form-group">
+                  <label class="form-label" for="input-example-2">Password</label>
+                  <input class="form-input" type="password" id="input-example-2" placeholder="Password" />
+                </div>
+                <div class="form-group">
+                  <label class="form-checkbox">
+                    <input type="checkbox" />
+                    <i class="form-icon"></i> Remember me
+                  </label>
+                </div>
+                <div class="form-group">
+                  <button class="btn btn-primary">Sign in</button>
+                </div>
+              </form>
+            </div>
+            <div class="divider-vert" data-content="OR"></div>
+            <div class="column">
+              <form>
+                <div class="form-group">
+                  <label class="form-label" for="input-example-3">Email</label>
+                  <input class="form-input" type="text" id="input-example-3" placeholder="Email" />
+                </div>
+                <div class="form-group">
+                  <button class="btn btn-primary btn-block">Sign up</button>
+                  <button class="btn btn-link btn-block">Learn more</button>
+                </div>
+              </form>
+            </div>
+          </div>
+
 <!-- shape utilities example -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- divider element --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- divider element with text --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider text-center&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;OR&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</code></pre>
 
+<span class="com">&lt;!-- vertical divider element with text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column&quot;</span>&gt;
+    <span class="com">&lt;!-- column content --&gt;</span>
+  &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider-vert&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;OR&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column&quot;</span>&gt;
+    <span class="com">&lt;!-- column content --&gt;</span>
+  &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</code></pre>
         </section>
 
         <section id="loading" class="container">
-          <header class="text-center"><h3>Loading</h3></header>
+          <header class="text-center"><h3><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3></header>
           <section class="notes">
             <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p>
           </section>
@@ -244,7 +291,7 @@
             </li>
             <li class="page-item page-next">
               <a href="experimentals.html">
-                <p class="page-item-subtitle">Previous</p>
+                <p class="page-item-subtitle">Next</p>
                 <h4 class="page-item-title">Experimentals</h4>
               </a>
             </li>