From 6ede38abfc57197050726367bd116454c06e544a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 6 May 2017 18:03:40 +0200
Subject: [PATCH] dev tweaks

- start linting scss based on Airbnb style guide
- add includePaths to css & js tasks
---
 .scss-lint.yml                                | 45 ++++++++++
 README.md                                     | 12 +++
 _src/_assets/javascripts/bigchain.js          |  4 +-
 _src/_assets/javascripts/bigchain/forms.js    |  2 +-
 .../javascripts/bigchain/newsletter.js        |  2 +-
 .../javascripts/bigchain/testimonials.js      |  2 +-
 _src/_assets/javascripts/page-community.js    |  2 +-
 _src/_assets/styles/_page-404.scss            | 12 +--
 _src/_assets/styles/_page-cla.scss            |  1 +
 _src/_assets/styles/_page-community.scss      | 16 ++--
 _src/_assets/styles/_page-contact.scss        |  2 +-
 _src/_assets/styles/_page-features.scss       |  2 +-
 _src/_assets/styles/_page-front.scss          |  6 +-
 _src/_assets/styles/_page-styleguide.scss     | 26 +++---
 _src/_assets/styles/_page-usecases.scss       |  2 +-
 _src/_assets/styles/_page-whitepaper.scss     |  4 -
 .../styles/{bigchain => }/_sections.scss      | 21 +++--
 .../styles/_sections/_section-partners.scss   |  7 +-
 _src/_assets/styles/bigchain.scss             | 90 +++++++++----------
 _src/_assets/styles/bigchain/_alerts.scss     | 15 ++--
 _src/_assets/styles/bigchain/_animations.scss |  8 +-
 _src/_assets/styles/bigchain/_buttons.scss    | 26 ++++--
 _src/_assets/styles/bigchain/_code.scss       |  3 +-
 _src/_assets/styles/bigchain/_mixins.scss     |  7 +-
 .../styles/bigchain/_mixins/_typography.scss  | 35 ++++++++
 _src/_assets/styles/bigchain/_typography.scss | 56 +++++-------
 _src/_assets/styles/bigchain/_variables.scss  | 20 ++---
 gulpfile.babel.js                             | 10 ++-
 28 files changed, 265 insertions(+), 173 deletions(-)
 create mode 100644 .scss-lint.yml
 rename _src/_assets/styles/{bigchain => }/_sections.scss (84%)
 create mode 100644 _src/_assets/styles/bigchain/_mixins/_typography.scss

