Remove broken image

Updated variable colors as default.

.gitignore

@@ -0,0 +1,5 @@
+/sass/.DS_Store
+
+/.sass-cache
+
+/sass/.sass-cache/

CNAME

@@ -1 +1 @@
-minfwk.com
+mincss.com

README.md

@@ -3,35 +3,53 @@ min
 
 a tiny framework that makes websites pretty
 
-Written in LESS, compiled to CSS. Access the current beta [here](http://minfwk.com/beta.html). The "beta" page hotlinks the latest version of the Min LESS files.
+Written in LESS and Sass, compiled to CSS.
 
-To download Min, go [here](http://minfwk.com/download.html).
 
-###Tiny
+### Tiny
 995 bytes minified and gzipped.
 
-###Compatible
-Works with IE5 and onward. Yes, min is even responsive in IE5.
+### Compatible
+Works with IE5.5 and onward, as well as all other major browsers. Check out the [docs](http://mincss.com/docs.html) for exact support data.
 
-Of course, modern browsers give you pretty transitions.
+Of course, modern browsers give you pretty transitions and rounded corners.
 
-###License
+### Converter
+
+Check out the (beta) Min -> Bootstrap converter. http://mincss.com/bootstrapconverter.html
+
+### License
 MIT licensed.
 
-###World's smallest? Really?
-Min really is is the world's smallest feature complete CSS framework, at 995 bytes (or less - check the Downloads page for its current size)
+### Contributing
 
-When we say "feature complete" we mean that it includes the following features:
- - Buttons
- - Headings
- - Inputs
- - Navbars
- - Tables
- - Notifications
- - Icons
- - A grid system
- - Standardization of the look and feel of these elements across browsers
+We encourage you to contribute anything you can to Min. If you have an idea for a new feature, open a new issue with the Enhancement tag.
 
-Without these restrictions on what's considered a "feature complete CSS framework" someone could make a CSS framework with the following code: `*{}` (the smallest piece of CSS to validate) and call it the world's smallest CSS framework. Of course, such a "framework" would literally do nothing, so in order for a piece of CSS to be considered a "framework" it should be a little more substantial (thus meeting the requirements above.)
+If you want to contribute code:
 
-[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/OwenVersteeg/min/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
+1. Fork Min
+2. You can edit either the Sass or LESS files. 
+ - DO NOT change any of the compiled files, either by using build.sh or by editing them manually.
+ - Min uses tabs, all lowercase, and is liberal with spacing. Use this style.
+ - Don't skimp on spaces to save space - the YUI compressor does this automatically.
+3. Submit a pull request. If you can (or if relevant), include the size of Min (minified and gzipped) before and after your changes, and take screenshots of what changed.
+
+### Building the latest Min
+
+WARNING! This will build the latest, pre-release version of Min. It may be broken. If you want to use an already-built Min, it's available in the file entireframework.min.css as well as through the [downloads page](http://mincss.com/download.html).
+
+You must have lessc (to compile the LESS, obviously) and Java (to run YUI compressor) installed.
+
+    bash build.sh
+
+### World's smallest? Really?
+TL;DR Min really is the world's smallest CSS framework, however you slice it. 
+
+We personally feel that the criteria for "world's smallest CSS framework" are buttons, inputs, navbars, tables, icons, grids, headings, and standardization of these elements across the "Big 5" browsers (Chrome, Firefox, Opera, Safari, and Internet Explorer.) Of course, your criteria for what a CSS framework is are likely to be different, and thus you are encouraged to (on the Downloads page) download whatever parts you feel to be relevant. No matter what you select (and what you compare Min to) Min will be smaller. Thus, Min really is the world's smallest CSS framework, no matter your criteria for what a CSS framework is.
+
+
+### Sponsors
+
+Thanks to @browserstack and @saucelabs for providing free unlimited browser testing.
+
+If you would like to sponsor Min, contact Owen Versteeg: me@owenversteeg.com

beta.html

@@ -1,230 +0,0 @@
-<!DOCTYPE html>
-<!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]-->
-	<head>
-		<meta charset="UTF-8">
-		<title>min</title>
-		<link type="text/css" rel="stylesheet/less" href="less/buttons.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/general.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/grid.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/headings.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/icons.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/iehacks.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/inputs.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/messages.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/navbar.less"/>
-		<link type="text/css" rel="stylesheet/less" href="less/tables.less"/>
-		
-		<script src="less.js" type="text/javascript"></script>
-		<script type="text/javascript">
-
-		  var _gaq = _gaq || [];
-		  _gaq.push(['_setAccount', 'UA-41177412-1']);
-		  _gaq.push(['_setDomainName', 'minfwk.com']);
-		  _gaq.push(['_setAllowLinker', true]);
-		  _gaq.push(['_trackPageview']);
-
-		  (function() {
-		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-		    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
-		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-		  })();
-
-		</script>
-    <!--[if lt IE 9]> 
- <script> document.createElement("column"); document.createElement("message"); </script>
- <![endif]-->
-		<style type="text/css">
-			.dark {
-				background-color: rgb(172, 172, 172);
-			}
-			.light {
-				background-color: rgb(223, 223, 223);
-			}
-		</style>
-	</head>
-	<body>
-		<h1 class="title">min</h1>
-		<h3>this is the beta page. check minfwk.com to see the latest stable release.</h3>
-
-		<hr class="mediumwidth">
-		
-		<div class="buttons">
-			<a href="http://github.com/owenversteeg/min"><button class="smooth btn-a">btn-a</button></a>
-			<a href="http://minfwk.com"><button class="smooth btn-b">btn-b</button></a>
-			<a href="http://minframework.com"><button class="smooth btn-c">btn-c</button></a>
-			<br><br>
-			<a href="http://minframework.com"><button class="smooth btn-b btn-small">btn-small</button></a>
-		</div>
-		<hr class="mediumwidth">
-		
-		<h1 class="title">h1 title</h1>
-		<h1>h1</h1>
-		<h2>h2</h2>
-		<h3>h3</h3>
-		<h4>h4</h4>
-		<h5>h5</h5>
-		<h6>h6</h6>
-	
-		<hr class="mediumwidth">
-		
-		<input type="text" class="smooth" placeholder="input type=&quot;text&quot;">
-		<br><br>
-		<textarea rows="3" class="smooth" placeholder="textarea"></textarea>
-		<br><br>
-		<span class="addon-front">$</span><input type="text" class="smooth" placeholder="span class=&quot;addon-front&quot;">
-
-		<hr class="mediumwidth">
-
-		<div class="mediumwidth">
-			<div class="navbar">
-				<a class="pagename" href="#">Min Framework</a>
-				<a class="navbar-link" href="#">One</a>
-				<a class="navbar-link" href="#">Two</a>
-				<a class="navbar-link" href="#">Three</a>
-			</div>
-		</div>
-
-		<hr class="mediumwidth">
-
-		<div class="mediumwidth">
-			<table class="table-striped table">
-				<thead>
-					<tr>
-						<th>#</th>
-						<th>Widgets Sold</th>
-						<th>Revenue (&pound;)</th>
-						<th>Profit (&pound;)</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>1</td>
-						<td>5</td>
-						<td>10</td>
-						<td>2</td>
-					</tr>
-					<tr>
-						<td>2</td>
-						<td>10</td>
-						<td>20</td>
-						<td>4</td>
-					</tr>
-					<tr>
-						<td>3</td>
-						<td>500</td>
-						<td>1000</td>
-						<td>200</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-
-		<hr class="mediumwidth">
-
-		<div class="mediumwidth">
-			<message class="warning"><strong>Watch out!</strong> You don't have H9RBS.js installed.</message>
-
-			<br>
-
-			<message class="great"><strong>Great!</strong> You successfully frobjugated the minlingator's snorbdralob.</message>
-
-			<br>
-
-			<message><strong>Hey!</strong> You've got four thousand new grabjalognibs!</message>
-		</div>
-
-		<hr class="mediumwidth">
-
-		<div class="icons">
-			<ico>✉ ✰ ☁ ⌚ ⌘ ☎ ✈ ☑ ☒</ico>
-			<br><br>
-			<ico>♂ ♀ ⌛ ☀ ☮ ☢ ☠ ☣ ⌨</ico>
-			<br><br>
-			<ico>ⓧ © § ® ⌂ ℗ ☺ ☻ ☼</ico>
-			<br><br>
-			<ico>⇦ ⇧ ⇨ ⇩ ∡ ∿ ⊝ ⊘ ⌂</ico>
-			<br><br>
-			<ico>♠ ♣ ♥ ♦ ♪ ♫ ♭ ♮ ♯</ico>
-		</div>
-
-		<hr class="mediumwidth">
-
-		<div class="mediumwidth">
-			<div class="row">
-				<column class="dark c10">10</column>
-			</div>
-			<div class="row">
-				<column class="dark c9">9</column>
-				<column class="light c1">1</column>
-			</div>
-			<div class="row">
-				<column class="dark c8">8</column>
-				<column class="light c2">2</column>
-			</div>
-			<div class="row">
-				<column class="dark c7">7</column>
-				<column class="light c3">3</column>
-			</div>
-			<div class="row">
-				<column class="dark c6">6</column>
-				<column class="light c4">4</column>
-			</div>
-			<div class="row">
-				<column class="dark c5">5</column>
-				<column class="light c5">5</column>
-			</div>
-			<div class="row">
-				<column class="dark c4">4</column>
-				<column class="light c6">6</column>
-			</div>
-			<div class="row">
-				<column class="dark c3">3</column>
-				<column class="light c7">7</column>
-			</div>
-			<div class="row">
-				<column class="dark c2">2</column>
-				<column class="light c8">8</column>
-			</div>
-			<div class="row">
-				<column class="dark c1">1</column>
-				<column class="light c9">9</column>
-			</div>
-			<div class="row">
-				<column class="light c10">10</column>
-			</div>
-		</div>
-
-		<hr class="mediumwidth">
-
-		<a href="download.html"><button class="smooth btn-a" style="margin: 0 0 1em 0;">Download</button></a>
-
-		<br>
-
-		<!--analytics-->
-
-		<!-- start Mixpanel -->
-		<script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
-			typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);
-			b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
-			mixpanel.init("048a77a4ae0938d041e6996dc178e173");
-			mixpanel.track('Page load', {'page name' : document.title, 'url' : window.location.pathname});
-		</script><!-- end Mixpanel -->
-		<script type="text/javascript">
-		  var GoSquared = {};
-		  GoSquared.acct = "GSN-336891-I";
-		  (function(w){
-		    function gs(){
-		      w._gstc_lt = +new Date;
-		      var d = document, g = d.createElement("script");
-		      g.type = "text/javascript";
-		      g.src = "//d1l6p2sc9645hc.cloudfront.net/tracker.js";
-		      var s = d.getElementsByTagName("script")[0];
-		      s.parentNode.insertBefore(g, s);
-		    }
-		    w.addEventListener ?
-		      w.addEventListener("load", gs, false) :
-		      w.attachEvent("onload", gs);
-		  })(window);
-		</script>
-	</body>
-</html>

bootstrapconverter.html

@@ -1,202 +1,236 @@
 <!DOCTYPE html>
 <html>
-    <head>
+	<head>
 		<title>Bootstrap to Min converter</title>
-		<link rel="stylesheet" href="http://minfwk.com/entireframework.min.css" type="text/css">
-        <style type="text/css">
-            iframe {
-                width: 800px;
-                height: 400px;
-            }
-            #convertedHTMLDiv {
-                max-width: 70%;
-                margin-left: 15%;
-            }
-        </style>
-        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-        <script type="text/javascript">
-            (function($) {
-                $.fn.changeElementType = function(newType) {
-                    var attrs = {};
+		<link rel="stylesheet" href="http://mincss.com/entireframework.min.css" type="text/css">
+		<style type="text/css">
+			iframe {
+				width: 800px;
+				height: 400px;
+			}
+			#convertedHTMLDiv {
+				max-width: 70%;
+				margin-left: 15%;
+				text-align: left;
+			}
+			body {
+				text-align: center;
+			}
+		</style>
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+		<script>
+			//jQuery plugin to change an element's tagname
+			//http://stackoverflow.com/questions/8584098/how-to-change-an-element-type-using-jquery
+			(function($) {
+				$.fn.changeElementType = function(newType) {
+					if (this[0]) {
+						var attrs = {};
 
-                    $.each(this[0].attributes, function(idx, attr) {
-                        attrs[attr.nodeName] = attr.nodeValue;
-                    });
+						$.each(this[0].attributes, function(idx, attr) {
+							attrs[attr.nodeName] = attr.nodeValue;
+						});
 
-                    this.replaceWith(function() {
-                        return $("<" + newType + "/>", attrs).append($(this).contents());
-                    });
-                };
-            })(jQuery);
-        </script>
+						this.replaceWith(function() {
+							return $("<" + newType + "/>", attrs).append($(this).contents());
+						});
+					} else {
+						console.log('Error - no such element')
+					}
+				};
+			})(jQuery);
+		</script>
 	</head>
 	<body>
-        <br>
-        <h1>Bootstrap to Min converter</h1>
+		<h2>Bootstrap to Min converter</h2>
 		<textarea id="enteredHTML" placeholder="Enter the body of your HTML page here"></textarea>
-        <br>
-		<a onclick="convertHTML(document.getElementById('enteredHTML').value)"><button class="smooth btn-a dontconvert">Convert HTML</button></a>
-        <br>
-        <a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[0]"><button class="smooth btn-b btn-small dontconvert">Load 1st Bootstrap example</button></a>
-        <br>
-        <a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[1]"><button class="smooth btn-c btn-small dontconvert">Load 2nd Bootstrap example</button></a>
-        <br>
-        <a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[2]"><button class="smooth btn-a btn-small dontconvert">Load 3rd Bootstrap example</button></a>
-        <br><br>
-        <div id="messagesDiv" class="mediumwidth"></div>
-        <br>
+		<br>
+		<a onclick="convertHTML(document.getElementById('enteredHTML').value)"><button class="smooth btn btn-a dontconvert">Convert HTML</button></a>
+		<br>
+		<a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[0]"><button class="smooth btn btn-b btn-sm dontconvert">Load 1st Bootstrap example</button></a>
+		<br>
+		<a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[1]"><button class="smooth btn btn-c btn-sm dontconvert">Load 2nd Bootstrap example</button></a>
+		<br>
+		<a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[2]"><button class="smooth btn btn-a btn-sm dontconvert">Load 3rd Bootstrap example</button></a>
+		<br><br>
+		<div id="messagesDiv" class="mediumwidth"></div>
+		<br>
 		<div id="convertedHTMLDiv">
 		</div>
 		<script type="text/javascript">
