From 324d2584157d0fb0ef807664ea2ca2325a191b45 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Fri, 7 Oct 2016 17:56:07 +0800
Subject: Fix examples responsive issues

---
 index.html | 165 ++++++++++++++++++++++++++++++++-----------------------------
 1 file changed, 88 insertions(+), 77 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index e1c5d83..c397723 100644
--- a/index.html
+++ b/index.html
@@ -93,7 +93,7 @@
             <section class="notes">
                 <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p>
                 <h5>Install manually</h5>
-                <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 27KB):</p>
+                <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 30KB):</p>
                 <p><a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
                 <h5>Install with NPM</h5>
                 <!-- install with npm example -->
@@ -155,7 +155,7 @@
                 </ul>
             </section>
             <section class="notes text-center">
-                <div class="btn-group">
+                <div class="btn-group is-scrollable">
                     <a href="#typography" class="btn btn-primary">typography</a>
                     <a href="#tables" class="btn btn-primary">tables</a>
                     <a href="#buttons" class="btn btn-primary">buttons</a>
@@ -220,7 +220,7 @@
 
             <header class="text-center"><h5>lists</h5></header>
             <div class="columns">
-                <div class="column col-4">
+                <div class="column col-4 col-xs-12">
                     <ul class="list">
                         <li>list item 1</li>
                         <li>list item 2
@@ -233,7 +233,7 @@
                         <li>list item 3</li>
                     </ul>
                 </div>
-                <div class="column col-4">
+                <div class="column col-4 col-xs-12">
                     <ol class="list">
                         <li>list item 1</li>
                         <li>list item 2
@@ -246,7 +246,7 @@
                         <li>list item 3</li>
                     </ol>
                 </div>
-                <div class="column col-4">
+                <div class="column col-4 col-xs-12">
                     <dl class="list">
                         <dt>description list term 1</dt>
                         <dd>description list description 1</dd>
@@ -360,15 +360,15 @@
             </section>
 
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn">default button</button>
                     <button class="btn loading">default button</button>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-primary">primary button</button>
                     <button class="btn btn-primary loading">primary button</button>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-link">link button</button>
                     <button class="btn btn-link loading">link button</button>
                 </div>
@@ -392,13 +392,13 @@
             </section>
 
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn disabled">default button</button>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-primary" disabled>primary button</button>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-link" disabled>link button</button>
                 </div>
             </div>
@@ -406,12 +406,12 @@
             <header class="text-center"><h5>button sizes</h5></header>
 
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-lg">large button</button>
                     <button class="btn">normal button</button>
                     <button class="btn btn-sm">small button</button>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-block">block button</button>
                 </div>
             </div>
@@ -447,14 +447,14 @@
 
             <header class="text-center"><h5>button groups</h5></header>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="btn-group">
                         <button class="btn">first button</button>
                         <button class="btn">second button</button>
                         <button class="btn">third button</button>
                     </div>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="btn-group btn-group-block">
                         <button class="btn btn-primary">first button</button>
                         <button class="btn btn-primary">second button</button>
@@ -463,14 +463,14 @@
                 </div>
             </div>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="btn-group">
                         <button class="btn btn-sm active">first button</button>
                         <button class="btn btn-sm">second button</button>
                         <button class="btn btn-sm">third button</button>
                     </div>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="btn-group btn-group-block">
                         <button class="btn btn-primary active">first button</button>
                         <button class="btn btn-primary">second button</button>
@@ -500,7 +500,7 @@
                 <p></p>
             </section>
             <div class="columns">
-                <div class="column col-6">
+                <div class="column col-6 col-xs-12">
                     <form action="#forms">
                         <div class="form-group">
                             <label class="form-label" for="input-example-1">Name</label>
@@ -717,7 +717,7 @@
             </section>
 
             <div class="columns">
-                <div class="column col-6">
+                <div class="column col-6 col-xs-12">
                     <form action="#forms">
                         <div class="form-group">
                             <label class="form-label" for="input-example-1">Name</label>
