add gapless columns

1 files changed, 45 insertions, 2 deletions

diff --git a/index.html b/index.html
index 1d9fd72..37c9885 100644
--- a/index.html
+++ b/index.html
@@ -866,6 +866,44 @@
             <section class="notes">
                 <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p>
             </section>
+            <div class="columns col-gapless">
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey"></div>
+                </div>
+            </div>
             <div class="columns">
                 <div class="column">
                     <div class="bg-grey"></div>
@@ -916,6 +954,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>
@@ -927,7 +970,7 @@
             </div>
 
             <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>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>. And you can add the class <code>col-gapless</code> to have gapless columns.</p>
             </section>
 
             <!-- layout example -->
@@ -2482,7 +2525,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>