-            bootstrapExamples = [
-                '<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="navbar-collapse collapse"><form class="navbar-form navbar-right" role="form"><div class="form-group"> <input type="text" placeholder="Email" class="form-control"></div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"></div><button type="submit" class="btn btn-success">Sign in</button></form></div><!--/.navbar-collapse --></div></div><!-- Main jumbotron for a primary marketing message or call to action --><div class="jumbotron"><div class="container"><h1>Hello, world!</h1><p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p><p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p></div></div><div class="container"><!-- Example row of columns --><div class="row"><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><div class="col-md-4"><h2>Heading</h2><p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div></div><hr><footer><p>&copy; Company 2013</p></footer></div>',
-                '<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a> </li><li><a href="#about">About</a> </li><li><a href="#contact">Contact</a> </li></ul></div><!--/.nav-collapse --></div></div><div class="container"><div class="starter-template"><h1>Bootstrap starter template</h1><p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p></div></div><!-- /.container -->',
-                '<div class="navbar navbar-default navbar-static-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href="#">Separated link</a></li><li><a href="#">One more link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="../navbar/">Default</a></li><li class="active"><a href="./">Static top</a></li><li><a href="../navbar-fixed-top/">Fixed top</a></li></ul></div><!--/.nav-collapse --></div></div><div class="container"><!-- Main component for a primary marketing message or call to action --><div class="jumbotron"><h1>Navbar example</h1><p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p><p>To see the difference between static and fixed top navbars, just scroll.</p><p><a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a></p></div>'
-            ]
-        
-            function moveFromAToB(a, b, which) {
-                if (!which) var which = [0,0]
-                
-                $(b)[which[1]].innerHTML += $(a)[which[0]].innerHTML;
-                $(a)[which[0]].remove();
-            }
-            
-            function printMessage(messageText, messageType) {
-                $('#messagesDiv')[0].innerHTML += "<message class='"+messageType+"'>"+messageText+"</message><br>";
-            }
+			bootstrapExamples = [
+				'<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="navbar-collapse collapse"><form class="navbar-form navbar-right" role="form"><div class="form-group"> <input type="text" placeholder="Email" class="form-control"></div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"></div><button type="submit" class="btn btn-success">Sign in</button></form></div><!--/.navbar-collapse --></div></div><!-- Main jumbotron for a primary marketing message or call to action --><div class="jumbotron"><div class="container"><h1>Hello, world!</h1><p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p><p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p></div></div><div class="container"><!-- Example row of columns --><div class="row"><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div><div class="col-md-4"><h2>Heading</h2><p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p><p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p></div></div><hr><footer><p>&copy; Company 2013</p></footer></div>',
+				'<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a> </li><li><a href="#about">About</a> </li><li><a href="#contact">Contact</a> </li></ul></div><!--/.nav-collapse --></div></div><div class="container"><div class="starter-template"><h1>Bootstrap starter template</h1><p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p></div></div><!-- /.container -->',
+				'<div class="navbar navbar-default navbar-static-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href="#">Separated link</a></li><li><a href="#">One more link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="../navbar/">Default</a></li><li class="active"><a href="./">Static top</a></li><li><a href="../navbar-fixed-top/">Fixed top</a></li></ul></div><!--/.nav-collapse --></div></div><div class="container"><!-- Main component for a primary marketing message or call to action --><div class="jumbotron"><h1>Navbar example</h1><p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p><p>To see the difference between static and fixed top navbars, just scroll.</p><p><a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a></p></div>',
+				'<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div></div></nav>'
+			]
+
+			function moveFromAToB(a, b, which) {
+				//Moves the inside of an element to the inside of another.
+				//Takes two strings (for element selectors)
+				//and an array, which, that says what nth element to select.
+				if (!which) var which = [0,0]
+				
+				if ($(a)[which[0]] && $(b)[which[1]]) {
+					$(b)[which[1]].innerHTML += $(a)[which[0]].innerHTML;
+					$(a)[which[0]].remove();
+				}
+			}
+
+			function printMessage(messageText, messageType) {
+				$('#messagesDiv')[0].innerHTML += "<message class='"+messageType+"'>"+messageText+"</message><br>";
+			}
 
 			function convertHTML(htmlToConvert) {
-                //Erase previous messages
-                $('#messagesDiv')[0].innerHTML = "";
-                
-                convertedHTML = htmlToConvert;
+				//Erase previous messages
+				$('#messagesDiv')[0].innerHTML = "";
+				
+				convertedHTML = htmlToConvert;
 				convertedHTMLDiv.innerHTML = convertedHTML;
-                
-                //First, we convert from Bootstrap's columns to Min's columns.
-                var columndivs = $('div[class^="col-"]');
-                var widthUnaccountedFor = 0;
-                for (var i=0; i<columndivs.length; i++) {
-                    var htmlText = columndivs[i].innerHTML;
-                    var parentElement = $('div[class^="col"]')[0].parentElement;
+				
+				//First, we convert from Bootstrap's columns to Min's columns.
+				var columndivs = $('div[class^="col-"]');
 
-                    $('div[class^="col-"]')[0].remove();
+				for (var i=0; i<columndivs.length; i++) {
+					columndivs[i].className = columndivs[i].className.replace('col-md-', 'c')
+					columndivs[i].classList.add('col')
+				}
 
-                    widthUnaccountedFor += parseInt(columndivs[0].className.match(/\d+/)[0], 10)/1.2 - Math.round(parseInt(columndivs[0].className.match(/\d+/)[0], 10)/1.2)
-                    widthToSet = Math.round(parseInt(columndivs[0].className.match(/\d+/)[0], 10)/1.2)
+				//Oh no, we have some weird (not col-md) columns! They need the Bootstrap plugin.
+				if ($('div[class^="col-"]:not([class^="col-md-"])')[0])
+				printMessage('Because your page uses Bootstrap grid class prefixes other than col-md, your page requires the Min Bootstrap plugin, which has been included automatically.')
+				
+				//Next, we convert the navbar
+				/* Old navbar stuff
+				if ($('.navbar-header')[0] && $('.navbar-collapse')[0]) moveFromAToB('.navbar-header', '.navbar-collapse')
+				if ($('.navbar-collapse')[0] && $('.navbar .container')[0]) moveFromAToB('.navbar-collapse', '.navbar .container')
+				if ($('.navbar .container')[0] && $('.navbar')[0]) moveFromAToB('.navbar .container', '.navbar')
+				$('.navbar-toggle')[0]) $('.navbar-toggle')[0].remove()
+				
+				//Dump the navbar forms stuff right into the navbar
+				//form-group to navbar-form and navbar-form to navbar
+				var navbarFormItems = $('.form-group');
+				for (var i=0; i<navbarFormItems.length; i++) {
+					moveFromAToB('div.form-group','.navbar-form');
+				}
+				if ($('.navbar-form')[0] && $('.navbar')[0]) moveFromAToB('.navbar-form', '.navbar');
+				
+				//Of course, Bootstrap *has* to have two ways to make a navbar
+				var lisToSquash = $('.nav.navbar-nav li').not('.dropdown').not('ul.dropdown-menu li').not('ul.navbar-right li');
+				for (var i=0; i<lisToSquash.length; i++) {
+					moveFromAToB('.navbar .nav.navbar-nav:not(.dropdown-menu) > li[class!="dropdown"]', '.nav.navbar-nav')
+				}*/
 
-                    if (Math.round(widthUnaccountedFor)==1) {
-                        widthToSet += 1;
-                        widthUnaccountedFor = 0;
-                    }
-                    parentElement.innerHTML += '<column class="c'+widthToSet+'">'+htmlText+"</column>";
-                }
-                
-                //Next, we convert the navbar.
-                if ($('.navbar-header')[0] && $('.navbar-collapse')[0]) moveFromAToB('.navbar-header', '.navbar-collapse')
-                if ($('.navbar-collapse')[0] && $('.navbar .container')[0]) moveFromAToB('.navbar-collapse', '.navbar .container')
-                if ($('.navbar .container')[0] && $('.navbar')[0]) moveFromAToB('.navbar .container', '.navbar')
-                if ($('.navbar-toggle')[0]) $('.navbar-toggle')[0].remove()
-                
-                //Dump the navbar forms stuff right into the navbar
-                //form-group to navbar-form and navbar-form to navbar
-                var navbarFormItems = $('.form-group');
-                for (var i=0; i<navbarFormItems.length; i++) {
-                    moveFromAToB('div.form-group','.navbar-form');
-                }
-                if ($('.navbar-form')[0] && $('.navbar')[0]) moveFromAToB('.navbar-form', '.navbar');
-                
-                //Of course, Bootstrap *has* to have two fucking ways to make a goddamn navbar
-                var lisToSquash = $('.nav.navbar-nav li').not('.dropdown').not('ul.dropdown-menu li').not('ul.navbar-right li');
-                for (var i=0; i<lisToSquash.length; i++) {
-                    moveFromAToB('.navbar .nav.navbar-nav:not(.dropdown-menu) > li[class!="dropdown"]', '.nav.navbar-nav')
-                }
-                
-                var navbarPluginCSS = '<link rel="stylesheet" href="http://owenversteeg.com/min-navbar-plugin/navbar-plugin.css" type="text/css">'
-                
-                if ($('li.dropdown')[0]) {
-                    //If we have any dropdowns here, we have to include the min-navbar-plugin
-                    convertedHTMLDiv.innerHTML += navbarPluginCSS;
+				//Convert navbars
+				var navbars = $('.navbar');
 
-                    //Let the user know that we've included it
-                    printMessage('Your page requires the navbar plugin, which has been automatically included.<br><br>It adds dropdowns and right-positioned link capabilities to the navbar.', 'warning');
-                    
-                    //Now, we need to convert from Bootstrap's weird-ass navbar dropdowns to Min's nice navbar dropdowns
-                    var x = $('li.dropdown > a').length;
-                    for (i=0; i<x; i++) {
-                        moveFromAToB('li.dropdown > a', 'li.dropdown')
-                    }
-                    
-                    $('.caret').remove(); //we make carets automatically over here in min-land, unlike *some* frameworks I know
-                    
-                    //now, we transmogrify all of Bootstrap's elements into Min elements.
-                    $('li.dropdown').changeElementType('div');
-                    $('div.dropdown').addClass('navbar-link').addClass('wpd').removeClass('dropdown');
-                    
-                    var x = $('ul.dropdown-menu').length;
-                    for (var i=0; i<x; i++) {
-                        var pulldownDiv = document.createElement('div');
-                        $(pulldownDiv).addClass('pulldown');
-                        
-                        var ulInsidePulldownDiv = document.createElement('ul');
-                        pulldownDiv.appendChild(ulInsidePulldownDiv);
-                        
-                        $('ul.dropdown-menu')[0].parentElement.appendChild(pulldownDiv);
-                        
-                        moveFromAToB('ul.dropdown-menu', 'div.pulldown ul', [i,i]);
-                    }
-                    $('div.wpd ul li a').removeClass('navbar-link')
-                    
-                    $('ul.dropdown-menu').removeClass('dropdown-menu');
-                    
-                    //Of course, Bootstrap *has* to make dropdown headers the fucking unstandard way. 
-                    $('li.dropdown-header').removeClass('dropdown-header').changeElementType('h5');
-                    
-                    //Given that, what do you think Bootstrap uses to make a divider?
-                    //Yes, that's right, folks: Bootstrap uses a fucking *li* element as a divider. No, not a <hr> or even a <div> - but a <li>. What the hell.
-                    //I'm pretty sure the only thing that could possibly be less semantically correct would be a <canvas>
-                    $('li.divider').removeClass('divider').changeElementType('hr');
-                }
-                
-                //Now, we need to check if we have any right-positioned elements
-                if ($('.navbar-right')[0]) {
-                    //If we don't already have the navbar plugin CSS, include it and let the user know that we did so
-                    if (convertedHTMLDiv.innerHTML.indexOf(navbarPluginCSS) == -1) {
-                        convertedHTMLDiv.innerHTML += navbarPluginCSS;
-                        printMessage('Your page requires the navbar plugin, which has been automatically included.<br><br>It adds dropdowns and right-positioned link capabilities to the navbar.', 'warning');
-                    }
-                    
-                    var lisToRighten = $('ul.navbar-right > li[class!="dropdown"]');
-                    
-                    for (var i=0; i<lisToRighten.length; i++) {
-                        //Unwrap the <a>s from their oppressive <li> overlords.
-                        moveFromAToB('ul.navbar-right > li[class!="dropdown"]', 'ul.navbar-right');
-                        //Be free, my darlings!
-                    }
-                    
-                    //Now, we convert the navbar right <ul> to a navbar right div
-                    $('ul.navbar-right').addClass('navlink-right').removeClass('nav').removeClass('navbar-nav').removeClass('navbar-right').changeElementType('div');
-                }
-                
-                //if we have the second way to make a navbar, we need to push the links into the main navbar
-                if ($('.nav.navbar-nav')[0] && $('.navbar')[0]) moveFromAToB('.nav.navbar-nav', '.navbar')
-                
-                //Now we make the page name nice and pretty
-                if ($('.navbar-brand')[0]) $('.navbar-brand').removeClass('navbar-brand').addClass('pagename')
-                
-                //We then make the navbar links nice and pretty
-                $('.navbar a').not('.pagename').addClass('navbar-link')
+				for (var i=0; i<navbars.length; i++) {
+					$(navbars[i]).addClass('nav').removeClass('navbar')
+					//Wrap them in a container
+					navbars[i].innerHTML = '<div class="container">'+navbars[i].innerHTML + '</div>'
+				}
 
-                //Make sure to convert from Bootstrap's link-buttons to Min's normal buttons.
-                var aButtons = $('a[class^="btn"]');
-                for (var i=0; i<aButtons.length; i++) {
-                    var newButton = document.createElement('button');
-                    newButton.innerText = aButtons[i].innerText;
-                    aButtons[i].innerText = "";
-                    aButtons[i].appendChild(newButton);
-                }
+				$('div.nav').changeElementType('nav')
 
-                //Now we make the buttons reasonably sized.
-                $('button').not('[class*="dontconvert"]').not('[class^="btn-lg"]').addClass('btn-small');
+				//Delete elements that don't exist in Min
+				$('.navbar-toggle').remove()
+				$('.nav .nav > *').unwrap();
+				$('.navbar-header > *, .container-fluid > *, .navbar-collapse > *').unwrap();
+
+
+				var navbarPluginCSS = '<link rel="stylesheet" href="http://owenversteeg.com/min-navbar-plugin/navbar-plugin.css?200" type="text/css">'
+				
+				if ($('li.dropdown')[0]) {
+					//If we have any dropdowns here, we have to include the min-navbar-plugin
+					convertedHTMLDiv.innerHTML += navbarPluginCSS;
+
+					//Let the user know that we've included it
+					printMessage('Your page requires the navbar plugin, which has been automatically included.<br><br>It adds dropdowns and right-positioned link capabilities to the navbar.', 'warning');
+					
+					//Now, we need to convert from Bootstrap's weird navbar dropdowns to Min's nice navbar dropdowns
+					var x = $('li.dropdown > a').length;
+					for (i=0; i<x; i++) {
+						$('li.dropdown > a')[0].outerHTML = $('li.dropdown > a')[0].innerHTML;
+					}
+					
+					$('.caret').remove(); //we make carets automatically over here in min-land, unlike *some* frameworks I know
+					
+					//now, we transmogrify all of Bootstrap's elements into Min elements.
+
+					$('li.dropdown').changeElementType('div');
+					$('div.dropdown').addClass('wpd').removeClass('dropdown');
+					$('ul.dropdown-menu').wrap('<div class="pulldown"></div>')
+					/*
+					var x = $('ul.dropdown-menu').length;
+					for (var i=0; i<x; i++) {
+						var pulldownDiv = document.createElement('div');
+						$(pulldownDiv).addClass('pulldown');
+						
+						var ulInsidePulldownDiv = document.createElement('ul');
+						pulldownDiv.appendChild(ulInsidePulldownDiv);
+						
+						$('ul.dropdown-menu')[0].parentElement.appendChild(pulldownDiv);
+						
+						moveFromAToB('ul.dropdown-menu', 'div.pulldown ul', [i,i]);
+					}*/
+					
+					$('ul.dropdown-menu').removeClass('dropdown-menu');
+					
+					//Of course, Bootstrap *has* to make dropdown headers the unstandard way. 
+					$('li.dropdown-header').removeClass('dropdown-header').changeElementType('h5');
+					
+					//Given that, what do you think Bootstrap uses to make a divider?
+					//Yes, that's right, folks: Bootstrap uses a fucking *li* element as a divider. No, not a <hr> or even a <div> - but a <li>. What the hell.
+					//I'm pretty sure the only thing that could possibly be less semantically correct would be a <canvas>
+					$('li.divider').removeClass('divider').changeElementType('hr');
+				}
+				
+				//Now, we need to check if we have any right-positioned elements
+				if ($('.navbar-right')[0]) {
+					//If we don't already have the navbar plugin CSS, include it and let the user know that we did so
+					if (convertedHTMLDiv.innerHTML.indexOf(navbarPluginCSS) == -1) {
+						convertedHTMLDiv.innerHTML += navbarPluginCSS;
+						printMessage('Your page requires the navbar plugin, which has been automatically included.<br><br>It adds dropdowns and right-positioned link capabilities to the navbar.', 'warning');
+					}
+					
+					var lisToRighten = $('ul.navbar-right > li[class!="dropdown"]');
+					
+					for (var i=0; i<lisToRighten.length; i++) {
+						//Unwrap the <a>s from their oppressive <li> overlords.
+						moveFromAToB('ul.navbar-right > li[class!="dropdown"]', 'ul.navbar-right');
+						//Be free, my darlings!
+					}
+					
+					//Now, we convert the navbar right <ul> to a navbar right div
+					$('ul.navbar-right').addClass('navlink-right').removeClass('nav').removeClass('navbar-nav').removeClass('navbar-right').changeElementType('div');
+				}
+
+				//if we have the second way to make a navbar, we need to push the links into the main navbar
+				if ($('.nav.navbar-nav')[0] && $('.navbar')[0]) moveFromAToB('.nav.navbar-nav', '.navbar')
+				
+				//Now we make the page name nice and pretty
+				if ($('.navbar-brand')[0]) $('.navbar-brand').removeClass('navbar-brand').addClass('pagename current')
+
+				//Unwrap links
+				$('.container .container').unwrap()
+				$('.nav > div > li > *').unwrap();
+
+				//Make sure to convert from Bootstrap's link-buttons to Min's normal buttons.
+				/*
+				var aButtons = $('a[class^="btn"]');
+				for (var i=0; i<aButtons.length; i++) {
+					var newButton = document.createElement('button');
+					newButton.innerText = aButtons[i].innerText;
+					aButtons[i].innerText = "";
+					aButtons[i].appendChild(newButton);
+				}*/
+
+				//Now we make the buttons reasonably sized.
+				$('.btn').not('[class*="dontconvert"]').not('[class^="btn-lg"]').addClass('btn-sm');
+
+				$('.btn-default').removeClass('btn-default')
+				$('.btn-primary').addClass('btn-a').removeClass('btn-primary')
+				$('.btn-success').addClass('btn-b').removeClass('btn-success')
+				$('.btn-danger').addClass('btn-c').removeClass('btn-danger')
 			}
 		</script>
 	</body>

bower.json

@@ -0,0 +1,28 @@
+{
+	"name": "min",
+	"version": "1.5",
+	"authors": [
+		"Owen Versteeg <me@owenversteeg.com>",
+		"Scott O'Hara"
+	],
+	"description": "The world's smallest CSS framework - only 995 bytes.",
+	"main": "entireframework.min.css",
+	"ignore": [
+		".gitignore",
+		"CNAME",
+		"**/*.md",
+		"**/*.html",
+		"**/*.sh",
+		"**/*.js",
+		"**/*.ico",
+		"**/*.php",
+		"download.less"
+	],
+	"keywords": [
+		"min",
+		"mincss",
+		"minimal"
+	],
+	"license": "MIT",
+	"homepage": "http://mincss.com"
+}

build.sh

@@ -1,24 +1,48 @@
 #!/bin/bash
 
 mkdir compiled -p
-subtypes=(general buttons grid headings icons iehacks inputs messages navbar tables)
+#The compiled folder holds all the separate compiled CSS files.
+
+subtypes=(general buttons grid headings icons forms navbar tables messages)
+#You can change the subtypes used by changing this.
+
 rm -f compiledcss.js
-rm -f entireframework.js
+rm -f entireframework.min.css
+#Remove the old files.
+
 i="0"
 echo "var css = {" >> compiledcss.js
+#Begin making compiledcss.js
+
+echo -n "/* Copyright 2014 Owen Versteeg; MIT licensed */" >> entireframework.min.css
+#Begin making entireframework.min.css; -n is to remove the newline
+
+#For each subtype, we compile the LESS file, minify it, and concatenate it into two files:
+#entireframework.min.css and compiledcss.js
 for item in ${subtypes[*]}
 do
 lessc "less/"$item".less" > "compiled/"$item".css"
+#Compile all the LESS files.
+
 java -jar yuicompressor-2.4.8.jar "compiled/"$item".css" -o "compiled/"$item".min.css"
+#Compress all the compiled CSS files.
+
 echo -ne "	\""$item"\": \"" >> compiledcss.js
 cat "compiled/"$item".min.css" >> compiledcss.js
-cat "compiled/"$item".min.css" >> entireframework.min.css
 echo -ne "\"" >> compiledcss.js
+#Write lines of JSON to compiledcss.js
+
+cat "compiled/"$item".min.css" >> entireframework.min.css
+#Write the compiled and minified CSS to entireframework.min.css
+
 if [ $((i+1)) -ne ${#subtypes[*]} ]
 then
+#This is a bit kludgy but whatever, bash is not my specialty.
+#If this isn't the last subtype, add a comma
 echo "," >> compiledcss.js
 fi
 i=$i+1
 done
+#Put an ending to compiledcss.js
 echo "" >> compiledcss.js
-echo "}" >> compiledcss.js
+echo "};" >> compiledcss.js

compiled/buttons.css

@@ -0,0 +1,60 @@
+.btn {
+  background: #999;
+  border-radius: 6px;
+  /* rounded corners */
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  /* Enables non-inline-block elements like <div>s to be buttons */
+  margin: 2px 0;
+  padding: 12px 30px 14px;
+}
+.btn:hover {
+  background: #888;
+}
+.btn:active,
+.btn:focus {
+  background: #777;
+}
+.btn-a {
+  background: #0ae;
+}
+.btn-a:hover {
+  background: #09d;
+  /* darken(@btn-a-bg, 5%) */
+}
+.btn-a:active,
+.btn-a:focus {
+  background: #08b;
+  /* darken(@btn-a-bg, 10%) */
+}
+.btn-b {
+  background: #3c5;
+}
+.btn-b:hover {
+  background: #2b4;
+  /* darken(@btn-b-bg, 5%) */
+}
+.btn-b:active,
+.btn-b:focus {
+  background: #2a4;
+  /* darken(@btn-b-bg, 10%) */
+}
+.btn-c {
+  background: #d33;
+}
+.btn-c:hover {
+  background: #c22;
+  /* darken(@btn-c-bg, 5%) */
+}
+.btn-c:active,
+.btn-c:focus {
+  background: #b22;
+  /* darken(@btn-c-bg, 10%) */
+}
+.btn-sm {
+  border-radius: 4px;
+  /* rounded corners */
+  padding: 10px 14px 11px;
+}

compiled/buttons.min.css

@@ -0,0 +1 @@
+.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 14px 11px}

compiled/forms.css

@@ -0,0 +1,29 @@
+label > * {
+  display: inline;
+}
+form > * {
+  display: block;
+  margin-bottom: 10px;
+}
+textarea,
+input,
+select {
+  border: 1px solid #ccc;
+  padding: 8px;
+}
+textarea:focus,
+input:focus,
+select:focus {
+  border-color: #5ab;
+}
+textarea,
+input[type=text] {
+  -webkit-appearance: none;
+  /* make iOS inputs pretty */
+  width: 13em;
+  outline: 0;
+}
+.addon {
+  box-shadow: 0 0 0 1px #ccc;
+  padding: 8px 12px;
+}

compiled/forms.min.css

@@ -0,0 +1 @@
+label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}