@@ -785,19 +785,19 @@
 
             <header class="text-center"><h5>input groups</h5></header>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="input-group">
                         <span class="input-group-addon">slack.com/</span>
                         <input type="text" class="form-input" placeholder="site name" />
                     </div>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="input-group">
                         <input type="text" class="form-input" placeholder="username" />
                         <span class="input-group-addon">@slack.com</span>
                     </div>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="input-group">
                         <span class="input-group-addon">slack.com/</span>
                         <input type="text" class="form-input" placeholder="site name" />
@@ -806,13 +806,13 @@
                 </div>
             </div>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="input-group">
                         <span class="input-group-addon addon-sm">slack.com/</span>
                         <input type="text" class="form-input input-sm" placeholder="site name" />
                     </div>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="input-group">
                         <input type="text" class="form-input input-lg" placeholder="username" />
                         <span class="input-group-addon addon-lg">@slack.com</span>
@@ -879,7 +879,7 @@
                 <p><strong>Media</strong> include responsive image and video class. </p>
             </section>
             <div class="columns">
-                <div class="column col-6">
+                <div class="column col-6 col-xs-12">
                     <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" />
                 </div>
             </div>
@@ -887,7 +887,7 @@
                 <p>Add the class <code>img-responsive</code> to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
             </section>
             <div class="columns">
-                <div class="column col-6">
+                <div class="column col-6 col-xs-12">
                     <div class="video-responsive">
                         <iframe src="https://www.youtube.com/embed/vBfBa-gCMQk" width="560" height="315" frameborder="0" allowfullscreen></iframe>
                     </div>
@@ -934,7 +934,7 @@
                 </ul>
             </section>
             <section class="notes text-center">
-                <div class="btn-group">
+                <div class="btn-group is-scrollable">
                     <a href="#grid" class="btn btn-primary">flexbox grid</a>
                     <a href="#responsive" class="btn btn-primary">responsive</a>
                     <a href="#empty" class="btn btn-primary">empty states</a>
@@ -1022,10 +1022,10 @@
             </div>
 
             <section class="notes">
-                <p>Add the class <code>col-multiline</code> to have a multiline grid.</p>
+                <p>By default, Spectre grid has multi-line flexbox enabled. You can add the class <code>col-oneline</code> to <code>columns</code> to make all its child columns positioned in the same single row.</p>
             </section>
 
-            <div class="columns col-multiline">
+            <div class="columns col-oneline">
                 <div class="column col-8">
                     <div class="bg-grey">col-8</div>
                 </div>
@@ -1133,7 +1133,7 @@
                 <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p>
             </section>
             <div class="columns">
-                <div class="column col-6">
+                <div class="column col-6 col-xs-12">
                     <section class="empty">
                         <i class="icon icon-markunread"></i>
                         <p class="empty-title">You have no new messages</p>
@@ -1141,7 +1141,7 @@
                         <button class="empty-action btn btn-primary">Send a message</button>
                     </section>
                 </div>
-                <div class="column col-6">
+                <div class="column col-6 col-xs-12">
                     <section class="empty">
                         <i class="icon icon-people"></i>
                         <p class="empty-title">You are not following anyone</p>
@@ -1195,7 +1195,7 @@
                 </ul>
             </section>
             <section class="notes text-center">
-                <div class="btn-group">
+                <div class="btn-group is-scrollable">
                     <a href="#avatars" class="btn btn-primary">avatars</a>
                     <a href="#chips" class="btn btn-primary">chips</a>
                     <a href="#autocomplete" class="btn btn-primary">autocomplete</a>
@@ -1216,7 +1216,7 @@
                 <p><strong>Avatars</strong> are user profile pictures. </p>
             </section>
             <div class="columns">
-                <div class="column col-3">
+                <div class="column col-4 col-xs-12">
                     <figure class="avatar avatar-xl">
                         <img src="demo/img/avatar-1.png" />
                     </figure>
