Merge pull request #6016 from sminnee/travis-lint

NEW: Run JS/CSS linting in Travis.

.codeclimate.yml

@@ -1,19 +0,0 @@
-engines:
-  eslint:
-    enabled: true
-  scss-lint:
-    enabled: true
-  duplication:
-    enabled: true
-    config:
-      languages:
-        javascript:
-          mass_threshold: 100
-ratings:
-  paths:
-  - client/src/**
-  - admin/client/src/**
-exclude_paths:
-- "**/*"
-- "!client/src/**"
-- "!admin/client/src/**"

.sass-lint.yml

@@ -0,0 +1,178 @@
+# sass-lint config to match the AirBNB style guide
+files:
+  include: '**/client/src/**/*.scss'
+  ignore:
+    - 'client/src/styles/legacy/*'
+    - 'admin/client/src/styles/legacy/*'
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  # Warnings
+  # Things that require actual refactoring are marked as warnings
+  class-name-format:
+    - 1
+    - convention: hyphenatedbem
+  placeholder-name-format:
+    - 1
+    - convention: hyphenatedlowercase
+  nesting-depth:
+    - 1
+    - max-depth: 3
+  no-ids: 1
+  no-important: 1
+  no-misspelled-properties:
+    - 1
+    - extra-properties:
+       - "-moz-border-radius-topleft"
+       - "-moz-border-radius-topright"
+       - "-moz-border-radius-bottomleft"
+       - "-moz-border-radius-bottomright"
+  variable-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  no-extends: 1
+
+  # Warnings: these things are preferential rather than mandatory
+  no-css-comments: 1
+
+  # Errors
+  # Things that can be easily fixed are marked as errors
+  indentation:
+    - 2
+    - size: 2
+  final-newline:
+    - 2
+    - include: true
+  no-trailing-whitespace: 2
+  border-zero:
+    - 2
+    - convention: '0'
+  brace-style:
+    - 2
+    - allow-single-line: true
+  clean-import-paths:
+    - 2
+    - filename-extension: false
+      leading-underscore: false
+  no-debug: 2
+  no-empty-rulesets: 2
+  no-invalid-hex: 2
+  no-mergeable-selectors: 2
+  # no-qualifying-elements:
+  #   - 1
+  #   - allow-element-with-attribute: false
+  #     allow-element-with-class: false
+  #     allow-element-with-id: false
+  no-trailing-zero: 2
+  no-url-protocols: 2
+  quotes:
+    - 2
+    - style: double
+  space-after-bang:
+    - 2
+    - include: false
+  space-after-colon:
+    - 2
+    - include: true
+  space-after-comma:
+    - 2
+    - include: true
+  space-before-bang:
+    - 2
+    - include: true
+  space-before-brace:
+    - 2
+    - include: true
+  space-before-colon: 2
+  space-between-parens:
+    - 2
+    - include: false
+  trailing-semicolon: 2
+  url-quotes: 2
+  zero-unit: 2
+  single-line-per-selector: 2
+  one-declaration-per-line: 2
+  empty-line-between-blocks:
+    - 2
+    - ignore-single-line-rulesets: true
+
+
+  # Missing rules
+  # There are no sass-lint rules for the following AirBNB style items, but thess
+  # - Put comments on their own line
+  # - Put property delcarations before mixins
+
+  # Disabled rules
+
+  # These are other rules that we may wish to consider using in the future
+  # They are not part of the AirBNB CSS standard but they would introduce some strictness
+  # bem-depth: 0
+  # variable-for-property: 0
+  # no-transition-all: 0
+  # hex-length:
+  #   - 1
+  #   - style: short
+  # hex-notation:
+  #   - 1
+  #   - style: lowercase
+  # property-units:
+  #   - 1
+  #   - global:
+  #       - ch
+  #       - em
+  #       - ex
+  #       - rem
+  #       - cm
+  #       - in
+  #       - mm
+  #       - pc
+  #       - pt
+  #       - px
+  #       - q
+  #       - vh
+  #       - vw
+  #       - vmin
+  #       - vmax
+  #       - deg
+  #       - grad
+  #       - rad
+  #       - turn
+  #       - ms
+  #       - s
+  #       - Hz
+  #       - kHz
+  #       - dpi
+  #       - dpcm
+  #       - dppx
+  #       - '%'
+  #     per-property: {}
+  # force-attribute-nesting: 1
+  # force-element-nesting: 1
+  # force-pseudo-nesting: 1
+  # function-name-format:
+  #   - 1
+  #   - allow-leading-underscore: true
+  #     convention: hyphenatedlowercase
+  # no-color-literals: 1
+  # no-duplicate-properties: 1
+  # mixin-name-format:
+  #   - 1
+  #   - allow-leading-underscore: true
+  #     convention: hyphenatedlowercase
+  # shorthand-values:
+  #   - 1
+  #   - allowed-shorthands:
+  #       - 1
+  #       - 2
+  #       - 3
+  # leading-zero:
+  #   - 1
+  #   - include: false
+  # no-vendor-prefixes:
+  #   - 1
+  #   - additional-identifiers: []
+  #     excluded-identifiers: []
+  #     placeholder-in-extend: 1
+  # no-color-keywords: 2

.scss-lint.yml

@@ -1,63 +0,0 @@
-# See https://docs.silverstripe.org/en/4.0/getting_started/css_coding_conventions/
-# Install instructions: https://github.com/brigade/scss-lint
-# Adapted from https://github.com/airbnb/css
-# Used for CodeClimate CI checks.
-
-scss_files: '**/client/src/**/*.scss'
-
-exclude:
-  - 'client/src/styles/legacy/*'
-  - 'admin/client/src/styles/legacy/*'
-  - 'admin/client/src/font/styles.css'
-
-
-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-*
-
-  SingleLinePerProperty:
-    enabled: true
-    allow_single_line_rule_sets: false
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes
-
-  UrlQuotes:
-    # TODO Re-enable once it support double quotes
-    enabled: false

.travis.yml

@@ -48,8 +48,8 @@ before_script:
  - "if [ \"$DB\" = \"PGSQL\" ]; then composer require silverstripe/postgresql:2.0.x-dev --prefer-dist; fi"
  - "if [ \"$DB\" = \"SQLITE\" ]; then composer require silverstripe/sqlite3:2.0.x-dev --prefer-dist; fi"
  - "if [ \"$CMS_TEST\" = \"1\" ]; then COMPOSER_ROOT_VERSION=4.0.x-dev composer require silverstripe/cms:4.0.x-dev silverstripe/siteconfig:4.0.x-dev silverstripe/reports:4.0.x-dev --prefer-dist; fi"