compiled/general.css

@@ -0,0 +1,39 @@
+body,
+textarea,
+input,
+select {
+  background: 0;
+  border-radius: 0;
+  font: 16px sans-serif;
+  margin: 0;
+}
+.addon,
+.btn-sm,
+.nav,
+textarea,
+input,
+select {
+  outline: 0;
+  font-size: 14px;
+}
+.smooth {
+  transition: all .2s;
+}
+.btn,
+.nav a {
+  text-decoration: none;
+}
+.container {
+  margin: 0 20px;
+  width: auto;
+}
+@media (min-width: 1310px) {
+  .container {
+    margin: auto;
+    width: 1270px;
+  }
+}
+.btn,
+h2 {
+  font-size: 2em;
+}

compiled/general.min.css

@@ -0,0 +1 @@
+body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}.btn,h2{font-size:2em}

compiled/grid.css

@@ -0,0 +1,52 @@
+/* Grid system responsive code is in general.less */
+.row {
+  margin: 1% 0;
+  overflow: auto;
+  /* required - without this, the page layout is screwed up */
+}
+.col {
+  float: left;
+}
+.table,
+.c12 {
+  width: 100%;
+}
+.c11 {
+  width: 91.66%;
+}
+.c10 {
+  width: 83.33%;
+}
+.c9 {
+  width: 75%;
+}
+.c8 {
+  width: 66.66%;
+}
+.c7 {
+  width: 58.33%;
+}
+.c6 {
+  width: 50%;
+}
+.c5 {
+  width: 41.66%;
+}
+.c4 {
+  width: 33.33%;
+}
+.c3 {
+  width: 25%;
+}
+.c2 {
+  width: 16.66%;
+}
+.c1 {
+  width: 8.33%;
+}
+/* For smaller screens, change all columns to 100% width */
+@media (max-width: 870px) {
+  .row .col {
+    width: 100%;
+  }
+}

compiled/grid.min.css

@@ -0,0 +1 @@
+.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}

compiled/headings.css

@@ -0,0 +1,4 @@
+/* Make the default heading style larger */
+h1 {
+  font-size: 3em;
+}

compiled/headings.min.css

@@ -0,0 +1 @@
+h1{font-size:3em}

compiled/icons.css

@@ -0,0 +1,8 @@
+.ico {
+  font: 33px Arial Unicode MS, Lucida Sans Unicode;
+  /*
+		This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu.
+
+		We don't use ems because 33px is a great size cross-browser and OS for nice icons
+	*/
+}

compiled/icons.min.css

@@ -0,0 +1 @@
+.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}

compiled/iehacks.css

@@ -0,0 +1 @@
+/* There aren't any IE hacks needed as of now */

compiled/inputs.css

@@ -0,0 +1,27 @@
+textarea,
+input,
+.addon-front,
+.btn-sm,
+.nav a {
+  font-size: 14px;
+}
+textarea,
+input {
+  border: 1px solid #ccc;
+  padding: 8px;
+}
+textarea:focus,
+input:focus {
+  border-color: #5ab;
+}
+textarea,
+input[type='text'] {
+  width: 13em;
+  -webkit-appearance: none;
+  /* make iOS inputs pretty */
+
+}
+.addon-front {
+  padding: 8px 12px;
+  box-shadow: 0 0 0 1px #ccc;
+}

compiled/inputs.min.css

@@ -0,0 +1 @@
+textarea,input,.addon-front,.btn-sm,.nav a{font-size:14px}textarea,input{border:1px solid #ccc;padding:8px}textarea:focus,input:focus{border-color:#5ab}textarea,input[type='text']{width:13em;-webkit-appearance:none}.addon-front{padding:8px 12px;box-shadow:0 0 0 1px #ccc}

compiled/messages.css

@@ -0,0 +1,5 @@
+.msg {
+  background: #def;
+  border-left: 5px solid #59d;
+  padding: 1.5em;
+}

compiled/messages.min.css

@@ -0,0 +1 @@
+.msg{background:#def;border-left:5px solid #59d;padding:1.5em}

compiled/navbar.css

@@ -0,0 +1,68 @@
+.nav,
+.nav .current,
+.nav a:hover {
+  background: #000;
+  color: #fff;
+}
+.nav {
+  height: 24px;
+  padding: 11px 0 15px;
+  /* TODO: migrate to ems (currently we don't use them because of iOS compatibility problems (has to do with unicode icon for close)) */
+  /* Uncomment for animations
+	max-height: 1.5em;
+	*/
+}
+.nav a {
+  color: #aaa;
+  padding-right: 1em;
+  position: relative;
+  top: -1px;
+}
+.nav .pagename {
+  font-size: 22px;
+  top: 1px;
+}
+.btn.btn-close {
+  background: #000;
+  float: right;
+  font-size: 25px;
+  margin: -54px 7px;
+  display: none;
+}
+@media (max-width: 500px) {
+  .btn.btn-close {
+    display: block;
+  }
+  .nav {
+    /* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
+    overflow: hidden;
+  }
+  .pagename {
+    margin-top: -11px;
+  }
+  .nav:active,
+  .nav:focus {
+    height: auto;
+    /* Necesary for animations
+		max-height: 500px;
+		height: 100%;
+		*/
+  }
+  .nav div:before {
+    background: #000;
+    border-bottom: 10px double;
+    border-top: 3px solid;
+    content: '';
+    float: right;
+    height: 4px;
+    position: relative;
+    right: 3px;
+    top: 14px;
+    width: 20px;
+  }
+  .nav a {
+    display: block;
+    padding: .5em 0;
+    width: 50%;
+  }
+}

compiled/navbar.min.css

@@ -0,0 +1 @@
+.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}

compiled/tables.css

@@ -0,0 +1,10 @@
+.table th,
+.table td {
+  padding: .5em;
+  text-align: left;
+}
+.table tbody > :nth-child(2n-1) {
+  /* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
+  background: #ddd;
+  /* Shade every other table row */
+}

compiled/tables.min.css

@@ -0,0 +1 @@
+.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}

compiledcss.js

@@ -1,12 +1,11 @@
 var css = {
-	"general": "body{font-family:sans-serif;text-align:center;margin:0;font-size:16px}.smooth{transition:all .2s}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media(max-width:870px){.mediumwidth{width:70%;margin-left:15%}.row [class*='c']{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}@media(max-width:520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}",
-	"buttons": "i,button{font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}button{background:#aaa;box-shadow:3px 3px #000;color:#fff;font-size:2.5em;padding:15px 40px 16px;text-decoration:none;margin:.3em .7em;cursor:pointer;border:0}button.btn-a{background:#0ae}button.btn-a:hover{background:#09d}button.btn-a:active{background:#08b}button.btn-b{background:#3c5}button.btn-b:hover{background:#2b4}button.btn-b:active{background:#2a4}button.btn-c{background:#d33}button.btn-c:hover{background:#c22}button.btn-c:active{background:#b22}button.btn-small{padding:7px 19px;font-size:16px}",
-	"grid": ".row{line-height:2em;margin-top:2%;height:2em}column{float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}",
-	"headings": "h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}",
-	"icons": "ico{font-size:2.04em}",
-	"iehacks": ".ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}",
-	"inputs": "textarea,input{outline:0;padding:6px;font-family:sans-serif}textarea:focus,input:focus{border:1px solid #5ab}textarea,input[type='text']{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border-right:0}textarea,input,.addon-front{border:1px solid #ccc;font-size:.8em}",
-	"messages": "message{display:block;padding:2em 0;background:#ACE}message.warning{background:#D99}message.great{background:#9D9}",
-	"navbar": ".navbar{width:100%;background:black;color:white;text-align:left;height:1.5em;padding:1em 0 .6em}.navbar a{text-decoration:none}.pagename{color:white;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:white}.navbar input,.navbar button{margin-top:-20px}@media(max-width:500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}",
-	"tables": "table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left}tbody tr:nth-child(2n-1){background:#CCC}"
-}
+	"general": "body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}.btn,h2{font-size:2em}",
+	"buttons": ".btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 14px 11px}",
+	"grid": ".row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}",
+	"headings": "h1{font-size:3em}",
+	"icons": ".ico{font:33px Arial Unicode MS,Lucida Sans Unicode}",
+	"forms": "label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}",
+	"navbar": ".nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}",
+	"tables": ".table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}",
+	"messages": ".msg{background:#def;border-left:5px solid #59d;padding:1.5em}"
+};

defer.js

@@ -0,0 +1,51 @@
+//Mixpanel
+
+(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
+  typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);
+  b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
+  mixpanel.init("048a77a4ae0938d041e6996dc178e173");
+  mixpanel.track('Page load', {'page name' : document.title, 'url' : window.location.pathname});
+
+//Google Analytics
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ga('create', 'UA-41177412-1', 'auto');
+ga('require', 'linkid', 'linkid.js');
+ga('send', 'pageview');
+
+//Quantcast
+var _qevents = _qevents || [];
+
+(function() {
+var elem = document.createElement('script');
+elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
+elem.async = true;
+elem.type = "text/javascript";
+var scpt = document.getElementsByTagName('script')[0];
+scpt.parentNode.insertBefore(elem, scpt);
+})();
+
+_qevents.push({
+qacct:"p-4UQY7SYFeUHE_"
+});
+
+//Instantclick
+/* InstantClick 3.0.1 | (C) 2014 Alexandre Dieulot | http://instantclick.io/license.html */
+var InstantClick=function(e,g){function v(a){var c=a.indexOf("#");return 0>c?a:a.substr(0,c)}function y(a){for(;"A"!=a.nodeName;)a=a.parentNode;return a}function t(a,c){for(var b=0;b<D[a].length;b++)D[a][b](c)}function G(a,c,b,l){e.title=a;e.documentElement.replaceChild(c,e.body);if(b){history.pushState(null,null,b);a=b.indexOf("#");a=-1<a&&e.getElementById(b.substr(a+1));c=0;if(a)for(;a.offsetParent;)c+=a.offsetTop,a=a.offsetParent;scrollTo(0,c);m=v(b)}else scrollTo(0,l);H();z.done();t("change",
+!1)}function I(a){w(y(a.target).href)}function J(a){a=y(a.target);a.addEventListener("mouseout",Q);E?(K=a.href,r=setTimeout(w,E)):w(a.href)}function R(a){a=y(a.target);A?a.removeEventListener("mousedown",I):a.removeEventListener("mouseover",J);w(a.href)}function S(a){1<a.which||a.metaKey||a.ctrlKey||(a.preventDefault(),L(y(a.target).href))}function Q(){r?(clearTimeout(r),r=!1):u&&!h&&(p.abort(),h=u=!1)}function T(){if(!(4>p.readyState)&&0!=p.status){q.ready=+new Date-q.start;t("receive");if(p.getResponseHeader("Content-Type").match(/\/(x|ht|xht)ml/)){var a=
+e.implementation.createHTMLDocument("");a.documentElement.innerHTML=p.responseText;F=a.title;x=a.body;var c=v(s);f[c]={body:x,title:F,scrollY:c in f?f[c].scrollY:0};for(var a=a.head.children,c=0,b,l=a.length-1;0<=l;l--)if(b=a[l],b.hasAttribute("data-instant-track")){b=b.getAttribute("href")||b.getAttribute("src")||b.innerHTML;for(var n=B.length-1;0<=n;n--)B[n]==b&&c++}c!=B.length&&(C=!0)}else C=!0;h&&(h=!1,L(s))}}function H(a){for(var c=e.getElementsByTagName("a"),b,l=g.protocol+"//"+g.host,n=c.length-
+1;0<=n;n--){b=c[n];var d;if(!((d=b.target)||(d=b.hasAttribute("download"))||(d=0!=b.href.indexOf(l+"/"))||(d=-1<b.href.indexOf("#")&&v(b.href)==m)))if(M){a:{d=b;do{if(!d.hasAttribute)break;if(d.hasAttribute("data-no-instant"))break;if(d.hasAttribute("data-instant")){d=!0;break a}}while(d=d.parentNode);d=!1}d=!d}else a:{d=b;do{if(!d.hasAttribute)break;if(d.hasAttribute("data-instant"))break;if(d.hasAttribute("data-no-instant")){d=!0;break a}}while(d=d.parentNode);d=!1}d||(b.addEventListener("touchstart",
+R),A?b.addEventListener("mousedown",I):b.addEventListener("mouseover",J),b.addEventListener("click",S))}if(!a)for(a=e.body.getElementsByTagName("script"),n=0,j=a.length;n<j;n++)c=a[n],c.hasAttribute("data-no-instant")||(b=e.createElement("script"),c.src&&(b.src=c.src),c.innerHTML&&(b.innerHTML=c.innerHTML),l=c.parentNode,d=c.nextSibling,l.removeChild(c),l.insertBefore(b,d))}function w(a){if(A||!("display"in q&&100>+new Date-(q.start+q.display)))if(r&&(clearTimeout(r),r=!1),a||(a=K),!u||a!=s&&!h)u=
+!0,h=!1,s=a,C=x=!1,q={start:+new Date},t("fetch"),p.open("GET",a),p.send()}function L(a){"display"in q||(q.display=+new Date-q.start);r?s&&s!=a?g.href=a:(w(a),z.start(0,!0),t("wait"),h=!0):!u||h?g.href=a:C?g.href=s:x?(f[m].scrollY=pageYOffset,h=u=!1,G(F,x,s)):(z.start(0,!0),t("wait"),h=!0)}var N=navigator.userAgent,O="createTouch"in e,m,K,r,f={},p,s=!1,F=!1,C=!1,x=!1,q={},u=!1,h=!1,B=[],M,A,E,D={fetch:[],receive:[],wait:[],change:[]},z=function(){function a(a,d){f=a;e.getElementById(k.id)&&e.body.removeChild(k);
+k.style.opacity="1";e.getElementById(k.id)&&e.body.removeChild(k);l();d&&setTimeout(c,0);clearTimeout(m);m=setTimeout(b,500)}function c(){f=10;l()}function b(){f+=1+2*Math.random();98<=f?f=98:m=setTimeout(b,500);l()}function l(){g.style[h]="translate("+f+"%)";e.getElementById(k.id)||e.body.appendChild(k)}function n(){e.getElementById(k.id)?(clearTimeout(m),f=100,l(),k.style.opacity="0"):(a(100==f?0:f),setTimeout(n,0))}function d(){k.style.left=pageXOffset+"px";k.style.width=innerWidth+"px";k.style.top=
+pageYOffset+"px";var a="orientation"in window&&90==Math.abs(orientation);k.style[h]="scaleY("+innerWidth/screen[a?"height":"width"]*2+")"}var k,g,h,f,m;return{init:function(){k=e.createElement("div");k.id="instantclick";g=e.createElement("div");g.id="instantclick-bar";g.className="instantclick-bar";k.appendChild(g);var a=["Webkit","Moz","O"];h="transform";if(!(h in g.style))for(var b=0;3>b;b++)a[b]+"Transform"in g.style&&(h=a[b]+"Transform");var c="transition";if(!(c in g.style))for(b=0;3>b;b++)a[b]+
+"Transition"in g.style&&(c="-"+a[b].toLowerCase()+"-"+c);a=e.createElement("style");a.innerHTML="#instantclick{position:"+(O?"absolute":"fixed")+";top:0;left:0;width:100%;pointer-events:none;z-index:2147483647;"+c+":opacity .25s .1s}.instantclick-bar{background:#29d;width:100%;margin-left:-100%;height:2px;"+c+":all .25s}";e.head.appendChild(a);O&&(d(),addEventListener("resize",d),addEventListener("scroll",d))},start:a,done:n}}(),P="pushState"in history&&(!N.match("Android")||N.match("Chrome/"))&&
+"file:"!=g.protocol;return{supported:P,init:function(){if(!m)if(P){for(var a=arguments.length-1;0<=a;a--){var c=arguments[a];!0===c?M=!0:"mousedown"==c?A=!0:"number"==typeof c&&(E=c)}m=v(g.href);f[m]={body:e.body,title:e.title,scrollY:pageYOffset};for(var c=e.head.children,b,a=c.length-1;0<=a;a--)b=c[a],b.hasAttribute("data-instant-track")&&(b=b.getAttribute("href")||b.getAttribute("src")||b.innerHTML,B.push(b));p=new XMLHttpRequest;p.addEventListener("readystatechange",T);H(!0);z.init();t("change",
+!0);addEventListener("popstate",function(){var a=v(g.href);a!=m&&(a in f?(f[m].scrollY=pageYOffset,m=a,G(f[a].title,f[a].body,!1,f[a].scrollY)):g.href=g.href)})}else t("change",!0)},on:function(a,c){D[a].push(c)}}}(document,location);
+
+InstantClick.on('change', function() {
+	ga('send', 'pageview', location.pathname + location.search);
+});

docs.css

@@ -0,0 +1,123 @@
+/* These styles are used on this page only to make the demo page look nicer. Don't use them in your project. */
+
+/* Bootstrap stuff */
+.buttonsizes * {
+	vertical-align: bottom;
+	margin-bottom: 0;
+	margin-right: 10px;
+	margin-left: 0;
+}
+
+/* code blocks */
+pre {
+	font-size: .9em;
+	word-wrap: break-word;
+}
+
+/* formatting for grid system */
+.dark {
+	background-color: rgb(172, 172, 172);
+}
+
+.light {
+	background-color: rgb(223, 223, 223);
+}
+
+.col {
+	text-align: center;
+}
+
+.row {
+	line-height: 2em;
+}
+
+/* pretty heading demo display (all headings on one line) */
+.headings *:not(first-of-type) {
+	display: inline;
+}
+
+/* fancy page heading styles */
+h1:not(.exampleh1) {
+	margin: 0.2em 0;
+	border-bottom: 5px solid;
+	margin-bottom: 15px;
+	padding-bottom: 5px;
+}
+
+/* normally, the button would extend past the page top and be invisible but when it's in the middle of the page it shows */
+.navbar button.btn-close.btn-sm {
+	padding-top: 4px;
+	margin-top: -49px;
+}
+
+/* this fixes the display of the demo-navbar when the page is resized */
+.navbar .container {
+	margin: 0 20px;
+}
+
+/* support tables */
+.support span.full, .support tr.full {
+	background: #3c5;
+}
+
+.support span.partial, .support tr.partial {
+	background: #fd5;
+}
+
+.support span.none, .support tr.none {
+	background: #d55;
+}
+
+.key {
+	padding: 5px;
+	line-height: 30px;
+}
+
+.support th, .support td, .support table {
+	border: 1px solid;
+}
+.support table, .support .key {
+	font-weight: bold;
+}
+
+@media (max-width: 900px) {
+	.browserdetails {
+		display: none;
+	}
+}
+
+nav {
+	display: block;
+}
+
+.c12{width:98%}.c11{width:89.66%}.c10{width:81.33%}.c9{width:73%}.c8{width:64.66%}.c7{width:56.33%}.c6{width:48%}.c5{width:39.66%}.c4{width:31.33%}.c3{width:23%}.c2{width:14.66%}.c1{width:6.33%}
+
+.col { margin: 0 1%; }
+
+@media (max-width: 870px) {
+	.row .col {
+		margin: 0;
+	}
+}
+
+.krakenholder {
+	display: block;
+	width: 150px;
+	margin: auto;
+}
+
+.krakenholder:hover .kraken {
+	height: 0;
+}
+
+.krakenholder:hover:before {
+	position: relative;
+	display: block;
+	height: 150px;
+	text-align: center;
+	font-size: 40px;
+	line-height: 150px;
+	font-weight: bold;
+	background: red;
+	content: "ROAR";
+}

