Fix branch 'master'

2016-09-09 21:53:14 -03:00 · 2016-09-09 21:53:14 -03:00 · 2a32cf2acc
commit 2a32cf2acc
parent 77cc5439fd c5ee472409
60 changed files with 703 additions and 253 deletions
--- a/dist/milligram.css
+++ b/dist/milligram.css
@ -34,7 +34,7 @@ blockquote {
 }

 blockquote *:last-child {
-  margin: 0;
+  margin-bottom: 0;
 }

 .button,
@ -60,51 +60,39 @@ input[type='submit'] {
  white-space: nowrap;
 }

-.button:hover, .button:focus,
-button:hover,
+.button:focus, .button:hover,
 button:focus,
-input[type='button']:hover,
+button:hover,
 input[type='button']:focus,
-input[type='reset']:hover,
+input[type='button']:hover,
 input[type='reset']:focus,
-input[type='submit']:hover,
-input[type='submit']:focus {
+input[type='reset']:hover,
+input[type='submit']:focus,
+input[type='submit']:hover {
  background-color: #606c76;
  border-color: #606c76;
  color: #fff;
  outline: 0;
 }

-.button.button-disabled, .button[disabled],
-button.button-disabled,
+.button[disabled],
 button[disabled],
-input[type='button'].button-disabled,
 input[type='button'][disabled],
-input[type='reset'].button-disabled,
 input[type='reset'][disabled],
-input[type='submit'].button-disabled,
 input[type='submit'][disabled] {
  opacity: .5;
  cursor: default;
 }

-.button.button-disabled:hover, .button.button-disabled:focus, .button[disabled]:hover, .button[disabled]:focus,
-button.button-disabled:hover,
-button.button-disabled:focus,
-button[disabled]:hover,
+.button[disabled]:focus, .button[disabled]:hover,
 button[disabled]:focus,
-input[type='button'].button-disabled:hover,
-input[type='button'].button-disabled:focus,
-input[type='button'][disabled]:hover,
+button[disabled]:hover,
 input[type='button'][disabled]:focus,
-input[type='reset'].button-disabled:hover,
-input[type='reset'].button-disabled:focus,
-input[type='reset'][disabled]:hover,
+input[type='button'][disabled]:hover,
 input[type='reset'][disabled]:focus,
-input[type='submit'].button-disabled:hover,
-input[type='submit'].button-disabled:focus,
-input[type='submit'][disabled]:hover,
-input[type='submit'][disabled]:focus {
+input[type='reset'][disabled]:hover,
+input[type='submit'][disabled]:focus,
+input[type='submit'][disabled]:hover {
  background-color: #9b4dca;
  border-color: #9b4dca;
 }
@ -118,37 +106,29 @@ input[type='submit'].button-outline {
  background-color: transparent;
 }

-.button.button-outline:hover, .button.button-outline:focus,
-button.button-outline:hover,
+.button.button-outline:focus, .button.button-outline:hover,
 button.button-outline:focus,
-input[type='button'].button-outline:hover,
+button.button-outline:hover,
 input[type='button'].button-outline:focus,
-input[type='reset'].button-outline:hover,
+input[type='button'].button-outline:hover,
 input[type='reset'].button-outline:focus,
-input[type='submit'].button-outline:hover,
-input[type='submit'].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;
 }

-.button.button-outline.button-disabled:hover, .button.button-outline.button-disabled:focus, .button.button-outline[disabled]:hover, .button.button-outline[disabled]:focus,
-button.button-outline.button-disabled:hover,
-button.button-outline.button-disabled:focus,
-button.button-outline[disabled]:hover,
+.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
 button.button-outline[disabled]:focus,
-input[type='button'].button-outline.button-disabled:hover,
-input[type='button'].button-outline.button-disabled:focus,
-input[type='button'].button-outline[disabled]:hover,
+button.button-outline[disabled]:hover,
 input[type='button'].button-outline[disabled]:focus,
-input[type='reset'].button-outline.button-disabled:hover,
-input[type='reset'].button-outline.button-disabled:focus,
-input[type='reset'].button-outline[disabled]:hover,
+input[type='button'].button-outline[disabled]:hover,
 input[type='reset'].button-outline[disabled]:focus,
-input[type='submit'].button-outline.button-disabled:hover,
-input[type='submit'].button-outline.button-disabled:focus,
-input[type='submit'].button-outline[disabled]:hover,
-input[type='submit'].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;
 }
@ -163,37 +143,29 @@ input[type='submit'].button-clear {
  border-color: transparent;
 }

-.button.button-clear:hover, .button.button-clear:focus,
-button.button-clear:hover,
+.button.button-clear:focus, .button.button-clear:hover,
 button.button-clear:focus,
-input[type='button'].button-clear:hover,
+button.button-clear:hover,
 input[type='button'].button-clear:focus,
-input[type='reset'].button-clear:hover,
+input[type='button'].button-clear:hover,
 input[type='reset'].button-clear:focus,
-input[type='submit'].button-clear:hover,
-input[type='submit'].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;
 }

-.button.button-clear.button-disabled:hover, .button.button-clear.button-disabled:focus, .button.button-clear[disabled]:hover, .button.button-clear[disabled]:focus,
-button.button-clear.button-disabled:hover,
-button.button-clear.button-disabled:focus,
-button.button-clear[disabled]:hover,
+.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
 button.button-clear[disabled]:focus,
