From d2993557bc63f9507dfd59e883e9db01513da341 Mon Sep 17 00:00:00 2001
From: rhyneav <rhyneav@gmail.com>
Date: Thu, 24 May 2018 08:13:53 -0400
Subject: [PATCH] refactor for linting

---
 .stylelintrc.json              |  7 ++-
 src/components/_accordion.scss | 32 ++++++-------
 src/components/_alerts.scss    | 14 +++---
 src/components/_article.scss   | 37 +++++++--------
 src/components/_badges.scss    | 10 ++--
 src/components/_buttons.scss   | 57 ++++++++++++----------
 src/components/_cards.scss     | 28 ++++++-----
 src/components/_forms.scss     | 87 +++++++++++++++++++---------------
 src/components/_modals.scss    | 75 ++++++++++++++---------------
 src/components/_popovers.scss  | 56 +++++++++++-----------
 src/components/_tabs.scss      | 14 +++---
 src/components/_utilities.scss | 28 ++++++++++-
 src/content/_code.scss         | 36 +++++++-------
 src/content/_fonts.scss        | 38 +++++++++++++--
 src/content/_images.scss       | 16 +++----
 src/content/_lists.scss        | 25 +++++++---
 src/content/_tables.scss       | 35 +++++++-------
 src/core/_config.scss          | 71 ++++++++++++++-------------
 src/core/_reset.scss           |  3 ++
 src/layout/_container.scss     | 33 ++++++-------
 src/layout/_flexbox.scss       | 48 +++++++++++--------
 src/utilities/_shadows.scss    |  1 +
 22 files changed, 428 insertions(+), 323 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 613a649..893e2a6 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -6,6 +6,11 @@
   "rules": {
     "max-nesting-depth": 5,
     "property-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null
+    "value-no-vendor-prefix": null,
+    "selector-no-qualifying-type": null,
+    "selector-max-compound-selectors": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/selector-no-redundant-nesting-selector": null,
+    "scss/at-extend-no-missing-placeholder": null
   }
 }
diff --git a/src/components/_accordion.scss b/src/components/_accordion.scss
index 3e04789..6586b0d 100644
--- a/src/components/_accordion.scss
+++ b/src/components/_accordion.scss
@@ -7,14 +7,14 @@
   }
 
   .collapsible-body {
-    max-height: 0px;
-    opacity: 0;
-    overflow: hidden;
-    padding: 0rem 0.75rem;
-    margin: 0;
+    @include transition;
     background-color: lighten($white-dark, 80%);
     border-bottom: 1px solid $muted-light;
-    @include transition;
+    margin: 0;
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0 0.75rem;
   }
 
   input {
@@ -24,22 +24,22 @@
       color: $primary;
     }
 