docs.html

@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+		
+		<script> 
+			document.createElement("nav"); document.createElement("button");
+		</script>
+		
+		<!--[if IE 7]> 
+			<style>
+				.col { margin: 0 0.9% !important; }
+			</style>
+		<![endif]-->
+
+		<title>min - docs</title>
+
+		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
+		<link href="docs.css" rel="stylesheet" type="text/css" />
+
+		<style type="text/css">
+			/* Min+ plugin*/
+			message {
+				display: block;
+				padding: 2em;
+				background: #def;
+				border-left: 5px solid #44e;
+			}
+
+			.warning {
+				border-color: #e44; 
+				background: #fdd;
+			}
+
+			.great {
+				border-color: #2d2;
+				background: #dfd;
+			}
+		</style>
+
+		<!--[if lte IE 6]>
+			<style>
+				.col {
+					margin: 0.5%;
+				}
+				.c12 {
+					margin: 0.5%;
+					margin-left: 0.5%;
+					width: 97%;
+				}
+				.container {
+					width: 90%;
+				}
+			</style>
+		<![endif]-->
+		
+		<!--[if IE 5]>
+			<style>
+				.container {
+					width: 100%;
+				}
+	
+				.btn-close {
+					display: none;
+				}
+	
+				body {
+					font: 16px Arial;
+				}
+	
+				h3 {
+					font-size: 20px;
+				}
+	
+				.nav {
+					height: 50px;
+				}
+			</style>
+		<![endif]-->
+	</head>
+	<body>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="index.html">Min</a>
+				<a class="current" href="#">Docs</a>
+				<!--
+					<a href="bootstrapconverter.html">Bootstrap Converter</a>
+					<a href="examples.html">Examples</a>
+				-->
+				<a href="download.html">Download</a>
+				<a href="examples.html">Examples</a>
+				<a href="https://github.com/owenversteeg/min">Github</a>
+			</div>
+		</nav>
+		<button class="btn btn-sm btn-close">×</button>
+		<div class="container">
+			<div>
+				<h1>Basics & Browser Support</h1>
+				<p>
+					Min's minimalism has several advantages. Firstly, it doesn't prescribe a specific design for you. Each element has just a handful of CSS rules applied to it, and as a result overriding default styles is extremely easy. Min being only 995 bytes means that there's less of it to get in your way when you want to customize your site. Contrast this with Bootstrap, where you may have to override many different rules to get what you want. Secondly, there's less markup to type. Min requires fewer superfluous divs and classes than any other framework, allowing every part of your code to be readable and semantically correct.
+				</p>
+				<p>
+					Because of its minimalist goal, Min core has fewer features than Bootstrap. Many of the features omitted in Min are superfluous, unsemantic, and just plain idiotic (I'm looking at you, text-left class.) However, when using the <a href="http://owenversteeg.com/min-bootstrap-plugin">3.5kB Min Bootstrap plugin</a>, Min has full feature parity with Bootstrap. If you are migrating a complex site from Bootstrap to Min, it is highly recommended that you use this plugin.
+				</p>
+			</div>
+			<div class="support">
+				<table class="table">
+					<thead>
+						<tr>
+							<th>Chrome</th>
+							<th>IE</th>
+							<th>FF</th>
+							<th>Opera</th>
+							<th>Safari</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="full">
+							<td>33 - 2 <span class="browserdetails">(27.32%) [2014 - 2009]</span></td>
+							<td>11 - 9 <span class="browserdetails">(5.22% + 0.20% + 0.20%) [2014 - 2011]</span></td>
+							<td>27 - 3.5 <span class="browserdetails">(18.66% + 0.09% + 0.04%) [2014 - 2009]</span></td>
+							<td>19 - 10 <span class="browserdetails">(1.51% + 1.32%) [2014 - 2009]</span></td>
+							<td>7 - 4 <span class="browserdetails">(3.88% + 11.66% + 5.55%) [2014 - 2009]</span></td>
+						</tr>
+						<tr class="partial">
+							<td>None</td>
+							<td>8 - 5.5 <span class="browserdetails">(4.56%) [2009 - 2000]</span></td>
+							<td onclick="alert(&#39;Tables are not shaded&#39;)">3 <span class="browserdetails">(0.03%) [2008]</span></td>
+							<td onclick="alert(&#39;Tables are not shaded and buttons are not rounded&#39;)">9 <span class="browserdetails">(0.00%) [2006]</span></td>
+							<td>None</td>
+						</tr>
+						<tr class="none">
+							<td onclick="alert(&#39;page overflows&#39;)">1 - 0.2 <span class="browserdetails">(0.00%) [2008 - 2008]</span></td>
+							<td onclick="alert(&#39;Navbars don&#39;t work at all, neither do grids or icons, and buttons are not padded&#39;)">5 - 1 <span class="browserdetails">(0.01%) [1999 - 1995]</span></td>
+							<td onclick="alert(&#39;navbars broken (replace nav elements with divs for a fix)&#39;)">2 - 0.8 <span class="browserdetails">(0.05%) [2006 - 2004]</span></td>
+							<td>8 - 2 <span class="browserdetails">(0.00%) [2005 - 1996]</span></td>
+							<td onclick="alert(&#39;page overflows, no rounded buttons&#39;)">3 - 1 <span class="browserdetails">(0.00%) [2007 - 2003]</span></td>
+						</tr>
+					</tbody>
+				</table>
+				<!-- Reverse Mali flag, Bolivian flag, and Helvetic Republic flag -->
+
+				<p>Key: <span class="full key">Full support</span>, <span class="partial key">partial support</span>, and <span class="none key">no support</span>. <span class="browserdetails">Market share data <a href="http://stats.wikimedia.org/archive/squid_reports/2014-01/SquidReportClients.htm">from Wikimedia</a> is in parens (in the format desktop+mobile+tablet); browser release dates are in brackets. Due to web crawlers and other mobile browsers, numbers will add up to about 80%.</span> Click on each cell for details (if available.) Partial support means that Min supports that browser but there may be a small visual quibble, such as no rounded corners on buttons, a difference in how the page responds to resizing, or slight table shading differences. <b>Netscape support has ended</b> with the release of Min 2.0 as part of a push towards using semantic HTML5 elements. Replace all &lt;nav&gt; elements with &lt;div&gt;s to make Min work in Netscape 7+.
+				</p>
+			</div>
+			<div class="buttons">
+				<h1>Buttons</h1>
+				<a class="btn smooth btn-a">btn-a</a>
+				<a class="smooth btn-b btn">btn-b</a>    
+				<a class="smooth btn-c btn">btn-c</a>
+				<a class="smooth btn">classless</a>
+			
+				<br><br><pre>&lt;a class="btn btn-b smooth"&gt;btn-b&lt;/a&gt;</pre>
+				<br>
+				<a class="btn smooth btn-a btn-sm">btn-sm btn-a</a>
+				<a class="btn smooth btn-b btn-sm">btn-sm btn-b</a>
+				<a class="btn smooth btn-c btn-sm">btn-sm btn-c</a>
+				<a class="btn smooth btn-sm">btn-sm classless</a>
+				
+				<br><br><pre>&lt;a class="btn btn-b btn-sm smooth"&gt;btn-sm&lt;/a&gt;</pre>
+			</div>
+		
+			<div>
+				<h1>Forms</h1>
+				<input type="text" class="smooth" placeholder="input type=&quot;text&quot;"><br><br>
+				<textarea rows="3" class="smooth" placeholder="textarea"></textarea><br><br><span class="addon">$</span><input type="text" class="smooth" placeholder="span class=&quot;addon&quot;">
+				<br><br>
+				<pre>&lt;input type="text" class="smooth"&gt;
+				<br>&lt;textarea rows="3" class="smooth"&gt;
+				<br>&lt;span class="addon"&gt;$&lt;/span&gt;&lt;input type="text" class="smooth"&gt;</pre>
+				<div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code>&lt;/span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt; &lt;input ...</pre><span class="addon">$</span> <input type="text" class="smooth"> <pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input type="text" class="smooth"></div>
+			</div>
+			
+			<div class="navbar">
+				<h1>Navbars</h1>
+				<nav class="nav" tabindex="-1" onclick="this.focus()">
+					<div class="container">
+						<a class="pagename current" href="#">Min</a>
+						<a href="#">One</a>
+						<a href="#">Two</a> 
+						<a href="#">Three</a>
+						<a href="#">Four</a>
+					</div>
+				</nav>
+				<button class="btn-close btn btn-sm">×</button>
+				<br>
+				<pre>&lt;nav class="nav" tabindex="-1" onclick="this.focus()"&gt;<br>    &lt;div class="container"&gt;<br>        &lt;a class="pagename current" href="#"&gt;Min&lt;/a&gt;<br>        &lt;a href="#"&gt;One&lt;/a&gt;<br>        &lt;a href="#"&gt;Two&lt;/a&gt; <br>        &lt;a href="#"&gt;Three&lt;/a&gt;<br>    &lt;/div&gt;<br>&lt;/nav&gt;<br>&lt;button class="btn-close btn btn-sm"&gt;×&lt;/button&gt;</pre>                
+			</div>
+			
+			<div>
+				<h1>Tables</h1>
+				<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
+				<br><br>
+				<pre>&lt;table class="table"&gt;
+	&lt;thead&gt;
+		&lt;tr&gt;
+			&lt;th&gt;#&lt;/th&gt;
+			&lt;th&gt;Widgets Sold&lt;/th&gt;
+		&lt;/tr&gt;
+	&lt;/thead&gt;
+	&lt;tbody&gt;
+		&lt;tr&gt;
+			&lt;td&gt;1&lt;/td&gt;
+			&lt;td&gt;5&lt;/td&gt;
+		&lt;/tr&gt;
+		&lt;tr&gt;
+			&lt;td&gt;2&lt;/td&gt;
+			&lt;td&gt;10&lt;/td&gt;
+		&lt;/tr&gt;
+		&lt;tr&gt;
+			&lt;td&gt;3&lt;/td&gt;
+			&lt;td&gt;500&lt;/td&gt;
+		&lt;/tr&gt;
+	&lt;/tbody&gt;
+&lt;/table&gt;
+				</pre>
+			</div>
+			
+			<div class="icons">
+				<h1>Icons</h1>
+				<i class="ico"><b>Android Safe</b> ☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
+				<br><br><message class="great">The "Android Safe" icons work everywhere, tested on hundreds of devices. </message>
+				<br>
+				<i class="ico"><b>Total Set</b> ✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩</i>
+				<br><br><message class="warning">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</message>
+				<pre>&lt;i class="ico"&gt;Copy and paste icons from above here!&lt;/i&gt;</pre>
+				<h1>Grids</h1>
+				<div class="row">
+					<div class="col dark c12">12</div>
+				</div>
+				<div class="row">
+					<div class="col dark c11">11</div>
+					<div class="col light c1">1</div>
+				</div>
+				<div class="row">
+					<div class="col dark c10">10</div>
+					<div class="col light c2">2</div>
+				</div>
+				<div class="row">
+					<div class="col dark c9">9</div>
+					<div class="col light c3">3</div>
+				</div>
+				<div class="row">
+					<div class="col dark c8">8</div>
+					<div class="col light c4">4</div>
+				</div>
+				<div class="row">
+					<div class="col dark c7">7</div>
+					<div class="col light c5">5</div>
+				</div>
+				<div class="row">
+					<div class="col dark c6">6</div>
+					<div class="col light c6">6</div>
+				</div>
+				<div class="row">
+					<div class="col dark c5">5</div>
+					<div class="col light c7">7</div>
+				</div>
+				<div class="row">
+					<div class="col dark c4">4</div>
+					<div class="col light c8">8</div>
+				</div>
+				<div class="row">
+					<div class="col dark c3">3</div>
+					<div class="col light c9">9</div>
+				</div>
+				<div class="row">
+					<div class="col dark c2">2</div>
+					<div class="col light c10">10</div>
+				</div>
+				<div class="row">
+					<div class="col dark c1">1</div>
+					<div class="col light c11">11</div>
+				</div>
+				<div class="row">
+					<div class="col light c12">12</div>
+				</div>
+	
+				<br>
+
+				<!--[if lte IE 6]><br><br><br><![endif]-->
+				
+				<pre>&lt;div class="row"&gt;<br>    &lt;div class="col c12"&gt;12&lt;/div&gt;<br>&lt;/div&gt;
+					<br>&lt;div class="row"&gt;<br>    &lt;div class="col c4"&gt;4&lt;/div&gt;<br>    &lt;div class="col c8"&gt;8&lt;/div&gt;<br>&lt;/div&gt;
+				</pre>
+			</div>
+			
+			<h1>Headings</h1>
+			<div class="headings">
+				<h1 class="exampleh1">h1</h1>
+				<h2>h2</h2>
+				<h3>h3</h3>
+				<h4>h4</h4>
+				<h5>h5</h5>
+				<h6>h6</h6>
+				<br>
+				<pre>&lt;h1&gt;Level One Heading&lt;/h1&gt;</pre>
+			</div>
+
+			<h1>Messages</h1>
+			<div class="messages">
+				<div class="msg">
+					<strong>Watch out!</strong> You almost scrolled off the page. There are reports of sea monsters past the end of the page and we do not advise you go there.
+				</div>
+				<pre>&lt;div class="msg"&gt;
+	&lt;strong&gt;Alert headline!&lt;/strong&gt;
+	Message text
+&lt;/div&gt;
+	</pre>
+			</div>
+			<br>
+			
+			<div class="krakenholder">
+				<img src="kraken.png" class="kraken" alt="a scary sea monster">
+			</div>
+
+			<br>
+
+			<script type="text/javascript">
+				function downloadJSAtOnload() {
+					var element = document.createElement("script");
+					element.src = "defer.js";
+					document.body.appendChild(element);
+				}
+				if (window.addEventListener)
+				window.addEventListener("load", downloadJSAtOnload, false);
+				else if (window.attachEvent)
+				window.attachEvent("onload", downloadJSAtOnload);
+				else window.onload = downloadJSAtOnload;
+			</script>
+		</div>
+		<script src="defer.js"></script>
+	</body>
+</html>

download.html

@@ -1,78 +1,145 @@
 <!DOCTYPE html>
-<!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]-->
+<html>
 	<head>
-		<meta charset="UTF-8">
-		<title>min - download</title>
-		<style type="text/css">body{font-family:Helvetica,sans-serif;text-align:center;margin:0;font-size:16px}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}a{text-decoration:none}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media(max-width:870px){.mediumwidth{width:70%;margin-left:15%}}@media(max-width:520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}.thin{font-weight:100}h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}button{background:#afafaf;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;box-shadow:3px 3px 0 black;color:#f3f3f3 !important;display:inline-block;font-size:2.5em;padding:15px 40px 16px;text-align:center;text-decoration:none;margin:.3em .7em .3em .7em;cursor:pointer;border:0}button.smooth{transition:background-color .15s ease-in-out}button.btn-a{background:#00a8e9}button.btn-a:hover{background:#0096d0}button.btn-a:active{background:#0083b6}button.btn-b{background:#4cc947}button.btn-b:hover{background:#3dbf38}button.btn-b:active{background:#37ab32}button.btn-c{background:#d64040}button.btn-c:hover{background:#d02d2d}button.btn-c:active{background:#bb2828}button.btn-small{padding:7px 19px 10px;font-size:16px}textarea,input{border:1px solid lightgray;outline:0;padding:6px;font-size:.8em;font-family:Helvetica,sans-serif}textarea.smooth,input.smooth{transition:border .15s ease-in-out}textarea:focus,input:focus{border:1px solid #57abb3}textarea,input[type="text"]{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border:1px solid lightgray;z-index:400;display:inline-block;border-right:0;font-size:.8em;font-family:Arial Unicode MS Regular,sans-serif !important}.navbar{width:100%;background:black;color:white;text-align:left;height:1.5em;padding:1em 0 .6em}.pagename{color:white;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:white}@media(max-width:500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left;vertical-align:top}.table td{border-top:1px solid #ddd}tbody tr:nth-child(2n-1){background:#e0e0e0}message{width:100%;display:block;padding:2em 0;background:#a7d3e4}message.warning{background:#e4a7a7}message.great{background:#a7e4ae}ico{font-size:1.9375em;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}.row{display:block;line-height:2em;margin-top:2%;height:2em}column{display:inline-block;float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}@media(max-width:720px){.row [class*="c"]{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}.ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}</style>
-		<link type="text/css" rel="stylesheet/less" href="download.less"/>
-		<script src="less.js" type="text/javascript"></script>
-		<script type="text/javascript">
-		  var _gaq = _gaq || [];
-		  _gaq.push(['_setAccount', 'UA-41177412-1']);
-		  _gaq.push(['_setDomainName', 'minfwk.com']);
-		  _gaq.push(['_setAllowLinker', true]);
-		  _gaq.push(['_trackPageview']);
-
-		  (function() {
-		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-		    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
-		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-		  })();
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<script> 
+			document.createElement("nav"); document.createElement("button");
 		</script>
+		
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>min - download</title>
+
+		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
+
+		<!--[if lt IE 9]>
+		<style>
+			html {
+				overflow-x: hidden;
+			}
+		</style>
+		<![endif]-->
+
+		<style type="text/css">
+			/* Min+ plugin*/
+			message {
+				display: block;
+				padding: 2em;
+				background: #def;
+				border-left: 5px solid #44e;
+			}
+
+			.warning {
+				border-color: #e44; 
+				background: #fdd;
+			}
+
+			.great {
+				border-color: #2d2;
+				background: #dfd;
+			}
+
+			/* Fun h1s */
+			h1:not(.exampleh1) {
+				margin: 0.2em 0;
+				border-bottom: 5px solid;
+				margin-bottom: 15px;
+				padding-bottom: 5px;
+			}
+
+			.fourways {
+				color: #666;
+				margin-bottom: 0;
+			}
+			small {
+				color: #6b6;
+				font-size: 0.6em;
+			}
+		</style>
+
+		<!--[if lte IE 6]>
+			<style>
+				.col {
+					margin: 0.5%;
+				}
+				.c12 {
+					margin: 0.5%;
+					margin-left: 0.5%;
+					width: 97%;
+				}
+				.container {
+					width: 90%;
+				}
+			</style>
+		<![endif]-->
 	</head>
 	<body>
-		<h1 class="title">min</h1>
-		<h3>please select your components</h3>
-
-		<hr class="mediumwidth">
-		
-		<div id="checkboxes">
-			<label><input name="general" type="checkbox" checked disabled/>General (required) - 604 - 421 - 239</label>
-
-			<label><input name="headings" type="checkbox" checked/>Headings - 105 - 66 - 76</label>
-
-			<label><input name="buttons" type="checkbox" checked/>Buttons - 1048 - 833 - 413</label>
-
-			<label><input name="inputs" type="checkbox" checked/>Inputs - 598 - 473 - 300</label>
-
-			<label><input name="navbar" type="checkbox"/>Navbar - 453 - 311 - 216</label>
-
-			<label><input name="tables" type="checkbox"/>Tables - 270 - 200 - 175</label>
-
-			<label><input name="messages" type="checkbox"/>Messages - 183 - 134 - 124</label>
-
-			<label><input name="icons" type="checkbox"/>Icons - 155 - 80 - 98</label>
-
-			<label><input name="grid" type="checkbox"/>Grid - 588 - 377 - 237</label>
-
-			<label><input name="iehacks" type="checkbox"/>IE hacks - 131 - 98 - 100</label>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="index.html">Min</a>
+				<a href="docs.html">Docs</a>
+				<!--
+					<a href="bootstrapconverter.html">Bootstrap Converter</a>
+					<a href="examples.html">Examples</a>
+				-->
+				<a class="current" href="#">Download</a>
+				<a href="examples.html">Examples</a>
+				<a href="https://github.com/owenversteeg/min">Github</a>
+			</div>
+		</nav>
+		<button class="btn btn-sm btn-close">×</button>
+		<div class="container">
+			<h2 class="fourways">There are four ways to use Min:</h2>
+			<h1>CDN <small>(Recommended)</small></h1>
+			<p>
+				Since Min is only 995 bytes and all of the core components are very commonly used, for most developers it makes sense to use <a href="http://www.jsdelivr.com/#!min">the CDN version from jsdelivr</a>. This provides several benefits: the user may have cached the framework, and if they have not, it will be served from a blazingly-fast server in their location instead.
+			</p>
+			<h1>Download</h1>
+			<p>
+				Some developers prefer to serve Min from their own servers. Make sure that your server automatically gzips Min (and other CSS files) to ensure that your users get the fastest page times possible.
+			</p>
+			<a class="btn btn-sm btn-a" href="entireframework.min.css" download>Download Min</a>
+			<h1>Customized download</h1>
+			<p>
+				For some developers, every byte counts, so it makes sense to pick and choose each component of Min. You can do so below.
+				<div id="checkboxes">
+					<label><input name="general" type="checkbox" checked disabled/>General (required)</label>
+					<label><input name="headings" type="checkbox" checked/>Headings</label>
+					<label><input name="buttons" type="checkbox" checked/>Buttons</label>
+					<label><input name="forms" type="checkbox" checked/>Forms</label>
+					<label><input name="navbar" type="checkbox"/>Navbar</label>
+					<label><input name="tables" type="checkbox"/>Tables</label>
+					<label><input name="icons" type="checkbox"/>Icons</label>
+					<label><input name="grid" type="checkbox"/>Grid</label>
+					<label><input name="messages" type="checkbox"/>Messages</label>
+				</div>
+				<a href="javascript:prettyOutput()"><button class="btn smooth btn-a">Get CSS</button></a>
+				<br>
+				<textarea id="result" rows="5" class="smooth" onclick="this.select();" readonly></textarea>
+				<h4 id="details"></h4>
+			</p>
+			<h1>Bower</h1>
+			<p>
+				If you prefer to use Bower, just run <code>bower install min</code>. This will give you Min as well as the LESS files it's built from.
+			</p>
 		</div>
 
-		<br>
-		<a href="javascript:prettyOutput()"><button class="smooth btn-a">Get CSS</button></a>
-
-		<br>
-
-		<div class="mediumwidth">
-			<textarea id="result" rows="5" class="smooth" onclick="this.select();" readonly></textarea>
-		</div>
-
-		<h4 id="details"></h4>
-
-		<h6 id="warning">Please note that the input size does not always correlate directly to the output size with gzip (e.g. deselecting some options can increase the gzipped file size)</h6>
-
-		<h5>Also available via CDN from <a style="text-decoration:underline;" href="http://www.jsdelivr.com/#!min">jsDelivr</a></h5>
-
-		<br>
-
-		<!-- Mixpanel -->
-		<script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
-			typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);
-			b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
-			mixpanel.init("048a77a4ae0938d041e6996dc178e173");
-			mixpanel.track('Page load', {'page name' : document.title, 'url' : window.location.pathname});
-		</script>
 		<script src="compiledcss.js" type="text/javascript"></script>
 		<script src="download.js" type="text/javascript"></script>
