Add hound testing, lint all scss, and update docs

Author: dbox

.hound.yml

@@ -0,0 +1,2 @@
+scss:
+  config_file: .scss-style.yml

.scss-style.yml

@@ -0,0 +1,145 @@
+scss_files: "**/*.scss"
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+  BorderZero:
+    enabled: false
+    convention: zero
+  ColorKeyword:
+    enabled: false
+    severity: warning
+  ColorVariable:
+    enabled: false
+  Comment:
+    enabled: true
+  DebugStatement:
+    enabled: true
+  DeclarationOrder:
+    enabled: true
+  DuplicateProperty:
+    enabled: true
+  ElsePlacement:
+    enabled: true
+    style: same_line
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+  EmptyRule:
+    enabled: true
+  FinalNewline:
+    enabled: true
+    present: true
+  HexLength:
+    enabled: false
+    style: short
+  HexNotation:
+    enabled: true
+    style: uppercase
+  HexValidation:
+    enabled: true
+  IdSelector:
+    enabled: true
+  ImportantRule:
+    enabled: true
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space
+    width: 2
+  LeadingZero:
+    enabled: false
+    style: include_zero
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase
+  NestingDepth:
+    enabled: true
+    max_depth: 4
+    severity: warning
+  PlaceholderInExtend:
+    enabled: false
+  PropertyCount:
+    enabled: true
+    include_nested: false
+    max_properties: 10
+  PropertySortOrder:
+    enabled: true
+    ignore_unspecified: false
+    severity: warning
+    separate_groups: false
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+  QualifyingElement:
+    enabled: false
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+    severity: warning
+  SelectorDepth:
+    enabled: false
+    max_depth: 5
+    severity: warning
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+  Shorthand:
+    enabled: true
+    severity: warning
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+  SingleLinePerSelector:
+    enabled: true
+  SpaceAfterComma:
+    enabled: true
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space
+  SpaceAfterPropertyName:
+    enabled: true
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: false
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+  StringQuotes:
+    enabled: true
+    style: single_quotes
+  TrailingSemicolon:
+    enabled: true
+  TrailingZero:
+    enabled: false
+  UnnecessaryMantissa:
+    enabled: true
+  UnnecessaryParentReference:
+    enabled: true
+  UrlFormat:
+    enabled: true
+  UrlQuotes:
+    enabled: true
+  VariableForProperty:
+    enabled: false
+    properties: []
+  VendorPrefixes:
+    enabled: true
+    identifier_list: bourbon
+    include: []
+    exclude: []
+  ZeroUnit:
+    enabled: true
+    severity: warning
+  Compass::PropertyWithMixin:
+    enabled: false

knapsack/_index.scss

@@ -2,11 +2,10 @@
 // Index
 // ----
 
-
-@import '_code';
-@import '_layout';
-@import '_tables';
-@import '_reset';
-@import '_typography';
-@import '_ui';
-@import '_utilities';
+@import 'code';
+@import 'layout';
+@import 'tables';
+@import 'reset';
+@import 'typography';
+@import 'ui';
+@import 'utilities';

knapsack/_layout.scss

@@ -9,9 +9,9 @@
 
 @mixin clearfix() {
   &:after {
-    content: "";
-    display: table;
     clear: both;
+    content: '';
+    display: table;
   }
 }
 
@@ -25,12 +25,12 @@
 // Mixin: Ratio Box
 // Set a specific width/height ratio. Useful on background images and iframes.
 
