From 5e58ed9115b41c67028b76b73e2c3a66fae875c1 Mon Sep 17 00:00:00 2001
From: Antoine Boulanger <hello@antoineboulanger.com>
Date: Thu, 27 Apr 2017 16:00:45 -0400
Subject: [PATCH] Fix alignment

---
 .csscomb.json                              |  9 +--
 assets/styles/base/_headings.scss          |  2 +-
 assets/styles/base/_page.scss              | 16 +++---
 assets/styles/generic/_button.scss         | 34 +++++------
 assets/styles/generic/_form.scss           | 22 +++----
 assets/styles/generic/_generic.scss        | 14 ++---
 assets/styles/generic/_media.scss          |  5 +-
 assets/styles/generic/_normalize.scss      | 45 ++++++++-------
 assets/styles/objects/_button.scss         |  6 +-
 assets/styles/objects/_container.scss      |  8 +--
 assets/styles/objects/_crop.scss           |  4 +-
 assets/styles/objects/_ratio.scss          | 21 ++++---
 assets/styles/objects/_table.scss          |  2 +-
 assets/styles/settings/_config.colors.scss | 20 +++----
 assets/styles/settings/_config.scss        | 16 +++---
 assets/styles/tools/_fonts.scss            |  4 +-
 assets/styles/tools/_layout.scss           |  4 +-
 assets/styles/tools/_mixins.scss           | 67 ++++++++++------------
 assets/styles/tools/_ratio.scss            | 63 ++++++++++----------
 assets/styles/tools/_widths.scss           |  5 +-
 assets/styles/utilities/_helpers.scss      |  4 +-
 assets/styles/utilities/_print.scss        |  5 +-
 assets/styles/utilities/_states.scss       |  4 +-
 23 files changed, 186 insertions(+), 194 deletions(-)

