update responsive grid system

4 files changed, 209 insertions, 116 deletions

diff --git a/demo/index.html b/demo/index.html
index cd247b4..ca36a6d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -2,6 +2,9 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="author" content="https://github.com/picturepan2/spectre">
     <title>Spectre, a lightweight and clean CSS framework for faster and extendable development.</title>
     <link rel="stylesheet" href="../dist/spectre.css">
     <link rel="stylesheet" href="font/style.css">
@@ -122,50 +125,68 @@
             </section>
             <div class="columns">
                 <div class="column">
-                    <div class="bg-grey">First column</div>
+                    <div class="bg-grey">1</div>
                 </div>
                 <div class="column">
-                    <div class="bg-grey">Second column</div>
+                    <div class="bg-grey">2</div>
                 </div>
                 <div class="column">
-                    <div class="bg-grey">Third column</div>
+                    <div class="bg-grey">3</div>
                 </div>
                 <div class="column">
-                    <div class="bg-grey">Fourth column</div>
+                    <div class="bg-grey">4</div>
                 </div>
                 <div class="column">
-                    <div class="bg-grey">Fifth column</div>
+                    <div class="bg-grey">5</div>
                 </div>
                 <div class="column">
-                    <div class="bg-grey">Sixth column</div>
+                    <div class="bg-grey">6</div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey">7</div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey">8</div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey">9</div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey">10</div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey">11</div>
+                </div>
+                <div class="column">
+                    <div class="bg-grey">12</div>
                 </div>
             </div>
             <div class="columns">
-                <div class="column col-4">
-                    <div class="bg-grey">First column</div>
+                <div class="column col-8">
+                    <div class="bg-grey">1</div>
                 </div>
-                <div class="column col-4">
-                    <div class="bg-grey">Second column</div>
+                <div class="column col-2">
+                    <div class="bg-grey">2</div>
                 </div>
                 <div class="column">
-                    <div class="bg-grey">Third column</div>
+                    <div class="bg-grey">3</div>
                 </div>
                 <div class="column">
-                    <div class="bg-grey">Fourth column</div>
+                    <div class="bg-grey">4</div>
                 </div>
             </div>
             <div class="columns">
                 <div class="column col-2">
-                    <div class="bg-grey">First column</div>
+                    <div class="bg-grey">1</div>
                 </div>
                 <div class="column col-4">
-                    <div class="bg-grey">Second column</div>
+                    <div class="bg-grey">2</div>
                 </div>
                 <div class="column col-4">
-                    <div class="bg-grey">Third column</div>
+                    <div class="bg-grey">3</div>
                 </div>
                 <div class="column col-2">
-                    <div class="bg-grey">Fourth column</div>
+                    <div class="bg-grey">4</div>
                 </div>
             </div>
         </section>
@@ -224,8 +245,12 @@
                 <div class="column">
                     <button class="btn">default button</button>
                     <button class="btn loading">default button</button>
+                </div>
+                <div class="column">
                     <button class="btn btn-primary">primary button</button>
                     <button class="btn btn-primary loading">primary button</button>
+                </div>
+                <div class="column">
                     <button class="btn btn-link">link button</button>
                     <button class="btn btn-link loading">link button</button>
                 </div>
@@ -238,16 +263,19 @@
             <div class="columns">
                 <div class="column">
                     <button class="btn btn-lg">large button</button>
-                    <button class="btn btn-lg"><span class="icon icon-markunread"></span> large button</button>
-                    <button class="btn btn-primary">normal button</button>
-                    <button class="btn btn-primary"><span class="icon icon-markunread"></span> normal button</button>
+                    <button class="btn">normal button</button>
                     <button class="btn btn-sm">small button</button>
-                    <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
                 </div>
+                <div class="column">
+                    <button class="btn btn-block">block button</button>
+                </div>
+
             </div>
             <div class="columns">
                 <div class="column">
-                    <button class="btn btn-block">block button</button>
+                    <button class="btn btn-primary btn-lg"><span class="icon icon-markunread"></span> large button</button>
+                    <button class="btn btn-primary"><span class="icon icon-markunread"></span> normal button</button>
+                    <button class="btn btn-primary btn-sm"><span class="icon icon-markunread"></span> small button</button>
                 </div>
             </div>
 
@@ -280,7 +308,7 @@
                 <p> </p>
             </section>
             <div class="columns">
-                <div class="column col-5">
+                <div class="column col-6">
                     <form>
                         <div class="form-group">
                             <label class="form-label" for="input-example-1">Name</label>
@@ -329,22 +357,21 @@
                         </div>
                     </form>
                 </div>
-                <div class="column col-1"></div>
                 <div class="column col-6">
                     <form class="form-horizontal">