+ - "if [ \"$NPM_TEST\" = \"1\" ] && [ `git log --format=format:%aE -1` = \"support@greenkeeper.io\" ]; then echo \"Removing npm-shrinkwrap.json\"; rm npm-shrinkwrap.json; fi"
  - "if [ \"$NPM_TEST\" = \"1\" ]; then nvm install $TRAVIS_NODE_VERSION && npm install; fi"
-
  - "if [ \"$BEHAT_TEST\" = \"1\" ]; then sh -e /etc/init.d/xvfb start; sleep 3; fi"
  - "if [ \"$BEHAT_TEST\" = \"1\" ]; then (vendor/bin/selenium-server-standalone > selenium.log 2>&1 &); fi"
  - "if [ \"$BEHAT_TEST\" = \"1\" ]; then (vendor/bin/serve --bootstrap-file tests/behat/serve-bootstrap.php &> serve.log &); fi"
@@ -59,6 +59,7 @@ script:
  - "if [ \"$BEHAT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"\" ]; then vendor/bin/behat --config tests/behat/config.yml .; fi"
  - "if [ \"$BEHAT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"1\" ]; then vendor/bin/behat @cms --config cms/tests/behat/behat.yml; fi"
  - "if [ \"$NPM_TEST\" = \"1\" ]; then npm run test; fi"
+ - "if [ \"$NPM_TEST\" = \"1\" ]; then npm run lint; fi"
 
 after_failure:
  - php ~/travis-support/travis_upload_artifacts.php --if-env BEHAT_TEST,ARTIFACTS_BUCKET,ARTIFACTS_KEY,ARTIFACTS_SECRET --target-path $TRAVIS_REPO_SLUG/$TRAVIS_BUILD_ID/$TRAVIS_JOB_ID --artifacts-base-url https://s3.amazonaws.com/$ARTIFACTS_BUCKET/

Dev/Install/client/src/styles/install.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable all
-
 //Color Variables
 $message:     #BDBD00;    // blue
 $good:        #359318;    // green
@@ -8,7 +6,7 @@ $warning:			#E07127; 		// orange
 $warningBg:     #fcf8f2;
 $warningBorder:   #ffc28b;
 
-$error:				#C61414 /* #E21607 */; 		// red
+$error:       #C61414; // red - was #E21607
 $errorBg:     #FDF1F3;
 $errorBorder:   #F8C3CD;
 
@@ -17,23 +15,24 @@ $gradientTop:		#B1C0C5;
 $gradientBottom:  #7F9198;
 
 //Mixin to create a gradient from top to bottom
-@mixin topGradient($topColor, $bottomColor){
+@mixin topGradient($topColor, $bottomColor) {
-	background: $topColor; /* Old browszzzzzers */
+  background: $topColor; // Old browszzzzzers
-	background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); /* FF3.6+ */
+  background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); // FF3.6+
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$topColor), color-stop(100%,$bottomColor)); /* Chrome,Safari4+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topColor), color-stop(100%, $bottomColor)); // Chrome,Safari4+
-	background: -webkit-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Chrome10+,Safari5.1+ */
+  background: -webkit-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Chrome10+,Safari5.1+
-	background: -o-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Opera11.10+ */
+  background: -o-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Opera11.10+
-	background: -ms-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* IE10+ */
+  background: -ms-linear-gradient(top, $topColor 0%, $bottomColor 100%); // IE10+
-	background: linear-gradient(to bottom, $topColor 0%,$bottomColor 100%); /* W3C */
+  background: linear-gradient(to bottom, $topColor 0%, $bottomColor 100%); // W3C
-	.lt-ie9 &{
+
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); /* IE6-9 */
+  .lt-ie9 & {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); // IE6-9
   }
-	$experimental-support-for-svg: true;
+  // $experimental-support-for-svg: true;
-	/* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */
+  // @include background-image(linear-gradient(top, $topColor,$bottomColor));
 }
 
 //Mixin to create rounded corners. Takes a value for each of the 4 corners
-@mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft){
+@mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft) {
   -moz-border-radius-topleft: $topLeft;
   -moz-border-radius-topright: $topRight;
   -moz-border-radius-bottomright: $bottomRight;
@@ -43,22 +42,21 @@ $gradientBottom:	#7F9198;
 }
 
 //Mixin to create a regular box shadow
-@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color){
+@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color) {
   -webkit-box-shadow: $horizontal $vertical $blur $spread $color;
   -moz-box-shadow: $horizontal $vertical $blur $spread $color;
   box-shadow: $horizontal $vertical $blur $spread $color;
 }
 
 // Drop shadows
-@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.15)) {
+@mixin box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, .15)) {
   -webkit-box-shadow: $shadow;
   -moz-box-shadow: $shadow;
   box-shadow: $shadow;
-
 }
 
 //Mixin to create an inset box shadow
