Add docs on utility classes

stevenle · Oct 21, 2015 · 9f85680 · 9f85680
1 parent bd83a40
commit 9f85680
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 5 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -8,6 +8,7 @@ sudo: false
 cache:
   directories:
   - $HOME/.cache/pip
+  - $HOME/virtualenv
 env:
   global:
   - secure: "o0VA1qXI9ZWPwSRnMODjVPiVWtKF+4ZdimgFfYybbi7gIW0h5xboO/mBEnRLuUfCg3I2lx3SNpt7rxG/GDrwXtLEW1SPXJs4kRxfgWZZiwmWjBgF1PHjED2mw5uqbV9e/6b9OGzJ0uYzWH41Zjzcnv3BpZ/oWsCNTHub+SV9ycmg2ZgLEJNQKImGiKFRwLPnQQWeLcJChX2XdGH0oE+sXk0FtmSNzmoWBEpn8dG2UXSRcka4FvISsWU434hAUJsjzQCSVKey6ZlEvVNNIs77/i7Ba7LtvbObeJLrtp0ytSEO6rriFWN8K12DIdQxilPVrN+Lwx6+oSK1mqZFWjbtAiiMX137i2A934HqJH/L+2NrPKIWzyS4+ZHObwvaJHSahl4Z1htDWbmSRO4xwdIdo3/S8L9OpqB6wyJNZIVvF5tUqBtwNJ8fqYKG6ekzYh+GpAyfZ/oKIrZEAeMH2bHSGz8QF6JKLhoKbMQnpSPV32INl8kA67tY8Uf9UfrLQ0bn7cB2WHYFf+plCGZwaZUy8yWN+LY8AL3sG2hb2D597vCve252HYZazsunQTR3CMO4fWoZvS24XaGg73Av/WdHQicQnSGneVyhjsbmJpG97SN18fRptyyxy+e0Wl+AopQ9HEXSLHAzgAr+/wqsESWfl6aLBFO+wANgiqSvPp6NKeo="

diff --git a/dist/css/base.min.css b/dist/css/base.min.css
diff --git a/src/sass/_breakpoint.scss b/src/sass/_breakpoint.scss
@@ -27,17 +27,20 @@ $breakpoint-map: (
   extra-large: $breakpoint-extra-large,
 );
 
+$main-breakpoints: (small, medium, large);
+$all-breakpoints: (extra-small, small, medium, large, extra-large);
+
 @mixin breakpoint($width) {
   @media (min-width: $width) {
     @content;
   }
 }
 
-@mixin breakpoint-rule($selector) {
+@mixin breakpoint-rule($selector, $breakpoints: $main-breakpoints) {
   #{$selector} {
     @content;
   }
-  @each $size in extra-small, small, medium, large, extra-large {
+  @each $size in $breakpoints {
     #{$selector}-at-#{$size} {
       $width: map-get($breakpoint-map, $size);
       @include breakpoint($width) {

diff --git a/src/sass/_grid.scss b/src/sass/_grid.scss
@@ -71,7 +71,7 @@
 @for $i from 1 through 4 {
   $selector: ".grid-#{$i}";
   $width: 100% / $i;
-  @include breakpoint-rule($selector) {
+  @include breakpoint-rule($selector, $breakpoints: $all-breakpoints) {
     > * {
       width: $width;
     }
@@ -95,7 +95,7 @@ $grid-sizes: (
 @for $i from 12 through 1 {
   $selector: nth($grid-sizes, $i);
   $width: $i / 12 * 100%;
-  @include breakpoint-rule($selector) {
+  @include breakpoint-rule($selector, $breakpoints: $all-breakpoints) {
     width: $width;
   }
 }
diff --git a/views/home.html b/views/home.html
@@ -23,6 +23,7 @@ <h2>A modern framework for a modern web.</h2>
     <a class="smoothscroll" href="#overview">Overview</a>
     <a class="smoothscroll" href="#grid">Grid</a>
     <a class="smoothscroll" href="#breakpoints">Breakpoints</a>
+    <a class="smoothscroll" href="#utility">Utility</a>
   </div>
 </section>
 
@@ -31,6 +32,7 @@ <h2>A modern framework for a modern web.</h2>
     <a class="smoothscroll" href="#overview">Overview</a>
     <a class="smoothscroll" href="#grid">Grid</a>
     <a class="smoothscroll" href="#breakpoints">Breakpoints</a>
+    <a class="smoothscroll" href="#utility">Utility</a>
   </div>
 </section>
 
@@ -297,6 +299,52 @@ <h4>Output</h4>
   </div>
 </section>
 
+<section id="utility">
+  <div class="content pad-vert-medium border-bottom">
+    <h2>Utility classes</h2>
+    <p>
+      Base contains a bunch of utility classes to help style elements without
+      having to write arbitrary CSS rules. For example, hide elements by adding
+      <code>class="hide"</code>. Utility classes contain responsive variants as
+      well, so you can hide an element only on small screens by using
+      <code>class="hide show-at-medium"</code>.
+    </p>
+
+    {% set util_classes = [
+      {'class': 'hide', 'css_equiv': 'display: none'},
+      {'class': 'show', 'css_equiv': 'display: block'},
+      {'class': 'display-block', 'css_equiv': 'display: block'},
+      {'class': 'display-inline', 'css_equiv': 'display: inline'},
+      {'class': 'display-inline-block', 'css_equiv': 'display: inline-block'},
+      {'class': 'text-align-center', 'css_equiv': 'text-align: center'},
+      {'class': 'text-align-left', 'css_equiv': 'text-align: left'},
+      {'class': 'text-align-right', 'css_equiv': 'text-align: right'},
+      {'class': 'text-transform-capitalize', 'css_equiv': 'text-transform: capitalize'},
+      {'class': 'text-transform-lowercase', 'css_equiv': 'text-transform: lowercase'},
+      {'class': 'text-transform-none', 'css_equiv': 'text-transform: none'},
+      {'class': 'text-transform-uppercase', 'css_equiv': 'text-transform: uppercase'},
+    ] %}
+
+    <table>
+      <thead>
+        <tr>
+          <th>Utility class</th>
+          <th>CSS equivalent</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for util in util_classes %}
+        <tr>
+          <td><code>{{util.class}}</code></td>
+          <td><code>{{util.css_equiv}}</code></td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+  </div>
+</div>
+
 </div>
 
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>