diff --git a/.scss-lint.yml b/.scss-lint.yml
new file mode 100644
index 0000000..ad2d037
--- /dev/null
+++ b/.scss-lint.yml
@@ -0,0 +1,45 @@
+#
+# https://github.com/airbnb/css/blob/master/.scss-lint.yml
+#
+severity: error
+
+linters:
+
+  BorderZero:
+    enabled: true
+    convention: zero
+
+  BemDepth:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: false
+
+  ExtendDirective:
+    enabled: true
+
+  LeadingZero:
+    enabled: false
+
+  NameFormat:
+    enabled: true
+
+  PrivateNamingConvention:
+    enabled: true
+    prefix: _
+
+  PropertySortOrder:
+    enabled: false
+
+  QualifyingElement:
+    enabled: false
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_BEM
+    class_convention: ^(?!js-).*
+    class_convention_explanation: should not be written in the form js-*
+
+  Indentation:
+    enabled: true
+    width: 4
diff --git a/README.md b/README.md
index e597eea..1a50638 100644
--- a/README.md
+++ b/README.md
@@ -107,3 +107,15 @@ gulp build --production
 # deploy contents of /_dist to live
 gulp deploy --live
 ```
+
+## Coding conventions
+
+### (S)CSS
+
+Follows [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css). Lint with [scss-lint](https://github.com/brigade/scss-lint).
+
+Rule exceptions:
+
+- indentation: 4 spaces
+- use single quotes
+- allow single line rule sets
diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js
index ad1a81e..c1f7725 100644
--- a/_src/_assets/javascripts/bigchain.js
+++ b/_src/_assets/javascripts/bigchain.js
@@ -1,6 +1,6 @@
 
-//=include ../../../node_modules/svg4everybody/dist/svg4everybody.js
-//=include ../../../node_modules/jquery/dist/jquery.js
+//=include svg4everybody/dist/svg4everybody.js
+//=include jquery/dist/jquery.js
 
 //=include bigchain/analytics.js
 //=include bigchain/forms.js
diff --git a/_src/_assets/javascripts/bigchain/forms.js b/_src/_assets/javascripts/bigchain/forms.js
index aff50f0..1d4b084 100644
--- a/_src/_assets/javascripts/bigchain/forms.js
+++ b/_src/_assets/javascripts/bigchain/forms.js
@@ -1,5 +1,5 @@
 
-//=include ../../../../node_modules/parsleyjs/dist/parsley.js
+//=include parsleyjs/dist/parsley.js
 
 var Forms = (function(w, d, $) {
 
diff --git a/_src/_assets/javascripts/bigchain/newsletter.js b/_src/_assets/javascripts/bigchain/newsletter.js
index ab8c7b1..16fffa2 100644
--- a/_src/_assets/javascripts/bigchain/newsletter.js
+++ b/_src/_assets/javascripts/bigchain/newsletter.js
@@ -1,5 +1,5 @@
 
-//=include ../vendor/jquery.ajaxchimp.js
+//=include vendor/jquery.ajaxchimp.js
 
 var Newsletter = (function(w, d, $) {
 
diff --git a/_src/_assets/javascripts/bigchain/testimonials.js b/_src/_assets/javascripts/bigchain/testimonials.js
index d30115d..d06fa19 100644
--- a/_src/_assets/javascripts/bigchain/testimonials.js
+++ b/_src/_assets/javascripts/bigchain/testimonials.js
@@ -1,5 +1,5 @@
 
-//=include ../../../../node_modules/is-in-viewport/lib/isInViewport.js
+//=include is-in-viewport/lib/isInViewport.js
 
 var Testimonials = (function(w, d, $) {
 
diff --git a/_src/_assets/javascripts/page-community.js b/_src/_assets/javascripts/page-community.js
index a77f41a..92b2473 100644
--- a/_src/_assets/javascripts/page-community.js
+++ b/_src/_assets/javascripts/page-community.js
@@ -1,5 +1,5 @@
 
-//=include ../../../node_modules/is-in-viewport/lib/isInViewport.js
+//=include is-in-viewport/lib/isInViewport.js
 //=include bigchain/testimonials.js
 
 jQuery(function($) {
diff --git a/_src/_assets/styles/_page-404.scss b/_src/_assets/styles/_page-404.scss
index a30fbcd..b3c08cb 100644
--- a/_src/_assets/styles/_page-404.scss
+++ b/_src/_assets/styles/_page-404.scss
@@ -4,16 +4,16 @@
     background-image: url('/assets/img/fail-cat.gif');
     background-size: cover;
     background-position: center center;
-    @extend .color-overlay;
+    @include color-overlay;
 
-    &:before {
+    &::before {
         z-index: -1;
     }
 
     .header {
         background: none;
 
-        &:before { display: none; }
+        &::before { display: none; }
     }
 
     .header__title {
@@ -21,12 +21,12 @@
         padding-bottom: 0;
 
         // the bottom line
-        &:after {
-            content: "";
+        &::after {
+            content: '';
             height: 1px;
             width: 5rem;
             display: block;
-            margin: ($spacer * 2) auto 0 auto;
+            margin: ($spacer * 2) auto 0;
             background: $brand-main-gray-light;
         }
     }
diff --git a/_src/_assets/styles/_page-cla.scss b/_src/_assets/styles/_page-cla.scss
index 0ac2221..323cabb 100644
--- a/_src/_assets/styles/_page-cla.scss
+++ b/_src/_assets/styles/_page-cla.scss
@@ -12,6 +12,7 @@
             }
         }
     }
+
     .grid__col {
         @media ($screen-sm) {
             flex-basis: 48%;
diff --git a/_src/_assets/styles/_page-community.scss b/_src/_assets/styles/_page-community.scss
index 078741e..dc5ed71 100644
--- a/_src/_assets/styles/_page-community.scss
+++ b/_src/_assets/styles/_page-community.scss
@@ -10,7 +10,7 @@
 }
 
 .section-community {
-    @extend .text-center;
+    text-align: center;
     position: relative;
     // make room for wrigely
     padding-bottom: 200px;
@@ -31,7 +31,7 @@
     .social-link {
         &,
         .icon {
-            @extend .transition;
+            @include transition;
         }
 
         box-shadow: none;
@@ -131,19 +131,19 @@
 }
 
 @keyframes wrigley-wink {
-    0%   { transform: rotate(0); }
-    25%, 50%  { transform: rotate(-20deg); }
+    0% { transform: rotate(0); }
+    25%, 50% { transform: rotate(-20deg); }
     30%, 100% { transform: rotate(0); }
 }
 
 @keyframes wrigley-head-nod {
-    0%   { transform: rotate(0); }
-    25%, 50%  { transform: rotate(-2deg); }
+    0% { transform: rotate(0); }
+    25%, 50% { transform: rotate(-2deg); }
     30%, 100% { transform: rotate(0); }
 }
 
 @keyframes wrigley-blink {
-    0%   { transform: scaleY(1); }
-    50%  { transform: scaleY(0); }
+    0% { transform: scaleY(1); }
+    50% { transform: scaleY(0); }
     100% { transform: scaleY(1); }
 }
diff --git a/_src/_assets/styles/_page-contact.scss b/_src/_assets/styles/_page-contact.scss
index 1d64d5a..aed5ad5 100644
--- a/_src/_assets/styles/_page-contact.scss
+++ b/_src/_assets/styles/_page-contact.scss
@@ -5,7 +5,7 @@
 //
 
 .contactlist {
-    p { margin-bottom: 0 }
+    p { margin-bottom: 0; }
 
     .p-adr  { margin-bottom: $spacer; }
     .social { margin-top: $spacer; }
diff --git a/_src/_assets/styles/_page-features.scss b/_src/_assets/styles/_page-features.scss
index e3c9501..4467a55 100644
--- a/_src/_assets/styles/_page-features.scss
+++ b/_src/_assets/styles/_page-features.scss
@@ -40,7 +40,7 @@
 }
 
 .feture_roadmap {
-  padding: 1rem 0 0 0;
+    padding: 1rem 0 0;
 }
 
 .feature__title__comingsoon {
diff --git a/_src/_assets/styles/_page-front.scss b/_src/_assets/styles/_page-front.scss
index a14db63..ad29655 100644
--- a/_src/_assets/styles/_page-front.scss
+++ b/_src/_assets/styles/_page-front.scss
@@ -18,8 +18,8 @@
 
 .section-intro__main {
     @extend .text-center;
-    margin-top: $spacer;
     margin-bottom: $spacer * 4;
+    margin-top: $spacer;
 
     h3 {
         @extend .h4;
@@ -29,7 +29,7 @@
     }
 
     sub {
-        font-size: 0.85rem;
+        font-size: .85rem;
     }
 
     .icon {
@@ -39,8 +39,6 @@
     }
 }
 
-.section-intro__detail {}
-
 .section-quickstart__title {
     @extend .h3;
     margin-top: 0;
diff --git a/_src/_assets/styles/_page-styleguide.scss b/_src/_assets/styles/_page-styleguide.scss
index 5538bb3..fcd917d 100644
--- a/_src/_assets/styles/_page-styleguide.scss
+++ b/_src/_assets/styles/_page-styleguide.scss
@@ -21,7 +21,7 @@
     text-align: center;
 
     &,
-    .color-meta { @extend .transition; }
+    .color-meta { @include transition; }
 
     .color-meta {
         display: block;
@@ -48,16 +48,16 @@
 
 
 // colors
-.brand-main-blue         { background: $brand-main-blue }
-.brand-main-blue-light   { background: $brand-main-blue-light }
-.brand-main-blue-dark    { background: $brand-main-blue-dark }
-.brand-main-gray         { background: $brand-main-gray }
-.brand-main-green        { background: $brand-main-green }
-.brand-main-violet       { background: $brand-main-violet }
-.brand-main-gray-light   { background: $brand-main-gray-light }
-.brand-main-gray-lighter { background: $brand-main-gray-lighter }
+.brand-main-blue         { background: $brand-main-blue; }
+.brand-main-blue-light   { background: $brand-main-blue-light; }
+.brand-main-blue-dark    { background: $brand-main-blue-dark; }
+.brand-main-gray         { background: $brand-main-gray; }
+.brand-main-green        { background: $brand-main-green; }
+.brand-main-violet       { background: $brand-main-violet; }
+.brand-main-gray-light   { background: $brand-main-gray-light; }
+.brand-main-gray-lighter { background: $brand-main-gray-lighter; }
 
-.brand-success           { background: $brand-success }
-.brand-info              { background: $brand-info }
-.brand-warning           { background: $brand-warning }
-.brand-danger            { background: $brand-danger }
+.brand-success           { background: $brand-success; }
+.brand-info              { background: $brand-info; }
+.brand-warning           { background: $brand-warning; }
+.brand-danger            { background: $brand-danger; }
diff --git a/_src/_assets/styles/_page-usecases.scss b/_src/_assets/styles/_page-usecases.scss
index d2a1430..1e9a3e9 100644
--- a/_src/_assets/styles/_page-usecases.scss
+++ b/_src/_assets/styles/_page-usecases.scss
@@ -45,7 +45,7 @@
         margin-top: 0;
         margin-bottom: $spacer * 2;
 
-        &:after {
+        &::after {
             margin-left: 0;
         }
     }
diff --git a/_src/_assets/styles/_page-whitepaper.scss b/_src/_assets/styles/_page-whitepaper.scss
index d9dd572..3551247 100644
--- a/_src/_assets/styles/_page-whitepaper.scss
+++ b/_src/_assets/styles/_page-whitepaper.scss
@@ -6,7 +6,3 @@
         > p:nth-child(3) { text-align: center; }
     }
 }
-
-.section-whitepaper-download {
-
-}
diff --git a/_src/_assets/styles/bigchain/_sections.scss b/_src/_assets/styles/_sections.scss
similarity index 84%
rename from _src/_assets/styles/bigchain/_sections.scss
rename to _src/_assets/styles/_sections.scss
index 5a4f96a..b474cda 100644
--- a/_src/_assets/styles/bigchain/_sections.scss
+++ b/_src/_assets/styles/_sections.scss
@@ -3,7 +3,7 @@
     padding-top: ($spacer * 3);
     padding-bottom: ($spacer * 3);
 
-    &:last-child { border-bottom: none; }
+    &:last-child { border-bottom: 0; }
 
     // use this so animated elements coming in from outside of screen
     // don't affect layout
@@ -40,12 +40,12 @@
     margin-bottom: ($spacer * 2);
 
     // the bottom line
-    &:after {
-        content: "";
+    &::after {
+        content: '';
         height: 2px;
         width: 3rem;
         display: block;
-        margin: ($spacer * 2) auto 0 auto;
+        margin: ($spacer * 2) auto 0;
         background: $gray-light;
     }
 }
@@ -100,7 +100,7 @@
 // Photo background
 //
 .background--photo {
-    @extend .color-overlay;
+    @include color-overlay;
 
     // background
     background: url('../img/hero-berlin.jpg') no-repeat top center;
@@ -112,7 +112,7 @@
     }
 
     .section-title {
-        &:after {
+        &::after {
             background: rgba($brand-main-blue-light, .5);
         }
     }
@@ -123,3 +123,12 @@
         color: #fff;
     }
 }
+
+
+//
+// Specific sections
+//
+@import '_sections/section-cta-whitepaper';
+@import '_sections/section-cta-features';
+@import '_sections/section-cta-community';
+@import '_sections/section-partners';
diff --git a/_src/_assets/styles/_sections/_section-partners.scss b/_src/_assets/styles/_sections/_section-partners.scss
index b017399..69d22c2 100644
--- a/_src/_assets/styles/_sections/_section-partners.scss
+++ b/_src/_assets/styles/_sections/_section-partners.scss
@@ -2,11 +2,6 @@
     .grid__col {
         padding-right: $gutter-space;
     }
-    @media ($screen-md) {
-        .grid__col {
-
-        }
-    }
 }
 
 .partner {
@@ -32,7 +27,7 @@
 // All logos
 //
 .partner__logo {
-    @extend .transition;
+    @include transition;
     fill: $brand-main-blue-light;
     fill-opacity: .6;
     max-width: 100%;
diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss
index c2c58bd..455d9b3 100644
--- a/_src/_assets/styles/bigchain.scss
+++ b/_src/_assets/styles/bigchain.scss
@@ -5,60 +5,56 @@
 //
 
 // Normalize all the things
-@import '../../../node_modules/normalize-css/normalize';
-@import '../../../node_modules/normalize-opentype.css/normalize-opentype.scss';
+@import 'normalize-css/normalize';
+@import 'normalize-opentype.css/normalize-opentype.scss';
 
 // Variables & Mixins
-@import 'bigchain/_variables';
-@import 'bigchain/_mixins';
+@import 'bigchain/variables';
+@import 'bigchain/mixins';
+@import 'bigchain/animations';
 
 // Components
-@import 'bigchain/_typography';
-@import 'bigchain/_animations';
-@import 'bigchain/_tables';
-@import 'bigchain/_buttons';
-@import 'bigchain/_forms';
-@import 'bigchain/_input-group';
-@import 'bigchain/_logo';
-@import 'bigchain/_icons';
-@import 'bigchain/_grid';
-@import 'bigchain/_media';
-@import 'bigchain/_sections';
-@import 'bigchain/_menus';
-@import 'bigchain/_tabs';
-@import 'bigchain/_alerts';
-@import 'bigchain/_code';
-@import 'bigchain/_syntax';
-@import 'bigchain/_hero';
-@import 'bigchain/_header';
-@import 'bigchain/_footer';
-@import 'bigchain/_team';
-@import 'bigchain/_timeline';
-@import 'bigchain/_terminal';
-@import 'bigchain/_utilities';
+@import 'bigchain/typography';
+@import 'bigchain/tables';
+@import 'bigchain/buttons';
+@import 'bigchain/forms';
+@import 'bigchain/input-group';
+@import 'bigchain/logo';
+@import 'bigchain/icons';
+@import 'bigchain/grid';
+@import 'bigchain/media';
+@import 'bigchain/menus';
+@import 'bigchain/tabs';
+@import 'bigchain/alerts';
+@import 'bigchain/code';
+@import 'bigchain/syntax';
+@import 'bigchain/hero';
+@import 'bigchain/header';
+@import 'bigchain/footer';
+@import 'bigchain/team';
+@import 'bigchain/timeline';
+@import 'bigchain/terminal';
+@import 'bigchain/utilities';
 
 // Content types
-@import 'bigchain/_content-page';
-@import 'bigchain/_comments';
-@import 'bigchain/_toc';
-@import 'bigchain/_newsletter';
-@import 'bigchain/_testimonials';
+@import 'bigchain/content-page';
+@import 'bigchain/comments';
+@import 'bigchain/toc';
+@import 'bigchain/newsletter';
+@import 'bigchain/testimonials';
 
 // Section specific styles
-@import '_sections/section-cta-whitepaper';
-@import '_sections/section-cta-features';
-@import '_sections/section-cta-community';
-@import '_sections/section-partners';
+@import 'sections';
 
 // specific page styles
-@import '_page-front';
-@import '_page-whitepaper';
-@import '_page-404';
-@import '_page-styleguide';
-@import '_page-about';
-@import '_page-features';
-@import '_page-usecases';
-@import '_page-community';
-@import '_page-contact';
-@import '_page-cla';
-@import '_page-partners';
+@import 'page-front';
+@import 'page-whitepaper';
+@import 'page-404';
+@import 'page-styleguide';
+@import 'page-about';
+@import 'page-features';
+@import 'page-usecases';
+@import 'page-community';
+@import 'page-contact';
+@import 'page-cla';
+@import 'page-partners';
diff --git a/_src/_assets/styles/bigchain/_alerts.scss b/_src/_assets/styles/bigchain/_alerts.scss
index 628aaca..e0059fe 100644
--- a/_src/_assets/styles/bigchain/_alerts.scss
+++ b/_src/_assets/styles/bigchain/_alerts.scss
@@ -18,7 +18,7 @@
         margin-top: 5px;
     }
 
-    > p:last-child { margin-bottom: 0 }
+    > p:last-child { margin-bottom: 0; }
 }
 
 .alert__icon {
@@ -26,19 +26,11 @@
     width: 100%;
     height: 2rem;
     stroke-width: 3;
-    margin: 0 auto $spacer auto;
+    margin: 0 auto $spacer;
     border-bottom: 1px solid transparent;
     padding-bottom: $spacer;
 }
 
-.alert__title {
-
-}
-
-.alert__link {
-
-}
-
 
 //
 // Alternate styles
@@ -46,12 +38,15 @@
 .alert-success {
     @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
 }
+
 .alert-info {
     @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
 }
+
 .alert-warning {
     @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
 }
+
 .alert-danger {
     @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
 }
diff --git a/_src/_assets/styles/bigchain/_animations.scss b/_src/_assets/styles/bigchain/_animations.scss
index cb5897d..faa5e2f 100644
--- a/_src/_assets/styles/bigchain/_animations.scss
+++ b/_src/_assets/styles/bigchain/_animations.scss
@@ -1,6 +1,6 @@
 
 $timing-default:        ease-out;
-$timing-bounce:         cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified: http://cubic-bezier.com/#0,1.02,.32,1.34
+$timing-bounce:         cubic-bezier(0, 1.02, .32, 1.34); // easeOutBack, modified: http://cubic-bezier.com/#0,1.02,.32,1.34
 
 //
 // Transitions
@@ -39,9 +39,10 @@ $timing-bounce:         cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
 }
 
 @keyframes fade-in {
-    0%   {
+    0% {
         opacity: 0;
     }
+
     100% {
         opacity: 1;
     }
@@ -61,10 +62,11 @@ $timing-bounce:         cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
 }
 
 @keyframes slide-in-from-bottom {
-    0%   {
+    0% {
         opacity: 0;
         transform: translateY(50px);
     }
+
     100% {
         opacity: 1;
         transform: translateY(0);
diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss
index d7b481e..2d8606f 100644
--- a/_src/_assets/styles/bigchain/_buttons.scss
+++ b/_src/_assets/styles/bigchain/_buttons.scss
@@ -5,7 +5,7 @@
 //
 
 .btn {
-    @extend .transition;
+    @include transition;
     display: inline-block;
     font-family: $btn-font-family;
     font-weight: $btn-font-weight;
@@ -14,7 +14,7 @@
     vertical-align: middle;
     cursor: pointer;
     user-select: none;
-    border: none;
+    border: 0;
     box-shadow: none;
     @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
 
@@ -31,6 +31,7 @@
         transform: translateY(0);
         box-shadow: 0 1px 2px rgba($brand-main-blue-dark, .3);
     }
+
     &.disabled,
     &:disabled {
         opacity: 0.45;
@@ -59,24 +60,31 @@ fieldset[disabled] a.btn {
 .btn-primary {
     @include button-variant($btn-primary-color, $btn-primary-bg);
 }
+
 .btn-secondary {
     @include button-variant($btn-secondary-color, $btn-secondary-bg);
 }
+
 .btn-blue {
     @include button-variant($btn-blue-color, $btn-blue-bg);
 }
+
 .btn-violet {
     @include button-variant($btn-violet-color, $btn-violet-bg);
 }
+
 .btn-info {
     @include button-variant($btn-info-color, $btn-info-bg);
 }
+
 .btn-success {
     @include button-variant($btn-success-color, $btn-success-bg);
 }
+
 .btn-warning {
     @include button-variant($btn-warning-color, $btn-warning-bg);
 }
+
 .btn-danger {
     @include button-variant($btn-danger-color, $btn-danger-bg);
 }
@@ -90,6 +98,7 @@ fieldset[disabled] a.btn {
     font-weight: normal;
     color: $link-color;
     border-radius: 0;
+
     &,
     &:active,
     &.active,
@@ -97,6 +106,7 @@ fieldset[disabled] a.btn {
         background-color: transparent;
         box-shadow: none;
     }
+
     &,
     &:hover,
     &:focus,
@@ -105,8 +115,6 @@ fieldset[disabled] a.btn {
         box-shadow: none;
         background: none;
     }
-    &:disabled {
-    }
 }
 
 
@@ -122,6 +130,7 @@ fieldset[disabled] a.btn {
         height: $font-size-lg;
     }
 }
+
 .btn-sm {
     // line-height: ensure proper height of button next to small input
     @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
@@ -131,6 +140,7 @@ fieldset[disabled] a.btn {
         height: $font-size-sm;
     }
 }
+
 .btn-xs {
     // line-height: ensure proper height of button next to small input
     @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $line-height-xs, $btn-border-radius-xs);
@@ -147,12 +157,12 @@ fieldset[disabled] a.btn {
 .btn-block {
     display: block;
     width: 100%;
+
+    + .btn-block {
+        margin-top: 5px;
+    }
 }
 
-// Vertically space out multiple block buttons
-.btn-block + .btn-block {
-    margin-top: 5px;
-}
 
 // Specificity overrides
 input[type="submit"],
diff --git a/_src/_assets/styles/bigchain/_code.scss b/_src/_assets/styles/bigchain/_code.scss
index ee1b825..6acf75d 100644
--- a/_src/_assets/styles/bigchain/_code.scss
+++ b/_src/_assets/styles/bigchain/_code.scss
@@ -26,7 +26,8 @@ kbd {
     color: $kbd-color;
     background-color: $kbd-bg;
     border-radius: $border-radius-sm;
-    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
+
     kbd {
         padding: 0;
         font-size: 100%;
diff --git a/_src/_assets/styles/bigchain/_mixins.scss b/_src/_assets/styles/bigchain/_mixins.scss
index 8fa5f53..bf2dab6 100644
--- a/_src/_assets/styles/bigchain/_mixins.scss
+++ b/_src/_assets/styles/bigchain/_mixins.scss
@@ -4,6 +4,7 @@
 // bigchain.io
 //
 
-@import "_mixins/_buttons";
-@import "_mixins/_alerts";
-@import "_mixins/_color-overlay";
+@import '_mixins/typography';
+@import '_mixins/buttons';
+@import '_mixins/alerts';
+@import '_mixins/color-overlay';
diff --git a/_src/_assets/styles/bigchain/_mixins/_typography.scss b/_src/_assets/styles/bigchain/_mixins/_typography.scss
new file mode 100644
index 0000000..5f9f869
--- /dev/null
+++ b/_src/_assets/styles/bigchain/_mixins/_typography.scss
@@ -0,0 +1,35 @@
+@mixin text-bold {
+    font-weight: $font-weight-bold;
+}
+
+@mixin text-light {
+    font-weight: $font-weight-light;
+}
+
+@mixin text-large {
+    font-size: floor((100% * $font-size-lg / $font-size-base));
+}
+
+@mixin text-small {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-normal;
+}
+
+@mixin text-mini {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-normal;
+}
+
+@mixin text-lead {
+    font-size: $font-size-lg;
+    color: $headings-color;
+    line-height: $line-height-lg;
+}
+
+@mixin text-dimmed {
+    color: $gray-light;
+}
+
+.text-dimmed {
+    @include text-dimmed;
+}
diff --git a/_src/_assets/styles/bigchain/_typography.scss b/_src/_assets/styles/bigchain/_typography.scss
index 8edcd6d..8411570 100644
--- a/_src/_assets/styles/bigchain/_typography.scss
+++ b/_src/_assets/styles/bigchain/_typography.scss
@@ -7,7 +7,7 @@
 // Body reset
 html {
     font-size: $font-size-root;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba($brand-main-blue-dark, 0);
 
     @media ($screen-lg) {
         font-size: $font-size-root-lg;
@@ -33,7 +33,6 @@ body {
     // Safari/Firefox when animations are running
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -moz-font-feature-settings: 'liga', 'kern';
 
     // remove old style numerals
     font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
@@ -50,7 +49,7 @@ body {
 .section,
 .content {
     .row {
-        @extend .transition;
+        @include transition;
 
         .wf-loading & {
             opacity: 0;
@@ -79,7 +78,7 @@ textarea {
 // Links
 //
 a {
-    @extend .transition;
+    @include transition;
     color: $link-color;
     text-decoration: none;
     box-shadow: inset 0 -2px 0 $brand-primary;
@@ -90,14 +89,13 @@ a {
         background: $link-hover-bg;
         outline: 0;
     }
-
-    &:active { }
 }
 
 
 //
 // Headings
 //
+// scss-lint:disable SingleLinePerSelector
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
     font-family: $headings-font-family;
@@ -148,6 +146,7 @@ h3, .h3 { font-size: $font-size-h3; }
 h4, .h4 { font-size: $font-size-h4; }
 h5, .h5 { font-size: $font-size-h5; }
 h6, .h6 { font-size: $font-size-h6; }
+// scss-lint:enable SingleLinePerSelector
 
 
 //
@@ -163,23 +162,21 @@ p {
 //
 small,
 .small {
-    font-size: $font-size-sm;
-    font-weight: $font-weight-normal;
+    @include text-small;
 }
 
 .mini {
-    font-size: $font-size-xs;
-    font-weight: $font-weight-normal;
+    @include text-mini;
 }
 
 .large {
-    font-size: floor((100% * $font-size-lg / $font-size-base));
+    @include text-large;
 }
 
 strong,
 .strong,
 .bold {
-    font-weight: $font-weight-bold;
+    @include text-bold;
 }
 
 em,
@@ -188,28 +185,20 @@ em,
 }
 
 .light {
-    font-weight: $font-weight-light;
+    @include text-light;
 }
 
 // Alignment
-.text-left           { text-align: left; }
-.text-right          { text-align: right; }
-.text-center         { text-align: center; }
-.text-justify        { text-align: justify; }
-.text-nowrap         { white-space: nowrap; }
-
-// Transformation
-.text-lowercase      { text-transform: lowercase; }
-.text-uppercase      { text-transform: uppercase; }
-.text-capitalize     { text-transform: capitalize; }
-
-.text-dimmed         { color: $gray-light }
-
+// scss-lint:disable SpaceBeforeBrace
+.text-left    { text-align: left; }
+.text-right   { text-align: right; }
+.text-center  { text-align: center; }
+.text-justify { text-align: justify; }
+.text-nowrap  { white-space: nowrap; }
+// scss-lint:enable SpaceBeforeBrace
 
 .lead {
-    font-size: $font-size-lg;
-    color: $headings-color;
-    line-height: $line-height-lg;
+    @include text-lead;
 }
 
 //
@@ -226,6 +215,7 @@ ol {
         margin-bottom: ($spacer / 2);
         padding-left: ($spacer / 2);
     }
+
     ul,
     ol {
         margin-top: ($spacer / 2);
@@ -276,7 +266,7 @@ blockquote {
     margin-left: 0;
     margin-top: $spacer;
     margin-bottom: $spacer;
-    padding: ($spacer/2) $spacer;
+    padding: ($spacer / 2) $spacer;
     font-style: italic;
 
     p,
@@ -317,5 +307,7 @@ address {
 //
 // Text selection
 //
-::-moz-selection { color: #fff; background: $brand-main-blue; }
-::selection      { color: #fff; background: $brand-main-blue; }
+::selection {
+    color: #fff;
+    background: $brand-main-blue;
+}
diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss
index 491a343..98807bf 100644
--- a/_src/_assets/styles/bigchain/_variables.scss
+++ b/_src/_assets/styles/bigchain/_variables.scss
@@ -7,15 +7,15 @@
 //
 // Colors
 //
-$brand-main-green:        #39BA91 !default;
+$brand-main-green:        #39ba91 !default;
 $brand-main-blue:         #074354 !default;
 $brand-main-gray:         #445261 !default;
-$brand-main-blue-dark:    #101A25 !default;
+$brand-main-blue-dark:    #101a25 !default;
 
-$brand-main-violet:       #B581CF !default;
-$brand-main-blue-light:   #BFE6EC !default;
-$brand-main-gray-light:   #CAD2DA !default;
-$brand-main-gray-lighter: #E8EBEF !default;
+$brand-main-violet:       #b581cf !default;
+$brand-main-blue-light:   #bfe6ec !default;
+$brand-main-gray-light:   #cad2da !default;
+$brand-main-gray-lighter: #e8ebef !default;
 
 $gray:                    $brand-main-gray !default;
 $gray-light:              lighten($brand-main-gray, 35%) !default;
@@ -25,8 +25,8 @@ $brand-primary:           $brand-main-green !default;
 
 // alerts
 $brand-success:           #388250 !default;
-$brand-info:              #3E91CE !default;
-$brand-warning:           #8E8E24 !default;
+$brand-info:              #3e91ce !default;
+$brand-warning:           #8e8e24 !default;
 $brand-danger:            #c9726a !default;
 
 
@@ -46,8 +46,8 @@ $font-size-root-lg:         20px !default;
 
 $font-size-base:            1rem !default;
 $font-size-lg:              1.3rem !default;
-$font-size-sm:              0.85rem !default;
-$font-size-xs:              0.7rem !default;
+$font-size-sm:              .85rem !default;
+$font-size-xs:              .7rem !default;
 
 $font-size-h1:              2.7rem !default;
 $font-size-h2:              2.3rem !default;
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index ce51ab8..1d35d55 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -151,7 +151,9 @@ export const html = () => src(DIST + '**/*.html')
 //
 export const css = () => src(SRC + '_assets/styles/bigchain.scss')
     .pipe($.if(!(isProduction || isStaging), $.sourcemaps.init()))
-    .pipe($.sass().on('error', $.sass.logError))
+    .pipe($.sass({
+        includePaths: ['node_modules']
+    }).on('error', $.sass.logError))
     .pipe($.autoprefixer({ browsers: COMPATIBILITY }))
     .pipe($.if(isProduction || isStaging, $.cleanCss()))
     .pipe($.if(!(isProduction || isStaging), $.sourcemaps.write()))
@@ -188,13 +190,15 @@ export const criticalCss = (done) => {
 //
 // JavaScript
 //
-const js = () =>
+export const js = () =>
     src([
         SRC + '_assets/javascripts/bigchain.js',
         SRC + '_assets/javascripts/page-*.js'
     ])
     .pipe($.if(!(isProduction || isStaging), $.sourcemaps.init()))
-    .pipe($.include()).on('error', onError)
+    .pipe($.include({
+        includePaths: ['node_modules', SRC + '_assets/javascripts']
+    })).on('error', onError)
     .pipe($.if(isProduction || isStaging, $.uglify())).on('error', onError)
     .pipe($.if(!(isProduction || isStaging), $.sourcemaps.write()))
     .pipe($.if(isProduction || isStaging, $.header(BANNER, { pkg: pkg })))