-                        <div class="form-group columns">
+                        <div class="form-group">
                             <label class="form-label col-3" for="input-example-4">Name</label>
                             <div class="col-9">
                                 <input class="form-input" type="text" id="input-example-4" placeholder="Name" />
                             </div>
                         </div>
-                        <div class="form-group columns">
+                        <div class="form-group">
                             <label class="form-label col-3" for="input-example-5">Email</label>
                             <div class="col-9">
                                 <input class="form-input" type="email" id="input-example-5" placeholder="Email" />
                             </div>
                         </div>
-                        <div class="form-group columns">
+                        <div class="form-group">
                             <div class="col-3"></div>
                             <div class="col-9">
                                 <select class="form-select">
@@ -355,7 +382,7 @@
                                 </select>
                             </div>
                         </div>
-                        <div class="form-group columns">
+                        <div class="form-group">
                             <div class="col-3"></div>
                             <div class="col-9">
                                 <label class="form-switch">
@@ -364,13 +391,13 @@
                                 </label>
                             </div>
                         </div>
-                        <div class="form-group columns">
+                        <div class="form-group">
                             <label class="form-label col-3" for="input-example-6">Message</label>
                             <div class="col-9">
                                 <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
                             </div>
                         </div>
-                        <div class="form-group columns">
+                        <div class="form-group">
                             <label class="form-label col-3">Gender</label>
                             <div class="col-9">
                                 <label class="form-radio">
@@ -381,7 +408,7 @@
                                 </label>
                             </div>
                         </div>
-                        <div class="form-group columns">
+                        <div class="form-group">
                             <div class="col-3"></div>
                             <div class="col-9">
                                 <label class="form-checkbox">
@@ -390,7 +417,7 @@
                                 </label>
                             </div>
                         </div>
-                        <div class="form-group columns">
+                        <div class="form-group">
                             <div class="col-3"></div>
                             <div class="col-9">
                                 <button class="btn btn-primary">Submit</button>
@@ -423,10 +450,10 @@
             <header class="text-center"><h4>media</h4></header>
             <div class="columns">
                 <div class="column col-6">
-                    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded hide-sm" />
+                    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" />
                 </div>
                 <div class="column col-6">
-                    <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-lg" />
+                    <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-sm" />
                 </div>
             </div>
         </section>
@@ -507,11 +534,6 @@
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip">
-                        <img src="img/avatar-3.png" class="avatar avatar-xs" />
-                        <span class="chip-name">Yan Zhu</span>
-                        <button class="btn btn-clear"></button>
-                    </div>
-                    <div class="chip">
                         <img src="img/avatar-4.png" class="avatar avatar-xs" />
                         <span class="chip-name">Yan Zhu</span>
                         <button class="btn btn-clear"></button>