+
+		<script type="text/javascript">
+			function downloadJSAtOnload() {
+				var element = document.createElement("script");
+				element.src = "defer.js";
+				document.body.appendChild(element);
+			}
+			if (window.addEventListener)
+			window.addEventListener("load", downloadJSAtOnload, false);
+			else if (window.attachEvent)
+			window.attachEvent("onload", downloadJSAtOnload);
+			else window.onload = downloadJSAtOnload;
+		</script>
+		<script src="defer.js"></script>
 	</body>
 </html>

download.js

@@ -1,6 +1,5 @@
 function prettyOutput() {
 	document.getElementById('result').style.display = "inline-block";
-	document.getElementById('warning').style.display = "inline-block";
 	document.getElementById('result').innerText = calculateCSS();
 }
 
@@ -19,62 +18,22 @@ function calculateCSS() {
 		general: false,
 		headings: false,
 		buttons: false,
-		inputs: false,
+		forms: false,
 		navbar: false,
 		tables: false,
-		messages: false,
 		icons: false,
-		iehacks: false,
 		grid: false,
-		total: 0,
-		totalmin: 0,
-		totalmingzip: 0
+		messages: false
 	};
 	
 	for (var i=0; i<document.getElementById('checkboxes').children.length; i++) {
 		var currentTypeName = document.getElementById('checkboxes').children[i].children[0].name;
 		var isChecked = document.getElementsByName(currentTypeName)[0].checked;
 		
-		details[currentTypeName] = isChecked
+		details[currentTypeName] = isChecked;
 		
 		if (isChecked) {
-			var det = getNums(document.getElementsByName(currentTypeName)[0].parentElement.innerText || document.getElementsByName(currentTypeName)[0].parentElement.textContent);
-			details.total += det[0];
-			details.totalmin += det[1];
-			details.totalmingzip += det[2];
-			
-			switch (currentTypeName) {
-				case "general": 
-					mincss += css['general'];
-					break;
-				case "headings":
-					mincss += css['headings']
-					break;
-				case "buttons":
-					mincss += css["buttons"]
-					break;
-				case "inputs":
-					mincss += css["inputs"];
-					break;
-				case "navbar":
-					mincss += css["navbar"];
-					break;
-				case "tables":
-					mincss += css["tables"];
-					break;
-				case "messages":
-					mincss += css["messages"];
-					break;
-				case "icons":
-					mincss += css["icons"];
-					break;
-				case "iehacks":
-					mincss += css["iehacks"];
-					break;
-				case "grid":
-					mincss += css["grid"];
-					break;
-			}
+			mincss += css[currentTypeName];
 		}
 	}
 
@@ -91,15 +50,15 @@ function calculateCSS() {
 	http.onreadystatechange = function() {
 		//Call a function when the state changes.
 		if (http.readyState == 4 && http.status == 200) {
-			details.totalmingzip = parseInt(http.responseText)
+			details.totalmingzip = parseInt(http.responseText);
 			document.getElementById('details').innerHTML = document.getElementById('details').innerHTML.replace(' and', ',');
-			document.getElementById('details').innerHTML += ", and " + details.totalmingzip + " bytes minified and gzipped."
+			document.getElementById('details').innerHTML += ", and " + details.totalmingzip + " bytes minified and gzipped.";
 			mixpanel.track('Calculate CSS', details);
 		}
-	}
+	};
 	http.send(params);
 
-	document.getElementById('details').innerHTML = "Your download of min is " + details.total + " bytes unminified and " + details.totalmin + " bytes minified (above)";
+	document.getElementById('details').innerHTML = "Your customized Min is about " + Math.round(-1*(((mincss.length/2274)-1)*100)) + "% smaller, or about "+ Math.round(((mincss.length/2274)*995)) +" bytes minified and gzipped."
 
 	console.log(details);
 	return mincss;

entireframework.min.css

@@ -1 +1 @@
-body{font-family:sans-serif;text-align:center;margin:0;font-size:16px}.smooth{transition:all .2s}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media(max-width:870px){.mediumwidth{width:70%;margin-left:15%}.row [class*='c']{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}@media(max-width:520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}i,button{font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}button{background:#aaa;box-shadow:3px 3px #000;color:#fff;font-size:2.5em;padding:15px 40px 16px;text-decoration:none;margin:.3em .7em;cursor:pointer;border:0}button.btn-a{background:#0ae}button.btn-a:hover{background:#09d}button.btn-a:active{background:#08b}button.btn-b{background:#3c5}button.btn-b:hover{background:#2b4}button.btn-b:active{background:#2a4}button.btn-c{background:#d33}button.btn-c:hover{background:#c22}button.btn-c:active{background:#b22}button.btn-small{padding:7px 19px;font-size:16px}.row{line-height:2em;margin-top:2%;height:2em}column{float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}ico{font-size:2.04em}.ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}textarea,input{outline:0;padding:6px;font-family:sans-serif}textarea:focus,input:focus{border:1px solid #5ab}textarea,input[type='text']{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border-right:0}textarea,input,.addon-front{border:1px solid #ccc;font-size:.8em}message{display:block;padding:2em 0;background:#ACE}message.warning{background:#D99}message.great{background:#9D9}.navbar{width:100%;background:black;color:white;text-align:left;height:1.5em;padding:1em 0 .6em}.navbar a{text-decoration:none}.pagename{color:white;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:white}.navbar input,.navbar button{margin-top:-20px}@media(max-width:500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left}tbody tr:nth-child(2n-1){background:#CCC}
+/* Copyright 2014 Owen Versteeg; MIT licensed */body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}label>*{display:inline}form>*{display:block;margin-bottom:10px}.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 14px 11px}.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}h1{font-size:3em}.btn,h2{font-size:2em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}textarea,input,select{padding:8px;border:1px solid #ccc}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em}.addon{padding:8px 12px;box-shadow:0 0 0 1px #ccc}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(min-width:1310px){.container{margin:auto;width:1270px}}@media(max-width:870px){.row .col{width:100%}}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{padding:.5em 0;display:block;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{padding:1.5em;background:#def;border-left:5px solid #59d}

example.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>Your Page Title</title>
+
+		<link href="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
+	</head>
+	<body>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="#">Your Site Name</a>
+				<a href="#">One</a>
+				<a href="#">Two</a> 
+				<a href="#">Three</a>
+			</div>
+		</nav>
+		<button class="btn-close btn btn-sm">×</button>
+		<div class="container">
+			<h1>Example</h1>
+			<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
+		</div>
+	</body>
+</html>

example2.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>Your Page Title</title>
+
+		<link href="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
+
+		<style>
+			.hero {
+				background: #eee;
+				padding: 20px;
+				border-radius: 10px;
+				margin-top: 1em;
+			}
+
+			.hero h1 {
+				margin-top: 0;
+				margin-bottom: 0.3em;
+			}
+
+			.c4 {
+				padding: 10px;
+				box-sizing: border-box;
+			}
+
+			.c4 h3 {
+				margin-top: 0;
+			}
+
+			.c4 a {
+				margin-top: 10px;
+				display: inline-block;
+			}
+		</style>
+	</head>
+	<body>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="#">Your Site Name</a>
+				<a href="#">One</a>
+				<a href="#">Two</a> 
+				<a href="#">Three</a>
+			</div>
+		</nav>
+		<button class="btn-close btn btn-sm">×</button>
+		<div class="container">
+			<div class="hero">
+				<h1>Example</h1>
+				<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
+				<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
+				<a class="btn btn-b" href="http://owenversteeg.com">Go places!</a>
+			</div>
+			<div class="row">
+    <div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-a">Do stuff!</a></div>
+        <div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-b">Do stuff!</a></div>    <div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-c">Do stuff!</a></div>
+</div>
+		</div>
+	</body>
+</html>

example3.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>Your Page Title</title>
+
+		<link href="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
+
+		<style>
+			h1 {
+				    margin: 0.2em 0;
+    border-bottom: 5px solid;
+    margin-bottom: 15px;
+    padding-bottom: 5px;
+			}
+		</style>
+	</head>
+	<body>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="#">Your Site Name</a>
+				<a href="#">One</a>
+				<a href="#">Two</a> 
+				<a href="#">Three</a>
+			</div>
+		</nav>
+		<button class="btn-close btn btn-sm">×</button>
+		<div class="container">
+			<h1>Example</h1>
+			<p>You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min!</p>
+			<h1>Doing things!</h1>
+			<p>Enter how many dollars you want! <span class="addon">$</span><input type="text" class="smooth"> You can view the source of this page and copy it to get a quick start on a project with Min!</p>
+			<h1>Do we like numbers?</h1>
+			<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
+			<h1>Conclusions ☺ ☻</h1>
+			<i class="ico">We like chess. ♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟</i>
+			<br><i class="ico">We like phones! ☎</i>
+			<br><i class="ico">We like arrows! ⇦ ⇧ ⇨ ⇩</i>
+		</div>
+	</body>
+</html>

examples.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>min - examples</title>
+
+		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
+
+		<!--[if lt IE 9]>
+		<style>
+			html {
+				overflow-x: hidden;
+			}
+		</style>
+		<![endif]-->
+
+		<style type="text/css">
+			/* Min+ plugin*/
+			message {
+				display: block;
+				padding: 2em;
+				background: #def;
+				border-left: 5px solid #44e;
+			}
+
+			.warning {
+				border-color: #e44; 
+				background: #fdd;
+			}
+
+			.great {
+				border-color: #2d2;
+				background: #dfd;
+			}
+
+			/* Fun h1s */
+			h1:not(.exampleh1) {
+				margin: 0.2em 0;
+				border-bottom: 5px solid;
+				margin-bottom: 15px;
+				padding-bottom: 5px;
+			}
+
+			.fourways {
+				color: #666;
+				margin-bottom: 0;
+			}
+			small {
+				color: #6b6;
+				font-size: 0.6em;
+			}
+
+			/* New css */
+			img {
+			 	border: 1px solid;
+				border-radius: 6px;
+				align-self: center;
+				vertical-align: middle;
+				margin-right: 10px;
+			}
+
+			a {
+				color: #5583bb;
+			}
+		</style>
+
+		<!--[if lte IE 6]>
+			<style>
+				.col {
+					margin: 0.5%;
+				}
+				.c12 {
+					margin: 0.5%;
+					margin-left: 0.5%;
+					width: 97%;
+				}
+				.container {
+					width: 90%;
+				}
+			</style>
+		<![endif]-->
+	</head>
+	<body>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="index.html">Min</a>
+				<a href="docs.html">Docs</a>
+				<!--
+					<a href="bootstrapconverter.html">Bootstrap Converter</a>
+					<a href="examples.html">Examples</a>
+				-->
+				<a href="download.html">Download</a>
+				<a class="current" href="#">Examples</a>
+				<a href="https://github.com/owenversteeg/min">Github</a>
+			</div>
+		</nav>
+		<button class="btn btn-sm btn-close">×</button>
+		<div class="container">
+			<h1>Examples</h1>
+			<p>
+				All of these examples are completely free to use, copy, and distribute however you like; they are all MIT licensed.
+				<br><br>
+				<a href="example.html"><img class="exampleimg" src="example-1.jpg">Basic Page w/Nav</a>
+				<br><br>
+				<a href="example2.html"><img class="exampleimg" src="example-2.jpg">Standard Page w/Hero</a>
+				<br><br>
+				<a href="example3.html"><img class="exampleimg" src="example-3.jpg">Page w/More Elements</a>
+			</p>
+		</div>
+
+		<script src="compiledcss.js" type="text/javascript"></script>
+		<script src="download.js" type="text/javascript"></script>
+
+		<script type="text/javascript">
+			function downloadJSAtOnload() {
+				var element = document.createElement("script");
+				element.src = "defer.js";
+				document.body.appendChild(element);
+			}
+			if (window.addEventListener)
+			window.addEventListener("load", downloadJSAtOnload, false);
+			else if (window.attachEvent)
+			window.attachEvent("onload", downloadJSAtOnload);
+			else window.onload = downloadJSAtOnload;
+		</script>
+		<script src="defer.js"></script>
+	</body>
+</html>

hireme.css

@@ -0,0 +1,300 @@
+.pod {
+	font-family: Helvetica, sans-serif;
+	margin: 0;
+}
+
+h1.name {
+	margin: .5em .5em 0 1em;
+}
+
+.pod h1 {
+	font-size: 3.75em;
+	display: inline-block;
+}
+
+.pod {
+	background: #ddd;
+	border-radius: 5px;
+	padding: 1.25em 1.9em;
+	position: relative;
+	margin: 1.88em 3.75em;
+}
+
+.pod h1 {
+	margin: 0;
+}
+
+.pod p {
+	font-size: 1.2em;
+	margin: 0 0 1.1em 0;
+}
+
+@media (max-width: 700px) {
+	.pod {
+		font-size: 12px;
+	}
+}
+
+@media (max-width: 550px) {
+	.pod {
+		font-size: 10px;
+	}
+}
+
+@media (max-width: 420px) {
+	.pod {
+		/*font-size: 8px;*/
+		margin: 0;
+    }
+
+    .notinyfonts {
+    	font-size: 10px;
+    }
+
+    .pod p {
+	font-size: 15px;
+	margin: 0 0 15px 0;
+}
+}
+
+@media (max-width: 350px) {
+	.pod {
+/*\		font-size: 6px;*/
+    }
+}
+
+.examples img {
+	display: inline-block;
+	height: 4.5em;
+	position: relative;
+	margin-left: 1.6em;
+}
+
+.examples {
+	float: right;
+	height: 4.5em;
+	position: relative;
+}
+
+.logo.twitter {
+	background: #55acee
+}
+
+.logo.keybase {
+	background: #fc8558;
+}
+
+.logo.mail {
+	background: #000;
+}
+
+.examples a:first-child img {
+	margin: 0;
+}
+
+/*.pod:hover {
+	color: white;
+	transition: 0.3s all;
+	background: #333;
+}*/
+
+/*
+.pod.code:hover {
+	background: url('min-pretty-ultracropped.png');
+}
+
+.pod.design:hover {
+       background: url('goalcalendar.png');
+}
+
+.pod.photos:hover {
+	background: url('bismuth-cropped-2.jpg');
+	 background: url('shadows-cropped.jpg'); 
+}
+
+.pod.contact:hover {
+	background: url('publickey.png');
+}*/
+
+/*.pod:hover .examples {
+	background: rgba(255,255,255,0.7);
+	box-shadow: 0 0 25px 16px rgba(255,255,255,0.7);
+	transition: 0.3s all;
+}
+*/
+.pod:not(.hire):after {
+	background: #ddd;
+	content: '';
+	display: block;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	position: absolute;
+	z-index: 11;
+	top: 0;
+	left: 0;
+	border-radius: 5px;
+	transition: 0.3s all;
+}
+
+/*
+.pod:hover:after {
+	background: #000;
+	opacity: 0.2;
+}*/
+
+.pod > * {
+	position: relative;
+	z-index: 12;
+}
+
+.right {
+	float: right;
+	clear: both;
+}
+
+/*.pod:hover * {
+	color: white;
+}*/
+
+.pod input, .pod h3, .pod .duration, .pod label {
+	font-size: 1.2em;
+}
+
+.pod input[type=number], .pod textarea, .pod input[type=text], .pod input[type=email], .pod input[type=submit] {
+	border: 1px solid;
+	border-radius: 4px;
+}
+
+.pod input[type=email]:focus, .pod input[type=submit]:active, .pod input[type=submit]:focus {
+	border-color: #5ab;
+}
+
+.pod input[type=number] {
+	width: 3em;
+	text-align: center;
+}
+
+.pod input[type=number]::-webkit-inner-spin-button, .pod input[type=number]::-webkit-outer-spin-button {
+	opacity: 1;
+}
+
+.pod h3 {
+	display: inline-block;
+}
+
+.duration {
+	display: block;
+	margin: 10px 0;
+}
+
+.pod > label {
+	display: block;
+	margin: 15px 0;
+}
+
+form {
+	position: relative;
+	z-index: 100 !important;
+	width: 218px;
+}
+
+form input[type=submit] {
+	width: 100%;
+	font-weight: bold;
+}
+
+textarea {
+	margin-top: -2px;
+	width: 100%;
+	box-sizing: border-box;
+	height: 118px;
+	position: relative;
+	z-index: 100 !important;
+	display: block;
+	position: relative;
+}
+
+#email {
+	display: block;
+	position: relative;
+	/*margin-top: 10px;*/
+	width: 100%;
+	box-sizing: border-box;
+}
+
+#email::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+    color:    #000;
+}
+#email:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+   color:    #000;
+   opacity:  1;
+}
+#email::-moz-placeholder { /* Mozilla Firefox 19+ */
+   color:    #000;
+   opacity:  1;
+}
+#email:-ms-input-placeholder { /* Internet Explorer 10-11 */
+   color:    #000;
+}
+#email:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
+  color:    #000;
+}
+
+.hire:hover #email::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+    /*color:    #fff;*/
+}
+.hire:hover #email:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+   /*color:    #fff;*/
+   /*opacity:  1;*/
+}
+.hire:hover #email::-moz-placeholder { /* Mozilla Firefox 19+ */
+   /*color:    #fff;*/
+   /*opacity:  1;*/
+}
+.hire:hover #email:-ms-input-placeholder { /* Internet Explorer 10-11 */
+   /*color:    #fff;*/
+}
+.hire:hover #email:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
+  /*color:    #fff;*/
+}
+
+/*#email, textarea {
+	display: none;
+}*/
+
+.timepicker * {
+	margin: 0;
+}
+
+.hire h1 {
+	margin-bottom: 10px;
+}
+
+@media (max-width: 600px) {
+	form {
+		width: 160px;
+	}
+
+	.timepicker h3 {
+		margin-left: 2px;
+	}
+}
+
+.pod {
+	overflow: auto;
+}
+
+.timepicker div {
+	display: inline-block;
+	margin-bottom: 8px;
+}
+
+.hire label:first-of-type {
+	margin-top: 7px;
+}
+
+.pod form {
+	margin-left: 5px;
+}
+