diff --git a/.csscomb.json b/.csscomb.json
index 09972c1..7498d85 100644
--- a/.csscomb.json
+++ b/.csscomb.json
@@ -1,8 +1,10 @@
 {
+    "remove-empty-rulesets": true,
     "always-semicolon": true,
-    "color-case": "lower",
-    "block-indent": "\t",
+    "color-case": "upper",
+    "block-indent": "    ",
     "color-shorthand": false,
+    "element-case": "lower",
     "eof-newline": true,
     "leading-zero": true,
     "quotes": "double",
@@ -16,8 +18,7 @@
     "space-before-selector-delimiter": "",
     "space-before-closing-brace": "\n",
     "strip-spaces": true,
-    "unitless-zero": true,
-    "vendor-prefix-align": true,
+    "tab-size": true,
     "sort-order": [
         [
             "$include"
diff --git a/assets/styles/base/_headings.scss b/assets/styles/base/_headings.scss
index c37ba94..f454247 100644
--- a/assets/styles/base/_headings.scss
+++ b/assets/styles/base/_headings.scss
@@ -3,7 +3,7 @@
 // ==========================================================================
 
 @mixin h {
-    margin-top:  0;
+    margin-top: 0;
     line-height: $line-height-h;
 }
 
diff --git a/assets/styles/base/_page.scss b/assets/styles/base/_page.scss
index b8d3597..f6c27a9 100644
--- a/assets/styles/base/_page.scss
+++ b/assets/styles/base/_page.scss
@@ -14,24 +14,24 @@
 // 3. Ensure the page always fills at least the entire height of the viewport.
 //
 html {
-    color:       $color;
-    font-size:   em($font-size, 16px); /* [1] */
+    overflow-y: scroll; /* [2] */
+    min-height: 100%; /* [3] */
+    color: $color;
+    font-size: em($font-size, 16px); /* [1] */
     font-family: $font-family;
     line-height: $line-height; /* [1] */
-    overflow-y:  scroll; /* [2] */
-    min-height:  100%; /* [3] */
 }
 
 ::selection {
     background-color: $selection-background-color;
-    color:            $selection-text-color;
-    text-shadow:      none;
+    color: $selection-text-color;
+    text-shadow: none;
 }
 
 a {
-    color: $link-color;
-
     @include u-hocus {
         color: $link-hover-color;
     }
+
+    color: $link-color;
 }
diff --git a/assets/styles/generic/_button.scss b/assets/styles/generic/_button.scss
index 97f6cba..79c03a1 100644
--- a/assets/styles/generic/_button.scss
+++ b/assets/styles/generic/_button.scss
@@ -12,24 +12,24 @@
 //
 button,
 .o-button {
-    display:         inline-block; /* [1] */
-    overflow:        visible; /* [2] */
-    margin:          0; /* [3] */
-    padding:         0;
-    outline:         0;
-    border:          0;
-    background:      none transparent;
-    color:           inherit;
-    vertical-align:  middle; /* [4] */
-    text-align:      center; /* [3] */
-    text-decoration: none;
-    text-transform:  none;
-    font:            inherit; /* [5] */
-    line-height:     normal;
-    cursor:          pointer; /* [6] */
-    user-select:     none;
-
     @include u-hocus {
         text-decoration: none;
     }
+
+    display: inline-block; /* [1] */
+    overflow: visible; /* [2] */
+    margin: 0; /* [3] */
+    padding: 0;
+    outline: 0;
+    border: 0;
+    background: none transparent;
+    color: inherit;
+    vertical-align: middle; /* [4] */
+    text-align: center; /* [3] */
+    text-decoration: none;
+    text-transform: none;
+    font: inherit; /* [5] */
+    line-height: normal;
+    cursor: pointer; /* [6] */
+    user-select: none;
 }
diff --git a/assets/styles/generic/_form.scss b/assets/styles/generic/_form.scss
index 033b457..9fe80a2 100644
--- a/assets/styles/generic/_form.scss
+++ b/assets/styles/generic/_form.scss
@@ -5,18 +5,18 @@
 input,
 select,
 textarea {
-    display:       block;
-    margin:        0;
-    padding:       0;
-    width:         100%;
-    outline:       0;
-    border:        0;
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    outline: 0;
+    border: 0;
     border-radius: 0;
-    color:         inherit;
-    font:          inherit;
-    line-height:   normal;
-    appearance:    none;
-    background:    none transparent;
+    background: none transparent;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    appearance: none;
 }
 
 select {
diff --git a/assets/styles/generic/_generic.scss b/assets/styles/generic/_generic.scss
index f27edd1..bc660a8 100644
--- a/assets/styles/generic/_generic.scss
+++ b/assets/styles/generic/_generic.scss
@@ -58,15 +58,15 @@ a, area, button, input, label, select, textarea, [tabindex] {
 }
 
 table {
-    border-collapse: collapse;
     border-spacing: 0;
+    border-collapse: collapse;
 }
 
 hr {
-    display:    block;
-    margin:     1em 0;
-    padding:    0;
-    height:     1px;
-    border:     0;
-    border-top: 1px solid #cccccc;
+    display: block;
+    margin: 1em 0;
+    padding: 0;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #CCCCCC;
 }
diff --git a/assets/styles/generic/_media.scss b/assets/styles/generic/_media.scss
index dc7ee1d..8cd41fa 100644
--- a/assets/styles/generic/_media.scss
+++ b/assets/styles/generic/_media.scss
@@ -29,15 +29,16 @@ audio:not([controls]) {
 //
 img,
 svg {
-    height: auto;
     max-width: 100%; /* [2] */
+    height: auto;
 
     //
     // 4. If a `width` and/or `height` attribute have been explicitly defined, let’s
     //    not make the image fluid.
     //
     &[width], /* [4] */
-    &[height] {  /* [4] */
+    &[height] {
+        /* [4] */
         max-width: none;
     }
 }
diff --git a/assets/styles/generic/_normalize.scss b/assets/styles/generic/_normalize.scss
index 16ca12b..d4ee1a6 100644
--- a/assets/styles/generic/_normalize.scss
+++ b/assets/styles/generic/_normalize.scss
@@ -47,8 +47,8 @@ section {
  */
 
 h1 {
-    font-size: 2em;
     margin: 0.67em 0;
+    font-size: 2em;
 }
 
 /* Grouping content
@@ -61,7 +61,8 @@ h1 {
 
 figcaption,
 figure,
-main { /* 1 */
+main {
+    /* 1 */
     display: block;
 }
 
@@ -79,9 +80,9 @@ figure {
  */
 
 hr {
+    overflow: visible; /* 2 */
     box-sizing: content-box; /* 1 */
     height: 0; /* 1 */
-    overflow: visible; /* 2 */
 }
 
 /**
@@ -90,8 +91,8 @@ hr {
  */
 
 pre {
-    font-family: monospace, monospace; /* 1 */
     font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
 }
 
 /* Text-level semantics
@@ -154,8 +155,8 @@ strong {
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
     font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
 }
 
 /**
@@ -171,8 +172,8 @@ dfn {
  */
 
 mark {
-    background-color: #ff0;
-    color: #000;
+    background-color: #FFFF00;
+    color: #000000;
 }
 
 /**
@@ -190,10 +191,10 @@ small {
 
 sub,
 sup {
-    font-size: 75%;
-    line-height: 0;
     position: relative;
     vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
 }
 
 sub {
@@ -254,10 +255,10 @@ input,
 optgroup,
 select,
 textarea {
-    font-family: sans-serif; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
     margin: 0; /* 2 */
+    font-size: 100%; /* 1 */
+    font-family: sans-serif; /* 1 */
+    line-height: 1.15; /* 1 */
 }
 
 /**
@@ -266,7 +267,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+    /* 1 */
     overflow: visible;
 }
 
@@ -276,7 +278,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+    /* 1 */
     text-transform: none;
 }
 
@@ -301,8 +304,8 @@ button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
-    border-style: none;
     padding: 0;
+    border-style: none;
 }
 
 /**
@@ -321,9 +324,9 @@ button:-moz-focusring,
  */
 
 fieldset {
-    border: 1px solid #c0c0c0;
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
+    border: 1px solid #C0C0C0;
 }
 
 /**
@@ -334,11 +337,11 @@ fieldset {
  */
 
 legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
     display: table; /* 1 */
-    max-width: 100%; /* 1 */
+    box-sizing: border-box; /* 1 */
     padding: 0; /* 3 */
+    max-width: 100%; /* 1 */
+    color: inherit; /* 2 */
     white-space: normal; /* 1 */
 }
 
@@ -386,8 +389,8 @@ textarea {
  */
 
 [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
     outline-offset: -2px; /* 2 */
+    -webkit-appearance: textfield; /* 1 */
 }
 
 /**
@@ -405,8 +408,8 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
     font: inherit; /* 2 */
+    -webkit-appearance: button; /* 1 */
 }
 
 /* Interactive
diff --git a/assets/styles/objects/_button.scss b/assets/styles/objects/_button.scss
index d81865f..37058e6 100644
--- a/assets/styles/objects/_button.scss
+++ b/assets/styles/objects/_button.scss
@@ -2,10 +2,10 @@
 // Objects / Buttons
 // ==========================================================================
 .o-button {
-    padding: rem(10px);
-    background-color: lightgray;
-
     @include u-hocus {
         background-color: gray;
     }
+
+    padding: rem(10px);
+    background-color: lightgray;
 }
diff --git a/assets/styles/objects/_container.scss b/assets/styles/objects/_container.scss
index 8708fe3..fa7c284 100644
--- a/assets/styles/objects/_container.scss
+++ b/assets/styles/objects/_container.scss
@@ -19,9 +19,9 @@
 /* stylelint-enable */
 
 .o-container {
+    margin-right: auto;
+    margin-left: auto;
     padding-right: $padding;
-    padding-left:  $padding;
-    margin-right:  auto;
-    margin-left:   auto;
-    max-width:     $container-width;
+    padding-left: $padding;
+    max-width: $container-width;
 }
diff --git a/assets/styles/objects/_crop.scss b/assets/styles/objects/_crop.scss
index d1b3307..fe68b1e 100644
--- a/assets/styles/objects/_crop.scss
+++ b/assets/styles/objects/_crop.scss
@@ -34,7 +34,7 @@ $crop-ratios: (
  */
 .o-crop_content {
     position: absolute;
-    top:  0; /* [1] */
+    top: 0; /* [1] */
     left: 0; /* [1] */
     max-width: none; /* [2] */
 
@@ -52,7 +52,7 @@ $crop-ratios: (
     }
 
     &.-center {
-        top:  50%;
+        top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }
diff --git a/assets/styles/objects/_ratio.scss b/assets/styles/objects/_ratio.scss
index f9150f2..4cf9008 100644
--- a/assets/styles/objects/_ratio.scss
+++ b/assets/styles/objects/_ratio.scss
@@ -30,25 +30,24 @@ $aspect-ratios: (
     overflow: hidden;
 
     &:before {
-        content: "";
         display: block;
-        width: 100%;
         padding-bottom: 100%; /* [1] */
+        width: 100%;
+        content: "";
     }
-
 }
 
-    .o-ratio_content,
+.o-ratio_content,
     .o-ratio > iframe,
     .o-ratio > embed,
     .o-ratio > object {
-        position: absolute;
-        top:    0;
-        bottom: 0;
-        left:   0;
-        height: 100%;
-        width:  100%;
-    }
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 
 /* stylelint-disable */
 
diff --git a/assets/styles/objects/_table.scss b/assets/styles/objects/_table.scss
index 2bb35d5..9ebf48e 100644
--- a/assets/styles/objects/_table.scss
+++ b/assets/styles/objects/_table.scss
@@ -9,7 +9,7 @@
      *
      * @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
      */
-    &.-fixed{
+    &.-fixed {
         table-layout: fixed;
     }
 }
diff --git a/assets/styles/settings/_config.colors.scss b/assets/styles/settings/_config.colors.scss
index 48022fe..6616b73 100644
--- a/assets/styles/settings/_config.colors.scss
+++ b/assets/styles/settings/_config.colors.scss
@@ -4,22 +4,22 @@
 
 // Palette
 // =============================================================================
-$white:            #FFFFFF;
-$black:            #000000;
+$white: #FFFFFF;
+$black: #000000;
 
 // Specific
 // =============================================================================
 // Link
-$link-color:        #1A0DAB;
-$link-focus-color:  #1A0DAB;
-$link-hover-color:  darken(#1A0DAB, 10%);
+$link-color:       #1A0DAB;
+$link-focus-color: #1A0DAB;
+$link-hover-color: darken(#1A0DAB, 10%);
 // Selection
-$selection-text-color: #3297fd;
+$selection-text-color:       #3297FD;
 $selection-background-color: #FFFFFF;
 
 // Social Colors
 // =============================================================================
-$facebook-color:   #3B5998;
-$instagram-color:  #E1306C;
-$youtube-color:    #CD201F;
-$twitter-color:    #1DA1F2;
+$facebook-color:  #3B5998;
+$instagram-color: #E1306C;
+$youtube-color:   #CD201F;
+$twitter-color:   #1DA1F2;
diff --git a/assets/styles/settings/_config.scss b/assets/styles/settings/_config.scss
index 33a65a0..a3183af 100644
--- a/assets/styles/settings/_config.scss
+++ b/assets/styles/settings/_config.scss
@@ -8,7 +8,7 @@
 $context: frontend  !default;
 
 // Path is relative to the stylesheets directory.
-$assets-path: '../'  !default;
+$assets-path: "../"  !default;
 
 // Typefaces
 // =============================================================================
@@ -17,10 +17,10 @@ $font-sans-serif: sans-serif;
 // Typography
 // =============================================================================
 // Base
-$font-size: 16px;
+$font-size:   16px;
 $line-height: 24px / $font-size;
 $font-family: $font-sans-serif;
-$color: #222222;
+$color:       #222222;
 // Headings
 $font-size-h1:  36px  !default;
 $font-size-h2:  28px  !default;
@@ -30,25 +30,25 @@ $font-size-h5:  18px  !default;
 $font-size-h6:  16px  !default;
 $line-height-h: $line-height;
 // Weights
-$light: 300;
+$light:  300;
 $normal: 400;
 $medium: 500;
-$bold: 700;
+$bold:   700;
 
 // Transitions
 // =============================================================================
-$speed: 0.3s;
+$speed:  0.3s;
 $easing: linear;
 
 // Spacing Units
 // =============================================================================
-$unit: 60px;
+$unit:       60px;
 $unit-small: 30px;
 
 // Container
 // ==========================================================================
 $container-width: 2000px;
-$padding: $unit;
+$padding:         $unit;
 
 // Breakpoints
 // =============================================================================
diff --git a/assets/styles/tools/_fonts.scss b/assets/styles/tools/_fonts.scss
index be46c65..dd96d77 100644
--- a/assets/styles/tools/_fonts.scss
+++ b/assets/styles/tools/_fonts.scss
@@ -25,7 +25,6 @@ $global-font-file-formats: "woff", "ttf" !default;
     $file-formats
 ) {
     $src: ();
-
     $formats-map: (
         eot:   "#{$file-path}.eot?#iefix" format("embedded-opentype"),
         woff2: "#{$file-path}.woff2" format("woff2"),
@@ -36,9 +35,8 @@ $global-font-file-formats: "woff", "ttf" !default;
 
     @each $key, $values in $formats-map {
         @if list-contains($file-formats, $key) {
-            $file-path:   nth($values, 1);
+            $file-path: nth($values, 1);
             $font-format: nth($values, 2);
-
             $src: append($src, url("#{$assets-path}#{$file-path}") $font-format, comma);
         }
     }
diff --git a/assets/styles/tools/_layout.scss b/assets/styles/tools/_layout.scss
index 888cffe..5813594 100644
--- a/assets/styles/tools/_layout.scss
+++ b/assets/styles/tools/_layout.scss
@@ -45,9 +45,9 @@
 //    http://csswizardry.com/2011/08/building-better-grid-systems/
 //
 @mixin o-layout_item($gutter: 0, $fix-whitespace: true) {
-    display:        inline-block; // [2]
+    display: inline-block; // [2]
+    width: 100%; // [4]
     vertical-align: top; // [3]
-    width:          100%; // [4]
 
     @if ($fix-whitespace) {
         font-size: 1rem;
diff --git a/assets/styles/tools/_mixins.scss b/assets/styles/tools/_mixins.scss
index b7a65de..673c22f 100644
--- a/assets/styles/tools/_mixins.scss
+++ b/assets/styles/tools/_mixins.scss
@@ -35,9 +35,9 @@
 //
 @mixin u-clearfix($supports...) {
     &::after {
-        content: if(list-contains($supports, opera), " ", "");
         display: if(list-contains($supports, table), table, block);
-        clear:   both;
+        clear: both;
+        content: if(list-contains($supports, opera), " ", "");
     }
 }
 
@@ -51,18 +51,17 @@
 // @output `font-size`, `line-height`
 //
 @mixin font-size($font-size, $line-height: auto, $important: false) {
+    font-size: rem($font-size) $important;
     $important: important($important);
 
-    font-size: rem($font-size) $important;
-
-    @if ($line-height == 'auto') {
+    @if ($line-height == "auto") {
         line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important;
     }
     @else {
-        @if (type-of($line-height) == number or $line-height == 'inherit' or $line-height == 'normal') {
+        @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {
             line-height: $line-height $important;
         }
-        @elseif ($line-height != 'none' and $line-height != false) {
+        @elseif ($line-height != "none" and $line-height != false) {
             @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`."
         }
     }
@@ -81,16 +80,16 @@
     font-size: 0;
 
     &::before {
-        display:        inline-block;
-        height:         100%;
-        content:        "";
+        display: inline-block;
+        height: 100%;
+        content: "";
         vertical-align: middle;
     }
 
     > * {
-        display:        inline-block;
-        font-size:      1rem;
+        display: inline-block;
         vertical-align: middle;
+        font-size: 1rem;
     }
 }
 
@@ -128,8 +127,8 @@
 // @output `list-style`, `margin`, `padding`
 //
 @mixin u-list-reset {
-    margin:     0;
-    padding:    0;
+    margin: 0;
+    padding: 0;
     list-style: none;
 }
 
@@ -145,13 +144,13 @@
 // @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow`
 //
 @mixin u-truncate($width: 100%) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;  // [2]
     @if $width {
         max-width: $width; // [1]
     }
-    word-wrap:     normal;  // [2]
-    white-space:   nowrap;
-    overflow:      hidden;
-    text-overflow: ellipsis;
 }
 
 //
@@ -161,16 +160,15 @@
 // @output Properties for removing the element from the document flow.
 //
 @mixin u-accessibly-hidden($important: true) {
-    $important: important($important);
-
     position: absolute $important;
     overflow: hidden;
-    height:   1px;
-    width:    1px;
-    padding:  0;
-    margin:   0;
-    border:   0;
-    clip:     rect(0 0 0 0);
+    clip: rect(0 0 0 0);
+    margin: 0;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    border: 0;
+    $important: important($important);
 }
 
 //
@@ -181,9 +179,9 @@
 //
 @mixin u-accessibly-focusable {
     @include u-actus {
+        clip: auto;
+        width: auto;
         height: auto;
-        width:  auto;
-        clip:   auto;
 
         @content;
     }
@@ -199,10 +197,9 @@
 // @output `display`, `visibility`
 //
 @mixin u-hidden($important: true) {
+    display: none   $important;
+    visibility: hidden $important;
     $important: important($important);
-
-    display    : none   $important;
-    visibility : hidden $important;
 }
 
 //
@@ -214,10 +211,8 @@
 // @param  {Boolean} $important [true]  - Whether the visibility is important.
 // @output `display`, `visibility`
 //
-@mixin u-shown($display: block, $important: true)
-{
+@mixin u-shown($display: block, $important: true) {
+    display: $display $important;
+    visibility: visible  $important;
     $important: important($important);
-
-    display    : $display $important;
-    visibility : visible  $important;
 }
diff --git a/assets/styles/tools/_ratio.scss b/assets/styles/tools/_ratio.scss
index 54cf32d..73f0358 100644
--- a/assets/styles/tools/_ratio.scss
+++ b/assets/styles/tools/_ratio.scss
@@ -6,44 +6,43 @@
 // A tool to restrain a container to a unitary or fractional proportion.
 //
 
-$data-ratios: '1/2' '0.5' 50%,
-              '11/20' '0.55' 55%,
-              '3/5' '0.6' 60%,
-              '13/20' '0.65' 65%,
-              '7/10' '0.7' 70%,
-              '3/4' '0.75' 75%,
-              '4/5' '0.8' 80%,
-              '17/20' '0.85' 85%,
-              '9/10' '0.9' 90%,
-              '19/20' '0.95' 95%,
-              '1/1' '1' 100%,
-              '21/20' '1.05' 105%,
-              '11/10' '1.1' 110%,
-              '23/20' '1.15' 115%,
-              '6/5' '1.2' 120%,
-              '5/4' '1.25' 125% !default;
-
-$data-ratio-crops: 'top' 'bottom' 'both' !default;
+$data-ratios: "1/2" "0.5" 50%,
+              "11/20" "0.55" 55%,
+              "3/5" "0.6" 60%,
+              "13/20" "0.65" 65%,
+              "7/10" "0.7" 70%,
+              "3/4" "0.75" 75%,
+              "4/5" "0.8" 80%,
+              "17/20" "0.85" 85%,
+              "9/10" "0.9" 90%,
+              "19/20" "0.95" 95%,
+              "1/1" "1" 100%,
+              "21/20" "1.05" 105%,
+              "11/10" "1.1" 110%,
+              "23/20" "1.15" 115%,
+              "6/5" "1.2" 120%,
+              "5/4" "1.25" 125% !default;
+$data-ratio-crops: "top" "bottom" "both" !default;
 
 @mixin crop($crop) {
-    @if $crop == 'top' {
-        bottom:    0;
-    } @else if $crop == 'bottom' {
-        top:       0;
-    } @else if $crop == 'both' {
-        top:       50%;
+    @if $crop == "top" {
+        bottom: 0;
+    } @else if $crop == "bottom" {
+        top: 0;
+    } @else if $crop == "both" {
+        top: 50%;
         transform: translateY(-50%);
     }
 }
 
 .u-ratio {
-    overflow: hidden;
     position: relative;
+    overflow: hidden;
 
     &::before {
         display: block;
+        width: 100%;
         content: "";
-        width:   100%;
     }
 
     @each $ratio in $data-ratios {
@@ -57,17 +56,17 @@ $data-ratio-crops: 'top' 'bottom' 'both' !default;
 }
 
 .u-ratio_content_container {
-    overflow: hidden;
     position: absolute;
-    top:      0;
-    left:     0;
-    right:    0;
-    bottom:   0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
 }
 
 .u-ratio_content {
-    width:    100%;
     position: absolute;
+    width: 100%;
 
     @each $crop in $data-ratio-crops {
         &[data-ratio-crop="#{$crop}"] {
diff --git a/assets/styles/tools/_widths.scss b/assets/styles/tools/_widths.scss
index f6a8534..76f998e 100644
--- a/assets/styles/tools/_widths.scss
+++ b/assets/styles/tools/_widths.scss
@@ -46,17 +46,14 @@ $breakpoint-delimiter: \@ !default;
 // @param    {String}   $breakpoint - Optional suffix for responsive widths.
 // @output   `width`, `position`, `right`, `left`
 //
-@mixin widths($columns, $breakpoint: null, $important: true)
-{
+@mixin widths($columns, $breakpoint: null, $important: true) {
     $important: important($important);
 
     // Loop through the number of columns for each denominator of our fractions.
     @each $denominator in $columns {
-
         // Begin creating a numerator for our fraction up until we hit the
         // denominator.
         @for $numerator from 1 through $denominator {
-
             // Build a class in the format `.u-3/4[@<breakpoint>]`.
             .u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
                 width: ($numerator / $denominator) * 100% $important;
diff --git a/assets/styles/utilities/_helpers.scss b/assets/styles/utilities/_helpers.scss
index 1a3d830..40ad2ff 100644
--- a/assets/styles/utilities/_helpers.scss
+++ b/assets/styles/utilities/_helpers.scss
@@ -17,9 +17,9 @@
 //  Visibility / Display
 // ==========================================================================
 [hidden][aria-hidden="false"] {
-    clip:     rect(0, 0, 0, 0);
-    display:  inherit;
     position: absolute;
+    display: inherit;
+    clip: rect(0, 0, 0, 0);
 }
 
 [hidden][aria-hidden="false"]:focus {
diff --git a/assets/styles/utilities/_print.scss b/assets/styles/utilities/_print.scss
index ff53515..2d6641d 100644
--- a/assets/styles/utilities/_print.scss
+++ b/assets/styles/utilities/_print.scss
@@ -11,7 +11,6 @@
 ////
 
 @media print {
-
     /**
      * 1. Black prints faster: http://www.sanbeiji.com/archives/953
      */
@@ -21,8 +20,8 @@
     *:first-letter,
     *:first-line {
         background: transparent !important;
-        color: #000 !important; /* [1] */
         box-shadow: none !important;
+        color: #000000 !important; /* [1] */
         text-shadow: none !important;
     }
 
@@ -50,7 +49,7 @@
 
     pre,
     blockquote {
-        border: 1px solid #999;
+        border: 1px solid #999999;
         page-break-inside: avoid;
     }
 
diff --git a/assets/styles/utilities/_states.scss b/assets/styles/utilities/_states.scss
index e7e35ec..e1318fd 100644
--- a/assets/styles/utilities/_states.scss
+++ b/assets/styles/utilities/_states.scss
@@ -23,12 +23,12 @@
 
 .is-visible {
     visibility: visible !important;
-    opacity:    1 !important;
+    opacity: 1 !important;
 }
 
 .is-invisible {
     visibility: hidden !important;
-    opacity:    0 !important;
+    opacity: 0 !important;
 }
 
 /**