add device grids and border utils

dist/chota.css

@@ -168,10 +168,10 @@ iframe {
     margin-right: calc(var(--grid-gutter) / -2);
 }
 .row.reverse {
-  -webkit-box-orient: horizontal;
+    -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
+    -webkit-box-direction: reverse;
-      -ms-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
-          flex-direction: row-reverse;
+            flex-direction: row-reverse;
 }
 .col {
     -webkit-box-flex: 1;
@@ -255,13 +255,13 @@ iframe {
             flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
     max-width: calc((100% / (12/12)) - var(--grid-gutter));
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 599px) {
     .container {
         width: 100%;
     }
 
     .col,
-    [class*=" col-"],
+    [class*="col-"],
     [class^='col-'] {
         -webkit-box-flex: 0;
             -ms-flex: 0 1 100%;
@@ -269,6 +269,176 @@ iframe {
         max-width: 100%;
     }
 }
+@media screen and (min-width: 900px) {
+    .col-1-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
+        max-width: calc((100% / (12/1)) - var(--grid-gutter));
+    }
+
+    .col-2-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
+        max-width: calc((100% / (12/2)) - var(--grid-gutter));
+    }
+
+    .col-3-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
+        max-width: calc((100% / (12/3)) - var(--grid-gutter));
+    }
+
+    .col-4-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
+        max-width: calc((100% / (12/4)) - var(--grid-gutter));
+    }
+
+    .col-5-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
+        max-width: calc((100% / (12/5)) - var(--grid-gutter));
+    }
+
+    .col-6-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
+        max-width: calc((100% / (12/6)) - var(--grid-gutter));
+    }
+
+    .col-7-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
+        max-width: calc((100% / (12/7)) - var(--grid-gutter));
+    }
+
+    .col-8-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
+        max-width: calc((100% / (12/8)) - var(--grid-gutter));
+    }
+
+    .col-9-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
+        max-width: calc((100% / (12/9)) - var(--grid-gutter));
+    }
+
+    .col-10-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
+        max-width: calc((100% / (12/10)) - var(--grid-gutter));
+    }
+
+    .col-11-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
+        max-width: calc((100% / (12/11)) - var(--grid-gutter));
+    }
+
+    .col-12-md {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
+        max-width: calc((100% / (12/12)) - var(--grid-gutter));
+    }
+}
+@media screen and (min-width: 1200px) {
+    .col-1-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
+        max-width: calc((100% / (12/1)) - var(--grid-gutter));
+    }
+
+    .col-2-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
+        max-width: calc((100% / (12/2)) - var(--grid-gutter));
+    }
+
+    .col-3-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
+        max-width: calc((100% / (12/3)) - var(--grid-gutter));
+    }
+
+    .col-4-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
+        max-width: calc((100% / (12/4)) - var(--grid-gutter));
+    }
+
+    .col-5-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
+        max-width: calc((100% / (12/5)) - var(--grid-gutter));
+    }
+
+    .col-6-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
+        max-width: calc((100% / (12/6)) - var(--grid-gutter));
+    }
+
+    .col-7-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
+        max-width: calc((100% / (12/7)) - var(--grid-gutter));
+    }
+
+    .col-8-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
+        max-width: calc((100% / (12/8)) - var(--grid-gutter));
+    }
+
+    .col-9-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
+        max-width: calc((100% / (12/9)) - var(--grid-gutter));
+    }
+
+    .col-10-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
+        max-width: calc((100% / (12/10)) - var(--grid-gutter));
+    }
+
+    .col-11-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
+        max-width: calc((100% / (12/11)) - var(--grid-gutter));
+    }
+
+    .col-12-lg {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
+                flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
+        max-width: calc((100% / (12/12)) - var(--grid-gutter));
+    }
+}
 fieldset {
   padding: 0.5rem 2rem;
 }
