Merge pull request #99 from jackmcpickle/sass-linter

Add Sass linting support

.sasslintrc

@@ -0,0 +1,74 @@
+#########################
+## Sass Lint File
+## See rules https://github.com/sasstools/sass-lint/tree/master/docs/rules
+#########################
+# Linter Options
+options:
+  # Don't merge default rules
+  merge-default-rules: false
+# File Options
+files:
+  include: 'src/**/*.s+(a|c)ss'
+  ignore:
+    - 'node_modules/**/*.*'
+# Rule Configuration
+rules:
+  attribute-quotes:
+    - 2
+    -
+      include: true
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2
+  mixins-before-declarations:
+    - 2
+    -
+      exclude:
+        - breakpoint
+        - mq
+  nesting-depth:
+    - 1
+    -
+      max-depth: 2
+  no-warn: 1
+  no-debug: 1
+  no-ids: 2
+  no-duplicate-properties: 1
+  no-trailing-whitespace: 2
+
+  leading-zero:
+    - 2
+    -
+      include: false
+  no-vendor-prefixes:
+    - 2
+    -
+      ignore-non-standard: true
+  no-important: 2
+  hex-notation:
+    - 2
+    -
+      style: lowercase
+  indentation:
+    - 2
+    -
+      size: 'tab'
+  property-sort-order:
+    - 1
+    -
+      order: 'alphabetical'
+      ignore-custom-properties: true
+  property-units:
+    - 1
+    -
+      global: ['em', 'rem', '%']
+  quotes: 2
+  space-after-colon: 2
+  space-after-comma: 2
+  single-line-per-selector: 2
+  variable-for-property:
+    - 2
+    -
+      properties:
+        - color
+  zero-unit: 2

package.json

@@ -54,6 +54,7 @@
 		"npm-run-all": "^2.1.1",
 		"onchange": "^2.4.0",
 		"postcss-cli": "^2.5.2",
+		"sass-lint": "^1.8.2",
 		"slimerjs": "^0.906.2"
 	},
 	"engines": {
@@ -61,8 +62,9 @@
 	},
 	"scripts": {
 		"banner": "for m in dist/*.css; do echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - $m > temp && mv temp $m; done",
-		"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
 		"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers 'last 1 versions' -r dist/*.css",
+		"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
+		"lint": "sass-lint -c .sasslintrc 'src/*.sass' --verbose --no-exit",
 		"build": "npm-run-all sass autoprefixer banner",
 		"watch": "onchange src -- npm run build",
 		"serve": "browser-sync start -s test --ss dist -f dist",

src/_Blockquote.sass

@@ -3,7 +3,7 @@
 // ––––––––––––––––––––––––––––––––––––––––––––––––––
 
 blockquote
-	border-left: 0.3rem solid $color-quaternary
+	border-left: .3rem solid $color-quaternary
 	margin-left: 0
 	margin-right: 0
 	padding: 1rem 1.5rem

src/_Button.sass

@@ -33,8 +33,8 @@ input[type='submit']
 
 	&.button-disabled,
 	&[disabled]
-		opacity: .5
 		cursor: default
+		opacity: .5
 
 		&:hover,
 		&:focus
@@ -42,33 +42,33 @@ input[type='submit']
 			border-color: $color-primary
 
 	&.button-outline
-		color: $color-primary
 		background-color: transparent
+		color: $color-primary
 
 		&:hover,
 		&:focus
-			color: $color-secondary
 			background-color: transparent
 			border-color: $color-secondary
+			color: $color-secondary
 
 		&.button-disabled,
 		&[disabled]
 
 			&:hover,
 			&:focus
-				color: $color-primary
 				border-color: inherit
+				color: $color-primary
 
 	&.button-clear
-		color: $color-primary
 		background-color: transparent
 		border-color: transparent
+		color: $color-primary
 
 		&:hover,
 		&:focus
-			color: $color-secondary
 			background-color: transparent
 			border-color: transparent
+			color: $color-secondary
 
 		&.button-disabled,
 		&[disabled]

src/_Code.sass

@@ -6,8 +6,8 @@ code
 	background: $color-tertiary
 	border-radius: .4rem
 	font-size: 86%
-	padding: .2rem .5rem
 	margin: 0 .2rem
+	padding: .2rem .5rem
 	white-space: nowrap
 
 pre

src/_Form.sass

@@ -25,22 +25,22 @@ select
 		outline: 0
 
 select
-	padding: 0.6rem 3rem 0.6rem 1rem
 	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjZDFkMWQxIiBkPSJNOS40IDMuNmw1IDcgNS4yLTciLz48L3N2Zz4=) center right no-repeat
+	padding: .6rem 3rem .6rem 1rem
 
 	&:focus
 		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNmIiBkPSJNMTkuNiAzLjZIOS40bDUgNyIvPjwvc3ZnPg==)
 
 textarea
+	min-height: 6.5rem
 	padding-bottom: .6rem
 	padding-top: .6rem
-	min-height: 6.5rem
 
 label,
 legend
+	display: block
 	font-size: 1.6rem
 	font-weight: 700
-	display: block
 	margin-bottom: .5rem
 
 fieldset
@@ -52,6 +52,6 @@ input[type='radio']
 	display: inline
 
 .label-inline
-	font-weight: normal
 	display: inline-block
+	font-weight: normal
 	margin-left: .5rem

src/_Grid.sass

@@ -21,21 +21,15 @@
 	padding: 0
 	width: 100%
 
+	// Larger than mobile screen
+	@media (min-width: 40.0rem)
+		flex-direction: row
+		margin-left: -1.0rem
+		width: calc(100% + 2.0rem)
+
 	&.row-wrap
 		flex-wrap: wrap
 
-	&.row-no-padding
-		padding: 0
-
-		&> .column
-			padding: 0
-
-	// & + .row
-	// 	margin-top: -.5rem
-	// 	padding-top: 0
-
-	// Vertically Align Columns
-	// .row-* vertically aligns every .col in the .row
 	&.row-top
 		align-items: flex-start
 
@@ -51,6 +45,12 @@
 	&.row-baseline
 		align-items: baseline
 
+	&.row-no-padding
+		padding: 0
+
+		&> .column
+			padding: 0
+
 	.column
 		display: block
 		flex: 1
@@ -58,6 +58,10 @@
 		max-width: 100%
 		width: 100%
 
+		@media (min-width: 40.0rem)
+			margin-bottom: inherit
+			padding: 0 1.0rem
+
 		// .column-* vertically aligns an individual .column
 		.col-top
 			align-self: flex-start
@@ -131,7 +135,8 @@
 			flex: 0 0 60%
 			max-width: 60%
 
-		&.column-66, &.column-67
+		&.column-66,
+		&.column-67
 			flex: 0 0 66.6666%
 			max-width: 66.6666%
 
@@ -146,15 +151,3 @@
 		&.column-90
 			flex: 0 0 90%
 			max-width: 90%
-
-// Larger than mobile screen
-@media (min-width: 40.0rem)
-
-	.row
-		flex-direction: row
-		margin-left: -1.0rem
-		width: calc(100% + 2.0rem)
-
-		.column
-			margin-bottom: inherit
-			padding: 0 1.0rem