Clean up docs/naming/CSS (closes #34)

build.sh

@@ -3,7 +3,7 @@
 mkdir compiled -p
 #The compiled folder holds all the separate compiled CSS files.
 
-subtypes=(general buttons grid headings icons inputs navbar tables)
+subtypes=(general buttons grid headings icons forms navbar tables)
 #You can change the subtypes used by changing this.
 
 rm -f compiledcss.js

defer.js

@@ -34,3 +34,21 @@ 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.html

@@ -39,110 +39,6 @@
 			}
 		</style>
 
-		<style type="text/css">
-			/* 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;
-				}
-			}
-		</style>
-
 		<!--[if lte IE 6]>
 			<style>
 				.col {
@@ -253,7 +149,7 @@
 			</div>
 		
 			<div>
-				<h1>Inputs</h1>
+				<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-front">$</span><input type="text" class="smooth" placeholder="span class=&quot;addon-front&quot;">
 				<br><br>
@@ -404,4 +300,4 @@
 		</div>
 		<script src="defer.js"></script>
 	</body>
-</html>
+</html>

download.html

@@ -1,27 +1,26 @@
 <!DOCTYPE html>
-<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<script> 
-			document.createElement("nav"); document.createElement("ico"); document.createElement("button");
-			</script>
-		<!--[if lt IE 9]> 
-			<script> 
-				document.createElement("col"); document.createElement("message"); document.createElement("nav"); document.createElement("ico"); document.createElement("button");
-
-
-			</script>
-		<![endif]-->
-
+			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>
 
-		<!--[if lt IE 7]>
-		<script src="IE70.js"></script>
+		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
+
+		<!--[if lt IE 9]>
+		<style>
+			html {
+				overflow-x: hidden;
+			}
+		</style>
 		<![endif]-->
 
-		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
-		
 		<style type="text/css">
 			/* Min+ plugin*/
 			message {
@@ -42,143 +41,6 @@
 			}
 		</style>
 
-		<style type="text/css">
-			/* 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 */
-			button.btn-close.btn-sm {
-				padding-top: 4px;
-				margin-top: -50px;
-			}
-
-			/* 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;
-				}
-			}
-
-			/* End this-page-only styles, start beta styles */
-			nav {
-				display: block;
-			}
-
-			/* IE styles */
-
-			/*
-			.btn-sm {
-				font-size:1em;
-				margin-top: 0;
-				padding-top: 1000px;
-			}
-
-			button {
-				line-height: .65em;
-			}
-
-			a.btn {
-				margin-top: -84px;
-			}
-
-			a.btn-sm, div.btn-sm {
-				margin-top: -49px;
-				padding-top: 10px;
-			}
-
-			button.btn-sm {
-				line-height: .7em;
-				padding-top: 11px;
-			}
-			
-			.btn {
-				width: auto;
-				display: inline;
-				overflow: visible;
-			}
-
-			*/
-
-			/* Changes to the main CSS:
-			 - move media query from max-width to min-width
-			*/
-
-			/* new beta styles */
-			
-		</style>
-
 		<!--[if lte IE 6]>
 			<style>
 				.col {

index.html

@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    	<script> 
+		<script> 
 			document.createElement("nav"); document.createElement("button");
 		</script>
 
@@ -13,28 +13,14 @@
 
 		<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
 		
+		<!--[if lt IE 9]>
 		<style>
-            .row {
-                margin-top: 0;
-            }
-        </style>
-        
-        <!--[if lt IE 9]>
-        <style>
-            html {
-                overflow-x: hidden;
-            }
-        </style>
-		<![endif]-->
-        
-        <!--[if lt IE 8]>
-    	<style>
-            .hero {
-                margin-top: -10px !important;
-            }
-        </style>
+			html {
+				overflow-x: hidden;
+			}
+		</style>
 		<![endif]-->
-        
+		
 		<style type="text/css">
 			/* Min+ plugin*/
 			message {
@@ -55,134 +41,36 @@
 			}
 		</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>
+		<!--[if lt IE 8]>
+			<style>
+				.hero {
+					margin-top: -10px !important;
+				}
+			</style>
+		<![endif]-->
 		<style type="text/css">
-			/* 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;
-			}
-			
+			/* Index only styles */
 			.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;
-			}
-
-			/* 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;
-				}
-			}
-
-			/* End this-page-only styles, start beta styles */
-			nav {
-				display: block;
-			}
-
-			/* IE styles */
-
-			/*
-			.btn-sm {
-				font-size:1em;
 				margin-top: 0;
-				padding-top: 1000px;
-			}
-
-			button {
-				line-height: .65em;
-			}
-
-			a.btn {
-				margin-top: -84px;
 			}
 
-			a.btn-sm, div.btn-sm {
-				margin-top: -49px;
-				padding-top: 10px;
-			}
-
-			button.btn-sm {
-				line-height: .7em;
-				padding-top: 11px;
-			}
-			
-			.btn {
-				width: auto;
-				display: inline;
-				overflow: visible;
-			}
-
-			*/
-
-			/* Changes to the main CSS:
-			 - move media query from max-width to min-width
-			*/
-
-			/* new beta styles */
 			h1.title {
 				border-bottom: none;
 				font-size: 90px;
@@ -262,24 +150,6 @@
 				margin: 7px 9px 7px 0;
 			}
 		</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>
@@ -309,9 +179,9 @@
 			</div>
 			<div class="col c2">&nbsp;</div>
 		</div>
-        <!--[if lt IE 7]> <br><br><br><![endif]-->
+		<!--[if lt IE 7]> <br><br><br><![endif]-->
 		<div class="row intro">
-    		<div class="col c2">&nbsp;</div>
+			<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>
@@ -322,7 +192,7 @@
 			</div>
 			<div class="col c2">&nbsp;</div>
 		</div>
-        <!--[if lt IE 7]> <br><br><br><![endif]-->
+		<!--[if lt IE 7]> <br><br><br><![endif]-->
 		<div class="row intro">
 			<div class="col c2">&nbsp;</div>
 			<div class="col c4">
@@ -334,7 +204,6 @@
 			<div class="col c2">&nbsp;</div>
 		</div>
 		<div class="container">
-
 			<script type="text/javascript">
 				function downloadJSAtOnload() {
 					var element = document.createElement("script");
@@ -348,7 +217,7 @@
 				else window.onload = downloadJSAtOnload;
 			</script>
 		</div>
-		<script src="defer.js"></script>
+		
 		<!-- Quantcast Tag -->
 		<noscript>
 			<div style="display:none;">

less/forms.less

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