-@mixin ratio-box ($ratio: 1/1) {
+@mixin ratio-box ($ratio: 1 / 1) {
   overflow: hidden;
   position: relative;
 
   &:before {
-    content: "";
+    content: '';
     display: block;
     height: 0;
     padding-top: (1 / $ratio) * 100%;
@@ -42,12 +42,12 @@
 // Sets an element to be full viewport height, with reasonble min and max-height
 // values.
 
-@mixin full-page($height: 100vh, $min-height: 600px, $max-height: 850px) {
+@mixin full-page($height: 100vh, $max-height: 850px, $min-height: 600px) {
   // Only show for tablet and above
   @media screen and (min-width: 768px) {
-    min-height: $min-height;
-    max-height: $max-height;
     height: $height;
+    max-height: $max-height;
+    min-height: $min-height;
   }
 }
 

knapsack/_reset.scss

@@ -24,6 +24,7 @@
     margin: 0;
     padding: 0;
   }
+
   textarea {
     resize: vertical;
   }
@@ -35,22 +36,20 @@
   input[type="button"],
   input[type="submit"],
   input[type="reset"] {
+    appearance: none;
     background: transparent;
     border: 0;
     color: inherit;
     font: inherit;
+    -webkit-font-smoothing: antialiased;
     margin: 0;
     padding: 0;
-    width: auto;
-    -webkit-appearance: none;
-    -webkit-font-smoothing: antialiased;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
+    width: auto;
+
     &::-moz-focus-inner {
-      padding: 0;
       border: 0;
+      padding: 0;
     }
   }
 }
@@ -60,6 +59,7 @@
   p:first-of-type {
     margin-top: 0;
   }
+
   p:last-of-type {
     margin-bottom: 0;
   }
@@ -69,8 +69,8 @@
 @mixin reset-media {
   img,
   video {
-    max-width: 100%;
     height: auto;
+    max-width: 100%;
   }
 }
 

knapsack/_tables.scss

@@ -13,26 +13,27 @@
 // ex. table(striped: true)
 
 @mixin table($border : true, $striped : true, $condensed : false) {
-  max-width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-  width: 100%;
   margin-bottom: 18px;
+  max-width: 100%;
+  width: 100%;
 
-  th, td {
-    padding: 8px;
+  th,
+  td {
+    border-top: 1px solid #DDD;
     line-height: 18px;
+    padding: 8px;
     text-align: left;
     vertical-align: top;
-    border-top: 1px solid #ddd;
   }
 
   th {
     font-weight: bold;
   }
 
   thead th {
-   vertical-align: bottom;
+    vertical-align: bottom;
   }
 
   thead:first-child tr th,
@@ -41,23 +42,26 @@
   }
 
   tbody + tbody {
-    border-top: 2px solid #ddd;
+    border-top: 2px solid #DDD;
   }
 
   @if $condensed {
-    th, td {
+    th,
+    td {
       padding: 4px 5px;
     }
   }
 
   @if $border {
-    border: 1px solid #ddd;
+    border: 1px solid #DDD;
     border-collapse: separate;
-    *border-collapse: collapsed;
     border-radius: 4px;
 
-    th + th, td + td, th + td, td + th {
-      border-left: 1px solid #ddd;
+    th + th,
+    td + td,
+    th + td,
+    td + th {
+      border-left: 1px solid #DDD;
     }
 
     thead:first-child tr:first-child th,
@@ -68,12 +72,12 @@
 
     thead:first-child tr:first-child th:first-child,
     tbody:first-child tr:first-child td:first-child {
-      border-radius: 4px 0 0 0;
+      border-radius: 4px 0 0;
     }
 
     thead:first-child tr:first-child th:last-child,
     tbody:first-child tr:first-child td:last-child {
-      border-radius: 0 4px 0 0;
+      border-radius: 0 4px;
     }
 
     thead:last-child tr:last-child th:first-child,
@@ -83,19 +87,19 @@
 
     thead:last-child tr:last-child th:last-child,
     tbody:last-child tr:last-child td:last-child {
-      border-radius: 0 0 4px 0;
+      border-radius: 0 0 4px;
     }
   }
 
   @if $striped {
     tbody tr:nth-child(odd) td,
     tbody tr:nth-child(odd) th {
-      background-color: #f9f9f9;
+      background-color: #F9F9F9;
     }
   }
 
-    tbody tr:hover td,
-    tbody tr:hover th {
-      background-color: #f5f5f5;
-    }
+  tbody tr:hover td,
+  tbody tr:hover th {
+    background-color: #F5F5F5;
+  }
 }