diff --git a/examples/index.html b/examples/index.html
index b8e5fc1..03bdd7e 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -2,40 +2,15 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<meta name="robots" content="index, follow">
-		<meta name="theme-color" content="#f4f5f6">
-		<meta name="apple-mobile-web-app-status-bar-style" content="#f4f5f6">
-		<meta name="apple-mobile-web-app-capable" content="yes">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<meta name="author" content="CJ Patoilo">
 		<meta name="description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
-		<meta property="og:description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
-		<meta property="og:image" content="https://milligram.github.io/img/thumbnail.jpg">
-		<meta property="og:locale" content="en">
-		<meta property="og:site_name" content="Milligram | A minimalist CSS framework.">
-		<meta property="og:title" content="Milligram | A minimalist CSS framework.">
-		<meta property="og:type" content="website">
-		<meta property="og:url" content="https://milligram.github.io/">
-		<meta property="article:published_time" content="2015-12-25T01:00:00Z">
-		<meta property="article:author" content="CJ Patoilo">
-		<meta property="article:section" content="website">
-		<meta name="twitter:card" content="summary_large_image">
-		<meta name="twitter:domain" content="Milligram | A minimalist CSS framework.">
-		<meta name="twitter:url" content="https://milligram.github.io/">
-		<meta name="twitter:site" content="https://milligram.github.io/">
-		<meta name="twitter:creator" content="CJ Patoilo">
-		<meta name="twitter:title" content="Milligram | A minimalist CSS framework.">
-		<meta name="twitter:description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
-		<meta name="twitter:image:src" content="https://milligram.github.io/img/thumbnail.jpg">
 		<title>Milligram | A minimalist CSS framework.</title>
-		<link rel="canonical" href="https://milligram.github.io/">
-		<link rel="image_src" href="https://milligram.github.io/img/thumbnail.jpg">
+		<link rel="icon" href="https://milligram.github.io/img/favicon.ico">
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
-		<link rel="stylesheet" href="https://milligram.github.io/css/milligram.min.css">
+		<link rel="stylesheet" href="../dist/milligram.min.css">
 		<link rel="stylesheet" href="https://milligram.github.io/css/style.css">
-		<link rel="icon" href="https://milligram.github.io/img/favicon.png">
 	</head>
 	<body>
 
@@ -50,38 +25,38 @@
 					</a>
 
 					<ul class="navigation-list float-right">
-						<li class="navigation-item">
-							<a class="navigation-link" href="#popover-grid" data-popover>Docs</a>
-							<div class="popover" id="popover-grid">
-								<ul class="popover-list">
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#examples" title="Examples">Examples</a></li>
-									<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#contributing" title="Contributing">Contributing</a></li>
-								</ul>
-							</div>
-						</li>
-						<li class="navigation-item">
-							<a class="navigation-link" href="#popover-support" data-popover>Support</a>
-							<div class="popover" id="popover-support">
-								<ul class="popover-list">
-									<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram" title="On Github">On Github</a></li>
-									<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram/issues/new" title="Need help?">Need help?</a></li>
-									<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram#license" title="License">License</a></li>
-									<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram/releases" title="Versions">Versions</a></li>
-								</ul>
-							</div>
-						</li>
+					<li class="navigation-item">
+						<a class="navigation-link" href="#popover-grid" data-popover>Docs</a>
+						<div class="popover" id="popover-grid">
+							<ul class="popover-list">
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#examples" title="Examples">Examples</a></li>
+								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#contributing" title="Contributing">Contributing</a></li>
+							</ul>
+						</div>
+					</li>
+					<li class="navigation-item">
+						<a class="navigation-link" href="#popover-support" data-popover>Support</a>
+						<div class="popover" id="popover-support">
+							<ul class="popover-list">
+								<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram" title="On Github">On Github</a></li>
+								<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram/issues/new" title="Need help?">Need help?</a></li>
+								<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram#license" title="License">License</a></li>
+								<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram/releases" title="Versions">Versions</a></li>
+							</ul>
+						</div>
+					</li>
 					</ul>
 					<a class="hidden-xs github-corner" href="https://github.com/milligram/milligram" title="Milligram on Github" target="_blank">
 						<svg width="80" height="80" viewBox="0 0 250 250" class="github-corner">
@@ -94,29 +69,29 @@
 			</nav>
 
 			<section class="container" id="examples">
-				<h5 class="title">Examples</h5>
-				<p>You can view more examples of using Milligram.</p>
-				<p>
-					<ul>
-						<li><a href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
-						<li><a href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
-						<li><a href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
-						<li><a href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
-						<li><a href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
-						<li><a href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
-						<li><a href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
-						<li><a href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
-						<li><a href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
-						<li><a href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
-						<li><a href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
-						<li><a href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
-					</ul>
-				</p>
+			<h5 class="title">Examples</h5>
+			<p>You can view more examples of using Milligram.</p>
+			<p>
+				<ul>
+					<li><a href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
+					<li><a href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
+					<li><a href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
+					<li><a href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
+					<li><a href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
+					<li><a href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
+					<li><a href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
+					<li><a href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
+					<li><a href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
+					<li><a href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
+					<li><a href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
+					<li><a href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
+				</ul>
+			</p>
 			</section>
 
 			<section class="container" id="contributing">
 				<h5 class="title">Contributing</h5>