hireme.js

@@ -0,0 +1,43 @@
+var messageModified = false;
+
+function calculateEstimate() {
+	var time = +hourinput.value*60 + +minuteinput.value;
+	rate = 3.5
+
+	var total = time*rate;
+
+	if (nonprofit.checked) total *= 0.7
+	if (min.checked) total *= 0.5
+	if (fullstack.checked) total *= 1.15
+	if (hackhands.checked) total *= 1.2
+
+	totalestimate.innerHTML = '$' + Math.round(total)
+
+	var timeText = ''
+
+	if (+hourinput.value !== 0) timeText = hourinput.value + ' hours' + timeText
+	if (+minuteinput.value !== 0 && +hourinput.value !== 0) timeText += ' and '
+	if (+minuteinput.value !== 0) timeText += minuteinput.value + ' minutes'
+
+	if (+hourinput.value === 1) timeText = timeText.replace(/hours/g, 'hour')
+	if (+minuteinput.value === 1) timeText = timeText.replace(/minutes/g, 'minute')
+
+	if (time === 0) timeText = 'no time at all'
+
+	if (!messageModified) {
+		if (time >= 0) message.value = "Hi Owen,\n\nI'd like to hire you for " + timeText + ' to work on ______.'
+		else message.value = "Hi Owen,\n\nI'd like you to pay me to work on something, entirely disregarding the purpose of this form."
+
+		message.value += "\n\nCheers, _____"
+	}
+
+	if(window.mixpanel) mixpanel.track('Estimate', {'Total': total, 'Time': time, 'Min': min.checked, 'Nonprofit': nonprofit.checked, 'Fullstack': fullstack.checked, 'Hackhands': hackhands.checked, 'Modified': messageModified})
+}
+
+calculateEstimate()
+
+var inputs = document.querySelectorAll('.pod input');
+
+for (var i=0; i<inputs.length; i++) {
+	inputs[i].onchange = inputs[i].keyup = inputs[i].mouseup = inputs[i].oninput = calculateEstimate
+}

index.html

@@ -1,44 +1,489 @@
-<!DOCTYPE html><!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]--><head>
-    <script type="text/javascript">
-
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', 'UA-41177412-1']);
-      _gaq.push(['_setDomainName', 'minfwk.com']);
-      _gaq.push(['_setAllowLinker', true]);
-      _gaq.push(['_trackPageview']);
-
-      (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-      })();
-    </script>
-    <!--[if lt IE 9]> 
- <script> document.createElement("column"); document.createElement("message"); </script>
- <![endif]-->
-        <style type="text/css">
-      .dark {
-        background-color: rgb(172, 172, 172);
-      }
-      .light {
-        background-color: rgb(223, 223, 223);
-      }
-    </style><meta charset="UTF-8"><title>min</title>
-    <link href="entireframework.min.css" rel="stylesheet" type="text/css" />
-    </head><body><h1 class="title">min</h1><h3>995 byte CSS framework &middot; supports ie5.5+ &middot; <a href="https://github.com/owenversteeg/min"><u>on github</u></a></h3><hr class="mediumwidth"><div class="buttons"><a href="http://github.com/owenversteeg/min"><button class="smooth btn-a">btn-a</button></a><a href="http://minfwk.com"><button class="smooth btn-b">btn-b</button></a><a href="http://minframework.com"><button class="smooth btn-c">btn-c</button></a><br><br><a href="http://minframework.com"><button class="smooth btn-b btn-small">btn-small</button></a></div><hr class="mediumwidth"><h1 class="title">h1 title</h1><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><hr class="mediumwidth"><input type="text" class="smooth" placeholder="input type=&quot;text&quot;"><br><br><textarea rows="3" class="smooth" placeholder="textarea"></textarea><br><br><span class="addon-front">$</span><input type="text" class="smooth" placeholder="span class=&quot;addon-front&quot;"><hr class="mediumwidth"><div class="mediumwidth"><div class="navbar"><a class="pagename" href="#"><!--[if lt IE 6]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->Min Framework</a> <a class="navbar-link" href="#">One</a> <a class="navbar-link" href="#">Two</a> <a class="navbar-link" href="#">Three</a></div></div><hr class="mediumwidth"><div class="mediumwidth"><table class="table-striped table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table></div><hr class="mediumwidth"><div class="mediumwidth"><message class="warning"><strong>Watch out!</strong> You don't have H9RBS.js installed.</message><br><message class="great"><strong>Great!</strong> You successfully frobjugated the minlingator's snorbdralob.</message><br><message><strong>Hey!</strong> You've got four thousand new grabjalognibs!</message></div><hr class="mediumwidth"><div class="icons"><ico>✉ ✰ ☁ ⌚ ⌘ ☎ ✈ ☑ ☒</ico><br><br><ico>♂ ♀ ⌛ ☀ ☮ ☢ ☠ ☣ ⌨</ico><br><br><ico>ⓧ © § ® ⌂ ℗ ☺ ☻ ☼</ico><br><br><ico>⇦ ⇧ ⇨ ⇩ ∡ ∿ ⊝ ⊘ ⌂</ico><br><br><ico>♠ ♣ ♥ ♦ ♪ ♫ ♭ ♮ ♯</ico></div><hr class="mediumwidth"><div class="mediumwidth"><div class="row"><column class="dark c10">10</column></div><div class="row"><column class="dark c9">9</column><column class="light c1">1</column></div><div class="row"><column class="dark c8">8</column><column class="light c2">2</column></div><div class="row"><column class="dark c7">7</column><column class="light c3">3</column></div><div class="row"><column class="dark c6">6</column><column class="light c4">4</column></div><div class="row"><column class="dark c5">5</column><column class="light c5">5</column></div><div class="row"><column class="dark c4">4</column><column class="light c6">6</column></div><div class="row"><column class="dark c3">3</column><column class="light c7">7</column></div><div class="row"><column class="dark c2">2</column><column class="light c8">8</column></div><div class="row"><column class="dark c1">1</column><column class="light c9">9</column></div><div class="row"><column class="light c10">10</column></div></div><hr class="mediumwidth"><a href="download.html"><button class="smooth btn-a" style="margin: 0 0 .2em 0;">Download</button></a><hr class="mediumwidth">
-    <!--analytics-->
-    
-    <h2><a href="bootstrapconverter.html">bootstrap to min converter</a></h2>
-    
-    <h2>websites built using min:</h2><br><a href="http://goalcalendar.com">GoalCalendar</a> &middot; <a href="http://openleap.org">OpenLeap</a><br><br>
-    to encourage further development, you can tip me with <a href="https://www.gittip.com/OwenVersteeg/">gittip</a>, <a href="https://blockchain.info/address/1Na9Nuk8WNm59JjcFG1Nvgsg29GHJyT8pV">bitcoin</a>, or <a href="http://dogechain.info/address/DQowenvAUoF5rQrhq8s53Cesg9Y3nU857G">dogecoin</a>. thanks!<br><br>
-
-    <!-- start Mixpanel -->
-    <script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
-      typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);
-      b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
-      mixpanel.init("048a77a4ae0938d041e6996dc178e173");
-      mixpanel.track('Page load', {'page name' : document.title, 'url' : window.location.pathname});
-    </script><!-- end Mixpanel -->
-    </body>
-</html>
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="google-site-verification" content="6K0jyXHnCKUqFBgxR_CiAo7rvsfLNCXwHPt3zetR_wk" />
+		<script> 
+			document.createElement("nav"); document.createElement("button");
+		</script>
+
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+
+		<title>min</title>
+
+		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
+		<link href="hireme.css" rel="stylesheet" type="text/css" />
+		
+		<!--[if lt IE 9]>
+		<style>
+			html {
+				overflow-x: hidden;
+			}
+		</style>
+		<![endif]-->
+
+		<!--[if lte IE 6]>
+			<style>
+				.col {
+					margin: 0.5%;
+				}
+				.c12 {
+					margin: 0.5%;
+					margin-left: 0.5%;
+					width: 97%;
+				}
+				.container {
+					width: 90%;
+				}
+			</style>
+		<![endif]-->
+		
+		<!--[if IE 5]>
+			<style>
+				.container {
+					width: 100%;
+				}
+	
+				.btn-close {
+					display: none;
+				}
+	
+				body {
+					font: 16px Arial;
+				}
+	
+				h3 {
+					font-size: 20px;
+				}
+	
+				.nav {
+					height: 60px;
+				}
+			</style>
+		<![endif]-->
+	</head>
+	<body>
+		<!--[if lt IE 8]>
+			<style>
+				.hero {
+					margin-top: -10px !important;
+				}
+			</style>
+		<![endif]-->
+		<style type="text/css">
+			/* Index only styles */
+			.row {
+				margin-top: 0;
+				overflow: hidden;
+			}
+
+			h1.title {
+				border-bottom: none;
+				font-size: 90px;
+				margin-top: 0;
+				color: white;
+				margin-bottom: 20px;
+			}
+
+			.hero em {
+				color: #91D564;
+				font-style: normal;
+			}
+
+			html {
+				background: #f0f0f0;
+			}
+
+			.hero {
+				text-align: center;
+				background: #333;
+				background-image: url('pattern.png');
+				margin: 0;
+				width: 100%;
+				padding: 50px 50px 10px 50px;
+				-webkit-box-sizing: border-box;
+				-moz-box-sizing: border-box;
+				box-sizing: border-box;
+				color: #ddd;
+			}
+
+			.intro {
+				text-align: center;
+			}
+
+			.intro .c2 {
+				height: 1px;
+			}
+			.intro .c4 {
+				box-sizing: border-box;
+			}
+			.intro .c4:nth-child(2) {
+				padding-right: 15px;
+			}
+			.intro .c4:nth-child(3) {
+				padding-left: 15px;
+			}
+			@media (max-width: 870px) {
+				.intro .c2 {
+					width: 16.66%;
+				}
+				.intro .c4 {
+					width: 33.33%;
+				}
+			}
+			@media (max-width: 660px) {
+				.intro .c2 {
+					display: none;
+				}
+				.intro .c4 {
+					width: 50%;
+					padding: 10px;
+				}
+			}
+			.intro .c4 p {
+				line-height: 1.4;
+			}
+			.btn.em {
+				background: #91D564;
+			}
+			.btn.em:hover {
+				background: #81c554;
+			}
+			.btn.em:active, .btn.em:focus {
+				background: #71c544;
+			}
+
+			/* Otherwise it spills over on iOS */
+			/*.download-btn {
+				font-size: 1.3em;
+				padding: 8px 19px 9px;
+				line-height: 2em;
+			}*/
+
+			.btn {
+				margin: 7px 9px 7px 0;
+			}
+
+			.hireme {
+				width: 50%;
+				margin: auto;
+			}
+
+			@media (max-width: 700px) {
+				.hireme {
+					width: 80%;
+				}
+			}
+
+			.hireme h1 {
+				margin: 30px 0 0 0;
+			}
+
+			.i {  
+				color: #91D564;
+				position: relative;
+			}
+			.i:before {
+				content: "ı";
+				position: absolute; 
+				color: white;
+			}
+
+			.money input, select {
+				color: white;
+				width: 7em;
+			}
+
+			.money input {
+				text-align: center;
+			}
+
+			.money input, .money label, .money select {
+				font-size: 20px;
+			}
+
+			.money input.short {
+				width: 2em;
+			}
+
+			.money select {
+				width: 10.4em;
+				margin-right: 4px;
+			}
+
+			.c4 {
+				padding: 10px;
+				box-sizing: border-box;
+			}
+
+			option {
+				color: black;
+			}
+
+			h3 {
+				font-size: 27px;
+				margin: 0 0 20px 0;
+			}
+
+			.hero input:focus, .hero select:focus {
+				border-color: #91D564;
+			}
+
+			.mobileonly {
+				display: none;
+			}
+
+			.hero > *:not(.timeismoney):not(.maintext) br {
+				display: none;
+			}
+
+			.timeholder {
+					box-shadow: -3px 0 0 0;
+			}
+
+			@media (max-width: 870px) {
+.timeismoney h3.fancy {
+				line-height: 0.5;
+			}
+
+				.timeholder {
+					box-shadow: 0 0 0 0;
+				}
+
+				.btn {
+					padding: 20px 45px 24px;
+				}
+
+				.hero {
+					padding: 14px;
+				}
+
+				.hero .row .col.c4 {
+					width: 100%;
+					/*width: 33.33%;*/
+					padding: 0;
+					font-size: 15px;
+					line-height: 20px;
+				}
+
+				.hero h3 {
+					margin: 10px 0 10px 0;
+				}
+
+				.hero .c4:first-of-type h3 {
+					margin-top: 0;
+				}
+
+				.unnecessary {
+					display: none;
+				}
+
+				.mobileonly {
+					display: initial;
+				}
+
+				h4.mobileonly {
+					margin-top: 3px;
+					display: block;
+				}
+
+				h1.title {
+					margin-bottom: 0;
+				}
+
+				/* Fancy! https://css-tricks.com/line-on-sides-headers/ */
+				.fancy {
+				  text-align: center;
+				  display: inline-block;
+				  position: relative;
+				}
+				.fancy:before,
+				.fancy:after {
+				  content: "";
+				  position: absolute;
+				  height: 5px;
+				  border-bottom: 3px solid white;
+				  /*border-top: 1px solid white;*/
+				  top: 4px;
+				  width: 600px;
+				}
+				.fancy:before {
+				  right: 100%;
+				  margin-right: 8px;
+				}
+				.fancy:after {
+				  left: 100%;
+				  margin-left: 8px;
+				}
+
+				.hero br {
+					display: block;
+				}
+
+				/*@media (min-height: 600px) {*/
+					.hero h3 {
+						margin: 20px 0 20px 0
+					}
+				/*}*/
+
+				#lt {
+					margin: 0;
+				}
+			}
+
+			.timeismoney h3:not(#lt) {
+				font-size: 38px;
+			}
+
+			.timeholder {
+				padding: 0 15px;
+				box-sizing: border-box;
+			}
+
+			/* I like big btns and i cannot lie */
+			.bigbtns .btn {
+				width: 140px;
+			}
+
+			.sitebutton {
+				border: 1px solid;
+				padding: 9.5px;
+				border-radius: 4px;
+				color: black;
+				font-size: 1.2em;
+				text-align: center;
+				width: 100%;
+				display: inline-block;
+				font-weight: bold;
+				box-sizing: border-box;
+				text-decoration: none;
+			}
+		</style>
+		<!--<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="index.html">Min</a>
+				<a href="docs.html">Docs</a>
+				<a href="examples.html">Examples</a>
+				<a href="download.html">Download</a>
+				<a href="https://github.com/owenversteeg/min">Github</a>
+			</div>
+		</nav>
+		<button class="btn btn-sm btn-close">×</button>-->
+		<div class="hero">
+			<h1 class="title">M<span class="i">i</span>n</h1>
+			<!--<h3>The <em>995 byte</em> CSS framework that supports <em>IE5.5+</em></h3>-->
+			<h4 class="mobileonly">The world's <em>fastest</em> CSS framework</h4>
+			<div class="row maintext">
+				<div class="col c4"><h3 class="fancy">Milliseconds matter<span class="unnecessary">.</span></h3><br>Amazon found that each 100ms delay cost them over a <em>billion</em> dollars in sales. Google found that 1/3 of this hit remained after decreasing loading times. <span class="unnecessary">Your CSS framework is costing you money. </span></div>
+				
+				<div class="col c4"><h3 class="fancy">Tried and tested<span class="unnecessary">.</span></h3><br>Min is used by over <em>65,000</em> people in 195<span class="unnecessary">+</span> countries, from North Korea to <span class="unnecessary"> South Sudan to Mongolia to</span> Somalia. Think your software is critical? Try a webapp keeping you alive in a warzone.</div>
+				
+				<div class="col c4"><h3 class="fancy">Works everywhere<span class="unnecessary">.</span></h3><br>That's no exaggeration. Min works on your decade-old Opera 9 install, your grandpa's <em>IE5.5</em>, and your kid's Nintendo DS. Wikipedia gets 500MM hits from IE6 a month... Bootstrap 4 doesn't even support IE8.</div>
+			</div>
+			<div class="row timeismoney">
+				<div class="col c6 moneyholder">
+					<div class="money">
+						<h3 class="fancy">Save money<span class="unnecessary">.</span></h3><br>
+						<label for="revenue">Revenue $ </label> <input value="500,000" type="text" onchange="updateLosses()" onkeyup="updateLosses()" class="smooth" id="revenue" name="revenue"> <label class="unnecessary">per year</label><label class="mobileonly">/yr</label>
+						<br><br><label for="timehit">Current framework load time: </label><select onchange="updateLosses()" class="smooth" name="timehit" id="timehit">
+							<option value="0">None</option>
+							<option value=".01">100ms</option> 
+							<option value=".02">200ms (PureCSS)</option>
+							<option value=".03">300ms</option>
+							<option value=".04" selected>400ms (Bootstrap)</option>
+							<option value=".05">500ms</option>
+							<option value=".06">600ms</option>
+							<option value=".07">700ms</option>
+						</select>
+						<br><br>
+						<label>Switching to Min saves you</label><h3 id="lt"><span id="lossText_e">$20,000</span> per year.</h3>
+						<!--<label for="devtime">Developer time </label> <input value="9" type="text" class="short" id="revenue" name="revenue"> hours <label for="rates">at $</label> <input class="short" value="200" type="text" id="rates" name="rates"> /hr-->
+						<script>
+							function numberWithCommas(x) {
+								return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+							}
+
+							function updateLosses() {
+								var totalRev = parseInt(revenue.value.replace(/\,/g,''))
+								var losses = Math.round(totalRev * timehit.value)
+								var lossText = '$' + numberWithCommas(losses)
+								lossText_e.innerHTML = lossText
+							}
+						</script>
+					</div>
+				</div>
+				<div class="col c6 timeholder">
+					<h3 class="fancy">Save time<span class="unnecessary">.</span></h3><br>
+					Min provides easy copy-and-paste examples for every element. You can get started with any of the provided templates, or you can read the complete and concise documentation with visual examples for every part of Min.
+					<br><br>Min also styles your page using hundreds of times fewer properties vs. other CSS frameworks. This makes it easy to customize your page to look novel, avoiding the "bootstrapization" trend that makes your page look exactly like the rest.
+				</div>
+			</div>
+			
+			<div class="row intro bigbtns">
+				<div class="col c2">&nbsp;</div>
+				<div class="col c4">
+					<a href="docs.html" class="btn em smooth">Docs</a>
+				</div>
+				<div class="col c4">
+					<a href="examples.html" class="btn smooth">Examples</a>
+				</div>
+				<div class="col c2">&nbsp;</div>
+			</div>
+		</div>
+
+		<div class="pod hire">
+			<h1>Hire Min's Creator</h1>
+			<!--<h1 id="totalestimate" class="right">$35</h1>-->
+
+			<p>As the creator of Min, I know CSS. My software is used by over 100,000 people in 200+ countries, and I have countless years of experience with front-end work. Nobody knows Min better than I do.</p>
+<!--
+			<form class="right" action="//formspree.io/me@owenversteeg.com" method="POST">
+				<input class="right notinyfonts" id="email" type="email" required placeholder="Email" name="_replyto">
+				<textarea id="message" onkeyup="if (messageModified === false) mixpanel.track('Message modified'); messageModified = true;" name="message" class="right"></textarea>
+				<input class="right notinyfonts" type="submit" value="Send message">
+			</form>
+
+			<div class="timepicker">
+				<div><input type="number" value=0 class="notinyfonts" min=0 id="hourinput"> <h3 id="hourh3" class="notinyfonts">hours</h3> </div>&nbsp;<div><input type="number" class="notinyfonts" value=20 min=0 max=59 id="minuteinput" onfocus="this.value = this.value"> <h3 id="minute3" class="notinyfonts">minutes</h3></div>
+			</div>
+
+			
+
+			<label class="notinyfonts"><input type="checkbox" id="nonprofit"> Nonprofit (-30%)</label>
+			<label class="notinyfonts"><input type="checkbox" id="min" checked> Involves Min (-50%, June only)</label>
+			<label class="notinyfonts"><input type="checkbox" id="fullstack"> Full-stack (+15%)</label>
+			<label class="notinyfonts"><input type="checkbox" id="hackhands"> Hire me on HackHands (+20%, I have all 5-star reviews)</label>
+-->
+			<a class="sitebutton notinyfonts" href="http://owenversteeg.com">Go to OwenVersteeg.com for more about me</a>
+		</div>
+		<script src="hireme.js"></script>
+
+		<div class="container">
+			<script type="text/javascript">
+				function downloadJSAtOnload() {
+					var element = document.createElement("script");
+					element.src = "defer.js";
+					document.body.appendChild(element);
+				}
+				if (window.addEventListener)
+				window.addEventListener("load", downloadJSAtOnload, false);
+				else if (window.attachEvent)
+				window.attachEvent("onload", downloadJSAtOnload);
+				else window.onload = downloadJSAtOnload;
+			</script>
+		</div>
+
+
+		
+		<!-- Quantcast Tag -->
+		<noscript>
+			<div style="display:none;">
+				<img src="//pixel.quantserve.com/pixel/p-4UQY7SYFeUHE_.gif" border="0" height="1" width="1" alt="Quantcast"/>
+			</div>
+		</noscript>
+		<!-- Place this tag in your head or just before your close body tag. -->
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+		<!-- End Quantcast tag -->
+	</body>
+</html>