-input[type='button'].button-clear.button-disabled:hover,
-input[type='button'].button-clear.button-disabled:focus,
-input[type='button'].button-clear[disabled]:hover,
+button.button-clear[disabled]:hover,
 input[type='button'].button-clear[disabled]:focus,
-input[type='reset'].button-clear.button-disabled:hover,
-input[type='reset'].button-clear.button-disabled:focus,
-input[type='reset'].button-clear[disabled]:hover,
+input[type='button'].button-clear[disabled]:hover,
 input[type='reset'].button-clear[disabled]:focus,
-input[type='submit'].button-clear.button-disabled:hover,
-input[type='submit'].button-clear.button-disabled:focus,
-input[type='submit'].button-clear[disabled]:hover,
-input[type='submit'].button-clear[disabled]:focus {
+input[type='reset'].button-clear[disabled]:hover,
+input[type='submit'].button-clear[disabled]:focus,
+input[type='submit'].button-clear[disabled]:hover {
  color: #9b4dca;
 }

@ -201,8 +173,8 @@ code {
  background: #f4f5f6;
  border-radius: .4rem;
  font-size: 86%;
-  padding: .2rem .5rem;
  margin: 0 .2rem;
+  padding: .2rem .5rem;
  white-space: nowrap;
 }

@ -262,25 +234,25 @@ select:focus {
 }

 select {
-  padding: 0.6rem 3rem 0.6rem 1rem;
-  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjZDFkMWQxIiBkPSJNOS40IDMuNmw1IDcgNS4yLTciLz48L3N2Zz4=) center right no-repeat;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
+  padding-right: 3.0rem;
 }

 select:focus {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNmIiBkPSJNMTkuNiAzLjZIOS40bDUgNyIvPjwvc3ZnPg==);
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
 }

 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;
 }

@ -295,8 +267,8 @@ input[type='radio'] {
 }

 .label-inline {
-  font-weight: normal;
  display: inline-block;
+  font-weight: normal;
  margin-left: .5rem;
 }

@ -315,10 +287,6 @@ input[type='radio'] {
  width: 100%;
 }

-.row.row-wrap {
-  flex-wrap: wrap;
-}
-
 .row.row-no-padding {
  padding: 0;
 }
@ -327,6 +295,10 @@ input[type='radio'] {
  padding: 0;
 }