@@ -1233,7 +1233,7 @@
                         <img src="demo/img/avatar-5.png" />
                     </figure>
                 </div>
-                <div class="column col-3">
+                <div class="column col-4 col-xs-12">
                     <figure class="avatar avatar-xl">
                         <img src="demo/img/avatar-1.png" />
                         <img src="demo/img/avatar-2.png" class="avatar-icon" />
@@ -1256,29 +1256,40 @@
                     </figure>
                 </div>
 
-                <div class="column col-3">
+                <div class="column col-4 col-xs-12">
                     <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure>
-                    <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;"></figure>
-                    <figure class="avatar" data-initial="YZ" style="background-color: #7983d2;"></figure>
-                    <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #8a93d7;"></figure>
-                    <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></figure>
+                    <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"></figure>
+                    <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure>
+                    <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure>
+                    <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure>
                 </div>
+            </div>
 
-                <div class="column col-3">
+            <section class="notes">
+                <p>Add the class <code>avatar</code> to &lt;img&gt; element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p>
+                <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code>avatar</code> and avatar size class to &lt;div&gt; element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p>
+            </section>
+
+            <div class="columns">
+                <div class="column">
                     <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
                       <img src="demo/img/avatar-1.png" />
                     </figure>
-                    <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;">
+                    <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;">
                       <img src="demo/img/avatar-2.png" />
                     </figure>
+                    <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;">
+                        <img src="demo/img/avatar-3.png" />
+                    </figure>
+                    <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;">
+                        <img src="demo/img/avatar-4.png" />
+                    </figure>
+                    <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;">
+                        <img src="demo/img/avatar-5.png" />
+                    </figure>
                 </div>
             </div>
 
-            <section class="notes">
-                <p>Add the class <code>avatar</code> to &lt;img&gt; element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p>
-                <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code>avatar</code> and avatar size class to &lt;div&gt; element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p>
-            </section>
-
             <!-- avatars example -->
 <pre class="code lang-html">
 &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
@@ -1306,7 +1317,7 @@
                 <p><strong>Chips</strong> are complex entities in small blocks. </p>
             </section>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="chip-sm">
                         <span class="chip-name">Crime</span>
                         <button class="btn btn-clear"></button>
@@ -1325,7 +1336,7 @@
                         <button class="btn btn-clear"></button>
                     </div>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="chip-sm">
                         <img src="demo/img/avatar-1.png" class="avatar" />
                         <span class="chip-name">Tony Stark</span>
@@ -1376,7 +1387,7 @@
                 <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p>
             </section>
             <div class="columns">
-                <div class="column col-6">
+                <div class="column col-6 col-xs-12">
                     <div class="form-group">
                         <div class="form-autocomplete">
                             <div class="form-autocomplete-input">
@@ -1409,7 +1420,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="form-group">
+                    <div class="form-group col-xs-12">
                         <div class="form-autocomplete">
                             <div class="form-autocomplete-input">
                                 <div class="chip-sm">
@@ -1437,7 +1448,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="column col-6">
+                <div class="column col-6 col-xs-12">
                     <div class="form-group">
                         <div class="form-autocomplete">
                             <div class="form-autocomplete-input">
@@ -1537,16 +1548,16 @@
                 <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p>
             </section>
             <div class="columns text-center">
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">bottom tooltip</button>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button>
                 </div>
             </div>
@@ -1569,22 +1580,22 @@
                 <p><strong>Badges</strong> are often used as unread number indicators.</p>
             </section>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-6">
                     <span class="badge" data-badge="1">
                         Notifications
                     </span>
                 </div>
-                <div class="column">
+                <div class="column col-xs-6">
                     <span class="badge" data-badge="99">
                         Notifications
                     </span>
                 </div>
-                <div class="column">
+                <div class="column col-xs-6">
                     <span class="badge" data-badge="999">
                         Notifications
                     </span>
                 </div>