-@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color){
+@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color) {
   -webkit-box-shadow: inset $horizontal $vertical $blur $spread $color;
   -moz-box-shadow: inset $horizontal $vertical $blur $spread $color;
   box-shadow: inset $horizontal $vertical $blur $spread $color;
@@ -72,20 +70,27 @@ body {
   color: #333;
   width: 940px;
   margin: 0 auto 18px;
-	/* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */
+  // background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4;
   background-color: #f4f4f4;
 
-	/* Typography */
+  // Typography
   p {
     font-size: 13px;
     line-height: 18px;
     margin-bottom: 18px;
     color: #333;
   }
+
   a {
     color: $link;
   }
-	h1, h2, h3, h4, h5, h6 {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     color: #222;
     font-family: inherit;
     font-weight: bold;
@@ -94,19 +99,19 @@ body {
     text-rendering: optimizelegibility;
     clear: both;
     text-shadow: 0 1px 0 #fff;
+
     small {
       font-weight: normal;
       font-size: 12px;
       color: #666;
     }
   }
+
   h1 {
     font-size: 36px;
     line-height: 36px;
     letter-spacing: -0.5px;
-	}
+    background: transparent url("../images/logo.gif") no-repeat left top;
-	h1 {
-		background: transparent url(../images/logo.gif) no-repeat left top;
     text-indent: -9999px;
     height: 164px;
     width: 161px;
@@ -115,65 +120,85 @@ body {
     border-right: 1px solid $gradientTop;
     margin-right: 40px;
   }
+
   h2 {
     font-size: 34px;
     line-height: 36px;
     letter-spacing: -0.5px;
   }
+
   h3 {
     font-size: 18px;
     line-height: 27px;
   }
+
   h4 {
     font-size: 14px;
     line-height: 18px;
     margin: 18px 0 9px;
   }
+
   h5 {
     font-size: 12px;
     line-height: 18px;
     margin: 18px 0 0;
   }
 
-	/* Helpers */
+  //PHP5 required screen
+  #Header {
+    h1 {
+      margin-top: 45px;
+      margin-bottom: 27px;
+    }
+
+    h3 {
+      margin-top: -10px;
+    }
+  }
+
+  // Helpers
   .clear {
     clear: both;
   }
+
   .left {
     float: left;
   }
 
-	/* Messages */
+  // Messages
   .message {
     padding: 2px 18px;
     margin-bottom: 18px;
     @include roundedCorners(3px, 3px, 3px, 3px);
+
     p {
       margin: 11px 0 13px;
     }
+
     &.warning {
       background-color: $warningBg;
       border: 1px $warningBorder solid;
     }
+
     &.error {
-			background-color: #FDF1F3 /* #fdf5f5 */;
+      background-color: #FDF1F3; // was #fdf5f5
       border: 1px solid $errorBorder;
     }
+
     ul {
       margin-left: 18px;
       margin-top: -9px;
-			li {
+    }
+  }
 
-			}
-		}
-	}
   .helpText {
     float: right;
     width: 425px;
     padding-left: 20px;
     color: #666;
     margin-top: 0;
-		background: transparent url(../images/question.png) no-repeat left 1px;
+    background: transparent url("../images/question.png") no-repeat left 1px;
+
     &.requirementsHelpText {
       margin-top: 17px;
     }
@@ -185,39 +210,45 @@ body {
       margin: 9px 0 27px;
       border-collapse: collapse;
       width: 100%;
-			thead{
+
-				tr {
+      thead {
-					td, th {
+        td,
+        th {
           font-weight: bold;
           vertical-align: bottom;
           padding: 12px;
         }
       }
-			}
+
-			th, td {
+      th,
+      td {
         padding: 8px 12px;
         text-align: left;
       }
+
       td {
         vertical-align: top;
-				border-top: none;
+        border-top: 0;
         background-color: #fff;
       }
-			th + th,
+      // th + th,
-			td + td,
+      // td + td,
-			th + td {
+      // th + td {
-				/* border-left: 1px solid #ddd; */
+      //   border-left: 1px solid #ddd;
-			}
+      // }
-			tbody{
+
+      tbody {
         tr:nth-child(odd) td,
-			    tr:nth-child(odd) th{
+        tr:nth-child(odd) th {
           background-color: #fcfcfc;
         }
+
         tr:hover td,
-			    tr:hover th{
+        tr:hover th {
           background-color: #f6f6f6;
         }
       }
+
       tfoot {
         font-style: italic;
         color: #888;
@@ -225,7 +256,9 @@ body {
     }
 
     // Forms
-		input, textarea, select {
+    input,
+    textarea,
+    select {
       width: 420px;
       margin-bottom: 9px;
       color: #707070;
@@ -235,22 +268,24 @@ body {
       padding: 4px 6px;
       line-height: 18px;
       font-size: 13px;
-		    @include roundedCorners(3px,3px,3px,3px);
+      @include roundedCorners(3px, 3px, 3px, 3px);
     }
 
     // Focus states
     input,
     textarea {
       transition: border linear .2s, box-shadow linear .2s;
-			@include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
+      @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, .1));
     }
+
     input:focus,
     textarea:focus {
       outline: 0;
-			border-color: rgba(82,168,236,.8);
+      border-color: rgba(82, 168, 236, .8);
-			$shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 4px rgba(82,168,236,.6);
+      $shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 4px rgba(82, 168, 236, .6);
       @include box-shadow($shadow);
     }
+
     input[type=file]:focus,
     input[type=checkbox]:focus,
     select:focus {
@@ -262,12 +297,14 @@ body {
     select {
       height: 26px;
     }
+
     option {
       line-height: 27px;
       font-size: 12px;
       padding: 2px 6px;
-			color:#666;
+      color: #666;
     }
+
     label {
       width: auto;
       float: none;
@@ -276,9 +313,11 @@ body {
       text-align: left;
       display: block;
     }
+
     .fields {
       float: left;
     }
+
     input.action {
       text-align: center;
       font-weight: bold;
@@ -293,23 +332,29 @@ body {
       float: none;
       height: auto;
       @include topGradient (#fbfbfb, #bbb);
-			@include roundedCorners(3px,3px,3px,3px);
+      @include roundedCorners(3px, 3px, 3px, 3px);
       @include boxShadow(0, 1px, 0, 0, #fff);
       background-color: #ddd;
+
       &:hover {
         @include boxShadow(0, 1px, 2px, 0, #ccc);
         @include topGradient (#fbfbfb, #ccc);
       }
-			&:focus, &:active {
+
+      &:focus,
+      &:active {
         @include boxShadow(0, 1px, 0, 0, #fff);
         @include topGradient (#fbfbfb, #bbb);
       }
     }
+
     input.action:hover,
     input.action:focus {
       cursor: pointer;
     }
-		input[type="checkbox"], input[type="radio"] {
+
+    input[type="checkbox"],
+    input[type="radio"] {
       border: medium none;
       height: auto;
       line-height: normal;
@@ -319,28 +364,34 @@ body {
       float: left;
       margin-top: 3px;
     }
+
     #install_button {
       font-size: 20px;
       color: #fff;
       border-color: #78A127 #78A127 #59781D;
       text-shadow: 0 1px 1px #4D7326;
       padding: 8px 14px;
-			background-color: green;
+      background-color: #008000;
       @include topGradient(#80BF40, #59862D);
       @include boxShadow(0, 1px, 0, 0, #fff);
+
       &:hover {
         @include boxShadow(0, 1px, 3px, 0, #bbb);
       }
-			&:focus, &:active {
+
+      &:focus,
+      &:active {
         @include boxShadow(0, 1px, 0, 0, #fff);
         @include topGradient(#80BF40, #59862D);
       }
+
       &[disabled=disabled] {
         border: 1px solid #aaa;
         border-color: #bbb #bbb #aaa;
         color: #999;
         text-shadow: 0 1px 0 #eee;
         @include topGradient (#fbfbfb, #bbb);
+
         &:hover {
           @include boxShadow(0, 1px, 0, 0, #fff);
         }
@@ -348,31 +399,36 @@ body {
     }
   }
 
-	/* Custom styles */
+  // Custom styles
   #Container {
     margin-bottom: 40px;
+
     h3.sectionHeading {
       padding-top: 27px;
       border-top: 1px solid $gradientTop;
       clear: both;
     }
+
     #Header {
       margin-bottom: 30px;
       height: 200px;
+
       div.left {
         width: 698px;
         margin-top: 47px;
       }
     }
+
     #Navigation {
       display: none;
     }
   }
+
   h5.requirement {
     padding: 12px 18px;
     font-size: 14px;
-		border: 1px solid darken($gradientBottom,2%);
+    border: 1px solid darken($gradientBottom, 2%);
-		border-top: 1px solid lighten($gradientBottom,5%);
+    border-top: 1px solid lighten($gradientBottom, 5%);
     margin: 0;
     color: #fff;
     position: relative;
@@ -380,7 +436,8 @@ body {
     @include roundedCorners(3px, 3px, 3px, 3px);
     @include boxShadow(0, 1px, 0, 0, #fff);
     background-color: #eee;
-		@include topGradient($gradientTop,$gradientBottom);
+    @include topGradient($gradientTop, $gradientBottom);
+
     span {
       font-weight: normal;
       font-size: 12px;
@@ -389,17 +446,21 @@ body {
       text-shadow: none;
       background-color: lighten($gradientTop, 25%);
       @include roundedCorners(2px, 2px, 2px, 2px);
-			@include boxShadow(0,0,2px,0,$gradientBottom);
+      @include boxShadow(0, 0, 2px, 0, $gradientBottom);
     }
-		&.good span{
+
-			color: $good /* #359318 */;
+    &.good span {
+      color: $good; // was #359318
     }
-		&.warning span{
+
+    &.warning span {
       color: $warning;
     }
-		&.error span{
+
+    &.error span {
       color: $error;
     }
+
     a {
       font-size: 11px;
       right: 9px;
@@ -410,72 +471,88 @@ body {
       text-decoration: none;
       font-weight: normal;
       padding-right: 21px;
-			background: transparent url(../images/arrows.png) no-repeat right top;
+      background: transparent url("../images/arrows.png") no-repeat right top;
+
       &:hover {
-				background: transparent url(../images/arrows.png) no-repeat right -40px;
+        background: transparent url("../images/arrows.png") no-repeat right -40px;
       }
     }
   }
+
   table.testResults {
-		border-top: none;
+    border-top: 0;
     margin-top: -1px;
     margin-bottom: 9px;
     @include boxShadow(0, 1px, 0, 0, #fff);
-		@include roundedCorners(3px,3px,3px,3px);
+    @include roundedCorners(3px, 3px, 3px, 3px);
     overflow: hidden;
+
     tr {
       &.good {
         display: none;
-				border: none;
+        border: 0;
+
         td {
           color: $good;
         }
       }
+
       &.warning {
-				border: none;
+        border: 0;
+
         td {
           color: $warning;
         }
       }
+
       &.error {
-				border: none;
+        border: 0;
         color: $error;
       }
     }
+
     td {
       border: 1px solid #ddd;
       width: 50%;
     }
   }
-	#database_selection, #Themes {
+
+  #database_selection,
+  #Themes {
     list-style: none;
     margin: 0;
     margin-bottom: 18px;
     padding-left: 0;
+
     li {
       clear: left;
       padding: 3px 0;
+
       .dbfields {
         padding: 12px;
         border: 1px solid #ddd;
         background-color: #fafafa;
         margin-bottom: 9px;
-				@include roundedCorners(3px,3px,3px,3px);
+        @include roundedCorners(3px, 3px, 3px, 3px);
-				@include boxShadowInset(0,0,3px,0,#ddd);
+        @include boxShadowInset(0, 0, 3px, 0, #ddd);
-				@include boxShadow(0,1px,0,0,#fff);
+        @include boxShadow(0, 1px, 0, 0, #fff);
       }
     }
   }
+
   ul#Themes {
     float: left;
     width: 445px;
   }
+
   .databaseError {
     width: 422px;
   }
+
   #Footer {
     margin-top: 67px;
     margin-bottom: 18px;
+
     p {
       font-size: 12px;
       color: #999;
@@ -483,31 +560,19 @@ body {
   }
 }
 
-//PHP5 required screen
+// styles not tested
-body {
-	#Header {
-		h1 {
-			margin-top: 45px;
-			margin-bottom: 27px;
-		}
-		h3 {
-			margin-top: -10px;
-		}
-	}
-}
-
-
-/* styles not tested */
 
 #adminAcc,
 #devHelp,
 #localeHelp {
   padding-top: 20px;
 }
+
 #devHelp,
 #devSection {
   height: 18em;
 }
+
 #use_environment_field {
   margin-bottom: 25px;
   background-color: #FAFAFA;
@@ -516,23 +581,29 @@ body {
   box-shadow: 0 1px 0 0 white;
   margin-bottom: 9px;
   padding: 10px 10px 8px;
+
   input {
     float: left;
     margin-right: 5px;
   }
 }
+
 .databaseError {
   ul {
     margin-bottom: 0;
   }
-	ul, li {
+
+  ul,
+  li {
     margin-left: 0;
     padding-left: 0;
   }
 }
+
 #Layout p.goodInstall {
   color: #359318;
 }
+
 .goodInstall {
   padding: 0.5em;
   background-color: #e2fee1;
@@ -541,6 +612,7 @@ body {
   overflow: hidden;
   line-height: 18px;
   padding: 10px;
+
   a {
     float: right;
     font-size: 18px;

README.md

@@ -1,7 +1,6 @@
 ## SilverStripe Framework
 
 [![Build Status](https://api.travis-ci.org/silverstripe/silverstripe-framework.svg?branch=master)](https://travis-ci.org/silverstripe/silverstripe-framework)
-[![Code Climate](https://codeclimate.com/github/silverstripe/silverstripe-framework/badges/gpa.svg)](https://codeclimate.com/github/silverstripe/silverstripe-framework)
 [![Latest Stable Version](https://poser.pugx.org/silverstripe/framework/version.svg)](http://www.silverstripe.org/stable-download/)
 [![Latest Unstable Version](https://poser.pugx.org/silverstripe/framework/v/unstable.svg)](https://packagist.org/packages/silverstripe/framework)
 [![Total Downloads](https://poser.pugx.org/silverstripe/framework/downloads.svg)](https://packagist.org/packages/silverstripe/framework)

admin/client/src/components/Form/Form.scss

@@ -101,14 +101,12 @@
 
 
 // Readonlys should be converted to an input
-// scss-lint:disable all
 .form__field-holder p.readonly,
 .form__field-holder input.readonly,
 .form__field-holder span.readonly,
 .readonly .form__field-holder > div {
   @extend .form-control-static;
 }
-// scss-lint:enable all
 
 
 // Radio / Checkbox
@@ -149,7 +147,6 @@ input.radio {
   }
 }
 
-
 @mixin form-responsive($breakpoint-inline, $breakpoint-inline-limit-width, $breakpoint-inline-limit-width-max) {
   @include media-breakpoint-up($breakpoint-inline) {
     .form-group {
@@ -157,7 +154,6 @@ input.radio {
 
       // Composite fields
       // TODO reduce nesting
-      // scss-lint:disable SelectorDepth
       .form__field-holder .form-group {
         .form__field-holder,
         .form__field-label {
@@ -176,7 +172,6 @@ input.radio {
           @include make-col-offset(0);
         }
       }
-      // scss-lint:enable SelectorDepth
 
       &::after {
         margin: $spacer-y $grid-gutter-width-half #{-$spacer-y};

admin/client/src/components/FormAction/FormAction.scss

@@ -93,7 +93,9 @@
 }
 
 @keyframes loading-icon {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: scale(0);
   }
 

admin/client/src/components/GridField/GridField.scss

@@ -132,7 +132,7 @@
   &:active,
   &[class*="font-icon-"]:active,
   &:focus,
-  &[class*="font-icon-"]:focus, {
+  &[class*="font-icon-"]:focus {
     background-color: darken($table-bg-tools, 6%);
 
     &::before {

admin/client/src/components/PopoverField/PopoverField.scss

@@ -10,9 +10,7 @@
   }
 
   .arrow {
-    // scss-lint:disable all
     @extend .popover-arrow; // Temp uses Bootstrap 3 class name, until React Bootstrap has been updated to Bootstrap 4
-    // scss-lint:enable all
   }
 }
 
@@ -20,9 +18,7 @@
 
   // Unable to use classes within the popover, so we use elements to style
   ul {
-    // scss-lint:disable ImportantRule
     padding-left: 0 !important; // TODO remove important by removing nesting of lists
-    // scss-lint:enable ImportantRule
     list-style-type: none;
     margin-left: -#{$popover-padding} + 1px; // minus border
     margin-right: -#{$popover-padding} + 1px;

admin/client/src/components/Toolbar/Toolbar.scss

@@ -72,7 +72,7 @@
 }
 
 .toolbar__back-button,
-.cms_backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles
+.cms-backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles
   float: left;
   margin: $spacer-y * .625 $spacer-x / 2 $spacer-y * .625 #{-$spacer-x * .625};
   padding-left: $spacer-x / 4;

admin/client/src/styles/_fonts.scss

@@ -14,257 +14,325 @@
 
 [class^="font-icon-"]::before,
 [class*=" font-icon-"]::before {
-  // scss-lint:disable ImportantRule
   font-family: "silverstripe" !important;
-  // scss-lint:disable ImportantRule
   font-style: normal !important;
-  // scss-lint:disable ImportantRule
   font-weight: normal !important;
-  // scss-lint:disable ImportantRule
   font-variant: normal !important;
-  // scss-lint:disable ImportantRule
   text-transform: none !important;
-  // scss-lint:enable ImportantRule
   speak: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-// scss-lint:disable EmptyLineBetweenBlocks
 .font-icon-search::before {
   content: "\73";
 }
+
 .font-icon-sync::before {
   content: "\63";
 }
+
 .font-icon-print::before {
   content: "\64";
 }
+
 .font-icon-list::before {
   content: "\65";
 }
+
 .font-icon-plus-circled::before {
   content: "\66";
 }
+
 .font-icon-check-mark-2::before {
   content: "\6b";
 }
+
 .font-icon-book::before {
   content: "\6e";
 }
+
 .font-icon-book-open::before {
   content: "\6f";
 }
+
 .font-icon-plus::before {
   content: "\6a";
 }
+
 .font-icon-tree::before {
   content: "\70";
 }
+
 .font-icon-flow-tree::before {
   content: "\71";
 }
+
 .font-icon-info-circled::before {
   content: "\79";
 }
+
 .font-icon-chart-line::before {
   content: "\42";
 }
+
 .font-icon-graph-bar::before {
   content: "\45";
 }
+
 .font-icon-torsos-all::before {
   content: "\46";
 }
+
 .font-icon-torso::before {
   content: "\48";
 }
+
 .font-icon-picture::before {
   content: "\76";
 }
+
 .font-icon-chart-pie::before {
   content: "\41";
 }
+
 .font-icon-sitemap::before {
   content: "\43";
 }
+
 .font-icon-globe-1::before {
   content: "\52";
 }
+
 .font-icon-chat::before {
   content: "\74";
 }
+
 .font-icon-comment::before {
   content: "\77";
 }
+
 .font-icon-logout::before {
   content: "\7a";
 }
+
 .font-icon-cancel-circled::before {
   content: "\51";
 }
+
 .font-icon-left-open::before {
   content: "\54";
 }
+
 .font-icon-right-open::before {
   content: "\55";
 }
+
 .font-icon-check-mark::before {
   content: "\47";
 }
+
 .font-icon-check-mark-circle::before {
   content: "\49";
 }
+
 .font-icon-back-in-time::before {
   content: "\58";
 }
+
 .font-icon-cog::before {
   content: "\59";
 }
+
 .font-icon-fast-forward::before {
   content: "\68";
 }
+
 .font-icon-install::before {
   content: "\61";
 }
+
 .font-icon-down-circled::before {
   content: "\69";
 }
+
 .font-icon-eye::before {
   content: "\6c";
 }
+
 .font-icon-columns::before {
   content: "\72";
 }
+
 .font-icon-edit-write::before {
   content: "\75";
 }
+
 .font-icon-monitor::before {
   content: "\78";
 }
+
 .font-icon-mobile::before {
   content: "\4a";
 }
+
 .font-icon-tablet::before {
   content: "\4b";
 }
+
 .font-icon-pencil::before {
   content: "\6d";
 }
+
 .font-icon-trash::before {
   content: "\67";
 }
+
 .font-icon-edit::before {
   content: "\4e";
 }
+
 .font-icon-tick::before {
   content: "\4f";
 }
+
 .font-icon-upload::before {
   content: "\62";
 }
+
 .font-icon-folder-add::before {
   content: "\53";
 }
+
 .font-icon-silverstripe::before {
   content: "\4d";
 }
+
 .font-icon-thumbnails::before {
   content: "\57";
 }
+
 .font-icon-down-open::before {
   content: "\30";
 }
+
 .font-icon-up-open::before {
   content: "\31";
 }
+
 .font-icon-link::before {
   content: "\32";
 }
+
 .font-icon-level-up::before {
   content: "\56";
 }
+
 .font-icon-image::before {
   content: "\34";
 }
+
 .font-icon-trash-bin::before {
   content: "\50";
 }
+
 .font-icon-code::before {
   content: "\33";
 }
+
 .font-icon-left-open-big::before {
   content: "\35";
 }
+
 .font-icon-down-open-big::before {
   content: "\36";
 }
+
 .font-icon-up-open-big::before {
   content: "\37";
 }
+
 .font-icon-right-open-big::before {
   content: "\38";
 }
+
 .font-icon-dot-3::before {
   content: "\39";
 }
+
 .font-icon-save::before {
   content: "\21";
 }
+
 .font-icon-rocket::before {
   content: "\5a";
 }
+
 .font-icon-cancel::before {
   content: "\44";
 }
+
 .font-icon-happy::before {
   content: "\22";
 }
+
 .font-icon-sad::before {
   content: "\23";
 }
+
 .font-icon-angle-double-right::before {
   content: "\24";
 }
+
 .font-icon-angle-double-left::before {
   content: "\25";
 }
+
 .font-icon-angle-right::before {
   content: "\26";
 }
+
 .font-icon-angle-left::before {
   content: "\27";
 }
+
 .font-icon-caret-up-down::before {
   content: "\29";
 }
+
 .font-icon-caret-down-two::before {
   content: "\28";
 }
+
 .font-icon-caret-up-two::before {
   content: "\2a";
 }
+
 .font-icon-right-dir::before {
   content: "\2b";
 }
+
 .font-icon-down-dir::before {
   content: "\2c";
 }
+
 .font-icon-link-broken::before {
   content: "\2d";
 }
+
 .font-icon-switch::before {
   content: "\2e";
 }
+
 .font-icon-resize::before {
   content: "\4c";
 }
+
 .font-icon-menu::before {
   content: "\2f";
 }
+
 .font-icon-edit-list::before {
   content: "\3a";
 }
-
-// scss-lint:enable EmptyLineBetweenBlocks

admin/client/src/styles/_typography.scss

@@ -7,7 +7,7 @@ h1 {
   font-weight: 300;
 }
 
- // Tables
+// Tables
 // Used as a base for components: GridField.
 
 .table {
@@ -72,7 +72,7 @@ h1 {
 
 .cms {
   code {
-    font-family: 'Bitstream Vera Sans Mono','Courier', monospace;
+    font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
 	}
 }
 
@@ -107,11 +107,9 @@ th {
   -ms-word-break: break-all;
   word-break: break-word;
 
-  // scss-lint:disable VendorPrefix
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
-  // scss-lint:enable VendorPrefix
   hyphens: auto;
 }
 

admin/client/src/styles/_variables.scss

@@ -327,18 +327,14 @@ $input-bg-disabled: $background-darker;
 $input-color: $body-color-light;
 $input-border-color: $border-color-dark;
 $input-btn-border-width: $border-width; // For form controls and buttons
-// scss-lint:disable ColorVariable
 $input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-// scss-lint:enable ColorVariable
 
 $input-border-radius: $border-radius;
 $input-border-radius-lg: $border-radius-lg;
 $input-border-radius-sm: $border-radius-sm;
 
 $input-border-focus: #66afe9;
-// scss-lint:disable ColorVariable
 $input-box-shadow-focus: rgba(102, 175, 233, .6);
-// scss-lint:enable ColorVariable
 
 // $input-color-placeholder: #999;
 //
@@ -726,7 +722,7 @@ $shadow-level-1: rgba(0, 0, 0, .1);
 $shadow-level-2: rgba(0, 0, 0, .15);
 $shadow-level-3: rgba(0, 0, 0, .2);
 $shadow-level-4: rgba(0, 0, 0, .25);
-$shadow-level-5: rgba(0, 0, 0, .30);
+$shadow-level-5: rgba(0, 0, 0, .3);
 
 // TODO tidy all shadows cms wide (including AssetAdmin)
 $shadow-light: $shadow-level-3;

admin/client/src/styles/bundle.scss

@@ -2,11 +2,11 @@
 @import "variables";
 
 // Compatibilty with compass
-@import "legacy/_compasscompat";
+@import "legacy/compasscompat";
 
 // Thirdparty
 @import "chosen";
-@import "../../../../node_modules/bootstrap/scss/bootstrap.scss";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";
 @import "../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css";
 @import "../../../thirdparty/jstree/themes/apple/style.css";
 @import "../../../thirdparty/jquery-notice/jquery.notice.css";

admin/client/src/styles/legacy/_compasscompat.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable all
-
 /*<?php
 // *************
 // Self-generating. Run with PHP on the command line to re-generate.

admin/client/src/styles/legacy/_elementMixins.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable all
-
 //**
 // * This file contains mixins relating to specific functionality
 // *

admin/client/src/styles/legacy/_style.scss

@@ -15,7 +15,7 @@
  * Core Styles.
  * ---------------------------------------------------- */
 
-html,body {
+html, body {
   width: 100%;
   height: 100%;
   /* Removes RHS whitespace on iPad */
@@ -38,7 +38,7 @@ body.cms {
 
 .cms-helper-hide-actions .btn-toolbar {
   @extend .hide;
-	}
+}
 
 
 
@@ -63,8 +63,7 @@ body.cms {
 .cms-content-fields,
 .cms-preview,
 .cms-preview iframe,
-.cms-preview-controls
+.cms-preview-controls {
- {
   display: inline-block;
 }
 
@@ -75,7 +74,7 @@ body.cms {
   z-index: 60;
   min-height: $toolbar-total-height;
   background: {
-    image: url(../images/textures/cms_content_header.png);
+    image: url("../images/textures/cms_content_header.png");
     repeat: repeat;
     position: left bottom;
     color: $color-darker-bg;
@@ -87,7 +86,7 @@ body.cms {
 
   .backlink {
     span.btn-icon-back {
-			height:16px;
+      height: 16px;
     }
   }
 
@@ -103,7 +102,7 @@ body.cms {
   }
 
   .cms-content-header-info {
-		float:left;
+    float: left;
     padding-top: 5px;
 
     & * {
@@ -116,7 +115,7 @@ body.cms {
       background-repeat: no-repeat;
     }
 
-		.cms_backlink {
+    .cms-backlink {
       margin-top: -7px;
       float: left;
     }

admin/client/src/styles/legacy/themes/_default.scss

@@ -1,14 +1,13 @@
-/**
+// This file contains the default theme definitions for the admin interface.
- * This file contains the default theme definitions for the admin interface.
+// Please put mostly SCSS variable definitions in here,
- * Please put mostly SCSS variable definitions in here,
+// and leave the actual styling to _style.scss and auxilliary files.
- * and leave the actual styling to _style.scss and auxilliary files.
- */
 
-@import "../../variables.scss";
+@import "../../variables";
+
+//--------------------------------------------------
+// Colours
+//--------------------------------------------------
 
-/** -----------------------------------------------
- * Colours
- * ------------------------------------------------ */
 $color-base: #b0bec7 !default;
 $color-widget-bg: lighten($color-base, 20%) !default;
 
@@ -21,14 +20,14 @@ $color-theme-active: $color-theme-base;
 
 // CMS 4 menu
 $base-menu: #d8e4eb;
-$base-menu-bg: lighten($base-menu,5%);
+$base-menu-bg: lighten($base-menu, 5%);
 $base-menu-icon: darken($base-menu, 26%);
 
-//offical silverstripe brand color
+// offical silverstripe brand color
 $color-brand-bg: #005a93 !default;
 $color-brand: #43c7f4 !default;
 
-/* Keep as solid colours transparent borders wont work in ie */
+// Keep as solid colours transparent borders wont work in i
 $color-darker-bg: #f0f2f4 !default;
 $color-dark-bg: #142136 !default;
 $color-dark-separator: #19435c !default;
@@ -39,7 +38,7 @@ $color-light-separator: #D2D5D8 !default; // Horiontal dividers
 $color-tab: #d9d9d9 !default;
 $color-dark-grey: #7B8C91 !default;
 
-/* Only for use as shadows as they wont work in older browsers */
+// Only for use as shadows as they wont work in older browsers
 $color-shadow-light: rgba(201, 205, 206, 0.8) !default;
 $color-shadow-dark: rgba(107, 120, 123, 0.5) !default;
 $color-shadow-black: rgba(0, 0, 0, 0.6) !default;
@@ -55,7 +54,8 @@ $color-menu-background: #c6d7df !default;
 $color-menu-border: #8c99a1 !default;
 $color-panel-background: #c6d7df !default;
 
-$color-text-default: #4f5861 !default; /* new in SilverStripe 4 */
+// new in SilverStripe 4
+$color-text-default: #4f5861 !default;
 $color-text: #66727d !default;
 $color-text-light: white !default;
 $color-text-light-link: white !default;
@@ -83,30 +83,30 @@ $color-notice: #93CDE8 !default;		// blue
 $color-warning: #E9D104 !default;		// yellow
 $color-error: #e68288 !default;			// red
 $color-good: #72c34b !default;			// green
-/*$color-optional: #a1d2eb !default; */	// orange
+// $color-optional: #a1d2eb !default; // orange
 
 $color-cms-batchactions-menu-background: #f5f5f5 !default;
 $color-cms-batchactions-menu-selected-background: #fffcdc !default;
 
-/** -----------------------------------------------
+//--------------------------------------------------
- * Textures
+// Textures
- * ----------------------------------------------- */
+//--------------------------------------------------
 $tab-panel-texture-color: #f6f7f8 !default;
-$tab-panel-texture-background: $tab-panel-texture-color url(../images/textures/bg_cms_main_content.png) repeat top left !default;
+$tab-panel-texture-background: $tab-panel-texture-color url("../images/textures/bg_cms_main_content.png") repeat top left !default;
 
 
-/** -----------------------------------------------
+//--------------------------------------------------
- * Grid Units (px)
+// Grid Units (px)
- *
+//
- * We have a vertical rhythm that the grid is based off
+// We have a vertical rhythm that the grid is based off
- * both x (=horizontal) and y (=vertical). All internal padding and
+// both x (=horizontal) and y (=vertical). All internal padding and
- * margins are scaled to this and accounting for paragraphs
+// margins are scaled to this and accounting for paragraphs
- * ------------------------------------------------ */
+//--------------------------------------------------
 $grid-y: 8px !default;
 $grid-x: 8px !default;
 
-/** -----------------------------------------------
+//--------------------------------------------------
- * Application Logo (CMS Logo) Must be 24px x 24px
+// Application Logo (CMS Logo) Must be 24px x 24px
- * ------------------------------------------------ */
+//--------------------------------------------------
 $application-logo-small: url("../images/logo_small.png") !default;
 $application-logo-small-2x: url("../images/logo_small@2x.png") !default;

admin/templates/SilverStripe/Admin/Includes/BackLink_Button.ss

@@ -1,5 +1,5 @@
 <% if $Backlink %>
-	<div class="cms_backlink">
+	<div class="cms-backlink">
 		<a class="btn btn-secondary font-icon-left-open-big toolbar__back-button btn--no-text" href="$Backlink"></a>
 	</div>
 <% end_if %>

client/src/styles/debug.scss

@@ -1,13 +1,13 @@
 body {
   background: #eee !important;
-	margin:0;
+  margin: 0;
   overflow-x: hidden;
-	padding:0;
+  padding: 0;
-	font-family: Helvetica,Arial,sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
 }
 
 .info {
-	margin:0 0 6px 0;
+  margin: 0 0 6px 0;
   padding: 18px;
   background-color: #003050;
   position: relative;
@@ -18,6 +18,7 @@ body {
 
   // try to get the info above the template with z-index
   z-index: 9999;
+
   h1 {
     margin: 0 0 6px 0;
     padding: 0 32px 0 0;
@@ -26,7 +27,7 @@ body {
     text-shadow: 0 1px darken(#003050, 5%);
     line-height: 30px;
 
-		background: url(../images/logo_small.png) no-repeat right 3px;
+    background: url("../images/logo_small.png") no-repeat right 3px;
   }
 
   h3 {
@@ -35,6 +36,7 @@ body {
     line-height: 18px;
     font-weight: normal;
   }
+
   p {
     margin: 0;
     font-size: 14px;
@@ -67,15 +69,16 @@ body {
 .trace,
 .build,
 .options {
-	padding:6px 12px;
+  padding: 6px 12px;
 
   background: #eee !important;
   // try to get the info above the template with z-index
   position: relative;
   z-index: 9999;
+
   li {
-		font-size:14px;
+    font-size: 14px;
-		margin:6px 0;
+    margin: 6px 0;
   }
 }
 
@@ -99,19 +102,20 @@ pre {
   margin-bottom: 20px;
   background-color: #f5f5f5;
   border: 1px solid #eee;
-	border: 1px solid rgba(0,0,0,.08);
+  border: 1px solid rgba(0, 0, 0, .08);
   color: #333;
   padding: 11px;
   overflow: auto;
 
   border-radius: 4px;
-	box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
 
   span {
-		color:#999;
+    color: #999;
   }
+
   .error {
-		color:#f00;
+    color: #f00;
   }
 }
 
@@ -138,11 +142,19 @@ fieldset {
 }
 
 .pass {
-	margin-top:18px; padding:2px 20px 2px 40px; color:#006600; background:#E2F9E3; border: 1px solid #8DD38D;
+  margin-top: 18px;
-	border-radius:4px;
+  padding: 2px 20px 2px 40px;
+  color: #006600;
+  background: #E2F9E3;
+  border: 1px solid #8DD38D;
+  border-radius: 4px;
 }
 
 .fail {
-	margin-top:18px; padding:2px 20px 2px 40px; color:#C80700; background:#FFE9E9;
+  margin-top: 18px;
-	border:1px solid #C80700; border-radius:4px;
+  padding: 2px 20px 2px 40px;
+  color: #C80700;
+  background: #FFE9E9;
+  border: 1px solid #C80700;
+  border-radius: 4px;
 }

docs/en/05_Contributing/02_Build_Tooling.md

@@ -99,7 +99,9 @@ $ npm run css -- --watch
 $ npm run lint
 ```
 
-Run `eslint` over JavaScript files reports errors.
+Run linters (`eslint` and `sass-lint`) linters to enforce
+our [JavaScript](/contributing/javascript_coding_conventions) and 
+[CSS](/contributing/css_coding_conventions) coding conventions.
 
 ### test
 

docs/en/05_Contributing/13_CSS_Coding_Conventions.md

@@ -27,12 +27,15 @@ File naming and style include ordering is inspired by
 
 ## Linting
 
-We use [SCSSLint](https://github.com/brigade/scss-lint) to ensure all new SCSS
+We use [sass-lint](hhttps://github.com/sasstools/sass-lint) to ensure all new SCSS
-written complies with the rules below. Please consider installing it
+written complies with the rules below. It will be provided as an npm dev dependency.
-in your development environment (you'll need Ruby). There's also
+Ther eare also quite a few [sass-lint IDE integrations]https://github.com/sasstools/sass-lint#ide-integration) 
-quite a few [SCSSLint IDE integrations](https://github.com/brigade/scss-lint#editor-integration)
 which highlight any linting errors right in your code.
 
+We strongly recommend installing one of these into the editor of your choice, to
+avoid the frustration of failed pull requests. You can run the checks on console
+via `npm run lint`.
+
 ## File and Folder Naming
 
 - All frontend files (CSS, JavaScript, images) should be placed in

npm-shrinkwrap.json

@@ -8182,6 +8182,10 @@
       "version": "15.3.1",
       "resolved": "https://registry.npmjs.org/react-addons-css-transition-group/-/react-addons-css-transition-group-15.3.1.tgz"
     },
+    "react-addons-test-utils": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/react-addons-test-utils/-/react-addons-test-utils-15.3.1.tgz"
+    },
     "react-bootstrap-ss": {
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/react-bootstrap-ss/-/react-bootstrap-ss-0.30.5.tgz",
@@ -8542,6 +8546,180 @@
         }
       }
     },
+    "sass-lint": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/sass-lint/-/sass-lint-1.9.1.tgz",
+      "dependencies": {
+        "commander": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+          "dependencies": {
+            "graceful-readlink": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
+            }
+          }
+        },
+        "fs-extra": {
+          "version": "0.30.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.1.6",
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.6.tgz"
+            },
+            "jsonfile": {
+              "version": "2.4.0",
+              "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz"
+            },
+            "klaw": {
+              "version": "1.3.0",
+              "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.0.tgz"
+            },
+            "rimraf": {
+              "version": "2.5.4",
+              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz"
+            }
+          }
+        },
+        "glob": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
+          "dependencies": {
+            "fs.realpath": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+            },
+            "inflight": {
+              "version": "1.0.5",
+              "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.5.tgz",
+              "dependencies": {
+                "wrappy": {
+                  "version": "1.0.2",
+                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+                }
+              }
+            },
+            "inherits": {
+              "version": "2.0.3",
+              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
+            },
+            "minimatch": {
+              "version": "3.0.3",
+              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
+              "dependencies": {
+                "brace-expansion": {
+                  "version": "1.1.6",
+                  "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz",
+                  "dependencies": {
+                    "balanced-match": {
+                      "version": "0.4.2",
+                      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz"
+                    },
+                    "concat-map": {
+                      "version": "0.0.1",
+                      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+                    }
+                  }
+                }
+              }
+            },
+            "once": {
+              "version": "1.4.0",
+              "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+              "dependencies": {
+                "wrappy": {
+                  "version": "1.0.2",
+                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+                }
+              }
+            }
+          }
+        },
+        "globule": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/globule/-/globule-1.0.0.tgz",
+          "dependencies": {
+            "lodash": {
+              "version": "4.9.0",
+              "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.9.0.tgz"
+            },
+            "minimatch": {
+              "version": "3.0.3",
+              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
+              "dependencies": {
+                "brace-expansion": {
+                  "version": "1.1.6",
+                  "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz",
+                  "dependencies": {
+                    "balanced-match": {
+                      "version": "0.4.2",
+                      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz"
+                    },
+                    "concat-map": {
+                      "version": "0.0.1",
+                      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        "gonzales-pe": {
+          "version": "3.4.4",
+          "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-3.4.4.tgz",
+          "dependencies": {
+            "minimist": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz"
+            }
+          }
+        },
+        "js-yaml": {
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.6.1.tgz",
+          "dependencies": {
+            "argparse": {
+              "version": "1.0.7",
+              "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.7.tgz",
+              "dependencies": {
+                "sprintf-js": {
+                  "version": "1.0.3",
+                  "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
+                }
+              }
+            },
+            "esprima": {
+              "version": "2.7.3",
+              "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz"
+            }
+          }
+        },
+        "lodash.capitalize": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz"
+        },
+        "lodash.kebabcase": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz"
+        },
+        "path-is-absolute": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz"
+        },
+        "util": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "dependencies": {
+            "inherits": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
+            }
+          }
+        }
+      }
+    },
     "sass-loader": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-4.0.2.tgz",

package.json

@@ -15,7 +15,7 @@
     "lock": "npm-shrinkwrap --dev",
     "test": "NODE_PATH=\"./client/src:./admin/client/src\" jest",
     "coverage": "NODE_PATH=\"./client/src:./admin/client/src\" jest --coverage",
-    "lint": "eslint client/src & eslint admin/client/src"
+    "lint": "eslint client/src & eslint admin/client/src & sass-lint -v"
   },
   "repository": {
     "type": "git",
@@ -86,6 +86,7 @@
     "react-addons-test-utils": "^15.3.1",
     "redux-logger": "^2.6.1",
     "resolve-url-loader": "^1.6.0",
+    "sass-lint": "^1.9.1",
     "sass-loader": "^4.0.0",
     "script-loader": "^0.7.0",
     "semver": "^5.1.0",