diff --git a/dist/spectre.css b/dist/spectre.css
index 622e322..eae9afa 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -572,6 +572,7 @@ ol ol {
   }
 }
 .columns {
+  display: block;
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -582,30 +583,30 @@ ol ol {
           flex: 1;
   padding: 1rem;
 }
-@media screen and (min-width: 769px) {
+.column.col-12,
+.column.col-11,
+.column.col-10,
+.column.col-9,
+.column.col-8,
+.column.col-7,
+.column.col-6,
+.column.col-5,
+.column.col-4,
+.column.col-3,
+.column.col-2,
+.column.col-1 {
+  -webkit-box-flex: 0;
+  -webkit-flex: none;
+      -ms-flex: none;
+          flex: none;
+}
+@media screen and (min-width: 841px) {
   .columns {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
-  .column.col-12,
-  .column.col-11,
-  .column.col-10,
-  .column.col-9,
-  .column.col-8,
-  .column.col-7,
-  .column.col-6,
-  .column.col-5,
-  .column.col-4,
-  .column.col-3,
-  .column.col-2,
-  .column.col-1 {
-    -webkit-box-flex: 0;
-    -webkit-flex: none;
-        -ms-flex: none;
-            flex: none;
-  }
   .col-12 {
     width: 100%;
   }
@@ -643,6 +644,33 @@ ol ol {
     width: 8.33333333%;
   }
 }
+@media screen and (min-width: 481px) and (max-width: 840px) {
+  .columns {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+  }
+  .col-12 {
+    width: 100%;
+  }
+  .col-11,
+  .col-10,
+  .col-9,
+  .col-8,
+  .col-7,
+  .col-6,
+  .col-5,
+  .col-4,
+  .col-3,
+  .col-2,
+  .col-1 {
+    width: 50%;
+  }
+}
 @media screen and (max-width: 480px) {
   .hide-xs {
     display: none !important;
@@ -873,29 +901,39 @@ ol ol {
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
-.form-horizontal {
-  padding: 1rem;
-}
-.form-horizontal .col-12,
-.form-horizontal .col-11,
-.form-horizontal .col-10,
-.form-horizontal .col-9,
-.form-horizontal .col-8,
-.form-horizontal .col-7,
-.form-horizontal .col-6,
-.form-horizontal .col-5,
-.form-horizontal .col-4,
-.form-horizontal .col-3,
-.form-horizontal .col-2,
-.form-horizontal .col-1 {
-  float: left;
-}
-.form-horizontal .form-label {
-  padding: .8rem .4rem;
+@media screen and (min-width: 841px) {
+  .form-horizontal {
+    padding: 1rem;
+  }
+  .form-horizontal .form-group {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .form-horizontal .form-label {
+    padding: .8rem .4rem;
+  }
+  .form-horizontal .form-checkbox,
+  .form-horizontal .form-radio {
+    margin: .5rem 0;
+  }
 }
-.form-horizontal .form-checkbox,
-.form-horizontal .form-radio {
-  margin: .5rem 0;
+@media screen and (max-width: 840px) {
+  .form-horizontal .col-12,
+  .form-horizontal .col-11,
+  .form-horizontal .col-10,
+  .form-horizontal .col-9,
+  .form-horizontal .col-8,
+  .form-horizontal .col-7,
+  .form-horizontal .col-6,
+  .form-horizontal .col-5,
+  .form-horizontal .col-4,
+  .form-horizontal .col-3,
+  .form-horizontal .col-2,
+  .form-horizontal .col-1 {
+    width: 100%;
+  }
 }
 .form-input {
   position: relative;
diff --git a/src/forms.less b/src/forms.less
index 996056c..fd85f2c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,29 +2,39 @@
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
-.form-horizontal {
-  padding: 1rem;
 
-  .col-12,
-  .col-11,
-  .col-10,
-  .col-9,
-  .col-8,
-  .col-7,
-  .col-6,
-  .col-5,
-  .col-4,
-  .col-3,
-  .col-2,
-  .col-1 {
-    float: left;
-  }
-  .form-label {
-    padding: .8rem .4rem;
+@media screen and (min-width: 841px) {
+  .form-horizontal {
+    padding: 1rem;
+
+    .form-group {
+      display: flex;
+    }
+    .form-label {
+      padding: .8rem .4rem;
+    }
+    .form-checkbox,
+    .form-radio {
+      margin: .5rem 0;
+    }
   }
-  .form-checkbox,
-  .form-radio {
-    margin: .5rem 0;
+}
+@media screen and (max-width: 840px) {
+  .form-horizontal {
+    .col-12,
+    .col-11,
+    .col-10,
+    .col-9,
+    .col-8,
+    .col-7,
+    .col-6,
+    .col-5,
+    .col-4,
+    .col-3,
+    .col-2,
+    .col-1 {
+      width: 100%;
+    }
   }
 }
 // Form element: Input boxes
diff --git a/src/layout.less b/src/layout.less
index ccdd609..9c6a4e5 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -22,7 +22,9 @@
   }
 }
 
+// Responsive grid system
 .columns {
+  display: block;
   margin-left: -1rem;
   margin-right: -1rem;
   &:extend(.clearfix all);
@@ -30,27 +32,26 @@
 .column {
   flex: 1;
   padding: 1rem;
+
+  &.col-12,
+  &.col-11,
+  &.col-10,
+  &.col-9,
+  &.col-8,
+  &.col-7,
+  &.col-6,
+  &.col-5,
+  &.col-4,
+  &.col-3,
+  &.col-2,
+  &.col-1 {
+    flex: none;
+  }
 }
-@media screen and (min-width: 769px) {
+@media screen and (min-width: 841px) {
   .columns {
     display: flex;
   }
-  .column {
-    &.col-12,
-    &.col-11,
-    &.col-10,
-    &.col-9,
-    &.col-8,
-    &.col-7,
-    &.col-6,
-    &.col-5,
-    &.col-4,
-    &.col-3,
-    &.col-2,
-    &.col-1 {
-      flex: none;
-    }
-  }
   .col-12 {
     width: 100%;
   }
@@ -88,6 +89,28 @@
     width: 8.33333333%;
   }
 }
+@media screen and (min-width: 481px) and (max-width: 840px) {
+  .columns {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .col-12 {
+    width: 100%;
+  }
+  .col-11,
+  .col-10,
+  .col-9,
+  .col-8,
+  .col-7,
+  .col-6,
+  .col-5,
+  .col-4,
+  .col-3,
+  .col-2,
+  .col-1 {
+    width: 50%;
+  }
+}
 
 // Responsive breakpoint system
 @media screen and (max-width: 480px) {