-                <div class="column">
+                <div class="column col-xs-6">
                     <span class="badge" data-badge="♀">
                         Notifications
                     </span>
@@ -1609,13 +1620,13 @@
                 <p><strong>Toasts</strong> are used to show alert or information to users.</p>
             </section>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="toast">
                         <button class="btn btn-clear float-right"></button>
                         <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="toast toast-primary">
                         <button class="btn btn-clear float-right"></button>
                         <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -1623,13 +1634,13 @@
                 </div>
             </div>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="toast toast-success">
                         <button class="btn btn-clear float-right"></button>
                         <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <div class="toast toast-danger">
                         <button class="btn btn-clear float-right"></button>
                         <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -1663,7 +1674,7 @@
                 <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p>
             </section>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-6">
                     <ul class="menu">
                         <li class="menu-item">
                             <div class="chip">
@@ -1696,7 +1707,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="column">
+                <div class="column col-xs-6">
                     <ul class="menu">
                         <li class="menu-header">
                             <span class="menu-header-text">
@@ -1718,7 +1729,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="column">
+                <div class="column col-xs-6">
                     <ul class="menu">
                         <li class="menu-header">
                             <span class="menu-header-text">
@@ -1785,7 +1796,7 @@
         <section id="navigation" class="container grid-960">
             <header class="text-center"><h4>navigation</h4></header>
             <section class="notes">
-                <p><strong>Navigation</strong> includes several components, including breadcrumbs and tabs.</p>
+                <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs and pagination.</p>
             </section>
             <header id="breadcrumbs" class="text-center"><h5>breadcrumbs</h5></header>
             <div class="columns">
@@ -1836,7 +1847,7 @@
 
             <header id="tabs" class="text-center"><h5>tabs</h5></header>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <ul class="tab">
                         <li class="tab-item active">
                             <a href="#tabs">
@@ -1860,7 +1871,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <ul class="tab tab-block">
                         <li class="tab-item active">
                             <a href="#tabs">
@@ -1915,7 +1926,7 @@
 &lt;<span class="tag">/ul</span>&gt;
 </pre>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <ul class="tab">
                         <li class="tab-item active">
                             <a href="#tabs" class="badge" data-badge="9">
@@ -1939,7 +1950,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <ul class="tab tab-block">
                         <li class="tab-item active">
                             <a href="#tabs" class="badge" data-badge="9">
@@ -1981,7 +1992,7 @@
 
             <header id="pagination" class="text-center"><h5>pagination</h5></header>
             <div class="columns">
-                <div class="column">
+                <div class="column col-xs-12">
                     <ul class="pagination">
                         <li class="page-item">
                             <a href="#pagination">
@@ -2026,7 +2037,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="column">
+                <div class="column col-xs-12">
                     <ul class="pagination">
                         <li class="page-item">
                             <a href="#pagination" class="disabled">
@@ -2255,7 +2266,7 @@
                 <p><strong>Cards</strong> are flexible content containers.</p>
             </section>
             <div class="columns">
-                <div class="column col-4">
+                <div class="column col-4 col-xs-12">
                     <div class="card">
                         <div class="card-image">
                             <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" />
@@ -2272,7 +2283,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="column col-4">
+                <div class="column col-4 col-xs-12">
                     <div class="card">
                         <div class="card-header">
                             <h4 class="card-title">Apple</h4>
@@ -2293,7 +2304,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="column col-4">
+                <div class="column col-4 col-xs-12">
                     <div class="card">
                         <div class="card-header">
                             <h4 class="card-title">Google</h4>
@@ -2359,7 +2370,7 @@
                 </ul>
             </section>
             <section class="notes text-center">
-                <div class="btn-group">
+                <div class="btn-group is-scrollable">
                     <a href="#position" class="btn btn-primary">position</a>
                     <a href="#display" class="btn btn-primary">display</a>
                     <a href="#text" class="btn btn-primary">text</a>
-- 
cgit v1.3.1-26-gb76a