Add Responsive Visibility and new examples

1 files changed, 151 insertions, 31 deletions

diff --git a/docs/layout.html b/docs/layout.html
index 1250210..4d1c115 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -72,61 +72,61 @@
           </section>
           <div class="columns">
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray"></div>
+              <div class="bg-gray docs-block"></div>
             </div>
           </div>
 
           <div class="columns">
             <div class="column col-12">
-              <div class="bg-gray">col-12 (100%)</div>
+              <div class="bg-gray docs-block">col-12 (100%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-9">
-              <div class="bg-gray">col-9 (75%)</div>
+              <div class="bg-gray docs-block">col-9 (75%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-6">
-              <div class="bg-gray">col-6 (50%)</div>
+              <div class="bg-gray docs-block">col-6 (50%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-3">
-              <div class="bg-gray">col-3 (25%)</div>
+              <div class="bg-gray docs-block">col-3 (25%)</div>
             </div>
           </div>
 
@@ -137,10 +137,10 @@
 
           <div class="columns col-gapless">
             <div class="column col-6">
-              <div class="bg-gray">col-6 (gapless)</div>
+              <div class="bg-gray docs-block">col-6 (gapless)</div>
             </div>
             <div class="column col-6">
-              <div class="bg-gray">col-6 (gapless)</div>
+              <div class="bg-gray docs-block">col-6 (gapless)</div>
             </div>
           </div>
 
@@ -150,10 +150,10 @@
 
           <div class="columns col-oneline">
             <div class="column col-8">
-              <div class="bg-gray">col-8</div>
+              <div class="bg-gray docs-block">col-8</div>
             </div>
             <div class="column col-8">
-              <div class="bg-gray">col-8</div>
+              <div class="bg-gray docs-block">col-8</div>
             </div>
           </div>
 
@@ -179,37 +179,35 @@
           <header class="text-center"><h3>Responsive grid</h3></header>
           <div class="columns col-multiline">
             <div class="column col-md-6 col-xs-12">
-              <div class="bg-gray">col-md-6</div>
+              <div class="bg-gray docs-block">col-md-6</div>
             </div>
             <div class="column col-md-3 col-xs-12">
-              <div class="bg-gray">col-md-3</div>
+              <div class="bg-gray docs-block">col-md-3</div>
             </div>
             <div class="column col-md-3 col-xs-12">
-              <div class="bg-gray">col-md-3</div>
+              <div class="bg-gray docs-block">col-md-3</div>
             </div>
           </div>
-
           <div class="columns">
             <div class="column col-sm-6">
-              <div class="bg-gray">col-sm-6</div>
+              <div class="bg-gray docs-block">col-sm-6</div>
             </div>
             <div class="column col-sm-3">
-              <div class="bg-gray">col-sm-3</div>
+              <div class="bg-gray docs-block">col-sm-3</div>
             </div>
             <div class="column col-sm-3">
-              <div class="bg-gray">col-sm-3</div>
+              <div class="bg-gray docs-block">col-sm-3</div>
             </div>
           </div>
-
           <div class="columns">
             <div class="column col-xs-6">
-              <div class="bg-gray">col-xs-6</div>
+              <div class="bg-gray docs-block">col-xs-6</div>
             </div>
             <div class="column col-xs-3">
-              <div class="bg-gray">col-xs-3</div>
+              <div class="bg-gray docs-block">col-xs-3</div>
             </div>
             <div class="column col-xs-3">
-              <div class="bg-gray">col-xs-3</div>
+              <div class="bg-gray docs-block">col-xs-3</div>
             </div>
           </div>
 
@@ -235,6 +233,62 @@
 &lt;<span class="tag">/div</span>&gt;
 </code></pre>
 
+          <header class="text-center"><h4>Responsive Visibility</h4></header>
+          <table class="docs-table table">
+            <thead>
+              <tr class="text-center">
+                <th></th>
+                <th>size-xs</th>
+                <th>size-sm</th>
+                <th>size-md</th>
+                <th>size-lg</th>
+                <th>size-xl</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>hide-xs</td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+              </tr>
+              <tr>
+                <td>hide-sm</td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+              </tr>
+              <tr>
+                <td>hide-md</td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+              </tr>
+              <tr>
+                <td>hide-lg</td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+              </tr>
+              <tr>
+                <td>hide-xl</td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+              </tr>
+            </tbody>
+          </table>
+
           <section class="notes">
             <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p>
             <ul>
@@ -244,6 +298,72 @@
               <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li>
               <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li>
             </ul>
+          </section>
+
+          <table class="docs-table table">
+            <thead>
+              <tr class="text-center">
+                <th></th>
+                <th>size-xs</th>
+                <th>size-sm</th>
+                <th>size-md</th>
+                <th>size-lg</th>
+                <th>size-xl</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>show-xs</td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+              </tr>
+              <tr>
+                <td>show-sm</td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+              </tr>
+              <tr>
+                <td>show-md</td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+              </tr>
+              <tr>
+                <td>show-lg</td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-gray docs-dot"></div></td>
+              </tr>
+              <tr>
+                <td>show-xl</td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+                <td><div class="bg-primary docs-dot"></div></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <section class="notes">
+            <p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p>
+            <ul>
+              <li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>. </li>
+              <li><code>show-sm</code> shows elements when the window width is smaller than or equal to <strong>600px</strong>. </li>
+              <li><code>show-md</code> shows elements when the window width is smaller than or equal to <strong>840px</strong>. </li>
+              <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>. </li>
+              <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>. </li>
+            </ul>
             <p>Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory <code>/tools/resizer</code>.</p>
           </section>
         </section>