less/buttons.less

@@ -1,46 +1,54 @@
-i, button {
-	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
+.btn {
+	background: #999;
+	border-radius: 6px; /* rounded corners */
+	border: 0;
+	color: #fff;
+	cursor: pointer;
+	display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
+	margin: 2px 0;
+	padding: 12px 30px 14px;
 }
 
-button {
-	background: #aaa;
-	box-shadow: 3px 3px #000; /* unshortenable */
-	color: #fff;
-	font-size: 2.5em;
-	padding: 15px 40px 16px;
-	text-decoration: none;
-	margin: .3em .7em;
-	cursor: pointer;
-	border: none;
-	&.btn-a {
-		background: #0ae;
-		&:hover {
-			background: #09d; /* darken(@btn-a-bg, 5%) */
-		}
-		&:active {
-			background: #08b; /* darken(@btn-a-bg, 10%) */
-		}
+.btn:hover {
+	background: #888;
+}
+
+.btn:active,.btn:focus {
+	background: #777;
+}
+
+.btn-a {
+	background: #0ae;
+	&:hover {
+		background: #09d; /* darken(@btn-a-bg, 5%) */
 	}
-	&.btn-b {
-		background: #3c5;
-		&:hover {
-			background: #2b4; /* darken(@btn-b-bg, 5%) */
-		}
-		&:active {
-			background: #2a4; /* darken(@btn-b-bg, 10%) */
-		}
-	}
-	&.btn-c {
-		background: #d33;
-		&:hover {
-			background: #c22; /* darken(@btn-c-bg, 5%) */
-		}
-		&:active {
-			background: #b22; /* darken(@btn-c-bg, 10%) */
-		}
-	}
-	&.btn-small {
-		padding: 7px 19px;
-		font-size: 16px;
+
+	&:active, &:focus {
+		background: #08b; /* darken(@btn-a-bg, 10%) */
 	}
 }
+
+.btn-b {
+	background: #3c5;
+	&:hover {
+		background: #2b4; /* darken(@btn-b-bg, 5%) */
+	}
+	&:active, &:focus {
+		background: #2a4; /* darken(@btn-b-bg, 10%) */
+	}
+}
+
+.btn-c {
+	background: #d33;
+	&:hover {
+		background: #c22; /* darken(@btn-c-bg, 5%) */
+	}
+	&:active, &:focus {
+		background: #b22; /* darken(@btn-c-bg, 10%) */
+	}
+}
+
+.btn-sm {
+	border-radius: 4px; /* rounded corners */
+	padding: 10px 14px 11px;
+}

less/forms.less

@@ -0,0 +1,28 @@
+label > * {
+  display:inline;
+}
+
+form > * {
+  display: block;
+  margin-bottom: 10px;
+}
+
+textarea, input, select {
+	border: 1px solid #ccc;
+	padding: 8px;
+}
+
+textarea:focus, input:focus, select:focus {
+	border-color: #5ab;
+}
+
+textarea, input[type=text] {
+	-webkit-appearance: none; /* make iOS inputs pretty */
+	width: 13em;
+	outline: 0;
+}
+
+.addon {
+	box-shadow: 0 0 0 1px #ccc;
+	padding: 8px 12px;
+}

less/general.less

@@ -1,50 +1,36 @@
-body {
-	font-family: sans-serif;
-	text-align: center;
+body, textarea, input, select {
+	background: 0;
+	border-radius: 0;
+	font: 16px sans-serif;
 	margin: 0;
-	font-size: 16px;
+}
+
+.addon, .btn-sm, .nav, textarea, input, select {
+  outline: 0;
+  font-size: 14px;
 }
 
 .smooth {
 	transition: all .2s;
 }
 
-hr {
-	margin: 2.5em auto;
-	&.mediumwidth {
-		margin: 2.5em auto;
+.btn, .nav a {
+	text-decoration: none;
+}
+
+.container {
+	margin: 0 20px;
+	width: auto;
+}
+
+@media(min-width:1310px) {
+	.container {
+		margin: auto;
+		width: 1270px;
 	}
 }
 
-.mediumwidth {
-	font-size: 16px;
-	width: 40%;
-	margin-left: 30%;
-	margin-top: .3em;
-	margin-bottom: .3em;
+.btn, h2 {
+  font-size: 2em;
 }
 
-@media (max-width:870px) {
-	.mediumwidth {
-		width: 70%;
-		margin-left: 15%;
-	}
-	.row [class*='c']{
-		width: 100%;
-		display: block;
-		margin: 1% auto;
-	}
-	.row:last-child column {
-		margin-bottom: 2.5em;
-	}
-}
-
-@media (max-width:520px) {
-	.mediumwidth {
-		width: 100%;
-		margin-left: 0;
-	}
-	hr.mediumwidth {
-		width: auto;
-	}
-}

less/grid.less

@@ -1,44 +1,65 @@
 /* Grid system responsive code is in general.less */
 
 .row {
-	line-height: 2em;
-	margin-top: 2%;
-	height: 2em;
+	margin: 1% 0;
+	overflow: auto; /* required - without this, the page layout is screwed up */
 }
-column {
+
+.col {
 	float: left;
-	margin: auto 1%;
 }
-.ie column {
-	margin: auto .7%;
+
+.table, .c12 {
+	width: 100%;
 }
+
+.c11 {
+	width: 91.66%;
+}
+
 .c10 {
-	width: 98%;
+	width: 83.33%;
 }
+
 .c9 {
-	width: 88%;
+	width: 75%;
 }
+
 .c8 {
-	width: 78%;
+	width: 66.66%;
 }
+
 .c7 {
-	width: 68%;
+	width: 58.33%;
 }
+
 .c6 {
-	width: 58%;
+	width: 50%;
 }
+
 .c5 {
-	width: 48%
+	width: 41.66%
 }
+
 .c4 {
-	width: 38%;
+	width: 33.33%;
 }
+
 .c3 {
-	width: 28%;
+	width: 25%;
 }
+
 .c2 {
-	width: 18%;
+	width: 16.66%;
 }
+
 .c1 {
-	width: 8%;
+	width: 8.33%;
+}
+
+/* For smaller screens, change all columns to 100% width */
+@media (max-width:870px) {
+	.row .col {
+		width: 100%;
+	}
 }

less/headings.less

@@ -1,11 +1,5 @@
-h1 {
-	font-size: 4em;
-	margin: 0;
-	&.title {
-		font-size: 7em;
-	}
-}
+/* Make the default heading style larger */
 
-h2 {
-	font-size: 2em;
+h1 {
+	font-size: 3em;
 }

less/icons.less

@@ -1,3 +1,8 @@
-ico {
-	font-size: 2.04em;
+.ico {
+	font: 33px Arial Unicode MS, Lucida Sans Unicode;
+	/*
+		This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu.
+
+		We don't use ems because 33px is a great size cross-browser and OS for nice icons
+	*/
 }

less/iehacks.less

@@ -1,8 +1 @@
-.ie .mediumwidth {
-	width: 70%;
-	margin-left: 0;
-	hr {
-		margin: 100px auto; 
-		padding-left: 200px;
-	}
-}
+/* There aren't any IE hacks needed as of now */

less/inputs.less

@@ -1,23 +0,0 @@
-textarea, input {
-	outline: none;
-	padding: 6px;
-	font-family: sans-serif;
-	&:focus {
-		border: 1px solid #5ab;
-	}
-}
-
-textarea, input[type='text'] {
-	width: 13em;
-}
-
-.addon-front {
-	padding: 6px 11px 6px 10px;
-	margin-right: -2px;
-	border-right: 0;
-}
-
-textarea, input, .addon-front {
-	border: 1px solid #ccc;
-	font-size: .8em;
-}

less/messages.less

@@ -1,11 +1,5 @@
-message {
-	display: block;
-	padding: 2em 0;
-	background: #ACE;
-	&.warning {
-		background: #D99;
-	}
-	&.great {
-		background: #9D9;
-	}
+.msg {
+	background: #def;
+	border-left: 5px solid #59d;
+	padding: 1.5em;
 }

less/navbar.less

@@ -1,41 +1,71 @@
-.navbar {
-	width: 100%;
-	background: black;
-	color: white;
-	text-align: left;
-	height: 1.5em;
-	padding: 1em 0 .6em;
+.nav, .nav .current, .nav a:hover {
+	background: #000;
+	color: #fff;
 }
 
-.navbar a {
-	text-decoration: none;
+.nav {
+	height: 24px;
+	padding: 11px 0 15px;
+	/* TODO: migrate to ems (currently we don't use them because of iOS compatibility problems (has to do with unicode icon for close)) */
+	/* Uncomment for animations
+	max-height: 1.5em;
+	*/
 }
 
-.pagename {
-	color: white;
-	padding: 0 1em 0 2em;
-	font-weight: bold;
-}
-
-.navbar-link {
-	padding: .5em;
+.nav a {
 	color: #aaa;
-	&:hover {
-		color: white;
-	}
+	padding-right: 1em;
+	position: relative;
+	top: -1px;
 }
 
-.navbar input, .navbar button {
-	margin-top: -20px; 
-	/* This ensures that any buttons and inputs in the navbar will not mess up its vertical alignment */
+.nav .pagename {
+	font-size: 22px;
+	top: 1px;
+}
+
+.btn.btn-close {
+	background: #000;
+	float: right;
+	font-size: 25px;
+	margin: -54px 7px;
+	display: none;
 }
 
 @media (max-width:500px) {
-	.navbar a {
-		text-align: center;
+	.btn.btn-close {
 		display: block;
 	}
-	.navbar {
-		height: 7.5em;
+	.nav {
+		/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
+		overflow: hidden;
+	}
+	.pagename {
+		margin-top: -11px;
+	}
+	.nav:active,.nav:focus {
+		height: auto;
+		/* Necesary for animations
+		max-height: 500px;
+		height: 100%;
+		*/
+	}
+	.nav div:before {
+		background: #000;
+		border-bottom: 10px double;
+		border-top: 3px solid;
+		content: '';
+		float: right;
+		height: 4px;
+		position: relative;
+		right: 3px;
+		top: 14px;
+		width: 20px;
+	}
+	.nav a {
+		display: block;
+		padding: .5em 0;
+		width: 50%;
 	}
 }
+

less/tables.less

@@ -1,14 +1,9 @@
-table {
-	width: 100%;
-	border-spacing: 0;
-}
-
 .table th, .table td {
 	padding: .5em;
-	line-height: 1.4em;
 	text-align: left;
 }
 
-tbody tr:nth-child(2n-1) {
-	background: #CCC;
+.table tbody>:nth-child(2n-1) {
+	/* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
+	background: #ddd; /* Shade every other table row */
 }

mingziphotlink.php

@@ -1,67 +0,0 @@
-<?php
-
-//This file can be used on CDNs so that users can pick and choose their downloads
-//e.x. http://8b51d1abd8.test-url.ws/mingziphotlink.php?general=1&icons=1
-
-header("Access-Control-Allow-Origin: *");
-
-$totalcss="";
-
-if ($_GET['general']) {
-$totalcss .= "body{font-family:sans-serif;text-align:center;margin:0;font-size:16px}.smooth{transition:all .2s}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media(max-width:870px){.mediumwidth{width:70%;margin-left:15%}.row [class*='c']{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}@media(max-width:520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}";
-}
-
-if ($_GET['headings']) {
-$totalcss .= "h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}";
-}
-
-if ($_GET['buttons']) {
-$totalcss .= "i,button{font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}button{background:#aaa;box-shadow:3px 3px #000;color:#fff;font-size:2.5em;padding:15px 40px 16px;text-decoration:none;margin:.3em .7em;cursor:pointer;border:0}button.btn-a{background:#0ae}button.btn-a:hover{background:#09d}button.btn-a:active{background:#08b}button.btn-b{background:#3c5}button.btn-b:hover{background:#2b4}button.btn-b:active{background:#2a4}button.btn-c{background:#d33}button.btn-c:hover{background:#c22}button.btn-c:active{background:#b22}button.btn-small{padding:7px 19px;font-size:16px}";
-}
-
-if ($_GET['inputs']) {
-$totalcss .= "textarea,input{outline:0;padding:6px;font-family:sans-serif}textarea:focus,input:focus{border:1px solid #5ab}textarea,input[type='text']{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border-right:0}textarea,input,.addon-front{border:1px solid #ccc;font-size:.8em}";
-}
-
-if ($_GET['navbar']) {
-$totalcss .= ".navbar{width:100%;background:black;color:white;text-align:left;height:1.5em;padding:1em 0 .6em}.navbar a{text-decoration:none}.pagename{color:white;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:white}.navbar input,.navbar button{margin-top:-20px}@media(max-width:500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}";
-}
-
-if ($_GET['tables']) {
-$totalcss .= "table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left}tbody tr:nth-child(2n-1){background:#CCC}";
-}
-
-if ($_GET['messages']) {
-$totalcss .= "message{display:block;padding:2em 0;background:#ACE}message.warning{background:#D99}message.great{background:#9D9}";
-}
-
-if ($_GET['icons']) {
-$totalcss .= "ico{font-size:2.04em}";
-}
-
-if ($_GET['grid']) {
-$totalcss .= ".row{line-height:2em;margin-top:2%;height:2em}column{float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}";
-}
-
-if ($_GET['iehacks']) {
-$totalcss .= ".ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}";
-}
-
-// disable ZLIB ouput compression
-ini_set('zlib.output_compression','Off');
-
-// compress data
-$gzipoutput = gzencode($totalcss,intval($_GET['loc']));
-
-header("Access-Control-Allow-Origin: *");
-
-header('Content-Encoding: gzip');
-
-header('Content-Length: '.strlen($gzipoutput));
-header('Cache-Control: no-cache, no-store, max-age=0, must-revalidate');
-header('Pragma: no-cache');
-
-// output data
-echo $gzipoutput;
-
-?>

oldindex.html

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="google-site-verification" content="6K0jyXHnCKUqFBgxR_CiAo7rvsfLNCXwHPt3zetR_wk" />
+		<script> 
+			document.createElement("nav"); document.createElement("button");
+		</script>
+
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>min</title>
+
+		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
+		
+		<!--[if lt IE 9]>
+		<style>
+			html {
+				overflow-x: hidden;
+			}
+		</style>
+		<![endif]-->
+		
+		<style type="text/css">
+			/* Min+ plugin*/
+			message {
+				display: block;
+				padding: 2em;
+				background: #def;
+				border-left: 5px solid #44e;
+			}
+
+			.warning {
+				border-color: #e44; 
+				background: #fdd;
+			}
+
+			.great {
+				border-color: #2d2;
+				background: #dfd;
+			}
+		</style>
+
+		<!--[if lte IE 6]>
+			<style>
+				.col {
+					margin: 0.5%;
+				}
+				.c12 {
+					margin: 0.5%;
+					margin-left: 0.5%;
+					width: 97%;
+				}
+				.container {
+					width: 90%;
+				}
+			</style>
+		<![endif]-->
+		
+		<!--[if IE 5]>
+			<style>
+				.container {
+					width: 100%;
+				}
+	
+				.btn-close {
+					display: none;
+				}
+	
+				body {
+					font: 16px Arial;
+				}
+	
+				h3 {
+					font-size: 20px;
+				}
+	
+				.nav {
+					height: 60px;
+				}
+			</style>
+		<![endif]-->
+	</head>
+	<body>
+		<!--[if lt IE 8]>
+			<style>
+				.hero {
+					margin-top: -10px !important;
+				}
+			</style>
+		<![endif]-->
+		<style type="text/css">
+			/* Index only styles */
+			.row {
+				margin-top: 0;
+				overflow: hidden;
+			}
+
+			h1.title {
+				border-bottom: none;
+				font-size: 90px;
+				margin-top: 0;
+				color: white;
+			}
+
+			.hero em {
+				color: #91D564;
+				font-style: normal;
+			}
+
+			html {
+				background: #f0f0f0;
+			}
+
+			.hero {
+				text-align: center;
+				background: #333;
+				background-image: url('congruent_outline.png');
+				margin: 0;
+				width: 100%;
+				padding: 50px;
+				-webkit-box-sizing: border-box;
+				-moz-box-sizing: border-box;
+				box-sizing: border-box;
+				color: #ddd;
+			}
+
+			.intro {
+				text-align: center;
+			}
+
+			.intro .c2 {
+				height: 1px;
+			}
+			.intro .c4 {
+				box-sizing: border-box;
+			}
+			.intro .c4:nth-child(2) {
+				padding-right: 15px;
+			}
+			.intro .c4:nth-child(3) {
+				padding-left: 15px;
+			}
+			@media (max-width: 870px) {
+				.intro .c2 {
+					width: 16.66%;
+				}
+				.intro .c4 {
+					width: 33.33%;
+				}
+			}
+			@media (max-width: 660px) {
+				.intro .c2 {
+					display: none;
+				}
+				.intro .c4 {
+					width: 50%;
+					padding: 10px;
+				}
+			}
+			.intro .c4 p {
+				line-height: 1.4;
+			}
+			.btn.em {
+				background: #91D564;
+			}
+			.btn.em:hover {
+				background: #81c554;
+			}
+			.btn.em:active, .btn.em:focus {
+				background: #71c544;
+			}
+
+			/* Otherwise it spills over on iOS */
+			.download-btn {
+				font-size: 1.3em;
+				padding: 8px 19px 9px;
+				line-height: 2em;
+			}
+
+			.btn {
+				margin: 7px 9px 7px 0;
+			}
+
+			.hireme {
+				width: 50%;
+				margin: auto;
+			}
+
+			@media (max-width: 700px) {
+				.hireme {
+					width: 80%;
+				}
+			}
+
+			.hireme h1 {
+				margin: 30px 0 0 0;
+			}
+		</style>
+		<nav class="nav" tabindex="-1" onclick="this.focus()">
+			<div class="container">
+				<a class="pagename current" href="index.html">Min</a>
+				<a href="docs.html">Docs</a>
+				<!--
+					<a href="bootstrapconverter.html">Bootstrap Converter</a>
+					<a href="examples.html">Examples</a>
+				-->
+				<a href="download.html">Download</a>
+				<a href="https://github.com/owenversteeg/min">Github</a>
+			</div>
+		</nav>
+		<button class="btn btn-sm btn-close">×</button>
+		<div class="hero">
+			<h1 class="title">Min</h1>
+			<h3>The <em>995 byte</em> CSS framework that supports <em>IE5.5+</em></h3>
+		</div>
+		<!--[if IE 5]> <br><br><![endif]-->
+		<div class="row intro">
+			<div class="col c2">&nbsp;</div>
+			<div class="col c4">
+				<h3>Exceptional browser support</h3>
+				<p>Min supports IE5.5+, FF3+, Opera 9+, and Safari 4+, the best browser support of any CSS framework by far. Unfortunately, IE5.5 does not support border-radius and as such does not have rounded button corners. That said, IE5.5 users will be so surprised to see a site load correctly they will overlook this.</p>
+			</div>
+			<div class="col c4">
+				<h3>Ridiculously small</h3>
+				<p>Min is only 995 bytes, so it will never slow down your website unlike bulky frameworks like Bootstrap. Min also does not require Javascript. Pages built with Min can load faster than a blink of an eye. (Average loading times for three Min pages tested were 334ms; a human eye blink is 400ms.)</p>
+			</div>
+			<div class="col c2">&nbsp;</div>
+		</div>
+		<!--[if lt IE 7]> <br><br><br><![endif]-->
+		<div class="row intro">
+			<div class="col c2">&nbsp;</div>
+			<div class="col c4">
+				<h3>Unprescriptive</h3>
+				<p>Min is extremely lightweight and doesn't prescribe a certain design for you, like Bootstrap. It's easy to override the default rules since there are so few of them and they are at low specificity levels. This customizability helps you avoid the Yet Another Bootstrap Site phenomenon.</p>
+			</div>
+			<div class="col c4">
+				<h3>Semantic markup</h3>
+				<p>Min uses the new HTML5 semantic elements liberally, has clear and short class names, and uses &lt;div&gt;s sparingly. Patients that switched from Bootstrap to Min reported up to a ninefold decrease in markup and drastic improvements in most cases of divitis. Ask your CSS-atrician if Min is right for you.</p>
+			</div>
+			<div class="col c2">&nbsp;</div>
+		</div>
+		<!--[if lt IE 7]> <br><br><br><![endif]-->
+		<div class="row intro">
+			<div class="col c2">&nbsp;</div>
+			<div class="col c4">
+				<a href="docs.html" class="btn em smooth">Docs</a>
+			</div>
+			<div class="col c4">
+				<a href="download.html" class="btn smooth download-btn">Download</a>
+			</div>
+			<div class="col c2">&nbsp;</div>
+		</div>
+		<div class="container intro hireme">
+			<h1>Hire Owen</h1>
+			<p>As the creator of Min, the smallest and fastest CSS framework in the world, I know CSS. My software is used by over 100,000 people in 185+ countries, and I have countless years of experience with front-end work. Nobody knows Min better than I do, and for this month only I am offering a <b>50% discount to anyone using Min in their project.</b> Use the link below to get a quote at my website.</p>
+			<a href="http://owenversteeg.com" class="btn smooth download-btn btn-a">Hire Me</a>
+			<br><br>
+		</div>
+		<div class="container">
+			<script type="text/javascript">
+				function downloadJSAtOnload() {
+					var element = document.createElement("script");
+					element.src = "defer.js";
+					document.body.appendChild(element);
+				}
+				if (window.addEventListener)
+				window.addEventListener("load", downloadJSAtOnload, false);
+				else if (window.attachEvent)
+				window.attachEvent("onload", downloadJSAtOnload);
+				else window.onload = downloadJSAtOnload;
+			</script>
+		</div>
+		
+		<!-- Quantcast Tag -->
+		<noscript>
+			<div style="display:none;">
+				<img src="//pixel.quantserve.com/pixel/p-4UQY7SYFeUHE_.gif" border="0" height="1" width="1" alt="Quantcast"/>
+			</div>
+		</noscript>
+		<!-- End Quantcast tag -->
+	</body>
+</html>

sass/README.md

@@ -0,0 +1,35 @@
+min sass
+========
+
+a tiny framework that makes websites pretty
+
+To download Min, go [here](http://mincss.com/download.html).
+
+
+###Tiny
+995 bytes (or smaller) minified and gzipped.
+
+
+###Compatible
+Works with IE5 and onward. Yes, min is even responsive in IE5.
+
+Of course, modern browsers give you pretty transitions.
+
+
+###Sass Specific Instructions
+For those that haven't used Sass before, you'll need to install it:
+
+Install SASS: http://sass-lang.com/install
+
+Then simply navigate to the min folder via the command line, and run
+
+<code>sass --watch sass</code> (or whatever you've renamed the sass folder to)
+
+
+###License
+MIT licensed.
+
+
+###Contributing
+
+See the main min ReadME on how you can contribute to min Sass or Less or Both!

sass/__var-lib.scss

@@ -0,0 +1,31 @@
+//-------------------------------------------------------------------
+// Variable Library
+//
+// The purpose of the variable library is to have a centralized
+// location for various reusable values for the Min Framework.
+//
+// Instead of hunting through the different Sass files to update
+// values, simply change the variable in question to update all
+// instances of that value.
+//
+//-------------------------------------------------------------------
+
+
+// Dark Colors
+$c-black:         #000 !default;
+$c-off-black:     #999 !default;
+$c-darker:        #888 !default;
+$c-dark:          #777 !default;
+
+
+// Medium Colors
+$c-grey-dark:     #aaa !default;
+$c-grey:          #ccc !default;
+$c-grey-light:    #eee !default;
+
+// Light Colors
+$c-white:         #fff !default;
+
+
+// Inputs
+$c-focus:         #5ab !default;

sass/_button.scss

@@ -0,0 +1,87 @@
+//-------------------------------------------------------------------
+// Button Colors
+//-------------------------------------------------------------------
+
+$a--bg:           #0ae;
+$a--hover:        #09d;
+$a--active:       #08b;
+
+$b--bg:           #3c5;
+$b--hover:        #2b4;
+$b--active:       #2a4;
+
+$c--bg:           #d33;
+$c--hover:        #c22;
+$c--active:       #b22;
+
+//-------------------------------------------------------------------
+// Mixin to set btn background for inactive, active & hover states
+//-------------------------------------------------------------------
+
+// set default variables to be base button colors.
+@mixin btn-style ($bg:        $c-off-black,
+                  $bg-hover:  $c-darker,
+                  $bg-active: $c-dark) {
+  background: $bg;
+
+  &:hover {
+    background: $bg-hover;
+  }
+
+  &:active, &:focus {
+    background: $bg-active;
+  }
+}
+
+
+
+@if $import-buttons == true {
+//-------------------------------------------------------------------
+// Button Styles & Classes
+//-------------------------------------------------------------------
+
+// Set Generic <button> and .btn styling.
+// use .btn on any element to give it the styling of a button
+.btn {
+  @extend %txt-large;
+  @extend %no-underline;
+  @include btn-style;
+  border: 0;
+  border-radius: 6px; // rounded corners
+  color: $c-white;
+  cursor: pointer;
+  display: inline-block; // Enables non-inline-block elements like <a>s to be buttons
+  margin: .2em .3em .2em 0;
+  padding: 12px 30px 14px;
+}
+
+
+// Set colors for your buttons, see the button mixin at the top of this
+// file to see how the hex colors are allocated
+.btn-a {
+  @include btn-style($a--bg, $a--hover, $a--active);
+}
+
+.btn-b {
+  @include btn-style($b--bg, $b--hover, $b--active);
+}
+
+.btn-c {
+  @include btn-style($c--bg, $c--hover, $c--active);
+}
+
+
+// Add this class to a <button> or element with a .btn class
+// to create a smaller sized button.
+.btn-sm {
+  @extend %shared-font-size;
+  border-radius: 4px; /* rounded corners */
+  padding: 10px 15px 11px;
+}
+
+
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_forms.scss

@@ -0,0 +1,41 @@
+@if $import-forms == true {
+//-------------------------------------------------------------------
+//  Form Elements
+//-------------------------------------------------------------------
+
+form > * {
+  display: block;
+  margin-bottom: 10px;
+}
+
+label > * {
+  display: inline;
+}
+
+input, textarea {
+  @extend %shared-font-size;
+  border: 1px solid $c-grey;
+  padding: 8px;
+
+  &:focus {
+    border-color: $c-focus;
+  }
+}
+
+
+input[type='text'], textarea {
+  -webkit-appearance: none; // make iOS inputs pretty
+  width: 13em;
+}
+
+
+.addon {
+  @extend %shared-font-size;
+  box-shadow: 0 0 0 1px $c-grey;
+  padding: 8px 12px;
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_general.scss

@@ -0,0 +1,45 @@
+//-------------------------------------------------------------------
+//  General Min Styling
+//-------------------------------------------------------------------
+
+body,
+textarea, input {
+  background: 0;
+  border-radius: 0;
+  font: 16px sans-serif;
+  margin: 0;
+}
+
+* {
+  outline: 0;
+}
+
+// apply a smooth transition effect to an element's state change
+.smooth {
+  transition: all .2s;
+}
+
+.container {
+  margin: 0 20px;
+  width: auto;
+
+  @media(min-width:1310px) {
+    margin: auto;
+    width: 1270px;
+  }
+}
+
+// this extends into both nav a and .btn
+%no-underline {
+  text-decoration: none;
+}
+
+// shared large text size
+%txt-large {
+  font-size: 2em;
+}
+
+// shared smaller text size
+%shared-font-size {
+  font-size: 14px;
+}

sass/_grid.scss

@@ -0,0 +1,55 @@
+@if $import-grid == true {
+//-------------------------------------------------------------------
+//  Grid system responsive code is in _general.scss
+//
+// Since every column has 2% padding (1% on each side) its width is
+// (((its number/12) * 100)-2) percent (truncated, to avoid spillage.)
+// Thus, c12 has width 98%.
+//-------------------------------------------------------------------
+
+%w-100 {
+  width: 100%;
+}
+
+.row {
+  margin: 1% 0;
+  overflow: auto; // needed for proper formed layout
+}
+
+.col {
+  float: left;
+}
+
+.c12 {
+  @extend %w-100;
+}
+
+$grid-list: (
+  c1    8.33%,
+  c2   16.66%,
+  c3   25%,
+  c4   33.33%,
+  c5   41.66%,
+  c6   50%,
+  c7   58.33%,
+  c8   66.66%,
+  c9   75%,
+  c10  83.33%,
+  c11  91.66%
+);
+
+@each $value in $grid-list {
+  .#{nth($value, 1)} {
+    width: nth($value, 2);
+  }
+}
+
+@media (max-width:870px) {
+  .row .col {
+    width: 100%;
+  }
+}
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_headings.scss

@@ -0,0 +1,19 @@
+@if $import-headings == true {
+//-------------------------------------------------------------------
+//  Headings
+//-------------------------------------------------------------------
+
+// Set style for <h1> -- larger than 'normal'
+h1 {
+  font-size: 4em;
+}
+
+// Sets style for <h2>
+h2 {
+  @extend %txt-large;
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_icons.scss

@@ -0,0 +1,19 @@
+@if $import-icons == true {
+//-------------------------------------------------------------------
+//  Icons
+//-------------------------------------------------------------------
+
+.ico {
+  font: 33px Arial Unicode MS, Lucida Sans Unicode;
+
+  // This combo of Unicode fonts means Min's icons
+  // support OSX 10.5+, Windows 98+, and Ubuntu.
+
+  // We don't use ems because 33px is a great size
+  // cross-browser and OS for nice icons
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_iehacks.scss

@@ -0,0 +1,10 @@
+@if $import-ie-hacks == true {
+//-------------------------------------------------------------------
+//  Internet Explorer Hacks
+//-------------------------------------------------------------------
+
+//  no hacks (outside of the ie grid hack found in the grid.scss file)
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_messages.scss

@@ -0,0 +1,14 @@
+@if $import-messages == true {
+//-------------------------------------------------------------------
+//  Messages
+//-------------------------------------------------------------------
+
+.msg {
+  background: #def;
+  border-left: 5px solid #59d;
+  padding: 1.5em;
+}
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_navbar.scss

@@ -0,0 +1,103 @@
+@if $import-navbar == true {
+//-------------------------------------------------------------------
+//  Navigation Bar
+//-------------------------------------------------------------------
+
+// CSS reused in multiple selectors
+%nav-global {
+  background: $c-black;
+  color: $c-white;
+}
+
+
+
+.nav {
+  @extend %nav-global;
+  height: 24px;
+  padding: 11px 0 15px;
+
+   // TODO: migrate to ems
+   // (currently we don't use them because of iOS compatibility problems
+   // -- has to do with unicode icon for close) */
+
+  // Uncomment for animations
+  // max-height: 1.5em;
+
+  a {
+    @extend %shared-font-size;
+    @extend %no-underline;
+    color: $c-grey-dark;
+    padding-right: 1em;
+    position: relative;
+    top: -1px;
+
+    &:hover {
+      @extend %nav-global;
+    }
+  }
+
+  .pagename {
+    font-size: 22px;
+    top: 1px;
+  }
+
+  .current {
+    @extend %nav-global;
+  }
+}
+
+.btn.btn-close {
+  background: $c-black;
+  display: none;
+  float: right;
+  font-size: 25px;
+  margin-top: -54px;
+}
+
+
+
+// Update styling of .nav for small screens
+@media(max-width:500px) {
+  .btn.btn-close {
+    display: block;
+  }
+
+  .nav {
+    overflow: hidden;
+    // transition: max-height .5s ease-in-out, height .5s ease-in-out;
+
+    &:focus {
+      height: auto;
+      // -- Necessary for animations
+      // height: 100%;
+      // max-height: 500px;
+    }
+
+    & div:before {
+      background: $c-black;
+      border-top: 3px solid;
+      border-bottom: 10px double;
+      content: '';
+      float: right;
+      height: 4px;
+      position: relative;
+      right: 3px;
+      top: 14px;
+      width: 20px;
+    }
+
+    a {
+      display: block;
+      padding: .5em 0;
+      width: 50%;
+    }
+  }
+
+  .pagename {
+    margin-top: -11px;
+  }
+}
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_table.scss

@@ -0,0 +1,24 @@
+@if $import-tables == true {
+//-------------------------------------------------------------------
+//  Tables
+//-------------------------------------------------------------------
+
+.table {
+  @extend %w-100;
+
+  th, td {
+    padding: .5em;
+    text-align: left;
+  }
+
+  tbody>*:nth-child(2n-1) {
+    background: $c-grey;
+    // We use tbody to ensure that we don't shade the heading
+    // this preserves the order of the shading
+  }
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/min-master.scss

@@ -0,0 +1,49 @@
+// ------------------------------------------------------------------
+//  Core Styles of Min
+// ------------------------------------------------------------------
+
+@import '__var-lib.scss',
+        'general.scss';
+
+
+// ------------------------------------------------------------------
+//  Customize Optional Components
+//
+//  Set undesired components to false to exclude them from
+//  the final Min CSS output.
+// ------------------------------------------------------------------
+
+$import-headings:                         true !default;
+
+$import-buttons:                          true !default;
+
+$import-forms:                            true !default;
+
+$import-navbar:                           true !default;
+
+$import-tables:                           true !default;
+
+$import-messages:                         true !default;
+
+$import-icons:                            true !default;
+
+$import-grid:                             true !default;
+
+$import-messages:                         true !default;
+
+$import-ie-hacks:                         false !default;
+
+
+// ------------------------------------------------------------------
+//  Import Components based on above customization
+// ------------------------------------------------------------------
+
+@import 'button',
+        'grid',
+        'headings',
+        'icons',
+        'forms',
+        'navbar',
+        'table',
+        'messages',
+        'iehacks';