Merge pull request #73 from picturepan2/hotfix/bugs

Hotfix/bugs

1 files changed, 28 insertions, 5 deletions

diff --git a/index.html b/index.html
index 220e631..5c81759 100644
--- a/index.html
+++ b/index.html
@@ -916,6 +916,11 @@
                 </div>
             </div>
             <div class="columns">
+                <div class="column col-9">
+                    <div class="bg-grey">col-9 (75%)</div>
+                </div>
+            </div>
+            <div class="columns">
                 <div class="column col-6">
                     <div class="bg-grey">col-6 (50%)</div>
                 </div>
@@ -928,8 +933,18 @@
 
             <section class="notes">
                 <p>Add the class <code>columns</code> to a container with the class <code>container</code>. And add any element you want with classname <code>column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p>
+                <p>And you can add the class <code>col-gapless</code> to have gapless columns.</p>
             </section>
 
+            <div class="columns col-gapless">
+                <div class="column col-6">
+                    <div class="bg-grey">col-6 (gapless)</div>
+                </div>
+                <div class="column col-6">
+                    <div class="bg-grey">col-6 (gapless)</div>
+                </div>
+            </div>
+
             <!-- layout example -->
 <pre class="code lang-html">
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
@@ -939,6 +954,11 @@
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-2&quot;</span>&gt;col-2&lt;<span class="tag">/div</span>&gt;
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-1&quot;</span>&gt;col-1&lt;<span class="tag">/div</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
+
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns col-gapless&quot;</span>&gt;
+        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
+        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 </pre>
 
@@ -1091,20 +1111,23 @@
                         <i class="icon icon-markunread"></i>
                         <p class="empty-title">You have no new messages</p>
                         <p class="empty-meta">Click the button to start a conversation.</p>
-                        <button class="btn btn-primary">Send a message</button>
+                        <button class="empty-action btn btn-primary">Send a message</button>
                     </section>
                 </div>
                 <div class="column col-6">
                     <section class="empty">
                         <i class="icon icon-people"></i>
                         <p class="empty-title">You are not following anyone</p>
-                        <button class="btn btn-primary">Discover people</button>
+                        <div class="empty-action input-group">
+                            <input type="text" class="form-input" placeholder="" />
+                            <button class="btn btn-primary input-group-btn">Search</button>
+                        </div>
                     </section>
                 </div>
             </div>
 
             <section class="notes">
-                <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. </p>
+                <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
             </section>
 
             <!-- empty states example -->
@@ -1113,7 +1136,7 @@
     &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
     &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title&quot;</span>&gt;You have no new messages&lt;<span class="tag">/p</span>&gt;
     &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-meta&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
-    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
+    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 </pre>
 
@@ -2479,7 +2502,7 @@
     <footer class="bg-grey">
         <section id="copyright" class="grid-footer container grid-960">
             <p>
-                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.23
+                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.24
             </p>
             <p>Designed and built with love 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>
         </section>