@@ -608,26 +778,39 @@ button:disabled:hover {
 /* Colors */
 .bg-primary {
     background-color: var(--color-primary);
-    color: #fff;
 }
 .bg-light {
     background-color: var(--color-lightGrey);
 }
 .bg-dark {
     background-color: var(--color-darkGrey);
-    color: #fff;
 }
 .bg-grey {
     background-color: var(--color-grey);
-    color: #fff;
 }
 .bg-error {
     background-color: var(--color-error);
-    color: #fff;
 }
 .bg-success {
     background-color: var(--color-success);
-    color: #fff;
+}
+.bd-primary {
+    border: 1px solid var(--color-primary);
+}
+.bd-light {
+    border: 1px solid var(--color-lightGrey);
+}
+.bd-dark {
+    border: 1px solid var(--color-darkGrey);
+}
+.bd-grey {
+    border: 1px solid var(--color-grey);
+}
+.bd-error {
+    border: 1px solid var(--color-error);
+}
+.bd-success {
+    border: 1px solid var(--color-success);
 }
 .text-primary {
     color: var(--color-primary);
@@ -647,6 +830,9 @@ button:disabled:hover {
 .text-success {
     color: var(--color-success);
 }
+.text-white {
+    color: #fff;
+}
 /* Position & alignment */
 .pull-right {
     float: right;
@@ -746,13 +932,18 @@ button:disabled:hover {
 .is-hidden {
     display: none !important;
 }
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 599px) {
-    .hide-phone {
+    .hide-sm {
         display: none !important;
     }
 }
-@media screen and (max-width: 768px) {
+@media screen and (min-width: 600px) and (max-width: 1199px) {
-    .hide-tablet {
+    .hide-md {
+        display: none !important;
+    }
+}
+@media screen and (min-width: 1200px) {
+    .hide-lg {
         display: none !important;
     }
 }

docs/_includes/grid.html

@@ -1,6 +1,7 @@
 <section id="grid">
   <h4>Grid</h4>
-  <p>The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the <code>--grid-maxWidth</code> in the <code>:root</code>.</p>
+  <p>The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max
+    width can be controlled by changing the <code>--grid-maxWidth</code> in the <code>:root</code>.</p>
   <p>Much like other frameworks, wrap your content in a <code>.container</code> to center it on the page.</p>
   <br>
   <h5>Flexible grid</h5>
@@ -9,7 +10,8 @@
     <li>Add a <code>.row</code> container</li>
     <li>Add as many <code>.col</code> elements as you want</li>
   </ul>
-  <p>Each column will have an <strong>equal width</strong>, in a row. There is no restriction on number of columns, but it is recommended <strong>not</strong> to add more than 12 columns in a row.</p>
+  <p>Each column will have an <strong>equal width</strong>, in a row. There is no restriction on number of columns, but
+    it is recommended <strong>not</strong> to add more than 12 columns in a row.</p>
   <div class="row">
     <div class="col">
       <div class="card is-center">.col</div>
@@ -26,7 +28,7 @@
       <div class="card is-center">.col</div>
     </div>
   </div>
-  {% highlight html %}
+{% highlight html %}
 <div class="row">
   <div class="col"> .col </div>
 </div>
@@ -35,7 +37,7 @@
   <div class="col"> .col </div>
   <div class="col"> .col </div>
 </div>
-  {% endhighlight %}
+{% endhighlight %}
   <hr>
   <h5>Sized</h5>
   <p>You can also specify the size of the columns</p>
@@ -43,7 +45,8 @@
     <li>Add a <code>.row</code> container</li>
     <li>Add a <code>.col-n</code> child where <strong>n</strong> can be from 1 to 12</li>
   </ul>
-  <p>Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use <code>.col-4</code>.</p>
+  <p>Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use
+    <code>.col-4</code>.</p>
   <div class="row">
     <div class="col-1">
       <div class="card is-center">.col-1</div>
@@ -110,11 +113,67 @@
 <div class="row">
   <div class="col-12"> .col-12 </div>
 </div>
+{% endhighlight %}
+<hr>
+<h5><span class="tag is-small">New</span> Responsive grids:</h5>
+<p>We now have responsive grids that work based on device width.</p>
+<ul>
+  <li>All columns are 100% for device width &lt; 600px</li>
+  <li><code>.col</code> and <code>.col-N</code> for all device sizes &gt;= 600px</li>
+  <li><code>.col-N-md</code> for &gt;= 900px sizes</li>
+  <li><code>.col-N-lg</code> for &gt;= 1200px sizes</li>
+</ul>
+<div class="row">
+  <div class="col-12 col-6-md col-4-lg">
+    <div class="card is-center">.col-12.col-6-md.col-4-lg</div>
+  </div>
+  <div class="col-6 col-3-md col-4-lg">
+    <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
+  </div>
+  <div class="col-6 col-3-md col-4-lg">
+    <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
+  </div>
+</div>
+<div class="row">
+  <div class="col col-6-lg">
+    <div class="card is-center">.col.col-6-lg</div>
+  </div>
+  <div class="col col-3-lg">
+    <div class="card is-center">.col.col-3-lg</div>
+  </div>
+  <div class="col col-3-lg">
+    <div class="card is-center">.col.col-3-lg</div>
+  </div>
+</div>
+{% highlight html %}
+<div class="row">
+<div class="col-12 col-6-md col-4-lg">
+  <div class="card is-center">.col-12.col-6-md.col-4-lg</div>
+</div>
+<div class="col-6 col-3-md col-4-lg">
+  <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
+</div>
+<div class="col-6 col-3-md col-4-lg">
+  <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
+</div>
+</div>
+<div class="row">
+<div class="col col-6-lg">
+  <div class="card is-center">.col.col-6-lg</div>
+</div>
+<div class="col col-3-lg">
+  <div class="card is-center">.col.col-3-lg</div>
+</div>
+<div class="col col-3-lg">
+  <div class="card is-center">.col.col-3-lg</div>
+</div>
+</div>
 {% endhighlight %}
   <hr>
   <h5>Mix-n-Match</h5>
   <p>You can use a combination of <strong>flexible</strong> and <strong>sized</strong> columns.</p>
-  <p>When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.</p>
+  <p>When using a combination, the sized width column takes the size specified and the remaining is filled in by the
+    flexible column.</p>
   <div class="row">
     <div class="col-2">
       <div class="card is-center">.col-2</div>
@@ -138,11 +197,19 @@
     </div>
   </div>
   <div class="row">
-    <div class="col"><div class="card is-center">auto</div></div>
+    <div class="col">
-    <div class="col"><div class="card is-center">auto</div></div>
+      <div class="card is-center">auto</div>
+    </div>
+    <div class="col">
+      <div class="card is-center">auto</div>
+    </div>
     <div class="is-full-width"></div>
-    <div class="col"><div class="card is-center">auto</div></div>
+    <div class="col">
-    <div class="col"><div class="card is-center">auto</div></div>
+      <div class="card is-center">auto</div>
+    </div>
+    <div class="col">
+      <div class="card is-center">auto</div>
+    </div>
   </div>
 {% highlight html %}
 <div class="row">
@@ -163,23 +230,24 @@
   <div class="col"> auto </div>
 </div>
 {% endhighlight %}
-<p><strong>Pro tip:</strong> Create equal-width columns that span multiple rows by inserting a <code>.is-full-width</code> where you want the columns to break to a new line. Here <code>.is-full-width</code> is one of the <a href="#utilities">utility</a> class.</p>
+  <p><strong>Pro tip:</strong> Create equal-width columns that span multiple rows by inserting a
+    <code>.is-full-width</code> where you want the columns to break to a new line. Here <code>.is-full-width</code> is
+    one of the <a href="#utilities">utility</a> class.</p>
 
-
+  <hr>
-<hr>
+  <h5>Reverse Direction</h5>
-<h5>Reverse Direction</h5>
+  <p>Add <code>.reverse</code> to the <code>.row</code> to reverse the column direction. </p>
-<p>Add <code>.reverse</code> to the <code>.row</code> to reverse the column direction. </p>
+  <div class="row reverse">
-<div class="row reverse">
+    <div class="col-6">
-  <div class="col-6">
+      <div class="card is-center">.col-6</div>
-    <div class="card is-center">.col-6</div>
+    </div>
+    <div class="col-3">
+      <div class="card is-center">.col-3</div>
+    </div>
+    <div class="col-3">
+      <div class="card is-center">.col-3</div>
+    </div>
   </div>
-  <div class="col-3">
-    <div class="card is-center">.col-3</div>
-  </div>
-  <div class="col-3">
-    <div class="card is-center">.col-3</div>
-  </div>
-</div>
 {% highlight html %}
 <div class="row reverse">
   <div class="col-6">
@@ -193,5 +261,4 @@
   </div>
 </div>
 {% endhighlight %}
-
+</section>
-</section>

docs/_includes/utilities.html

@@ -4,6 +4,7 @@
   <ul>
     <li><code>text-primary</code> - <span class="text-primary">Primary text</span></li>
     <li><code>text-light</code> - <span class="text-light">Light text</span></li>
+    <li><code>text-white</code> - <span class="bg-primary text-white">White text</span></li>
     <li><code>text-dark</code> - <span class="text-dark">Dark text</span></li>
     <li><code>text-grey</code> - <span class="text-grey">Grey text</span></li>
     <li><code>text-error</code> - <span class="text-error">Error text</span></li>
@@ -14,6 +15,12 @@
     <li><code>bg-grey</code> - <span class="bg-grey">Grey background</span></li>
     <li><code>bg-error</code> - <span class="bg-error">Error background</span></li>
     <li><code>bg-success</code> - <span class="bg-success">Success background</span></li>
+    <li><code>bd-primary</code> - <span class="bd-primary">primary border</span></li>
+    <li><code>bd-light</code> - <span class="bd-light">Light border</span></li>
+    <li><code>bd-dark</code> - <span class="bd-dark">Dark border</span></li>
+    <li><code>bd-grey</code> - <span class="bd-grey">Grey border</span></li>
+    <li><code>bd-error</code> - <span class="bd-error">Error border</span></li>
+    <li><code>bd-success</code> - <span class="bd-success">Success border</span></li>
     <li><code>pull-right</code> - floats an element to the right</li>
     <li><code>pull-left</code> - floats an element to the left</li>
     <li><code>is-text-center</code> - center aligns text</li>
@@ -34,7 +41,8 @@
     <li><code>is-marginless</code> - removes any margin</li>
     <li><code>clearfix</code> - clears the floats</li>
     <li><code>is-hidden</code> - hides the element completely</li>
-    <li><code>hide-phone</code> - hides the element for screens &lt;480px</li>
+    <li><code>hide-sm</code> - hides the element for screens &lt;600px</li>
-    <li><code>hide-tablet</code> - hides the element for screens &lt;768px</li>
+    <li><code>hide-md</code> - hides the element for screens &gt;=600px and &lt;=1200px</li>
+    <li><code>hide-lg</code> - hides the element for screens &gt;=1200px</li>
   </ul>
 </section>

package.json

@@ -4,7 +4,8 @@
   "description": "A really small CSS framework",
   "main": "dist/chota.min.css",
   "scripts": {
-    "start": "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
+    "start": "run-p browser-sync watch",
+    "browser-sync": "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
     "build": "rimraf dist/* && yarn postcss &&  cross-env NODE_ENV=production yarn postcss --ext .min.css && gzip -c dist/chota.min.css  | wc -c",
     "postcss": "postcss ./src/chota.css -d dist/",
     "watch": "cross-env NODE_ENV=development yarn postcss -w",
@@ -26,10 +27,11 @@
     "url": "https://github.com/jenil/chota/issues"
   },
   "devDependencies": {
-    "autoprefixer": "^9.4.2",
+    "autoprefixer": "^9.5.0",
     "browser-sync": "^2.26.3",
     "cross-env": "^5.2.0",
     "cssnano": "^4.1.7",
+    "npm-run-all": "^4.1.5",
     "postcss-cli": "^6.0.1",
     "postcss-csso": "^3.0.0",
     "postcss-import": "^12.0.1",

src/_grid.css

@@ -14,7 +14,7 @@
 }
 
 .row.reverse {
-  flex-direction: row-reverse;
+    flex-direction: row-reverse;
 }
 
 .col {
@@ -87,15 +87,139 @@
     max-width: calc((100% / (12/12)) - var(--grid-gutter));
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 599px) {
     .container {
         width: 100%;
     }
 
     .col,
-    [class*=" col-"],
+    [class*="col-"],
     [class^='col-'] {
         flex: 0 1 100%;
         max-width: 100%;
     }
 }
+
+@media screen and (min-width: 900px) {
+    .col-1-md {
+        flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
+        max-width: calc((100% / (12/1)) - var(--grid-gutter));
+    }
+
+    .col-2-md {
+        flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
+        max-width: calc((100% / (12/2)) - var(--grid-gutter));
+    }
+
+    .col-3-md {
+        flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
+        max-width: calc((100% / (12/3)) - var(--grid-gutter));
+    }
+
+    .col-4-md {
+        flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
+        max-width: calc((100% / (12/4)) - var(--grid-gutter));
+    }
+
+    .col-5-md {
+        flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
+        max-width: calc((100% / (12/5)) - var(--grid-gutter));
+    }
+
+    .col-6-md {
+        flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
+        max-width: calc((100% / (12/6)) - var(--grid-gutter));
+    }
+
+    .col-7-md {
+        flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
+        max-width: calc((100% / (12/7)) - var(--grid-gutter));
+    }
+
+    .col-8-md {
+        flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
+        max-width: calc((100% / (12/8)) - var(--grid-gutter));
+    }
+
+    .col-9-md {
+        flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
+        max-width: calc((100% / (12/9)) - var(--grid-gutter));
+    }
+
+    .col-10-md {
+        flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
+        max-width: calc((100% / (12/10)) - var(--grid-gutter));
+    }
+
+    .col-11-md {
+        flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
+        max-width: calc((100% / (12/11)) - var(--grid-gutter));
+    }
+
+    .col-12-md {
+        flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
+        max-width: calc((100% / (12/12)) - var(--grid-gutter));
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .col-1-lg {
+        flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
+        max-width: calc((100% / (12/1)) - var(--grid-gutter));
+    }
+
+    .col-2-lg {
+        flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
+        max-width: calc((100% / (12/2)) - var(--grid-gutter));
+    }
+
+    .col-3-lg {
+        flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
+        max-width: calc((100% / (12/3)) - var(--grid-gutter));
+    }
+
+    .col-4-lg {
+        flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
+        max-width: calc((100% / (12/4)) - var(--grid-gutter));
+    }
+
+    .col-5-lg {
+        flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
+        max-width: calc((100% / (12/5)) - var(--grid-gutter));
+    }
+
+    .col-6-lg {
+        flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
+        max-width: calc((100% / (12/6)) - var(--grid-gutter));
+    }
+
+    .col-7-lg {
+        flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
+        max-width: calc((100% / (12/7)) - var(--grid-gutter));
+    }
+
+    .col-8-lg {
+        flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
+        max-width: calc((100% / (12/8)) - var(--grid-gutter));
+    }
+
+    .col-9-lg {
+        flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
+        max-width: calc((100% / (12/9)) - var(--grid-gutter));
+    }
+
+    .col-10-lg {
+        flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
+        max-width: calc((100% / (12/10)) - var(--grid-gutter));
+    }
+
+    .col-11-lg {
+        flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
+        max-width: calc((100% / (12/11)) - var(--grid-gutter));
+    }
+
+    .col-12-lg {
+        flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
+        max-width: calc((100% / (12/12)) - var(--grid-gutter));
+    }
+}

src/_util.css

@@ -1,7 +1,6 @@
 /* Colors */
 .bg-primary {
     background-color: var(--color-primary);
-    color: #fff;
 }
 
 .bg-light {
@@ -10,22 +9,42 @@
 
 .bg-dark {
     background-color: var(--color-darkGrey);
-    color: #fff;
 }
 
 .bg-grey {
     background-color: var(--color-grey);
-    color: #fff;
 }
 
 .bg-error {
     background-color: var(--color-error);
-    color: #fff;
 }
 
 .bg-success {
     background-color: var(--color-success);
-    color: #fff;
+}
+
+.bd-primary {
+    border: 1px solid var(--color-primary);
+}
+
+.bd-light {
+    border: 1px solid var(--color-lightGrey);
+}
+
+.bd-dark {
+    border: 1px solid var(--color-darkGrey);
+}
+
+.bd-grey {
+    border: 1px solid var(--color-grey);
+}
+
+.bd-error {
+    border: 1px solid var(--color-error);
+}
+
+.bd-success {
+    border: 1px solid var(--color-success);
 }
 
 .text-primary {
@@ -52,6 +71,10 @@
     color: var(--color-success);
 }
 
+.text-white {
+    color: #fff;
+}
+
 /* Position & alignment */
 .pull-right {
     float: right;
@@ -145,14 +168,20 @@
     display: none !important;
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 599px) {
-    .hide-phone {
+    .hide-sm {
         display: none !important;
     }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (min-width: 600px) and (max-width: 1199px) {
-    .hide-tablet {
+    .hide-md {
         display: none !important;
     }
 }
+
+@media screen and (min-width: 1200px) {
+    .hide-lg {
+        display: none !important;
+    }
+}

test/components.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Components</title>
-  <link rel="stylesheet" href="../dist/chota.min.css">
+  <link rel="stylesheet" href="../dist/chota.css">
   <style>
     .nav {
       border: 1px solid red;
@@ -67,7 +67,8 @@
       <nav class="nav">
         <div class="nav-left">
           <a class="brand" href="#">
-            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=""> Brand</a>
+            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
+            Brand</a>
         </div>
         <div class="nav-right">
           <div class="tabs">
@@ -120,7 +121,8 @@
             <header>
               <h4>Card title</h4>
             </header>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore
               magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
             <footer class="is-right">
               <a href="#!" class="button primary">Submit</a>
@@ -130,10 +132,13 @@
         </div>
         <div class="col-6">
           <div class="card">
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore
               magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
-            <p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis,
+            <p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas,
-              debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</p>
+              nobis,
+              debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti
+              enim!</p>
           </div>
         </div>
       </div>
@@ -316,6 +321,40 @@
           <div class="card is-center">.col-12</div>
         </div>
       </div>
+      <h4>Responsive grids:</h4>
+      <div class="row">
+        <div class="col-12 col-6-md col-4-lg">
+          <div class="card is-center">.col-12.col-6-md.col-4-lg</div>
+        </div>
+        <div class="col-6 col-3-md col-4-lg">
+          <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
+        </div>
+        <div class="col-6 col-3-md col-4-lg">
+          <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col col-6-lg">
+          <div class="card is-center">.col.col-6-lg</div>
+        </div>
+        <div class="col col-3-lg">
+          <div class="card is-center">.col.col-3-lg</div>
+        </div>
+        <div class="col col-3-lg">
+          <div class="card is-center">.col.col-3-lg</div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col hide-sm">
+          <div class="card is-center">.hide-sm</div>
+        </div>
+        <div class="col hide-md">
+          <div class="card is-center">.hide-md</div>
+        </div>
+        <div class="col hide-lg">
+          <div class="card is-center">.hide-lg</div>
+        </div>
+      </div>
     </section>
     <section>
       <h1>Helpers</h1>
@@ -350,13 +389,13 @@
     </section>
     <section>
       <h1>Icons</h1>
-      <button type="button" class="button primary icon">New file 
+      <button type="button" class="button primary icon">New file
         <img src="https://icongr.am/feather/file.svg?size=16&color=ffffff" alt="icon">
       </button>
       <button type="button" class="button icon">New file
         <img src="https://icongr.am/feather/file.svg?size=12" alt="icon">
       </button>
-      <button type="button" class="button dark icon">New file 
+      <button type="button" class="button dark icon">New file
         <img src="https://icongr.am/feather/file.svg?size=32&color=ffffff" alt="icon">
       </button>
       <button class="button icon-only">