Merge branch 'hotfix/v1.2.0-rc6' into develop

.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

dist/milligram.css

@@ -80,8 +80,8 @@ button[disabled],
 input[type='button'][disabled],
 input[type='reset'][disabled],
 input[type='submit'][disabled] {
-  opacity: .5;
   cursor: default;
+  opacity: .5;
 }
 
 .button[disabled]:focus, .button[disabled]:hover,
@@ -102,8 +102,8 @@ button.button-outline,
 input[type='button'].button-outline,
 input[type='reset'].button-outline,
 input[type='submit'].button-outline {
-  color: #9b4dca;
   background-color: transparent;
+  color: #9b4dca;
 }
 
 .button.button-outline:focus, .button.button-outline:hover,
@@ -115,9 +115,9 @@ input[type='reset'].button-outline:focus,
 input[type='reset'].button-outline:hover,
 input[type='submit'].button-outline:focus,
 input[type='submit'].button-outline:hover {
-  color: #606c76;
   background-color: transparent;
   border-color: #606c76;
+  color: #606c76;
 }
 
 .button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
@@ -129,8 +129,8 @@ input[type='reset'].button-outline[disabled]:focus,
 input[type='reset'].button-outline[disabled]:hover,
 input[type='submit'].button-outline[disabled]:focus,
 input[type='submit'].button-outline[disabled]:hover {
-  color: #9b4dca;
   border-color: inherit;
+  color: #9b4dca;
 }
 
 .button.button-clear,
@@ -138,9 +138,9 @@ button.button-clear,
 input[type='button'].button-clear,
 input[type='reset'].button-clear,
 input[type='submit'].button-clear {
-  color: #9b4dca;
   background-color: transparent;
   border-color: transparent;
+  color: #9b4dca;
 }
 
 .button.button-clear:focus, .button.button-clear:hover,
@@ -152,9 +152,9 @@ input[type='reset'].button-clear:focus,
 input[type='reset'].button-clear:hover,
 input[type='submit'].button-clear:focus,
 input[type='submit'].button-clear:hover {
-  color: #606c76;
   background-color: transparent;
   border-color: transparent;
+  color: #606c76;
 }
 
 .button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
