diff --git a/app/styles/components/_components/_icons.scss b/app/styles/components/_components/_icons.scss
index cf3f71a3a..ebc077ed5 100644
--- a/app/styles/components/_components/_icons.scss
+++ b/app/styles/components/_components/_icons.scss
@@ -1,149 +1,147 @@
 @font-face {
-  font-family:"icons";
-  src:url("../images/icons/icons.eot");
-  src:url("../images/icons/icons.eot?#iefix") format("embedded-opentype"),
-    url("../images/icons/icons.woff2") format("woff2"),
-    url("../images/icons/icons.woff") format("woff"),
-    url("../images/icons/icons.ttf") format("truetype"),
-    url("../images/icons/icons.svg?#icons") format("svg");
-  font-weight:normal;
-  font-style:normal;
+  font-family: icons;
+  src: url(../images/icons/icons.eot);
+  src: url(../images/icons/icons.eot?#iefix) format('embedded-opentype'),
+    url(../images/icons/icons.woff2) format('woff2'),
+    url(../images/icons/icons.woff) format('woff'),
+    url(../images/icons/icons.ttf) format('truetype'),
+    url(../images/icons/icons.svg?#icons) format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
-
 .icon {
-  font-family:"icons";
-  display:inline-block;
-  vertical-align:top;
-  line-height:1;
-  font-weight:normal;
-  font-style:normal;
-  speak:none;
-  text-decoration:inherit;
-  text-transform:none;
-  text-rendering:optimizeLegibility;
-  -webkit-font-smoothing:antialiased;
-  -moz-osx-font-smoothing:grayscale;
+  font-family: 'icons';
+  display: inline-block;
+  vertical-align: top;
+  line-height: 1;
+  font-weight: normal;
+  font-style: normal;
+  speak: none;
+  text-decoration: inherit;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-
 // Icons
-$icon-bullet: "\e001";
+$icon-bullet: '\e001';
 .icon-bullet::before {
   content:"\e001";
 }
 
-$icon-chevron-down: "\e002";
+$icon-chevron-down: '\e002';
 .icon-chevron-down::before {
-  content:"\e002";
+  content: '\e002';
 }
 
-$icon-chevron-large: "\e003";
+$icon-chevron-large: '\e003';
 .icon-chevron-large::before {
-  content:"\e003";
+  content: '\e003';
 }
 
-$icon-chevron-left: "\e004";
+$icon-chevron-left: '\e004';
 .icon-chevron-left::before {
-  content:"\e004";
+  content: '\e004';
 }
 
-$icon-chevron-right: "\e005";
+$icon-chevron-right: '\e005';
 .icon-chevron-right::before {
-  content:"\e005";
+  content: '\e005';
 }
 
-$icon-chevron-up: "\e006";
+$icon-chevron-up: '\e006';
 .icon-chevron-up::before {
-  content:"\e006";
+  content: '\e006';
 }
 
-$icon-close: "\e007";
+$icon-close: '\e007';
 .icon-close::before {
-  content:"\e007";
+  content: '\e007';
 }
 
-$icon-cog: "\e008";
+$icon-cog: '\e008';
 .icon-cog::before {
-  content:"\e008";
+  content: '\e008';
 }
 
-$icon-diamond: "\e009";
+$icon-diamond: '\e009';
 .icon-diamond::before {
-  content:"\e009";
+  content: '\e009';
 }
 
-$icon-exclamation: "\e00a";
+$icon-exclamation: '\e00a';
 .icon-exclamation::before {
-  content:"\e00a";
+  content: '\e00a';
 }
 
-$icon-google-dev: "\e00b";
+$icon-google-dev: '\e00b';
 .icon-google-dev::before {
-  content:"\e00b";
+  content: '\e00b';
 }
 
-$icon-hash: "\e00c";
+$icon-hash: '\e00c';
 .icon-hash::before {
-  content:"\e00c";
+  content: '\e00c';
 }
 
-$icon-introduction-to-media: "\e00d";
+$icon-introduction-to-media: '\e00d';
 .icon-introduction-to-media::before {
-  content:"\e00d";
+  content: '\e00d';
 }
 
-$icon-lessons: "\e00e";
+$icon-lessons: '\e00e';
 .icon-lessons::before {
-  content:"\e00e";
+  content: '\e00e';
 }
 
-$icon-menu: "\e00f";
+$icon-menu: '\e00f';
 .icon-menu::before {
-  content:"\e00f";
+  content: '\e00f';
 }
 
-$icon-minus: "\e010";
+$icon-minus: '\e010';
 .icon-minus::before {
-  content:"\e010";
+  content: '\e010';
 }
 
-$icon-multi-device-layouts: "\e011";
+$icon-multi-device-layouts: '\e011';
 .icon-multi-device-layouts::before {
-  content:"\e011";
+  content: '\e011';
 }
 
-$icon-performance: "\e012";
+$icon-performance: '\e012';
 .icon-performance::before {
-  content:"\e012";
+  content: '\e012';
 }
 
-$icon-plus: "\e013";
+$icon-plus: '\e013';
 .icon-plus::before {
-  content:"\e013";
+  content: '\e013';
 }
 
-$icon-question: "\e014";
+$icon-question: '\e014';
 .icon-question::before {
-  content:"\e014";
+  content: '\e014';
 }
 
-$icon-slash: "\e015";
+$icon-slash: '\e015';
 .icon-slash::before {
-  content:"\e015";
+  content: '\e015';
 }
 
-$icon-star: "\e016";
+$icon-star: '\e016';
 .icon-star::before {
-  content:"\e016";
+  content: '\e016';
 }
 
-$icon-tick: "\e017";
+$icon-tick: '\e017';
 .icon-tick::before {
-  content:"\e017";
+  content: '\e017';
 }
 
-$icon-user-input: "\e018";
+$icon-user-input: '\e018';
 .icon-user-input::before {
-  content:"\e018";
+  content: '\e018';
 }
diff --git a/app/styles/components/_global.scss b/app/styles/components/_global.scss
index 298ae6c67..f7bc86b9d 100644
--- a/app/styles/components/_global.scss
+++ b/app/styles/components/_global.scss
@@ -10,7 +10,9 @@
   box-sizing: border-box;
 }
 
-html, body, button {
+html,
+body,
+button {
   -moz-osx-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
diff --git a/app/styles/components/_helper.scss b/app/styles/components/_helper.scss
index 66a8f3ae6..166ce380a 100644
--- a/app/styles/components/_helper.scss
+++ b/app/styles/components/_helper.scss
@@ -8,11 +8,11 @@
 .clear {
   &::before,
   &::after {
-    content:"";
-    display:table;
+    content: '';
+    display: table;
   }
   &::after {
-    clear:both;
+    clear: both;
   }
 }
 
@@ -60,7 +60,7 @@
   margin-bottom: $lineHeight;
 
   &::after {
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     width: 40%;
@@ -116,7 +116,7 @@
   }
 
   &::before {
-    content: "# ";
+    content: '# ';
     display: inline-block;
   }
 }
diff --git a/app/styles/components/_modules/_article-nav.scss b/app/styles/components/_modules/_article-nav.scss
index 30589dc79..80b29af65 100644
--- a/app/styles/components/_modules/_article-nav.scss
+++ b/app/styles/components/_modules/_article-nav.scss
@@ -9,7 +9,7 @@
   position: relative;
 
   &::before {
-    content: "";
+    content: '';
     border-left: 2px solid $colorGrayKeyline;
     height: 100%;
     position: absolute;
diff --git a/app/styles/components/_modules/_featured-spotlight.scss b/app/styles/components/_modules/_featured-spotlight.scss
index 36bdd6977..4411e05e6 100644
--- a/app/styles/components/_modules/_featured-spotlight.scss
+++ b/app/styles/components/_modules/_featured-spotlight.scss
@@ -8,8 +8,8 @@
   background: $colorGrayDark;
   color: #ffffff;
   overflow: hidden;
-  padding-bottom: $lineHeight*3 - 1;
-  margin-top: $lineHeight*2;
+  padding-bottom: $lineHeight * 3 - 1;
+  margin-top: $lineHeight * 2;
 
   p {
     padding-bottom: $lineHeight;
@@ -51,11 +51,11 @@
     @include medium {
       width: auto;
       max-width: none;
-      left: 100% + $mediumGutterWidth*2;
+      left: 100% + $mediumGutterWidth * 2;
     }
 
     @include wide {
-      left: 100% + $wideGutterWidth*2;
+      left: 100% + $wideGutterWidth * 2;
     }
   }
 }
diff --git a/app/styles/components/_modules/_guides-section.scss b/app/styles/components/_modules/_guides-section.scss
index 9dcf6d611..013738f72 100644
--- a/app/styles/components/_modules/_guides-section.scss
+++ b/app/styles/components/_modules/_guides-section.scss
@@ -1,5 +1,5 @@
 .guides-section {
   background: $colorGrayBackground;
   text-align: center;
-  padding: $lineHeight 0 $lineHeight*4;
+  padding: $lineHeight 0 $lineHeight * 4;
 }
diff --git a/app/styles/components/_modules/_highlight.scss b/app/styles/components/_modules/_highlight.scss
index 174f00ccc..47cc8ed04 100644
--- a/app/styles/components/_modules/_highlight.scss
+++ b/app/styles/components/_modules/_highlight.scss
@@ -6,13 +6,13 @@
 
 .highlight-module {
   overflow: hidden;
-  margin-top: $lineHeight*2;
+  margin-top: $lineHeight * 2;
   margin-bottom: $lineHeight;
   position: relative;
 
   &::after {
     background: $colorGrayBackground;
-    content: "";
+    content: '';
     height: 100%;
     position: absolute;
     top: 0;
@@ -31,16 +31,16 @@
 
 .highlight-module__container {
   @include container;
-  padding-bottom: $lineHeight*3;
+  padding-bottom: $lineHeight * 3;
   z-index: 1;
   @include highlight-symbol();
 
   @include medium {
-    padding-bottom: $lineHeight*2;
+    padding-bottom: $lineHeight * 2;
   }
 
   @include wide {
-    min-height: $lineHeight*8;
+    min-height: $lineHeight * 8;
   }
 }
 
@@ -91,7 +91,7 @@
 /*==========  CODE  ==========*/
 .highlight-module--code {
   overflow: visible;
-  margin-bottom: $lineHeight*2;
+  margin-bottom: $lineHeight * 2;
 
   pre {
     margin: 0;
diff --git a/app/styles/components/_modules/_next-lessons.scss b/app/styles/components/_modules/_next-lessons.scss
index 99bfe6094..b3299da0a 100644
--- a/app/styles/components/_modules/_next-lessons.scss
+++ b/app/styles/components/_modules/_next-lessons.scss
@@ -6,7 +6,7 @@
 
 .next-lessons {
   background: $colorGrayDark;
-  padding: $lineHeight $lineHeight $lineHeight*2;
+  padding: $lineHeight $lineHeight $lineHeight * 2;
   margin-top: $lineHeight;
   color: #ffffff;
   position: relative;
diff --git a/app/styles/components/_modules/_related-guides.scss b/app/styles/components/_modules/_related-guides.scss
index fb85f9271..c7890c1aa 100644
--- a/app/styles/components/_modules/_related-guides.scss
+++ b/app/styles/components/_modules/_related-guides.scss
@@ -34,7 +34,7 @@
   text-transform: uppercase;
 
   &::before {
-    content: "#";
+    content: '#';
     display: inline-block;
     padding-right: 2px;
   }
diff --git a/app/styles/components/_modules/_related-items.scss b/app/styles/components/_modules/_related-items.scss
index 58076c80e..ad021b4ef 100644
--- a/app/styles/components/_modules/_related-items.scss
+++ b/app/styles/components/_modules/_related-items.scss
@@ -17,4 +17,3 @@
   }
 
 }
-
diff --git a/app/styles/components/_pages/_styleguide.scss b/app/styles/components/_pages/_styleguide.scss
index d840082f2..a58550d43 100644
--- a/app/styles/components/_pages/_styleguide.scss
+++ b/app/styles/components/_pages/_styleguide.scss
@@ -70,7 +70,7 @@
     }
 
     &::before {
-      content: "HTML classes: ";
+      content: 'HTML classes: ';
       font-weight: 700;
     }
 
diff --git a/app/styles/components/_utils.scss b/app/styles/components/_utils.scss
index 96f435e58..35e6630e6 100644
--- a/app/styles/components/_utils.scss
+++ b/app/styles/components/_utils.scss
@@ -57,8 +57,8 @@
 
   // Defining font family
   $fontDefault: Helvetica, Arial, sans-serif !default;
-  $fontHighlight: "Roboto Condensed", Helvetica, sans-serif !default;
-  $fontIcon: "icons" !default;
+  $fontHighlight: 'Roboto Condensed', Helvetica, sans-serif !default;
+  $fontIcon: 'icons' !default;
 
   // Defining font sizes
   $fontSmall: 13px !default;
@@ -90,23 +90,23 @@
 
   @mixin media-query($media-query) {
     @if $media-query == small {
-      @media only screen and (max-width:$medium - 1) { @content; }
+      @media only screen and (max-width: $medium - 1) { @content; }
     }
 
     @if $media-query == medium {
-      @media only screen and (min-width:$medium) { @content; }
+      @media only screen and (min-width: $medium) { @content; }
     }
 
     @if $media-query == medium-only {
-      @media only screen and (min-width:$medium) and (max-width: $wide - 1) { @content; }
+      @media only screen and (min-width: $medium) and (max-width: $wide - 1) { @content; }
     }
 
     @if $media-query == wide {
-      @media only screen and (min-width:$wide) { @content; }
+      @media only screen and (min-width: $wide) { @content; }
     }
 
     @if $media-query == huge {
-      @media only screen and (min-width:$huge) { @content; }
+      @media only screen and (min-width: $huge) { @content; }
     }
   }
 
@@ -152,7 +152,7 @@
     position: relative;
 
     &::after {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
       left: 0;
@@ -330,7 +330,7 @@
   @mixin numbered-list() {
     &::before {
       counter-increment: list;
-      content: "0" counter(list);
+      content: '0' counter(list);
       color: inherit;
       font-weight: 400;
       display: inline-block;
diff --git a/app/styles/components/components.scss b/app/styles/components/components.scss
index 0af9c208b..8c68f8aa2 100644
--- a/app/styles/components/components.scss
+++ b/app/styles/components/components.scss
@@ -4,53 +4,53 @@
 *
 **/
 
-@import "_utils";
-@import "_normalize";
-@import "_global";
+@import '_utils';
+@import '_normalize';
+@import '_global';
 
 // Icons - Leave it here to otherfiles can extend if needed
-@import "_components/_icons";
+@import '_components/_icons';
 
 // Color Palette
-@import "_palette";
+@import '_palette';
 
 // Modules
-@import "_modules/_highlight";
-@import "_modules/_editorial-header";
-@import "_modules/_summary-header";
-@import "_modules/_related-guides";
-@import "_modules/_in-this-guide";
-@import "_modules/_articles-section";
-@import "_modules/_guides-section";
-@import "_modules/_page-header";
-@import "_modules/_featured-section";
-@import "_modules/_featured-spotlight";
-@import "_modules/_quote";
-@import "_modules/_article-nav";
-@import "_modules/_did-you-know";
-@import "_modules/_toc";
-@import "_modules/_next-lessons";
+@import '_modules/_highlight';
+@import '_modules/_editorial-header';
+@import '_modules/_summary-header';
+@import '_modules/_related-guides';
+@import '_modules/_in-this-guide';
+@import '_modules/_articles-section';
+@import '_modules/_guides-section';
+@import '_modules/_page-header';
+@import '_modules/_featured-section';
+@import '_modules/_featured-spotlight';
+@import '_modules/_quote';
+@import '_modules/_article-nav';
+@import '_modules/_did-you-know';
+@import '_modules/_toc';
+@import '_modules/_next-lessons';
 
 // Components
-@import "_components/_grid";
-@import "_components/_typography";
-@import "_components/_button";
-@import "_components/_list";
-@import "_components/_link";
-@import "_components/_table";
-@import "_components/_media";
-@import "_components/_breadcrumb";
-@import "_components/_subsection-title";
-@import "_components/_articles-list";
-@import "_components/_guides-list";
-@import "_components/_icon-circle";
+@import '_components/_grid';
+@import '_components/_typography';
+@import '_components/_button';
+@import '_components/_list';
+@import '_components/_link';
+@import '_components/_table';
+@import '_components/_media';
+@import '_components/_breadcrumb';
+@import '_components/_subsection-title';
+@import '_components/_articles-list';
+@import '_components/_guides-list';
+@import '_components/_icon-circle';
 
 // Themed styles
-@import "_themed";
+@import '_themed';
 
 // Pages
-@import "_pages/_styleguide";
-@import "_pages/_page-resources";
+@import '_pages/_styleguide';
+@import '_pages/_page-resources';
 
 // Make sure this is last to override anything else :)
-@import "_helper";
+@import '_helper';
diff --git a/app/styles/main.scss b/app/styles/main.scss
index e3b2ff284..f452b0cd1 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -5,13 +5,13 @@
  * Web Starter Kit team.
  *
  */
-@import "_h5bp";
+@import '_h5bp';
 
 /*
  * Visual Style Guide styles
  * Remove if you prefer to use a CSS library, like Bootstrap
  */
-@import "components/components";
+@import 'components/components';
 
 html,
 body {
@@ -23,9 +23,9 @@ body {
 
 body {
   position: relative;
-  font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
+  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
   font-weight: 300;
-  background-color: #FFFFFF;
+  background-color: #fff;
   box-sizing: border-box;
   min-height: 100%;
 }
@@ -139,7 +139,10 @@ body.open {
   backface-visibility: hidden;
 }
 
-.base, p, ul, ol {
+.base,
+p,
+ul,
+ol {
   font-size: 19px;
 }
 
@@ -162,7 +165,9 @@ body.open {
           transform: translate(0, 0);
 }
 
-.app-bar, .navdrawer-container.opened, main {
+.app-bar,
+.navdrawer-container.opened,
+main {
   -webkit-transition: -webkit-transform 0.3s ease-out;
           transition: transform 0.3s ease-out;
 }