dev tweaks

- start linting scss based on Airbnb style guide - add includePaths to css & js tasks
2024-11-21 17:26:55 +01:00 · 2017-05-06 18:03:40 +02:00 · 2017-05-06 18:03:40 +02:00 · 6ede38abfc
commit 6ede38abfc
parent 31fce530a3
28 changed files with 265 additions and 173 deletions
--- a/.scss-lint.yml
+++ 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
--- 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
--- 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
--- 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, $) {

--- 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, $) {

--- 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, $) {

--- 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($) {
--- 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;
        }
    }
--- 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%;
--- 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); }
 }
--- 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; }
--- 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 {
--- 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;
--- 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; }
--- 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;
        }
    }
--- 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 {
-
-}
--- a/_src/_assets/styles/bigchain/_sections.scss
+++ b/_src/_assets/styles/bigchain/_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';
--- 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%;
--- 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';
--- 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);
 }
--- 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);
--- 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"],
--- 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%;
--- 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';
--- a/_src/_assets/styles/bigchain/_mixins/_typography.scss
+++ 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;
+}
--- 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;
+}
--- 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;
--- 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 })))