@@ -181,11 +181,9 @@ code {
 pre {
   background: #f4f5f6;
   border-left: 0.3rem solid #9b4dca;
-  font-family: 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', monospace;
 }
 
 pre > code {
-  background: transparent;
   border-radius: 0;
   display: block;
   padding: 1rem 1.5rem;
@@ -215,6 +213,7 @@ select {
   border: 0.1rem solid #d1d1d1;
   border-radius: .4rem;
   box-shadow: none;
+  box-sizing: inherit;
   height: 3.8rem;
   padding: .6rem 1.0rem;
   width: 100%;
@@ -229,7 +228,7 @@ input[type='text']:focus,
 input[type='url']:focus,
 textarea:focus,
 select:focus {
-  border: 0.1rem solid #9b4dca;
+  border-color: #9b4dca;
   outline: 0;
 }
 
@@ -244,8 +243,6 @@ select:focus {
 
 textarea {
   min-height: 6.5rem;
-  padding-bottom: .6rem;
-  padding-top: .6rem;
 }
 
 label,
@@ -324,6 +321,14 @@ input[type='radio'] {
       align-items: baseline;
 }
 
+.row.row-no-padding {
+  padding: 0;
+}
+
+.row.row-no-padding > .column {
+  padding: 0;
+}
+
 .row .column {
   display: block;
   flex: 1;
@@ -332,18 +337,6 @@ input[type='radio'] {
   width: 100%;
 }
 
-.row .column .col-top {
-  align-self: flex-start;
-}
-
-.row .column .col-bottom {
-  align-self: flex-end;
-}
-
-.row .column .col-center {
-  align-self: center;
-}
-
 .row .column.column-offset-10 {
   margin-left: 10%;
 }
@@ -435,7 +428,19 @@ input[type='radio'] {
   max-width: 90%;
 }
 
-@media (min-width: 640px) {
+.row .column .column-top {
+  align-self: flex-start;
+}
+
+.row .column .column-bottom {
+  align-self: flex-end;
+}
+
+.row .column .column-center {
+  align-self: center;
+}
+
+@media (min-width: 40rem) {
   .row {
     flex-direction: row;
     margin-left: -1.0rem;
@@ -452,13 +457,14 @@ a {
   text-decoration: none;
 }
 
-a:hover {
+a:hover, a:focus {
   color: #606c76;
 }
 
 dl,
 ol,
 ul {
+  list-style: none;
   margin-top: 0;
   padding-left: 0;
 }
@@ -476,10 +482,6 @@ ul ul {
   margin: 1.5rem 0 1.5rem 3.0rem;
 }
 
-dl {
-  list-style: none;
-}
-
 ol {
   list-style: decimal inside;
 }
@@ -488,17 +490,14 @@ ul {
   list-style: circle inside;
 }
 
+.button,
+button,
 dd,
 dt,
 li {
   margin-bottom: 1.0rem;
 }
 
-button,
-.button {
-  margin-bottom: 1.0rem;
-}
-
 fieldset,
 input,
 select,
@@ -524,7 +523,7 @@ table {
 
 td,
 th {
-  border-bottom: 0.1rem solid #f4f5f6;
+  border-bottom: 0.1rem solid #e1e1e1;
   padding: 1.2rem 1.5rem;
   text-align: left;
 }
@@ -550,25 +549,23 @@ h4,
 h5,
 h6 {
   font-weight: 300;
+  letter-spacing: -.1rem;
   margin-bottom: 2.0rem;
   margin-top: 0;
 }
 
 h1 {
   font-size: 4.0rem;
-  letter-spacing: -.1rem;
   line-height: 1.2;
 }
 
 h2 {
   font-size: 3.6rem;
-  letter-spacing: -.1rem;
   line-height: 1.25;
 }
 
 h3 {
   font-size: 3.0rem;
-  letter-spacing: -.1rem;
   line-height: 1.3;
 }
 
@@ -590,7 +587,7 @@ h6 {
   line-height: 1.4;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   h1 {
     font-size: 5.0rem;
   }
@@ -615,16 +612,9 @@ img {
   max-width: 100%;
 }
 
-.clearfix {
-  *zoom: 1;
-}
-
 .clearfix:after {
   clear: both;
-}
+  content: ' ';
-
-.clearfix:after, .clearfix:before {
-  content: '';
   display: table;
 }
 

package.json

@@ -53,15 +53,17 @@
 		"node-sass": "^3.7.0",
 		"npm-run-all": "^2.1.1",
 		"onchange": "^2.4.0",
-		"postcss-cli": "^2.5.2"
+		"postcss-cli": "^2.5.2",
+		"sass-lint": "^1.8.2"
 	},
 	"engines": {
 		"node": "^6.0.0"
 	},
 	"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/_Base.sass

@@ -3,7 +3,7 @@
 // ––––––––––––––––––––––––––––––––––––––––––––––––––
 
 // The base font-size is set at 62.5% for having the convenience
-// of sizing rems in a way that is similar to using px. 1.6rem=16px
+// of sizing rems in a way that is similar to using px: 1.6rem = 16px
 html
 	box-sizing: border-box
 	font-size: 62.5%

src/_Button.sass

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

src/_Code.sass

@@ -13,10 +13,8 @@ code
 pre
 	background: $color-tertiary
 	border-left: .3rem solid $color-primary
-	font-family: 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', monospace
 
 	& > code
-		background: transparent
 		border-radius: 0
 		display: block
 		padding: 1rem 1.5rem

src/_Color.sass

@@ -7,3 +7,4 @@ $color-primary: #9b4dca !default
 $color-secondary: #606c76 !default
 $color-tertiary: #f4f5f6 !default
 $color-quaternary: #d1d1d1 !default
+$color-quinary: #e1e1e1 !default

src/_Form.sass

@@ -16,12 +16,13 @@ select
 	border: .1rem solid $color-quaternary
 	border-radius: .4rem
 	box-shadow: none
+	box-sizing: inherit // Forced to replace inherit values of the normalize.css
 	height: 3.8rem
 	padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit
 	width: 100%
 
 	&:focus
-		border: .1rem solid $color-primary
+		border-color: $color-primary
 		outline: 0
 
 select
@@ -33,8 +34,6 @@ select
 
 textarea
 	min-height: 6.5rem
-	padding-bottom: .6rem
-	padding-top: .6rem
 
 label,
 legend

src/_Grid.sass

@@ -47,6 +47,12 @@
 	&.row-baseline
 		align-items: baseline
 
+	&.row-no-padding
+		padding: 0
+
+		&> .column
+			padding: 0
+
 	.column
 		display: block
 		flex: 1
@@ -54,16 +60,6 @@
 		max-width: 100%
 		width: 100%
 
-		// .column-* vertically aligns an individual .column
-		.col-top
-			align-self: flex-start
-
-		.col-bottom
-			align-self: flex-end
-
-		.col-center
-			align-self: center
-
 		// Column Offsets
 		&.column-offset-10
 			margin-left: 10%
@@ -144,8 +140,18 @@
 			flex: 0 0 90%
 			max-width: 90%
 
+		// .column-* vertically aligns an individual .column
+		.column-top
+			align-self: flex-start
+
+		.column-bottom
+			align-self: flex-end
+
+		.column-center
+			align-self: center
+
 // Larger than mobile screen
-@media (min-width: 640px)
+@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
 
 	.row
 		flex-direction: row

src/_Link.sass

@@ -6,5 +6,6 @@ a
 	color: $color-primary
 	text-decoration: none
 
-	&:hover
+	&:hover,
+	&:focus
 		color: $color-secondary

src/_List.sass

@@ -5,6 +5,7 @@
 dl,
 ol,
 ul
+	list-style: none
 	margin-top: 0
 	padding-left: 0
 
@@ -14,16 +15,8 @@ ul
 		font-size: 90%
 		margin: 1.5rem 0 1.5rem 3.0rem
 
-dl
-	list-style: none
-
 ol
 	list-style: decimal inside
 
 ul
 	list-style: circle inside
-
-dd,
-dt,
-li
-	margin-bottom: 1.0rem

src/_Spacing.sass

@@ -2,8 +2,11 @@
 // Spacing
 // ––––––––––––––––––––––––––––––––––––––––––––––––––
 
+.button,
 button,
-.button
+dd,
+dt,
+li
 	margin-bottom: 1.0rem
 
 fieldset,

src/_Table.sass

@@ -7,7 +7,7 @@ table
 
 td,
 th
-	border-bottom: .1rem solid $color-tertiary
+	border-bottom: .1rem solid $color-quinary
 	padding: 1.2rem 1.5rem
 	text-align: left
 

src/_Typography.sass

@@ -12,22 +12,20 @@ h4,
 h5,
 h6
 	font-weight: 300
+	letter-spacing: -.1rem
 	margin-bottom: 2.0rem
 	margin-top: 0
 
 h1
 	font-size: 4.0rem
-	letter-spacing: -.1rem
 	line-height: 1.2
 
 h2
 	font-size: 3.6rem
-	letter-spacing: -.1rem
 	line-height: 1.25
 
 h3
 	font-size: 3.0rem
-	letter-spacing: -.1rem
 	line-height: 1.3
 
 h4
@@ -46,7 +44,7 @@ h6
 	line-height: 1.4
 
 // Larger than mobile screen
-@media (min-width: 640px)
+@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
 
 	h1
 		font-size: 5.0rem

src/_Utility.sass

@@ -4,14 +4,10 @@
 
 // Clear a float with .clearfix
 .clearfix
-	*zoom: 1
 
 	&:after
 		clear: both
-
+		content: ' ' // The space content is one way to avoid an Opera bug.
-	&:after,
-	&:before
-		content: ''
 		display: table
 
 // Float either direction

test/index.html

@@ -123,52 +123,42 @@
 							<ul>
 								<li>Unordered list item 1</li>
 								<li>Unordered list item 2</li>
-								<li>
+								<li>Unordered list item 3
 									<ul>
-										<li>Unordered list item 1</li>
+										<li>Unordered list item 3.1</li>
-										<li>Unordered list item 2</li>
+										<li>Unordered list item 3.2</li>
-										<li>
+										<li>Unordered list item 3.3</li>
-											<ul>
-												<li>Unordered list item 1</li>
-												<li>Unordered list item 2</li>
-											</ul>
-										</li>
 									</ul>
 								</li>
-								<li>Unordered list item 3</li>
 								<li>Unordered list item 4</li>
+								<li>Unordered list item 5</li>
 							</ul>
 						</div>
 						<div class="column">
 							<ol>
 								<li>Ordered list item 1</li>
 								<li>Ordered list item 2</li>
-								<li>
+								<li>Ordered list item 3
 									<ol>
-										<li>Ordered list item 1</li>
+										<li>Ordered list item 3.1</li>
-										<li>Ordered list item 2</li>
+										<li>Ordered list item 3.2</li>
-										<li>
+										<li>Ordered list item 3.3</li>
-											<ol>
-												<li>Ordered list item 1</li>
-												<li>Ordered list item 2</li>
-											</ol>
-										</li>
 									</ol>
 								</li>
-								<li>Ordered list item 3</li>
 								<li>Ordered list item 4</li>
+								<li>Ordered list item 5</li>
 							</ol>
 						</div>
 						<div class="column">
 							<dl>
 								<dt>Description list item 1</dt>
-								<dd>Description list item 1.1</dd>
-								<dd>Description list item 1.2</dd>
-								<dd>Description list item 1.3</dd>
 								<dt>Description list item 2</dt>
-								<dd>Description list item 2.1</dd>
 								<dt>Description list item 3</dt>
 								<dd>Description list item 3.1</dd>
+								<dd>Description list item 3.2</dd>
+								<dd>Description list item 3.3</dd>
+								<dt>Description list item 4</dt>
+								<dt>Description list item 5</dt>
 							</dl>
 						</div>
 					</div>