Merge branch 'feature/improvements' into develop

2016-09-09 21:37:54 -03:00 · 2016-09-09 21:37:54 -03:00 · c5ee472409
parent 05bf620831 84f0cffa6b
commit c5ee472409
61 changed files with 686 additions and 249 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
@ -53,8 +53,7 @@
 		"node-sass": "^3.7.0",
 		"npm-run-all": "^2.1.1",
 		"onchange": "^2.4.0",
-		"postcss-cli": "^2.5.2",
-		"slimerjs": "^0.906.2"
+		"postcss-cli": "^2.5.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
@ -3,10 +3,10 @@
 // ––––––––––––––––––––––––––––––––––––––––––––––––––

 blockquote
-	border-left: 0.3rem solid $color-quaternary
+	border-left: .3rem solid $color-quaternary
 	margin-left: 0
 	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]
 		opacity: .5
 		cursor: default

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

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

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

-		&.button-disabled,
 		&[disabled]

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

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

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

-		&.button-disabled,
 		&[disabled]

-			&:hover,
-			&:focus
+			&:focus,
+			&:hover
 				color: $color-primary
--- a/src/_Code.sass
+++ b/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
--- a/src/_Form.sass
+++ b/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
+	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
 	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
--- a/src/_Grid.sass
+++ b/src/_Grid.sass
@ -2,7 +2,7 @@
 // Grid
 // ––––––––––––––––––––––––––––––––––––––––––––––––––

-// .container is main centered wrapper with a max width of 1120rem (1120px)
+// .container is main centered wrapper with a max width of 112.0rem (1120px)
 .container
 	margin: 0 auto
 	max-width: 112.0rem
@ -21,18 +21,14 @@
 	padding: 0
 	width: 100%

-	&.row-wrap
-		flex-wrap: wrap
-
 	&.row-no-padding
 		padding: 0

 		&> .column
 			padding: 0

-	// & + .row
-	// 	margin-top: -.5rem
-	// 	padding-top: 0
+	&.row-wrap
+		flex-wrap: wrap

 	// Vertically Align Columns
 	// .row-* vertically aligns every .col in the .row
@ -131,7 +127,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%

@ -148,7 +145,7 @@
 			max-width: 90%

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

 	.row
 		flex-direction: row
--- a/src/_Image.sass
+++ b/src/_Image.sass
@ -3,4 +3,4 @@
 // ––––––––––––––––––––––––––––––––––––––––––––––––––

 img
-	max-width: 100%
+	max-width: 100%
--- 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,9 +5,9 @@
 table
 	width: 100%

-th,
-td
-	border-bottom: .1rem solid #e1e1e1
+td,
+th
+	border-bottom: .1rem solid $color-tertiary
 	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,37 +16,103 @@

 		<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">
-					<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>
-					<h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 3.0rem (30px)</span></h4>
-					<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 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>
+							<h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 3.0rem (30px)</span></h4>
+							<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>
+						<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>
-				<p>See more examples of <strong>typography</strong> <a href="typography.html" title="Examples about typography">here</a>.</p>
 			</section>

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

 			<section class="container" id="buttons">
 				<h5 class="title">Buttons</h5>
 				<div class="example">
-					<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">
+					<div class="row">
+						<div class="column">
+							<a class="button" href="javascript: void(0)">Default Button</a>
+							<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>
-						<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>
+					<div class="row">
+						<div class="column"><span class="column-demo">100%</span></div>
+					</div>
+					<div class="row">
+						<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>
-				<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>
-						</div>
+						<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>
-				<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,32 +1,118 @@
 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.',
-		url: 'http://localhost:3000',
-		hideSelectors: [],
-		removeSelectors: ['.__bs_notify__'],
-		selectors: ['body'],
-		readyEvent: null,
-		delay: 500,
-		misMatchThreshold: 0.1,
-		onBeforeScript: 'onBefore.js',
-		onReadyScript: 'onReady.js'
-	}],
+    label: 'Typography',
+    url: 'http://localhost:3000',
+    hideSelectors: [],
+    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,
+    onBeforeScript: 'onBefore.js',
+    onReadyScript: 'onReady.js'
+  }],
 	paths: {
 		bitmaps_reference: '../../test/visual/reference',
 		bitmaps_test: '.tmp',
 		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