-    &[id^="collapsible"]:checked~div.collapsible-body {
-      opacity: 1;
-      max-height: 960px;
-      padding: 0.75rem 0.75rem;
+    &[id^='collapsible']:checked~div.collapsible-body {
       margin: 0;
+      max-height: 960px;
+      opacity: 1;
+      padding: 0.75rem;
     }
   }
 
   label {
-    display: inline-block;
-    margin: 0 0 -1px;
-    padding: 0.75rem 0.75rem;
-    font-weight: 600;
-    text-align: center;
-    color: $primary;
     border-bottom: 1px solid $muted-light;
+    color: $primary;
+    display: inline-block;
+    font-weight: 600;
+    margin: 0 0 -1px;
+    padding: 0.75rem;
+    text-align: center;
 
     &:hover {
       color: $muted;
diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss
index d8e6da3..fc027fe 100644
--- a/src/components/_alerts.scss
+++ b/src/components/_alerts.scss
@@ -1,15 +1,15 @@
 .alert {
-    @include border-style();
-    border: 2px solid $primary;
-    padding: 15px;
-    margin-bottom: 20px;
-    width: 100%;
+  @include border-style();
+  border: 2px solid $primary;
+  margin-bottom: 20px;
+  padding: 15px;
+  width: 100%;
 }
 
 @each $colorName, $color, $color-light in $colors {
   .alert-#{$colorName} {
-    color: $color;
-    border-color: $color;
     background-color: $color-light;
+    border-color: $color;
+    color: $color;
   }
 }
diff --git a/src/components/_article.scss b/src/components/_article.scss
index 1ce230c..78191ea 100644
--- a/src/components/_article.scss
+++ b/src/components/_article.scss
@@ -1,32 +1,31 @@
 article {
-	.article-title {
-		font-size: 3rem;
-	}
+  .article-title {
+    font-size: 3rem;
+  }
 
-	.article-meta {
-		font-size: 15px;
-		color: $muted;
+  .article-meta {
+    color: $muted;
+    font-size: 15px;
 
-		a {
-			color: $muted-text;
-			background-image: none;
+    a {
+      background-image: none;
+      color: $muted-text;
 
-			&:hover {
-				color: $light-dark;
-			}
-		}
-	}
+      &:hover {
+        color: $light-dark;
+      }
+    }
+  }
 
-	.text-lead {
-		font-size: 30px;
-		line-height: 1.3;
-		margin: 35px 0px;
+  .text-lead {
+    font-size: 30px;
+    line-height: 1.3;
+    margin: 35px;
   }
 
   button {
     &:not(:first-of-type) {
       margin-left: 2rem;
-
       @include resp(xs) {
         margin-left: 0;
       }
diff --git a/src/components/_badges.scss b/src/components/_badges.scss
index e7735cd..cc3a126 100644
--- a/src/components/_badges.scss
+++ b/src/components/_badges.scss
@@ -1,17 +1,17 @@
 .badge {
   @include border-style();
+  background-color: $muted;
   border: 2px solid $primary;
+  border-color: transparent;
+  color: $white;
   display: inline-block;
-  padding: .25em .4em;
   font-size: 75%;
   font-weight: 700;
   line-height: 1;
+  padding: 0.25em 0.4em;
   text-align: center;
-  white-space: nowrap;
   vertical-align: baseline;
-  background-color: $muted;
-  color: $white;
-  border-color: transparent;
+  white-space: nowrap;
 }
 
 @each $colorName, $color in $colors {
diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index adcd38f..09b4fe3 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -1,36 +1,36 @@
 button,
 .paper-btn,
-[type="button"] {
+[type='button'] {
+  @include border-style();
+  @include shadow();
+  @include transition();
   align-self: center;
   background: transparent;
-  @include transition();
-  color: $primary;
-  display: inline;
-  outline: none;
   border: 2px solid $primary;
-  @include border-style();
-  font-size: 1rem;
-  padding: .75rem .75rem;
+  color: $primary;
   cursor: pointer;
-  @include shadow();
+  display: inline;
+  font-size: 1rem;
+  outline: none;
+  padding: 0.75rem;
 
   @include resp(520px) {
     display: inline-block;
     margin: 0 auto;
-    text-align: center;
     margin-bottom: 1rem;
+    text-align: center;
   }
 
   &.btn-large {
     @include shadow(large);
     font-size: 2rem;
-    padding: 1rem 1rem;
+    padding: 1rem;
   }
 
   &.btn-small {
     @include shadow(small);
-    font-size: .75rem;
-    padding: .5rem;
+    font-size: 0.75rem;
+    padding: 0.5rem;
   }
 
   &.btn-block {
@@ -44,47 +44,52 @@ button,
 
   &:focus {
     border: 2px solid $secondary;
-    -webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
-    -moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
-    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
+    -webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
+    -moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
+    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
   }
 
   &:active {
-    border-color: hsla(0, 0%, 0%, .2);
+    border-color: hsla(0, 0%, 0%, 0.2);
     transition: none;
   }
 
   &.disabled,
   &[disabled] {
     cursor: not-allowed;
-    opacity: .5
+    opacity: 0.5;
   }
 }
 
 a {
-  text-decoration: none;
   background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
+  background-position: 0 90%;
   background-repeat: repeat-x;
   background-size: 4px 3px;
-  background-position: 0 90%;
+  text-decoration: none;
+
   &:visited {
-    text-decoration: none;
     color: $primary;
+    text-decoration: none;
   }
 }
 
 
 @each $colorName, $color, $color-light, $color-text in $colors {
   .alert-#{$colorName} {
+    background-color: $color-light;
+    border-color: $color;
     color: $color;
-    border-color: $color;
-    background-color: $color-light;
   }
-  button.btn-#{$colorName}, .paper-btn.btn-#{$colorName}, [type="button"].btn-#{$colorName} {
-    border-color: $color;
+
+  button.btn-#{$colorName},
+  .paper-btn.btn-#{$colorName},
+  [type='button'].btn-#{$colorName} {
     background-color: $color-light;
+    border-color: $color;
     color: $color-text;
-    &:hover{
+
+    &:hover {
       &:active {
         background-color: darken($color-light, 10%);
       }
diff --git a/src/components/_cards.scss b/src/components/_cards.scss
index 0ee1e11..9a5c424 100644
--- a/src/components/_cards.scss
+++ b/src/components/_cards.scss
@@ -1,12 +1,12 @@
 .card {
   @include shadow;
-  position: relative;
+  backface-visibility: hidden;
+  border: 2px solid $muted-light;
   display: flex;
   flex-direction: column;
-  word-wrap: break-word;
-  border: 2px solid $muted-light;
-  backface-visibility: hidden;
+  position: relative;
   will-change: transform;
+  word-wrap: break-word;
 
   &:hover {
     @include shadow(hover);
@@ -14,8 +14,8 @@
 
   .card-header,
   .card-footer {
-    padding: .75rem 1.25rem;
     background-color: $white-dark;
+    padding: 0.75rem 1.25rem;
   }
 
   .card-header {
@@ -30,21 +30,23 @@
     flex: 1 1 auto;
     padding: 1.25rem;
 
-    .card-title, h4 {
-      margin-top: 0;
+    .card-title,
+    h4 {
       margin-bottom: 0.5rem;
+      margin-top: 0;
     }
 
-    .card-subtitle, h5 {
-      @extend .text-secondary;
-
-      margin-top: 0;
+    .card-subtitle,
+    h5 {
+      color: $secondary;
       margin-bottom: 0.5rem;
+      margin-top: 0;
     }
 
-    .card-text, p {
-      margin-top: 0;
+    .card-text,
+    p {
       margin-bottom: 1rem;
+      margin-top: 0;
     }
 
     .card-link + .card-link,
diff --git a/src/components/_forms.scss b/src/components/_forms.scss
index f98c9ff..a1df6b7 100644
--- a/src/components/_forms.scss
+++ b/src/components/_forms.scss
@@ -1,105 +1,114 @@
-input, select, textarea {
-  display: block;
-  background:transparent;
-  color:$primary;
-  outline:none;
+input,
+select,
+textarea {
+  background: transparent;
+  border: 2px solid $primary;
+  border-bottom-left-radius: 15px 255px;
+  border-bottom-right-radius: 225px 15px;
   border-top-left-radius: 255px 15px;
   border-top-right-radius: 15px 225px;
-  border-bottom-right-radius: 225px 15px;
-  border-bottom-left-radius:15px 255px;
+  color: $primary;
+  display: block;
   font-size: 1rem;
-  padding: .5rem .5rem;
-  border: 2px solid $primary;
+  outline: none;
+  padding: 0.5rem;
+
   &:focus {
-      border: 2px solid $secondary;
+    border: 2px solid $secondary;
   }
-  &.disabled, &[disabled]{
-      @extend .disabled;
+
+  &.disabled,
+  &[disabled] {
+    @extend .disabled;
   }
 }
 
-.disabled{
+.disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
 .form-group {
   margin-bottom: 1rem;
-  > label, legend {
+
+  > label,
+  legend {
     display: inline-block;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
 
   .input-block {
     width: 100%;
   }
 
-  textarea{
-    max-width: 100%;
+  textarea {
     max-height: 90vh;
+    max-width: 100%;
   }
 
-  textarea.no-resize{
+  textarea.no-resize {
     resize: none;
   }
 
   // TODO: make these classes implicit. We can find out what class to apply based on its type
-  .paper-radio, .paper-check {
-   display: block;
-    margin-bottom: .5rem;
+  .paper-radio,
+  .paper-check {
     cursor: pointer;
+    display: block;
+    margin-bottom: 0.5rem;
 
     /* the basic, unchecked style */
     input {
       border: 0;
-      height: 1px; margin: -1px;
+      display: none;
+      height: 1px;
+      margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
-      display: none;
 
       & + span {
         display: block;
 
-        &:before {
+        &::before {
+          border: 2px solid $primary;
           content: '';
           display: inline-block;
-          position: relative;
-          width: 1rem;
           height: 1rem;
-          border: 2px solid $primary;
           margin-right: 0.75em;
+          position: relative;
           vertical-align: -0.25em;
+          width: 1rem;
         }
       }
 
       /* radio styles */
-      &[type="radio"] {
-        & + span:before {
+      &[type='radio'] {
+        & + span::before {
+          border-bottom-left-radius: 0.7rem 1rem;
+          border-bottom-right-radius: 1rem 0.9rem;
           border-top-left-radius: 1rem 1rem;
-          border-top-right-radius: 1rem .6rem;
-          border-bottom-right-radius: 1rem .9rem;
-          border-bottom-left-radius: .7rem 1rem;
+          border-top-right-radius: 1rem 0.6rem;
         }
 
-        &:checked + span:before {
+        &:checked + span::before {
           $radio-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'#{$secondary}'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E";
           background: url($radio-fill) left center no-repeat;
         }
       }
 
       /* checkbox styles */
-      &[type="checkbox"] {
-        & + span:before {
+      &[type='checkbox'] {
+        & + span::before {
+          border-bottom-left-radius: 15px 255px;
+          border-bottom-right-radius: 225px 15px;
           border-top-left-radius: 255px 15px;
           border-top-right-radius: 15px 225px;
-          border-bottom-right-radius: 225px 15px;
-          border-bottom-left-radius:15px 255px;
         }
 
         /* checked */
-        &:checked + span:before {
+        &:checked + span::before {
           $check-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20stroke%3D'#{$secondary}'%20fill-opacity%3D'0'%20stroke-width%3D'16'%20d%3D'm13,62c0.61067,1.6%201.3045,2.3045%201.75717,2.75716c0.72683,0.72684%201.24283,1.24284%202.07617,2.07617c0.54133,0.54133%201.04116,1.06035%201.82833,1.82383c0.5781,0.5607%201.00502,0.96983%202.02633,1.74417c0.55877,0.42365%201.191,0.84034%201.884,1.284c1.16491,0.74577%201.59777,1.00147%202.5,1.55067c0.4692,0.28561%201.43689,0.86868%201.93067,1.16534c0.99711,0.59904%201.99667,1.19755%202.49283,1.49866c0.98501,0.59779%201.47073,0.89648%201.94733,1.2c1.3971,0.88972%201.83738,1.19736%202.7,1.7955c0.42201,0.29262%201.24022,0.87785%202.05583,1.41917c0.79531,0.52785%201.59376,1.0075%202.38,1.43867c0.74477,0.40842%201.45167,0.75802%202.37817,1.22517c0.76133,0.38387%201.54947,0.82848%202.40717,1.41084c0.7312,0.49647%201.49563,1.08231%202.27884,1.258c0.35564,0.07978%200.14721,-0.95518%200.35733,-1.86867c0.18092,-0.78651%200.98183,-1.2141%200.99983,-2.07867c0.02073,-0.99529%200.07916,-1.79945%200.42533,-2.56133c0.43607,-0.95973%200.53956,-1.66774%200.79617,-2.68183c0.18888,-0.74645%200.39764,-1.31168%200.7785,-2.6235c0.20865,-0.71867%200.41483,-1.48614%200.708,-2.28c0.15452,-0.41843%200.77356,-1.73138%201.348,-2.64133c0.30581,-0.48443%200.65045,-0.97043%201.0065,-1.4745c0.74776,-1.05863%201.1531,-1.60163%201.9375,-2.77084c0.40621,-0.60548%200.80272,-1.23513%201.2045,-1.8765c0.40757,-0.65062%200.81464,-1.31206%201.2315,-1.9755c0.41946,-0.66757%200.83374,-1.34258%201.73067,-2.648c0.44696,-0.65053%200.91436,-1.28356%201.386,-1.9095c0.46972,-0.6234%200.94725,-1.2364%201.422,-1.8465c0.94116,-1.20947%201.86168,-2.40844%202.30367,-3.0105c0.438,-0.59664%200.86246,-1.19396%201.27501,-1.7895c0.40743,-0.58816%200.80352,-1.17234%201.185,-1.7535c1.10526,-1.68381%201.44079,-2.23511%201.77633,-2.7705c0.32878,-0.52461%200.96306,-1.5459%201.27467,-2.04c0.60654,-0.96177%201.20782,-1.88193%201.51051,-2.325c0.59013,-0.86381%201.17888,-1.68032%201.46416,-2.075c0.5498,-0.76063%201.31747,-1.8231%201.77883,-2.4895c0.43918,-0.63437%200.85266,-1.25267%201.45717,-2.15717c0.59549,-0.891%200.96531,-1.46814%201.51466,-2.22933c0.58413,-0.80936%201.12566,-1.40253%201.83801,-2.12333c0.61304,-0.62031%200.45171,-1.48306%200.7045,-2.34733c0.25668,-0.87762%200.75447,-1.62502%201,-2.40983c0.25128,-0.8032%200.7633,-1.39453%201.33217,-2.25417c0.54528,-0.82398%200.73415,-1.6714%201.31516,-2.336c0.55639,-0.63644%201.38658,-1.22588%201.8595,-1.9c0.5082,-0.72441%200.78867,-1.4%201.60266,-1.56667l0.71184,-0.4905'%3E%3C/path%3E%3C/svg%3E";
           background: url($check-fill) left center no-repeat;
         }
@@ -109,6 +118,6 @@ input, select, textarea {
 }
 
 fieldset.form-group {
-  border: none;
+  border: 0;
   padding: 0;
 }
diff --git a/src/components/_modals.scss b/src/components/_modals.scss
index ae88a12..fe02614 100644
--- a/src/components/_modals.scss
+++ b/src/components/_modals.scss
@@ -1,56 +1,56 @@
 .modal {
-  opacity: 0;
-  visibility: hidden;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  text-align: left;
-  background: rgba(black, 0.6);
-  z-index: 12;
-  flex: 1 1 auto;
-  word-wrap: break-word;
   @include transition(opacity);
+  background: rgba(#000, 0.6);
+  bottom: 0;
+  flex: 1 1 auto;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  text-align: left;
+  top: 0;
+  visibility: hidden;
+  word-wrap: break-word;
+  z-index: 12;
 
   // modal background
   &-bg {
-    position: absolute;
-    top: 0;
-    right: 0;
     bottom: 0;
-    left: 0;
     cursor: pointer;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
   }
 
   .modal-body {
-    position: absolute;
-    top: 0;
-    left: 50%;
+    @include transition;
+    @include translate(-50%, -50%);
+    backface-visibility: hidden;
     background: $white;
     border: 2px solid $muted-light;
+    left: 50%;
     padding: 1.25rem;
-    backface-visibility: hidden;
-    @include translate(-50%, -50%);
-    @include transition;
+    position: absolute;
+    top: 0;
 
     @include resp(sm) {
-      width: 90%;
       box-sizing: border-box;
+      width: 90%;
     }
   }
 
   .btn-close {
-    width: 1.1rem;
-    height: 1.1rem;
-    cursor: pointer;
+    @include transition;
     color: $primary-light;
+    cursor: pointer;
     font-size: 30px;
-    text-decoration: none;
+    height: 1.1rem;
     position: absolute;
     right: 1rem;
+    text-decoration: none;
     top: 1rem;
-    @include transition;
+    width: 1.1rem;
 
     &:hover,
     &:active,
@@ -61,21 +61,21 @@
 
   h4,
   .modal-title {
-    margin-top: 0;
     margin-bottom: 0.5rem;
+    margin-top: 0;
   }
 
   h5,
   .modal-subtitle {
-    @extend .text-secondary;
-    margin-top: 0;
+    color: $secondary;
     margin-bottom: 0.5rem;
+    margin-top: 0;
   }
 
   p,
   .modal-text {
-    margin-top: 0;
     margin-bottom: 1rem;
+    margin-top: 0;
   }
 
   .modal-link+.modal-link,
@@ -84,24 +84,25 @@
   }
 
   .paper-btn {
-    text-decoration: none;
     background: $white;
     display: inline-block;
+    text-decoration: none;
   }
 
-  .modal-link, a {
-    text-decoration: none;
+  .modal-link,
+  a {
     background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
+    background-position: 0 90%;
     background-repeat: repeat-x;
     background-size: 4px 3px;
-    background-position: 0 90%;
     cursor: pointer;
+    text-decoration: none;
 
     &:hover,
     &:focus,
     &:visited {
-      text-decoration: none;
       color: $primary;
+      text-decoration: none;
     }
   }
 }
diff --git a/src/components/_popovers.scss b/src/components/_popovers.scss
index d82fcac..e89bbd1 100644
--- a/src/components/_popovers.scss
+++ b/src/components/_popovers.scss
@@ -2,94 +2,94 @@
 [popover-top],
 [popover-right],
 [popover-bottom],
-[popover-left]{
-  position: relative;
+[popover-left] {
   margin: 24px;
+  position: relative;
 
   // Popover hover trigger
   &:hover {
-    &:after {
-      transition: opacity .2s ease-out;
+    &::after {
       opacity: 1;
+      transition: opacity 0.2s ease-out;
     }
   }
 
   // Creating popover::after element
-  &:after {
-    position: absolute;
-    top: -6px;
+  &::after {
+    @include border-style();
+    @include transition(opacity);
+    background: $light-dark;
+    border: 2px solid $primary;
+    color: $white;
+    font-size: 0.7em;
     left: 50%;
+    min-width: 80px;
     opacity: 0;
     padding: 4px 2px;
-    min-width: 80px;
-    font-size: 0.7em;
+    position: absolute;
     text-align: center;
-    color: $white;
-    background: $light-dark;
-    @include transition(opacity);
+    top: -6px;
     transform: translateX(-50%) translateY(-100%);
-    @include border-style();
-    border: 2px solid $primary;
   }
 }
 
 // Popover positioning: left, right, top, bottom
 [popover-left] {
-  &:before {
+  &::before {
     left: 0;
-    top: 50%;
     margin-left: -12px;
+    top: 50%;
     transform: translateY(-50%) rotate(-90deg);
   }
 
-  &:after {
+  &::after {
     content: attr(popover-left);
     left: 0;
-    top: 50%;
     margin-left: -8px;
+    top: 50%;
     transform: translateX(-100%) translateY(-50%);
   }
 }
 
 [popover-right] {
-  &:before {
+  &::before {
     left: 100%;
-    top: 50%;
     margin-left: 1px;
+    top: 50%;
     transform: translatey(-50%) rotate(90deg);
   }
 
-  &:after {
+  &::after {
     content: attr(popover-right);
     left: 100%;
-    top: 50%;
     margin-left: 8px;
+    top: 50%;
     transform: translateX(0%) translateY(-50%);
   }
 }
 
 [popover-top] {
-  &:before {
+  &::before {
     left: 50%;
   }
 
-  &:after {
+  &::after {
     content: attr(popover-top);
     left: 50%;
   }
 }
 
 [popover-bottom] {
-  &:before {
-    top:100%;
+  &::before {
     margin-top: 8px;
+    top: 100%;
     transform: translateX(-50%) translatey(-100%) rotate(-180deg);
   }
 
-  &:after {
+  &::after {
     content: attr(popover-bottom);
-    top: 100%;
     margin-top: 8px;
+    top: 100%;
     transform: translateX(-50%) translateY(0%);
   }
 }
diff --git a/src/components/_tabs.scss b/src/components/_tabs.scss
index 49b5c4a..1d8fb84 100644
--- a/src/components/_tabs.scss
+++ b/src/components/_tabs.scss
@@ -8,24 +8,24 @@
     display: none;
 
     &:checked+label {
-      color: $primary;
       border-bottom: solid 3px $secondary;
+      color: $primary;
     }
 
     @for $num from 1 through 5 {
-      &[id="tab#{$num}"]:checked~div[id="content#{$num}"] {
+      &[id='tab#{$num}']:checked~div[id='content#{$num}'] {
         display: block;
       }
     }
   }
 
   label {
-    display: inline-block;
-    margin: 0 0 -1px;
-    padding: 0.75rem 0.75rem;
-    font-weight: 600;
-    text-align: center;
     color: $primary-light;
+    display: inline-block;
+    font-weight: 600;
+    margin: 0 0 -1px;
+    padding: 0.75rem;
+    text-align: center;
 
     &:hover {
       color: $muted;
diff --git a/src/components/_utilities.scss b/src/components/_utilities.scss
index c6db85b..6e7125c 100644
--- a/src/components/_utilities.scss
+++ b/src/components/_utilities.scss
@@ -1,18 +1,21 @@
 $base: 1rem;
 $large: 2rem;
-$small: .5rem;
+$small: 0.5rem;
 
 .margin {
   margin: $base;
 
   &-top {
     margin-top: $base;
+
     &-large {
       margin-top: $large;
     }
+
     &-small {
       margin-top: $small;
     }
+
     &-none {
       margin-top: 0;
     }
@@ -20,12 +23,15 @@ $small: .5rem;
 
   &-right {
     margin-right: $base;
+
     &-large {
       margin-right: $large;
     }
+
     &-small {
       margin-right: $small;
     }
+
     &-none {
       margin-right: 0;
     }
@@ -33,12 +39,15 @@ $small: .5rem;
 
   &-bottom {
     margin-bottom: $base;
+
     &-large {
       margin-bottom: $large;
     }
+
     &-small {
       margin-bottom: $small;
     }
+
     &-none {
       margin-bottom: 0;
     }
@@ -46,12 +55,15 @@ $small: .5rem;
 
   &-left {
     margin-left: $base;
+
     &-large {
       margin-left: $large;
     }
+
     &-small {
       margin-left: $small;
     }
+
     &-none {
       margin-left: 0;
     }
@@ -60,9 +72,11 @@ $small: .5rem;
   &-large {
     margin: $large;
   }
+
   &-small {
     margin: $small;
   }
+
   &-none {
     margin: 0;
   }
@@ -73,12 +87,15 @@ $small: .5rem;
 
   &-top {
     padding-top: $base;
+
     &-large {
       padding-top: $large;
     }
+
     &-small {
       padding-top: $small;
     }
+
     &-none {
       padding-top: 0;
     }
@@ -86,12 +103,15 @@ $small: .5rem;
 
   &-right {
     padding-right: $base;
+
     &-large {
       padding-right: $large;
     }
+
     &-small {
       padding-right: $small;
     }
+
     &-none {
       padding-right: 0;
     }
@@ -99,12 +119,15 @@ $small: .5rem;
 
   &-bottom {
     padding-bottom: $base;
+
     &-large {
       padding-bottom: $large;
     }
+
     &-small {
       padding-bottom: $small;
     }
+
     &-none {
       padding-bottom: 0;
     }
@@ -112,12 +135,15 @@ $small: .5rem;
 
   &-left {
     padding-left: $base;
+
     &-large {
       padding-left: $large;
     }
+
     &-small {
       padding-left: $small;
     }
+
     &-none {
       padding-left: 0;
     }
diff --git a/src/content/_code.scss b/src/content/_code.scss
index 44a6f7c..4ed79cd 100644
--- a/src/content/_code.scss
+++ b/src/content/_code.scss
@@ -1,37 +1,39 @@
 code {
-  padding: 2px 4px;
-  font-size: 80%;
-  color: $secondary;
   background-color: lighten($primary, 70%);
   border-radius: 3px;
-}
-kbd {
-  padding: 2px 4px;
+  color: $secondary;
   font-size: 80%;
-  color: $white;
+  padding: 2px 4px;
+}
+
+kbd {
   background-color: $primary;
   border-radius: 3px;
-}
-pre {
-  display: block;
-  padding: 1em;
+  color: $white;
   font-size: 80%;
-  line-height: 1.5;
-  color: $primary;
-  word-break: break-all;
-  word-wrap: break-word;
+  padding: 2px 4px;
+}
+
+pre {
   background-color: lighten($primary, 73%);
   border: 1px solid lighten($primary, 50%);
   border-radius: 3px;
+  color: $primary;
+  display: block;
+  font-size: 80%;
+  line-height: 1.5;
   overflow-x: auto;
+  padding: 1em;
   white-space: pre;
+  word-break: break-all;
+  word-wrap: break-word;
 
   code {
-    color: inherit;
     background: transparent;
+    color: inherit;
     display: block;
     font-size: inherit;
     padding: initial;
-    white-space:pre;
+    white-space: pre;
   }
 }
diff --git a/src/content/_fonts.scss b/src/content/_fonts.scss
index ec00b7c..d0f8680 100644
--- a/src/content/_fonts.scss
+++ b/src/content/_fonts.scss
@@ -1,39 +1,67 @@
 html {
-  font-size: $global-font-size;
-  font-family: $body-font, sans-serif;
   color: $font-color;
+  font-family: $body-font, sans-serif;
+  font-size: $global-font-size;
 }
-p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option {
+
+p,
+a,
+button,
+table,
+thead,
+tbody,
+th,
+tr,
+td,
+input,
+textarea,
+select,
+option {
   font-family: $body-font, sans-serif;
 }
-h1, h2, h3, h4, h5, h6 {
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: $header-font, sans-serif;
   font-weight: normal;
 }
+
 h1 {
   font-size: 4rem;
 }
+
 h2 {
   font-size: 3rem;
 }
+
 h3 {
   font-size: 2rem;
 }
+
 h4 {
   font-size: 1.5rem;
 }
+
 h5 {
   font-size: 1rem;
 }
+
 h6 {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
+
 .text-left {
   text-align: left;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-right {
   text-align: right;
 }
diff --git a/src/content/_images.scss b/src/content/_images.scss
index 31caa9e..27e57a9 100644
--- a/src/content/_images.scss
+++ b/src/content/_images.scss
@@ -1,24 +1,24 @@
 img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  border: 2px solid $primary;
   @include border-style();
+  border: 2px solid $primary;
+  display: block;
+  height: auto;
+  max-width: 100%;
 
   &.float-left {
     float: left;
-    margin: 1rem 1rem 1rem 0rem;
+    margin: 1rem 1rem 1rem 0;
   }
 
   &.float-right {
     float: right;
-    margin: 1rem 0rem 1rem 1rem;
+    margin: 1rem 0 1rem 1rem;
   }
 
   &.no-responsive {
-    max-width: initial;
-    height: initial;
     display: initial;
+    height: initial;
+    max-width: initial;
   }
 
   &.no-border {
diff --git a/src/content/_lists.scss b/src/content/_lists.scss
index 640ec3a..0d116c1 100644
--- a/src/content/_lists.scss
+++ b/src/content/_lists.scss
@@ -1,11 +1,15 @@
 ol {
   list-style-type: decimal;
+
   ol {
     list-style-type: upper-alpha;
+
     ol {
       list-style-type: upper-roman;
+
       ol {
         list-style-type: lower-alpha;
+
         ol {
           list-style-type: lower-roman;
         }
@@ -15,28 +19,35 @@ ol {
 }
 
 ul {
+  @include li-bullet('-');
   list-style: none;
   margin-left: 0;
+
   li {
     text-indent: -7px;
-    &:before {
-      position: relative;
+
+    &::before {
       left: -7px;
+      position: relative;
     }
   }
-  @include li-bullet("-");
+
   ul {
-    @include li-bullet("+");
+    @include li-bullet('+');
+
     ul {
-      @include li-bullet("~");
+      @include li-bullet('~');
+
       ul {
-        @include li-bullet("⤍");
+        @include li-bullet('⤍');
+
         ul {
-          @include li-bullet("⁎");
+          @include li-bullet('⁎');
         }
       }
     }
   }
+
   &.inline li {
     display: inline;
     margin-left: 5px;
diff --git a/src/content/_tables.scss b/src/content/_tables.scss
index 3fe6e00..5c83324 100644
--- a/src/content/_tables.scss
+++ b/src/content/_tables.scss
@@ -1,32 +1,33 @@
 table {
   box-sizing: border-box;
-  width: 100%;
   max-width: 100%;
   overflow-x: auto;
-
-  thead tr th {
-    vertical-align: bottom;
-    text-align: left;
-    padding: 8px;
-    line-height: 1.5;
-  }
-
-  tbody tr td {
-    padding: 8px;
-    line-height: 1.5;
-    vertical-align: top;
-    border-top: 1px dashed lighten($primary, 60%);
-  }
+  width: 100%;
 
   @include resp(xsmall) {
     thead tr th {
-        padding: 2%;
+      padding: 2%;
     }
+
     tbody tr td {
-        padding: 2%;
+      padding: 2%;
     }
   }
 
+  thead tr th {
+    line-height: 1.5;
+    padding: 8px;
+    text-align: left;
+    vertical-align: bottom;
+  }
+
+  tbody tr td {
+    border-top: 1px dashed lighten($primary, 60%);
+    line-height: 1.5;
+    padding: 8px;
+    vertical-align: top;
+  }
+
   &.table-hover tbody tr:hover {
     color: $secondary;
   }
diff --git a/src/core/_config.scss b/src/core/_config.scss
index 4e1c193..0958116 100644
--- a/src/core/_config.scss
+++ b/src/core/_config.scss
@@ -6,8 +6,8 @@
 @import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
 
 // Set theme colors
-$primary: #41403E !default;
-$secondary: #0071DE !default;
+$primary: #41403e !default;
+$secondary: #0071de !default;
 
 $success: #86a361 !default;
 $warning: #ddcd45 !default;
@@ -21,29 +21,32 @@ $warning-light: lighten($warning, 30%) !default;
 $danger-light: lighten($danger, 45%) !default;
 $muted-light: lighten($muted, 35%) !default;
 
-$white-dark: rgba(black, 0.03) !default;
-$light-dark: rgba(black, 0.7) !default;
-$white: rgba(white, 1) !default;
-$main-background: rgba(white, 1) !default;
+$white-dark: rgba(#000, 0.03) !default;
+$light-dark: rgba(#000, 0.7) !default;
+$white: rgba(#fff, 1) !default;
+$main-background: rgba(#fff, 1) !default;
 
-$primary-text: #FFF !default;
+$primary-text: #fff !default;
 $secondary-text: $primary !default;
 $success-text: $primary !default;
 $warning-text: $primary !default;
 $danger-text: $primary !default;
 $muted-text: $primary !default;
 
-$shadow-color-regular: hsla(0,0,0%,.2) !default;
-$shadow-color-hover: hsla(0,0,0%,.3) !default;
+$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
+$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
 
 
 // Map to set your color names
+/* stylelint-disable */
 $colors: (primary, $primary, $primary-light, $primary-text),
          (secondary, $secondary, $secondary-light, $secondary-text),
          (success, $success, $success-light, $success-text),
          (warning, $warning, $warning-light, $warning-text),
          (danger, $danger, $danger-light, $danger-text),
          (muted, $muted, $muted-light, $muted-text);
+/* stylelint-enable */
+
 /**
   This Loop will generate the various .text- and .background- classes
   based on the $colors map above.
@@ -52,6 +55,7 @@ $colors: (primary, $primary, $primary-light, $primary-text),
   .text-#{$colorName} {
     color: $color;
   }
+
   .background-#{$colorName} {
     background-color: $color-light;
   }
@@ -84,40 +88,40 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
 */
 @mixin border-style($style: 1) {
   @if $style==1 {
+    border-bottom-left-radius: 15px 255px;
+    border-bottom-right-radius: 225px 15px;
     border-top-left-radius: 255px 15px;
     border-top-right-radius: 15px 225px;
-    border-bottom-right-radius: 225px 15px;
-    border-bottom-left-radius: 15px 255px;
   }
   @if $style==2 {
+    border-bottom-left-radius: 185px 25px;
+    border-bottom-right-radius: 20px 205px;
     border-top-left-radius: 125px 25px;
     border-top-right-radius: 10px 205px;
-    border-bottom-right-radius: 20px 205px;
-    border-bottom-left-radius: 185px 25px;
   }
   @if $style==3 {
-    border-top-left-radius: 15px 225px;
-    border-top-right-radius: 255px 15px;
     border-bottom-left-radius: 225px 15px;
     border-bottom-right-radius: 15px 255px;
+    border-top-left-radius: 15px 225px;
+    border-top-right-radius: 255px 15px;
   }
   @if $style==4 {
-    border-top-left-radius: 15px 225px;
-    border-top-right-radius: 25px 150px;
     border-bottom-left-radius: 25px 115px;
     border-bottom-right-radius: 155px 25px;
+    border-top-left-radius: 15px 225px;
+    border-top-right-radius: 25px 150px;
   }
   @if $style==5 {
-    border-top-left-radius: 250px 15px;
-    border-top-right-radius: 25px 80px;
     border-bottom-left-radius: 20px 115px;
     border-bottom-right-radius: 15px 105px;
+    border-top-left-radius: 250px 15px;
+    border-top-right-radius: 25px 80px;
   }
   @if $style==6 {
+    border-bottom-left-radius: 15px 225px;
+    border-bottom-right-radius: 20px 205px;
     border-top-left-radius: 28px 125px;
     border-top-right-radius: 100px 30px;
-    border-bottom-right-radius: 20px 205px;
-    border-bottom-left-radius: 15px 225px;
   }
 }
 
@@ -127,26 +131,27 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
   @default null
 */
 @mixin resp($max:null, $min:null) {
-  @if $max == large or $max == lg  { $max: $large-screen; }
+  @if $max == large or $max == lg { $max: $large-screen; }
   @if $max == medium or $max == md { $max: $medium-screen; }
   @if $max == small or $max == sm { $max: $small-screen; }
   @if $max == xsmall or $max == xs { $max: $xsmall-screen; }
-  @if ($min != null and $max != null) {@media only screen and (max-width: $max) and (min-width: $min) { @content; }}
-  @else if($max != null and $min == null){@media only screen and (max-width: $max) { @content; }}
-  @else if($min != null and $max == null){@media only screen and (min-width: $min) { @content; }}
-  @else { @error "no matching size found";}
+
+  @if ($min != null and $max != null) { @media only screen and (max-width: $max) and (min-width: $min) { @content; } }
+  @else if($max != null and $min == null) { @media only screen and (max-width: $max) { @content; } }
+  @else if($min != null and $max == null) { @media only screen and (min-width: $min) { @content; } }
+  @else { @error 'no matching size found';}
 }
 
 /**
   Useful helper mixins
 */
 @mixin hr-after() {
-  text-align: center;
   color: lighten($primary, 30%);
+  content: '~~~';
   display: block;
-  content: "~~~";
-  position: relative;
   font-size: 1.5rem;
+  position: relative;
+  text-align: center;
 }
 
 @mixin center-all() {
@@ -165,7 +170,7 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
 }
 
 @mixin li-bullet($char) {
-  li:before {
+  li::before {
     content: $char;
   }
 }
@@ -194,7 +199,7 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
   @param string
   @default all | 235ms | ease-in-out | 0
 */
-@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay:0s){
+@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
   -webkit-transition: $name $duration $animation $delay;
   -moz-transition: $name $duration $animation $delay;
   -o-transition: $name $duration $animation $delay;
@@ -208,8 +213,8 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
 */
 @mixin shadow($type: regular) {
   @if $type == hover {
-    box-shadow: $shadow-hover;
     @include translate(0, 2px, 0, true);
+    box-shadow: $shadow-hover;
   } @else if $type == small {
     @include transition($animation: ease);
     box-shadow: $shadow-small;
@@ -220,6 +225,6 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
     @include transition($animation: ease);
     box-shadow: $shadow-large;
   } @else {
-    @error "wrong $type. available types: small | regular | large | hover"
+    @error 'wrong $type. available types: small | regular | large | hover';
   }
 }
diff --git a/src/core/_reset.scss b/src/core/_reset.scss
index dfc72ac..d836ecb 100644
--- a/src/core/_reset.scss
+++ b/src/core/_reset.scss
@@ -1,4 +1,6 @@
 /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* stylelint-disable */
 html {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -197,3 +199,4 @@ html {
 *, *:before, *:after {
   box-sizing: inherit;
 }
+/* stylelint-enable */
diff --git a/src/layout/_container.scss b/src/layout/_container.scss
index fa90f01..39002e9 100644
--- a/src/layout/_container.scss
+++ b/src/layout/_container.scss
@@ -1,21 +1,22 @@
 .container {
-  width: 100%;
+  margin: 0 auto;
   max-width: 960px;
   position: relative;
-  margin: 0 auto;
+  width: 100%;
   @include resp(medium) {
-      width: 85%;
+    width: 85%;
   }
   @include resp(xsmall) {
-      width: 90%;
+    width: 90%;
   }
 }
+
 .section {
-  margin-top: 1rem;
   margin-bottom: 2rem;
+  margin-top: 1rem;
   word-wrap: break-word;
 
-  &:after {
+  &::after {
     @include hr-after;
   }
 }
@@ -23,25 +24,25 @@
 hr {
   border: 0;
 
-  &:after {
+  &::after {
     @include hr-after;
-    top: -.75rem;
+    top: -0.75rem;
   }
 }
 
 .paper {
-  border: 1px solid $primary-light;
   background-color: $main-background;
-  padding: 2rem;
-  margin-top: 1rem;
+  border: 1px solid $primary-light;
+  -moz-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
+  -webkit-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
+  box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
   margin-bottom: 1rem;
-  -webkit-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
-  -moz-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
-  box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
+  margin-top: 1rem;
+  padding: 2rem;
   @include resp(xs) {
+    margin-bottom: 0;
+    margin-top: 0;
     padding: 1rem;
     width: 100%;
-    margin-top: 0;
-    margin-bottom: 0;
   }
 }
diff --git a/src/layout/_flexbox.scss b/src/layout/_flexbox.scss
index c789d6c..cb75398 100644
--- a/src/layout/_flexbox.scss
+++ b/src/layout/_flexbox.scss
@@ -1,6 +1,6 @@
 $numberOfColumns: 12;
 
-@mixin create-flex-classes($colName, $breakpoint: 0px) {
+@mixin create-flex-classes($colName, $breakpoint: 0) {
   @include resp($min: $breakpoint) {
     @for $i from 1 through $numberOfColumns {
       .#{$colName}-#{$i} {
@@ -15,59 +15,65 @@ $numberOfColumns: 12;
 }
 
 .row {
-  margin-right: auto;
-  margin-left: auto;
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
   -webkit-flex-flow: row wrap;
   -ms-flex-flow: row wrap;
   flex-flow: row wrap;
   margin-bottom: 1rem;
+  margin-left: auto;
+  margin-right: auto;
 
   &.flex-right {
     -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
     -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
     justify-content: flex-end;
   }
+
   &.flex-center {
     -webkit-box-pack: center;
-    -webkit-justify-content: center;
     -ms-flex-pack: center;
+    -webkit-justify-content: center;
     justify-content: center;
   }
+
   &.flex-edges {
     -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
     justify-content: space-between;
   }
+
   &.flex-spaces {
-    -webkit-justify-content: space-around;
     -ms-flex-pack: distribute;
+    -webkit-justify-content: space-around;
     justify-content: space-around;
   }
+
   &.flex-top {
-    -webkit-box-align: start;
     -webkit-align-items: flex-start;
-    -ms-flex-align: start;
     align-items: flex-start;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
   }
+
   &.flex-middle {
-    -webkit-box-align: center;
     -webkit-align-items: center;
-    -ms-flex-align: center;
     align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
   }
+
   &.flex-bottom {
-    -webkit-box-align: end;
     -webkit-align-items: flex-end;
-    -ms-flex-align: end;
     align-items: flex-end;
+    -webkit-box-align: end;
+    -ms-flex-align: end;
   }
 }
 
@@ -80,8 +86,8 @@ $numberOfColumns: 12;
 }
 
 .col-fill {
+  flex: 1 1 0;
   width: auto;
-  flex: 1 1 0px;
 }
 
 @include create-flex-classes(col);
@@ -92,28 +98,28 @@ $numberOfColumns: 12;
 
 .align-top {
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
   align-self: flex-start;
+  -ms-flex-item-align: start;
 }
 
 .align-middle {
   -webkit-align-self: center;
+  align-self: center;
   -ms-flex-item-align: center;
   -ms-grid-row-align: center;
-  align-self: center;
 }
 
 .align-bottom {
   -webkit-align-self: flex-end;
-  -ms-flex-item-align: end;
   align-self: flex-end;
+  -ms-flex-item-align: end;
 }
 
 .container {
-  width: 100%;
+  margin: 0 auto;
   max-width: 960px;
   position: relative;
-  margin: 0 auto;
+  width: 100%;
 
   @include resp(md) {
     width: 85%;
diff --git a/src/utilities/_shadows.scss b/src/utilities/_shadows.scss
index 9a89741..6bb7850 100644
--- a/src/utilities/_shadows.scss
+++ b/src/utilities/_shadows.scss
@@ -8,6 +8,7 @@
   &.shadow-small {
     @include shadow(small);
   }
+
   &.shadow-hover {
     &:hover {
       @include shadow(hover);