+.row.row-wrap {
+  flex-wrap: wrap;
+}
+
 .row.row-top {
  -ms-grid-row-align: flex-start;
      align-items: flex-start;
@ -463,7 +435,7 @@ input[type='radio'] {
  max-width: 90%;
 }

-@media (min-width: 40rem) {
+@media (min-width: 640px) {
  .row {
    flex-direction: row;
    margin-left: -1.0rem;
@ -492,14 +464,14 @@ ul {
 }

 dl dl,
-dl ul,
 dl ol,
+dl ul,
 ol dl,
-ol ul,
 ol ol,
+ol ul,
 ul dl,
-ul ul,
-ul ol {
+ul ol,
+ul ul {
  font-size: 90%;
  margin: 1.5rem 0 1.5rem 3.0rem;
 }
@ -508,41 +480,41 @@ dl {
  list-style: none;
 }

-ul {
-  list-style: circle inside;
-}
-
 ol {
  list-style: decimal inside;
 }

-dt,
+ul {
+  list-style: circle inside;
+}
+
 dd,
+dt,
 li {
  margin-bottom: 1.0rem;
 }

-.button,
-button {
+button,
+.button {
  margin-bottom: 1.0rem;
 }

+fieldset,
 input,
-textarea,
 select,
-fieldset {
+textarea {
  margin-bottom: 1.5rem;
 }

-pre,
 blockquote,
 dl,
 figure,
-table,
-p,
-ul,
+form,
 ol,
-form {
+p,
+pre,
+table,
+ul {
  margin-bottom: 2.5rem;
 }

@ -550,20 +522,20 @@ table {
  width: 100%;
 }

-th,
-td {
-  border-bottom: .1rem solid #e1e1e1;
+td,
+th {
+  border-bottom: 0.1rem solid #f4f5f6;
  padding: 1.2rem 1.5rem;
  text-align: left;
 }

-th:first-child,
-td:first-child {
+td:first-child,
+th:first-child {
  padding-left: 0;
 }

-th:last-child,
-td:last-child {
+td:last-child,
+th:last-child {
  padding-right: 0;
 }

@ -618,7 +590,7 @@ h6 {
  line-height: 1.4;
 }

-@media (min-width: 40rem) {
+@media (min-width: 640px) {
  h1 {
    font-size: 5.0rem;
  }
@ -643,25 +615,25 @@ img {
  max-width: 100%;
 }

-.float-right {
-  float: right;
-}
-
-.float-left {
-  float: left;
-}
-
 .clearfix {
  *zoom: 1;
 }

+.clearfix:after {
+  clear: both;
+}
+
 .clearfix:after, .clearfix:before {
  content: '';
  display: table;
 }

-.clearfix:after {
-  clear: both;
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
 }

 /*# sourceMappingURL=milligram.css.map */
--- a/dist/milligram.css.map
+++ b/dist/milligram.css.map
--- a/dist/milligram.min.css
+++ b/dist/milligram.min.css
--- a/dist/milligram.min.css.map
+++ b/dist/milligram.min.css.map
--- a/package.json
+++ b/package.json
@ -54,8 +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"
+		"sass-lint": "^1.8.2"
 	},
 	"engines": {
 		"node": "^6.0.0"
--- a/src/_Base.sass
+++ b/src/_Base.sass
@ -12,7 +12,7 @@ html
 body
 	color: $color-secondary
 	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
-	font-size: 1.6em // currently ems cause chrome bug misinterpreting rems on body element
+	font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
 	font-weight: 300
 	letter-spacing: .01em
 	line-height: 1.6
--- a/src/_Blockquote.sass
+++ b/src/_Blockquote.sass
@ -8,5 +8,5 @@ blockquote
 	margin-right: 0
 	padding: 1rem 1.5rem

-	& *:last-child
-		margin: 0
+	*:last-child
+		margin-bottom: 0
--- a/src/_Button.sass
+++ b/src/_Button.sass
@ -24,20 +24,19 @@ input[type='submit']
 	text-transform: uppercase
 	white-space: nowrap

-	&:hover,
-	&:focus
+	&:focus,
+	&:hover
 		background-color: $color-secondary
 		border-color: $color-secondary
 		color: $color-initial
 		outline: 0

-	&.button-disabled,
 	&[disabled]
 		cursor: default
 		opacity: .5

-		&:hover,
-		&:focus
+		&:focus,
+		&:hover
 			background-color: $color-primary
 			border-color: $color-primary

@ -45,17 +44,16 @@ input[type='submit']
 		background-color: transparent
 		color: $color-primary

-		&:hover,
-		&:focus
+		&:focus,
+		&:hover
 			background-color: transparent
 			border-color: $color-secondary
 			color: $color-secondary

-		&.button-disabled,
 		&[disabled]

-			&:hover,
-			&:focus
+			&:focus,
+			&:hover
 				border-color: inherit
 				color: $color-primary

@ -64,15 +62,14 @@ input[type='submit']
 		border-color: transparent
 		color: $color-primary

-		&:hover,
-		&:focus
+		&:focus,
+		&:hover
 			background-color: transparent
 			border-color: transparent
 			color: $color-secondary

-		&.button-disabled,
 		&[disabled]

-			&:hover,
-			&:focus
+			&:focus,
+			&:hover
 				color: $color-primary
--- a/src/_Form.sass
+++ b/src/_Form.sass
@ -25,11 +25,11 @@ select
 		outline: 0

 select
-	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjZDFkMWQxIiBkPSJNOS40IDMuNmw1IDcgNS4yLTciLz48L3N2Zz4=) center right no-repeat
-	padding: .6rem 3rem .6rem 1rem
+	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat
+	padding-right: 3.0rem

 	&:focus
-		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNmIiBkPSJNMTkuNiAzLjZIOS40bDUgNyIvPjwvc3ZnPg==)
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')

 textarea
 	min-height: 6.5rem
--- a/src/_Grid.sass
+++ b/src/_Grid.sass
@ -21,15 +21,17 @@
 	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-no-padding
+		padding: 0
+
+		&> .column
+			padding: 0

 	&.row-wrap
 		flex-wrap: wrap

+	// Vertically Align Columns
+	// .row-* vertically aligns every .col in the .row
 	&.row-top
 		align-items: flex-start

@ -58,20 +60,6 @@
 		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
-
-		.col-bottom
-			align-self: flex-end
-
-		.col-center
-			align-self: center
-
 		// Column Offsets
 		&.column-offset-10
 			margin-left: 10%
@ -151,3 +139,25 @@
 		&.column-90
 			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)
+
+	.row
+		flex-direction: row
+		margin-left: -1.0rem
+		width: calc(100% + 2.0rem)
+
+		.column
+			margin-bottom: inherit
+			padding: 0 1.0rem
--- a/src/_List.sass
+++ b/src/_List.sass
@ -9,21 +9,21 @@ ul
 	padding-left: 0

 	dl,
-	ul,
-	ol
+	ol,
+	ul
 		font-size: 90%
 		margin: 1.5rem 0 1.5rem 3.0rem

 dl
 	list-style: none

-ul
-	list-style: circle inside
-
 ol
 	list-style: decimal inside

-dt,
+ul
+	list-style: circle inside
+
 dd,
+dt,
 li
 	margin-bottom: 1.0rem
--- a/src/_Spacing.sass
+++ b/src/_Spacing.sass
@ -2,23 +2,23 @@
 // Spacing
 // ––––––––––––––––––––––––––––––––––––––––––––––––––

-.button,
-button
+button,
+.button
 	margin-bottom: 1.0rem

+fieldset,
 input,
-textarea,
 select,
-fieldset
+textarea
 	margin-bottom: 1.5rem

-pre,
 blockquote,
 dl,
 figure,
-table,
-p,
-ul,
+form,
 ol,
-form
+p,
+pre,
+table,
+ul
 	margin-bottom: 2.5rem
--- a/src/_Table.sass
+++ b/src/_Table.sass
@ -5,8 +5,8 @@
 table
 	width: 100%

-th,
-td
+td,
+th
 	border-bottom: .1rem solid $color-quinary
 	padding: 1.2rem 1.5rem
 	text-align: left
--- a/src/_Typography.sass
+++ b/src/_Typography.sass
@ -46,7 +46,7 @@ h6
 	line-height: 1.4

 // Larger than mobile screen
-@media (min-width: 40.0rem)
+@media (min-width: 640px)

 	h1
 		font-size: 5.0rem
--- a/src/_Utility.sass
+++ b/src/_Utility.sass
@ -2,21 +2,21 @@
 // Utility
 // ––––––––––––––––––––––––––––––––––––––––––––––––––

-// Float either direction
-.float-right
-	float: right
-
-.float-left
-	float: left
-
 // Clear a float with .clearfix
 .clearfix
 	*zoom: 1

+	&:after
+		clear: both
+
 	&:after,
 	&:before
 		content: ''
 		display: table

-	&:after
-		clear: both
+// Float either direction
+.float-left
+	float: left
+
+.float-right
+	float: right
--- a/test/index.html
+++ b/test/index.html
@ -16,9 +16,15 @@

 		<main class="wrapper">

+			<section class="container" id="image">
+				<img src="https://raw.githubusercontent.com/milligram/milligram.github.io/master/img/thumbnail.jpg" alt="Image">
+			</section>
+
 			<section class="container" id="typography">
 				<h5 class="title">Typography</h5>
 				<div class="example">
+					<div class="row">
+						<div class="column">
 							<h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 5.0rem (50px)</span></h1>
 							<h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 4.2rem (42px)</span></h2>
 							<h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 3.6rem (36px)</span></h3>
@ -26,27 +32,87 @@
 							<h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 2.4rem (24px)</span></h5>
 							<h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.5rem (15px)</span></h6>
 						</div>
-				<p>See more examples of <strong>typography</strong> <a href="typography.html" title="Examples about typography">here</a>.</p>
+						<div class="column">
+							<p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.</p>
+							<p>Obcaecati <s>error</s> a, quas fugit hic, <a href="#">accusantium</a> autem <i>necessitatibus praesentium</i> placeat, iusto et <b>soluta expedita</b>! Quisquam repellendus <small>voluptatem</small>, <mark>tempora iste culpa fuga</mark>, <time>on April 29</time>!</p>
+							<p>Quisquam nobis, ad. Iusto, <strong>repudiandae</strong>. Autem ipsa blanditiis, quae, fugit nobis <em>perspiciatis in beatae vitae</em> numquam illo, architecto hic dolor <q>molestiae aliquid</q>.</p>
+						</div>
+					</div>
+				</div>
 			</section>

 			<section class="container" id="blockquotes">
 				<h5 class="title">Blockquotes</h5>
 				<div class="example">
+					<div class="row">
+						<div class="column">
+							<p><q>Yeah!! Milligram is amazing.</q></p>
+						</div>
+						<div class="column">
 							<blockquote>
 								<p><em>Yeah!! Milligram is amazing.</em></p>
 							</blockquote>
 						</div>
-				<p>See more examples of <strong>blockquotes</strong> <a href="blockquotes.html" title="Examples about blockquotes">here</a>.</p>
+					</div>
+				</div>
 			</section>

 			<section class="container" id="buttons">
 				<h5 class="title">Buttons</h5>
 				<div class="example">
+					<div class="row">
+						<div class="column">
 							<a class="button" href="javascript: void(0)">Default Button</a>
-					<button class="button button-outline">Outlined Button</button>
-					<input class="button button-clear" type="submit" value="Clear Button">
+							<a class="button button-outline" href="javascript: void(0)">Outlined Button</a>
+							<a class="button button-clear" href="javascript: void(0)">Clear Button</a>
+							<a class="button" disabled href="javascript: void(0)">Default Button</a>
+							<a class="button button-outline" disabled href="javascript: void(0)">Outlined Button</a>
+							<a class="button button-clear" disabled href="javascript: void(0)">Clear Button</a>
+						</div>
+						<div class="column">
+							<button class="button">Default Button</button>
+							<button class="button button-outline">Outlined Button</button>
+							<button class="button button-clear">Clear Button</button>
+							<button class="button" disabled>Default Button</button>
+							<button class="button button-outline" disabled>Outlined Button</button>
+							<button class="button button-clear" disabled>Clear Button</button>
+						</div>
+						<div class="column">
+							<input class="button" type="submit" value="Default Button">
+							<input class="button button-outline" type="submit" value="Outlined Button">
+							<input class="button button-clear" type="submit" value="Clear Button">
+							<input class="button" disabled type="submit" value="Default Button">
+							<input class="button button-outline" disabled type="submit" value="Outlined Button">
+							<input class="button button-clear" disabled type="submit" value="Clear Button">
+						</div>
+					</div>
+					<div class="row">
+						<div class="column">
+							<input class="button" type="reset" value="Default Button">
+							<input class="button button-outline" type="reset" value="Outlined Button">
+							<input class="button button-clear" type="reset" value="Clear Button">
+							<input class="button" disabled type="reset" value="Default Button">
+							<input class="button button-outline" disabled type="reset" value="Outlined Button">
+							<input class="button button-clear" disabled type="reset" value="Clear Button">
+						</div>
+						<div class="column">
+							<input class="button" type="button" value="Default Button">
+							<input class="button button-outline" type="button" value="Outlined Button">
+							<input class="button button-clear" type="button" value="Clear Button">
+							<input class="button" disabled type="button" value="Default Button">
+							<input class="button button-outline" disabled type="button" value="Outlined Button">
+							<input class="button button-clear" disabled type="button" value="Clear Button">
+						</div>
+						<div class="column">
+							<div class="button">Default Button</div>
+							<div class="button button-outline">Outlined Button</div>
+							<div class="button button-clear">Clear Button</div>
+							<div class="button" disabled>Default Button</div>
+							<div class="button button-outline" disabled>Outlined Button</div>
+							<div class="button button-clear" disabled>Clear Button</div>
+						</div>
+					</div>
 				</div>
-				<p>See more examples of <strong>buttons</strong> <a href="buttons.html" title="Examples about buttons">here</a>.</p>
 			</section>

 			<section class="container" id="lists">
@ -57,43 +123,120 @@
 							<ul>
 								<li>Unordered list item 1</li>
 								<li>Unordered list item 2</li>
+								<li>
+									<ul>
+										<li>Unordered list item 1</li>
+										<li>Unordered list item 2</li>
+										<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>
 							</ul>
 						</div>
 						<div class="column">
 							<ol>
 								<li>Ordered list item 1</li>
 								<li>Ordered list item 2</li>
+								<li>
+									<ol>
+										<li>Ordered list item 1</li>
+										<li>Ordered list item 2</li>
+										<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>
 							</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>
 							</dl>
 						</div>
 					</div>
 				</div>
-				<p>See more examples of <strong>lists</strong> <a href="lists.html" title="Examples about lists">here</a>.</p>
 			</section>

 			<section class="container" id="forms">
 				<h5 class="title">Forms</h5>
 				<div class="example">
-					<form action="javascript: void(0)">
+				<form>
 						<fieldset>
-							<label for="nameField">Name</label>
-							<input type="text" placeholder="CJ Patoilo" id="nameField">
-							<label for="commentField">Comment</label>
-							<textarea placeholder="Hi CJ &hellip;" id="commentField"></textarea>
-							<div class="example-send-yourself-copy">
-								<input type="checkbox" id="confirmField">
-								<label class="label-inline" for="confirmField">Send a copy to yourself</label>
+							<legend>Legend</legend>
+							<div class="row">
+								<div class="column">
+									<label for="textField">Text field</label>
+									<input type="text" placeholder="Text field" id="textField">
+									<label for="emailField">Email field</label>
+									<input type="email" id="emailField" placeholder="Email field">
+									<label for="numberField">Number field</label>
+									<input type="number" id="numberField" placeholder="Number field">
+									<label for="passwordField">Password field</label>
+									<input type="password" id="passwordField" placeholder="Password field">
+									<label for="selectField">Select field</label>
+									<select id="selectField">
+										<option value="selectField1">Select field 1</option>
+										<option value="selectField2">Select field 2</option>
+										<option value="selectField3">Select field 3</option>
+										<option value="selectField4">Select field 4</option>
+									</select>
+									<label for="searchField">Search field</label>
+									<input type="search" id="searchField" placeholder="Search field">
+								</div>
+								<div class="column">
+									<label for="telField">Tel field</label>
+									<input type="tel" id="telField" placeholder="Tel field">
+									<label for="urlField">URL field</label>
+									<input type="url" id="urlField" placeholder="URL field">
+									<label for="radioField">Radio field</label>
+									<div class="row">
+										<div class="column">
+											<input type="radio" id="radioField1" name="radioField">
+											<label class="label-inline" for="radioField1">Radio field 1</label>
+										</div>
+										<div class="column">
+											<input type="radio" id="radioField2" name="radioField">
+											<label class="label-inline" for="radioField2">Radio field 2</label>
+										</div>
+									</div>
+									<label for="radioField">Checkbox field</label>
+									<div class="row">
+										<div class="column">
+											<input type="checkbox" id="checkboxField1">
+											<label class="label-inline" for="checkboxField1">Checkbox field 1</label>
+										</div>
+										<div class="column">
+											<input type="checkbox" id="checkboxField2">
+											<label class="label-inline" for="checkboxField2">Checkbox field 2</label>
+										</div>
+									</div>
+									<label for="textareaField">Textarea field</label>
+									<textarea placeholder="Textarea field" id="textareaField"></textarea>
+									<input type="submit">
+									<input type="reset" class="button-clear">
+								</div>
 							</div>
-							<input class="button-primary" type="submit" value="Send">
 						</fieldset>
 					</form>
 				</div>
-				<p>See more examples of <strong>forms</strong> <a href="forms.html" title="Examples about forms">here</a>.</p>
 			</section>

 			<section class="container" id="tables">
@ -109,6 +252,12 @@
 							</tr>
 						</thead>
 						<tbody>
+							<tr>
+								<td>Kevin Durant</td>
+								<td>27</td>
+								<td>2.06</td>
+								<td> Washington, DC</td>
+							</tr>
 							<tr>
 								<td>Stephen Curry</td>
 								<td>27</td>
@ -121,29 +270,273 @@
 								<td>2,01</td>
 								<td>Los Angeles, CA</td>
 							</tr>
+							<tr>
+								<td>Draymond Green</td>
+								<td>26</td>
+								<td>2,01</td>
+								<td>Saginaw, MI</td>
+							</tr>
+							<tr>
+								<td>Andre Iguodala</td>
+								<td>32</td>
+								<td>1,98</td>
+								<td>Springfield, IL</td>
+							</tr>
+							<tr>
+								<td>Anderson Varejão</td>
+								<td>33</td>
+								<td>2,08</td>
+								<td>Colatina, ES</td>
+							</tr>
+							<tr>
+								<td>Shaun Livingston</td>
+								<td>30</td>
+								<td>2,01</td>
+								<td>Peoria, CA</td>
+							</tr>
 						</tbody>
 					</table>
 				</div>
-				<p>See more examples of <strong>tables</strong> <a href="tables.html" title="Examples about tables">here</a>.</p>
 			</section>

 			<section class="container" id="grids">
 				<h5 class="title">Grids</h5>
 				<div class="example">
-					<div class="container">
 					<div class="row">
-							<div class="column"><span class="column-demo">.column</span></div>
-							<div class="column"><span class="column-demo">.column</span></div>
-							<div class="column"><span class="column-demo">.column</span></div>
-							<div class="column"><span class="column-demo">.column</span></div>
+						<div class="column"><span class="column-demo">100%</span></div>
 					</div>
 					<div class="row">
-							<div class="column"><span class="column-demo">.column</span></div>
-							<div class="column column-50 column-offset-25"><span class="column-demo">.column-50.column-offset-25</span></div>
+						<div class="column column-10"><span class="column-demo">10%</span></div>
+						<div class="column column-90"><span class="column-demo">90%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-20"><span class="column-demo">20%</span></div>
+						<div class="column column-80"><span class="column-demo">80%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-25"><span class="column-demo">25%</span></div>
+						<div class="column column-75"><span class="column-demo">75%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-33"><span class="column-demo">33%</span></div>
+						<div class="column column-67"><span class="column-demo">67%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-40"><span class="column-demo">40%</span></div>
+						<div class="column column-60"><span class="column-demo">60%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-50"><span class="column-demo">50%</span></div>
+						<div class="column column-50"><span class="column-demo">50%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-60"><span class="column-demo">60%</span></div>
+						<div class="column column-40"><span class="column-demo">40%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-67"><span class="column-demo">67%</span></div>
+						<div class="column column-33"><span class="column-demo">33%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-75"><span class="column-demo">75%</span></div>
+						<div class="column column-25"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-80"><span class="column-demo">80%</span></div>
+						<div class="column column-20"><span class="column-demo">20%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-90"><span class="column-demo">90%</span></div>
+						<div class="column column-10"><span class="column-demo">10%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">100%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-90"><span class="column-demo">90%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-80"><span class="column-demo">80%</span></div>
+						<div class="column"><span class="column-demo">20%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-75"><span class="column-demo">75%</span></div>
+						<div class="column"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-67"><span class="column-demo">67%</span></div>
+						<div class="column"><span class="column-demo">33%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-60"><span class="column-demo">60%</span></div>
+						<div class="column"><span class="column-demo">40%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-50"><span class="column-demo">50%</span></div>
+						<div class="column"><span class="column-demo">50%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-40"><span class="column-demo">40%</span></div>
+						<div class="column"><span class="column-demo">60%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-33"><span class="column-demo">33%</span></div>
+						<div class="column"><span class="column-demo">67%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-25"><span class="column-demo">25%</span></div>
+						<div class="column"><span class="column-demo">75%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-20"><span class="column-demo">20%</span></div>
+						<div class="column"><span class="column-demo">80%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-10"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">90%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">100%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">50%</span></div>
+						<div class="column"><span class="column-demo">50%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">33.3%</span></div>
+						<div class="column"><span class="column-demo">33.3%</span></div>
+						<div class="column"><span class="column-demo">33.3%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">25%</span></div>
+						<div class="column"><span class="column-demo">25%</span></div>
+						<div class="column"><span class="column-demo">25%</span></div>
+						<div class="column"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">20%</span></div>
+						<div class="column"><span class="column-demo">20%</span></div>
+						<div class="column"><span class="column-demo">20%</span></div>
+						<div class="column"><span class="column-demo">20%</span></div>
+						<div class="column"><span class="column-demo">20%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">16.6%</span></div>
+						<div class="column"><span class="column-demo">16.6%</span></div>
+						<div class="column"><span class="column-demo">16.6%</span></div>
+						<div class="column"><span class="column-demo">16.6%</span></div>
+						<div class="column"><span class="column-demo">16.6%</span></div>
+						<div class="column"><span class="column-demo">16.6%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">14.28%</span></div>
+						<div class="column"><span class="column-demo">14.28%</span></div>
+						<div class="column"><span class="column-demo">14.28%</span></div>
+						<div class="column"><span class="column-demo">14.28%</span></div>
+						<div class="column"><span class="column-demo">14.28%</span></div>
+						<div class="column"><span class="column-demo">14.28%</span></div>
+						<div class="column"><span class="column-demo">14.28%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">12.5%</span></div>
+						<div class="column"><span class="column-demo">12.5%</span></div>
+						<div class="column"><span class="column-demo">12.5%</span></div>
+						<div class="column"><span class="column-demo">12.5%</span></div>
+						<div class="column"><span class="column-demo">12.5%</span></div>
+						<div class="column"><span class="column-demo">12.5%</span></div>
+						<div class="column"><span class="column-demo">12.5%</span></div>
+						<div class="column"><span class="column-demo">12.5%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">11.11%</span></div>
+						<div class="column"><span class="column-demo">11.11%</span></div>
+						<div class="column"><span class="column-demo">11.11%</span></div>
+						<div class="column"><span class="column-demo">11.11%</span></div>
+						<div class="column"><span class="column-demo">11.11%</span></div>
+						<div class="column"><span class="column-demo">11.11%</span></div>
+						<div class="column"><span class="column-demo">11.11%</span></div>
+						<div class="column"><span class="column-demo">11.11%</span></div>
+						<div class="column"><span class="column-demo">11.11%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+						<div class="column"><span class="column-demo">10%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+						<div class="column"><span class="column-demo">9.09%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+						<div class="column"><span class="column-demo">8.3%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-50 column-offset-25"><span class="column-demo">50%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-50 column-offset-50"><span class="column-demo">50%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-25 column-offset-75"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-25 column-offset-50"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
+						<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-25"><span class="column-demo">25%</span></div>
+						<div class="column column-25 column-offset-50"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column"><span class="column-demo">25%</span></div>
+						<div class="column column-50 column-offset-25"><span class="column-demo">50%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-50"><span class="column-demo">50%</span></div>
+						<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-25"><span class="column-demo">25%</span></div>
+						<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
+					</div>
+					<div class="row">
+						<div class="column column-75 column-offset-25"><span class="column-demo">75%</span></div>
 					</div>
 				</div>
-				</div>
-				<p>See more examples of <strong>grids</strong> <a href="grids.html" title="Examples about grids">here</a>.</p>
 			</section>

 			<section class="container" id="codes">
@ -151,25 +544,18 @@
 				<div class="example">
 <pre><code>.milligram {
  color: #9b4dca;
-}
-</code></pre>
+}</code></pre>
 				</div>
-				<p>See more examples of <strong>codes</strong> <a href="codes.html" title="Examples about codes">here</a>.</p>
 			</section>

 			<section class="container" id="utilities">
 				<h5 class="title">Utilities</h5>
 				<div class="example">
 					<div class="clearfix">
-						<div class="float-left">
-							<h6>Float to left</h6>
-						</div>
-						<div class="float-right">
-							<h6>Float to right</h6>
+						<img class="float-left" src="http://placehold.it/320/d1d1d1/?text=float+to+left" alt="float to left">
+						<img class="float-right" src="http://placehold.it/320/d1d1d1/?text=float+to+right" alt="float to right">
 					</div>
 				</div>
-				</div>
-				<p>See more examples of <strong>utilities</strong> <a href="utilities.html" title="Examples about utilities">here</a>.</p>
 			</section>

 			<section class="container" id="examples">
--- a/test/visual/backstop.config.js
+++ b/test/visual/backstop.config.js
@ -1,18 +1,104 @@
 module.exports = {
 	viewports: [
-		{ name: 'phone_v', width: 320, height: 480 },
-		{ name: 'phone_h', width: 480, height: 320 },
-		{ name: 'tablet_v', width: 768, height: 1024 },
-		{ name: 'tablet_h', width: 1024, height: 768 },
+		{ name: 'phone', width: 320, height: 480 },
+		{ name: 'tablet', width: 768, height: 1024 },
 		{ name: 'laptop', width: 1280, height: 800 },
 		{ name: 'desktop', width: 1920, height: 1080 }
 	],
 	scenarios: [{
-		label: 'Milligram | A minimalist CSS framework.',
+    label: 'Typography',
    url: 'http://localhost:3000',
    hideSelectors: [],
-		removeSelectors: ['.__bs_notify__'],
-		selectors: ['body'],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#typography'],
+    readyEvent: null,
+    delay: 500,
+    misMatchThreshold: 0.1,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  },{
+    label: 'Blockquotes',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#blockquotes'],
+    readyEvent: null,
+    delay: 500,
+    misMatchThreshold: 0.1,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  }, {
+    label: 'Buttons',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#buttons'],
+    readyEvent: null,
+    delay: 500,
+    misMatchThreshold: 0.1,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  }, {
+    label: 'Lists',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#lists'],
+    readyEvent: null,
+    delay: 500,
+    misMatchThreshold: 0.1,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  }, {
+    label: 'Forms',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#forms'],
+    readyEvent: null,
+    delay: 500,
+    misMatchThreshold: 0.1,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  }, {
+    label: 'Tables',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#tables'],
+    readyEvent: null,
+    delay: 500,
+    misMatchThreshold: 0.1,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  }, {
+    label: 'Grids',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#grids'],
+    readyEvent: null,
+    delay: 500,
+    misMatchThreshold: 0.1,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  }, {
+    label: 'Codes',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#codes'],
+    readyEvent: null,
+    delay: 500,
+    misMatchThreshold: 0.1,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  }, {
+    label: 'Utilities',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    removeSelectors: ['#__bs_notify__'],
+    selectors: ['#utilities'],
    readyEvent: null,
    delay: 500,
    misMatchThreshold: 0.1,
@ -25,8 +111,8 @@ module.exports = {
 		casper_scripts: '../../test/visual/fixtures',
 		compare_data: '.tmp/compare.json'
 	},
-	engine: 'slimerjs',
-	report: ['browser'],
+	engine: 'phantomjs',
+	report: ['browser', 'CLI'],
 	casperFlags: [],
 	debug: false,
 	port: 3002
--- a/test/visual/reference/0_0_body_0_phone_v.png
+++ b/test/visual/reference/0_0_body_0_phone_v.png
--- a/test/visual/reference/0_0_body_1_phone_h.png
+++ b/test/visual/reference/0_0_body_1_phone_h.png
--- a/test/visual/reference/0_0_body_2_tablet_v.png
+++ b/test/visual/reference/0_0_body_2_tablet_v.png
--- a/test/visual/reference/0_0_body_3_tablet_h.png
+++ b/test/visual/reference/0_0_body_3_tablet_h.png
--- a/test/visual/reference/0_0_body_4_laptop.png
+++ b/test/visual/reference/0_0_body_4_laptop.png
--- a/test/visual/reference/0_0_body_5_desktop.png
+++ b/test/visual/reference/0_0_body_5_desktop.png
--- a/test/visual/reference/0_0_typography_0_phone.png
+++ b/test/visual/reference/0_0_typography_0_phone.png
--- a/test/visual/reference/0_0_typography_1_tablet.png
+++ b/test/visual/reference/0_0_typography_1_tablet.png
--- a/test/visual/reference/0_0_typography_2_laptop.png
+++ b/test/visual/reference/0_0_typography_2_laptop.png
--- a/test/visual/reference/0_0_typography_3_desktop.png
+++ b/test/visual/reference/0_0_typography_3_desktop.png
--- a/test/visual/reference/1_0_blockquotes_0_phone.png
+++ b/test/visual/reference/1_0_blockquotes_0_phone.png
--- a/test/visual/reference/1_0_blockquotes_1_tablet.png
+++ b/test/visual/reference/1_0_blockquotes_1_tablet.png
--- a/test/visual/reference/1_0_blockquotes_2_laptop.png
+++ b/test/visual/reference/1_0_blockquotes_2_laptop.png
--- a/test/visual/reference/1_0_blockquotes_3_desktop.png
+++ b/test/visual/reference/1_0_blockquotes_3_desktop.png
--- a/test/visual/reference/2_0_buttons_0_phone.png
+++ b/test/visual/reference/2_0_buttons_0_phone.png
--- a/test/visual/reference/2_0_buttons_1_tablet.png
+++ b/test/visual/reference/2_0_buttons_1_tablet.png
--- a/test/visual/reference/2_0_buttons_2_laptop.png
+++ b/test/visual/reference/2_0_buttons_2_laptop.png
--- a/test/visual/reference/2_0_buttons_3_desktop.png
+++ b/test/visual/reference/2_0_buttons_3_desktop.png
--- a/test/visual/reference/3_0_lists_0_phone.png
+++ b/test/visual/reference/3_0_lists_0_phone.png
--- a/test/visual/reference/3_0_lists_1_tablet.png
+++ b/test/visual/reference/3_0_lists_1_tablet.png
--- a/test/visual/reference/3_0_lists_2_laptop.png
+++ b/test/visual/reference/3_0_lists_2_laptop.png
--- a/test/visual/reference/3_0_lists_3_desktop.png
+++ b/test/visual/reference/3_0_lists_3_desktop.png
--- a/test/visual/reference/4_0_forms_0_phone.png
+++ b/test/visual/reference/4_0_forms_0_phone.png
--- a/test/visual/reference/4_0_forms_1_tablet.png
+++ b/test/visual/reference/4_0_forms_1_tablet.png
--- a/test/visual/reference/4_0_forms_2_laptop.png
+++ b/test/visual/reference/4_0_forms_2_laptop.png
--- a/test/visual/reference/4_0_forms_3_desktop.png
+++ b/test/visual/reference/4_0_forms_3_desktop.png
--- a/test/visual/reference/5_0_tables_0_phone.png
+++ b/test/visual/reference/5_0_tables_0_phone.png
--- a/test/visual/reference/5_0_tables_1_tablet.png
+++ b/test/visual/reference/5_0_tables_1_tablet.png
--- a/test/visual/reference/5_0_tables_2_laptop.png
+++ b/test/visual/reference/5_0_tables_2_laptop.png
--- a/test/visual/reference/5_0_tables_3_desktop.png
+++ b/test/visual/reference/5_0_tables_3_desktop.png
--- a/test/visual/reference/6_0_grids_0_phone.png
+++ b/test/visual/reference/6_0_grids_0_phone.png
--- a/test/visual/reference/6_0_grids_1_tablet.png
+++ b/test/visual/reference/6_0_grids_1_tablet.png
--- a/test/visual/reference/6_0_grids_2_laptop.png
+++ b/test/visual/reference/6_0_grids_2_laptop.png
--- a/test/visual/reference/6_0_grids_3_desktop.png
+++ b/test/visual/reference/6_0_grids_3_desktop.png
--- a/test/visual/reference/7_0_codes_0_phone.png
+++ b/test/visual/reference/7_0_codes_0_phone.png
--- a/test/visual/reference/7_0_codes_1_tablet.png
+++ b/test/visual/reference/7_0_codes_1_tablet.png
--- a/test/visual/reference/7_0_codes_2_laptop.png
+++ b/test/visual/reference/7_0_codes_2_laptop.png
--- a/test/visual/reference/7_0_codes_3_desktop.png
+++ b/test/visual/reference/7_0_codes_3_desktop.png
--- a/test/visual/reference/8_0_utilities_0_phone.png
+++ b/test/visual/reference/8_0_utilities_0_phone.png
--- a/test/visual/reference/8_0_utilities_1_tablet.png
+++ b/test/visual/reference/8_0_utilities_1_tablet.png
--- a/test/visual/reference/8_0_utilities_2_laptop.png
+++ b/test/visual/reference/8_0_utilities_2_laptop.png
--- a/test/visual/reference/8_0_utilities_3_desktop.png
+++ b/test/visual/reference/8_0_utilities_3_desktop.png