-				<p>Want to contribute? Follow these <a href="https://github.com/milligram/milligram/blob/master/contributing.md" title="Contributing">recommendations</a>.</p>
+				<p>Want to contribute? Follow these <a href="https://github.com/milligram/milligram/blob/master/.github/contributing.md" title="Contributing">recommendations</a>.</p>
 			</section>
 
 			<footer class="footer">
@@ -127,8 +102,7 @@
 
 		</main>
 
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>
 		<script src="https://milligram.github.io/js/script.js"></script>
 
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/package.json b/package.json
index 7ca054f..46dd6b3 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
 	},
 	"devDependencies": {
 		"autoprefixer": "^6.3.6",
+		"browser-sync": "^2.13.0",
 		"node-sass": "^3.7.0",
 		"npm-run-all": "^2.1.1",
 		"onchange": "^2.4.0",
@@ -56,12 +57,12 @@
 		"node": "^6.0.0"
 	},
 	"scripts": {
-		"banner:expanded": "echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - dist/milligram.css > temp && mv temp dist/milligram.css",
-		"banner:compressed": "echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - dist/milligram.min.css > temp && mv temp dist/milligram.min.css",
-		"sass:expanded": "node-sass --output-style expanded src/milligram.sass dist/milligram.css",
-		"sass:compressed": "node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
+		"banner": "for m in dist/*.css; do echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - $m > temp && mv temp $m; done",
+		"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
 		"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers 'last 1 versions' -r dist/*.css",
+		"build": "npm-run-all sass autoprefixer banner",
 		"watch": "onchange src -- npm run build",
-		"build": "npm-run-all sass:expanded sass:compressed autoprefixer banner:expanded banner:compressed"
+		"serve": "browser-sync start -s test --ss dist -f dist",
+		"start": "npm-run-all -p watch serve"
 	}
 }
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..edcba93
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="author" content="CJ Patoilo">
+		<meta name="description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
+		<title>Milligram | A minimalist CSS framework.</title>
+		<link rel="icon" href="https://milligram.github.io/img/favicon.ico">
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
+		<link rel="stylesheet" href="milligram.min.css"><!-- to generate this style run `$ npm start` -->
+		<link rel="stylesheet" href="https://milligram.github.io/css/style.css">
+	</head>
+	<body>
+
+		<main class="wrapper">
+
+			<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>
+				<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>
+				<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>
+				<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">
+				<h5 class="title">Lists</h5>
+				<div class="example">
+					<div class="row">
+						<div class="column">
+							<ul>
+								<li>Unordered list item 1</li>
+								<li>Unordered list item 2</li>
+							</ul>
+						</div>
+						<div class="column">
+							<ol>
+								<li>Ordered list item 1</li>
+								<li>Ordered list item 2</li>
+							</ol>
+						</div>
+						<div class="column">
+							<dl>
+								<dt>Description list item 1</dt>
+								<dd>Description list item 1.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)">
+						<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>
+							</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">
+				<h5 class="title">Tables</h5>
+				<div class="example">
+					<table>
+						<thead>
+							<tr>
+								<th>Name</th>
+								<th>Age</th>
+								<th>Height</th>
+								<th>Location</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>Stephen Curry</td>
+								<td>27</td>
+								<td>1,91</td>
+								<td>Akron, OH</td>
+							</tr>
+							<tr>
+								<td>Klay Thompson</td>
+								<td>25</td>
+								<td>2,01</td>
+								<td>Los Angeles, 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>
+				</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">
+				<h5 class="title">Codes</h5>
+				<div class="example">
+<pre><code>.milligram {
+  color: #9b4dca;
+}
+</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>
+					</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">
+				<h5 class="title">Examples</h5>
+				<p>
+					<ul>
+						<li><a href="https://milligram.github.io/getting-started.html" title="Getting Started">Getting Started</a></li>
+						<li><a href="https://milligram.github.io/typography.html" title="Typography">Typography</a></li>
+						<li><a href="https://milligram.github.io/blockquotes.html" title="Blockquotes">Blockquotes</a></li>
+						<li><a href="https://milligram.github.io/buttons.html" title="Buttons">Buttons</a></li>
+						<li><a href="https://milligram.github.io/lists.html" title="Lists">Lists</a></li>
+						<li><a href="https://milligram.github.io/forms.html" title="Forms">Forms</a></li>
+						<li><a href="https://milligram.github.io/tables.html" title="Tables">Tables</a></li>
+						<li><a href="https://milligram.github.io/grids.html" title="Grids">Grids</a></li>
+						<li><a href="https://milligram.github.io/codes.html" title="Codes">Codes</a></li>
+						<li><a href="https://milligram.github.io/utilities.html" title="Utilities">Utilities</a></li>
+						<li><a href="https://milligram.github.io/tips.html" title="Tips">Tips</a></li>
+						<li><a href="https://milligram.github.io/browser-support.html" title="Browser Support">Browser Support</a></li>
+					</ul>
+				</p>
+			</section>
+
+			<footer class="footer">
+				<section class="container">
+					<p>Designed with ♥ by <a target="blank" href="http://cjpatoilo.com" title="CJ Patoilo">CJ Patoilo</a>. Licensed under the <a target="blank" href="https://github.com/milligram/milligram#license" title="MIT License">MIT License</a>.</p>
+				</section>
+			</footer>
+
+		</main>
+
+	</body>
+</html>
