Updated visual regression test

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">
@@ -154,22 +547,16 @@
 }
 </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?text=Float+to+left" alt="Float to left">
+						<img class="float-right" src="http://placehold.it/320?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">

test/visual/backstop.config.js

@@ -11,7 +11,7 @@ module.exports = {
 		label: 'Milligram | A minimalist CSS framework.',
 		url: 'http://localhost:3000',
 		hideSelectors: [],
-		removeSelectors: ['.__bs_notify__'],
+		removeSelectors: ['#__bs_notify__'],
 		selectors: ['body'],
 		readyEvent: null,
 		delay: 500,