Add selects, fix Firefox nav bug, make size 995 bytes

build.sh

@@ -14,7 +14,7 @@ i="0"
 echo "var css = {" >> compiledcss.js
 #Begin making compiledcss.js
 
-echo -n "/*Copyright 2014 Owen Versteeg; MIT licensed*/" >> entireframework.min.css
+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:

compiled/buttons.css

@@ -7,7 +7,7 @@
   cursor: pointer;
   display: inline-block;
   /* Enables non-inline-block elements like <div>s to be buttons */
-  margin: .2em .3em .2em 0;
+  margin: 2px 0;
   padding: 12px 30px 14px;
 }
 .btn:hover {

compiled/buttons.min.css

@@ -1 +1 @@
-.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:.2em .3em .2em 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 15px 11px}
+.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 15px 11px}

compiled/forms.css

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

compiled/forms.min.css

@@ -1 +1 @@
-textarea,input,.addon,.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']{-webkit-appearance:none;width:13em}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}
+label>*{display:inline}form>*{display:block;margin-bottom:10px}.addon,.btn-sm,.nav a,textarea,input,select{font-size:14px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input.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

@@ -1,6 +1,7 @@
 body,
 textarea,
-input {
+input,
+select {
   background: 0;
   border-radius: 0;
   font: 16px sans-serif;
@@ -13,9 +14,6 @@ input {
 .nav a {
   text-decoration: none;
 }
-* {
-  outline: 0;
-}
 .container {
   margin: 0 20px;
   width: auto;
@@ -26,10 +24,7 @@ input {
     width: 1270px;
   }
 }
-label > * {
-  display: inline;
-}
-form > * {
-  display: block;
-  margin-bottom: 10px;
+h2,
+.btn {
+  font-size: 2em;
 }

compiled/general.min.css

@@ -1 +1 @@
-body,textarea,input{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}label>*{display:inline}form>*{display:block;margin-bottom:10px}
+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}@media(min-width:1310px){.container{margin:auto;width:1270px}}h2,.btn{font-size:2em}

compiled/grid.css

@@ -7,8 +7,8 @@
 .col {
   float: left;
 }
-.c12,
-.table {
+.table,
+.c12 {
   width: 100%;
 }
 .c11 {

compiled/grid.min.css

@@ -1 +1 @@
-.row{margin:1% 0;overflow:auto}.col{float:left}.c12,.table{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%}}
+.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

@@ -2,7 +2,3 @@
 h1 {
   font-size: 4em;
 }
-h2,
-.btn {
-  font-size: 2em;
-}

compiled/headings.min.css

@@ -1 +1 @@
-h1{font-size:4em}h2,.btn{font-size:2em}
+h1{font-size:4em}

compiled/icons.css

@@ -1,5 +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 */
+  /*
+		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/messages.css

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

compiled/messages.min.css

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

compiled/navbar.css

@@ -18,6 +18,10 @@
   position: relative;
   top: -1px;
 }
+.nav .pagename {
+  font-size: 22px;
+  top: 1px;
+}
 .btn.btn-close {
   background: #000;
   float: right;
@@ -25,10 +29,6 @@
   margin-top: -54px;
   display: none;
 }
-.nav .pagename {
-  font-size: 22px;
-  top: 1px;
-}
 @media (max-width: 500px) {
   .btn.btn-close {
     display: block;
@@ -40,6 +40,7 @@
   .pagename {
     margin-top: -11px;
   }
+  .nav:active,
   .nav:focus {
     height: auto;
     /* Necesary for animations

compiled/navbar.min.css

@@ -1 +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}.btn.btn-close{background:#000;float:right;font-size:25px;margin-top:-54px;display:none}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.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%}}
+.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-top:-54px;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

@@ -3,7 +3,7 @@
   padding: .5em;
   text-align: left;
 }
-.table tbody > *:nth-child(2n-1) {
+.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

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

compiledcss.js

@@ -1,11 +1,11 @@
 var css = {
-	"general": "body,textarea,input{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}label>*{display:inline}form>*{display:block;margin-bottom:10px}",
-	"buttons": ".btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:.2em .3em .2em 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 15px 11px}",
-	"grid": ".row{margin:1% 0;overflow:auto}.col{float:left}.c12,.table{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:4em}h2,.btn{font-size:2em}",
+	"general": "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}@media(min-width:1310px){.container{margin:auto;width:1270px}}h2,.btn{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 15px 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:4em}",
 	"icons": ".ico{font:33px Arial Unicode MS,Lucida Sans Unicode}",
-	"forms": "textarea,input,.addon,.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']{-webkit-appearance:none;width:13em}.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}.btn.btn-close{background:#000;float:right;font-size:25px;margin-top:-54px;display:none}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.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{padding:1.5em;background:#def;border-left:5px solid #59d}"
+	"forms": "label>*{display:inline}form>*{display:block;margin-bottom:10px}.addon,.btn-sm,.nav a,textarea,input,select{font-size:14px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input.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-top:-54px;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}"
 };

less/buttons.less

@@ -5,7 +5,7 @@
 	color: #fff;
 	cursor: pointer;
 	display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
-	margin: .2em .3em .2em 0;
+	margin: 2px 0;
 	padding: 12px 30px 14px;
 }
 

less/forms.less

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

less/general.less

@@ -1,4 +1,4 @@
-body, textarea, input {
+body, textarea, input, select {
 	background: 0;
 	border-radius: 0;
 	font: 16px sans-serif;
@@ -13,10 +13,6 @@ body, textarea, input {
 	text-decoration: none;
 }
 
-* {
-	outline: 0;
-}
-
 .container {
 	margin: 0 20px;
 	width: auto;
@@ -29,11 +25,7 @@ body, textarea, input {
 	}
 }
 
-label > * {
-	display:inline;
+h2, .btn {
+  font-size: 2em;
 }
 
-form > * {
-	display: block;
-	margin-bottom: 10px;
-}

less/grid.less

@@ -9,7 +9,7 @@
 	float: left;
 }
 
-.c12, .table {
+.table, .c12 {
 	width: 100%;
 }
 

less/headings.less

@@ -3,7 +3,3 @@
 h1 {
 	font-size: 4em;
 }
-
-h2, .btn {
-	font-size: 2em;
-}

less/navbar.less

@@ -19,6 +19,11 @@
 	top: -1px;
 }
 
+.nav .pagename {
+	font-size: 22px;
+	top: 1px;
+}
+
 .btn.btn-close {
 	background: #000;
 	float: right;
@@ -27,11 +32,6 @@
 	display: none;
 }
 
-.nav .pagename {
-	font-size: 22px;
-	top: 1px;
-}
-
 @media (max-width:500px) {
 	.btn.btn-close {
 		display: block;
@@ -43,7 +43,7 @@
 	.pagename {
 		margin-top: -11px;
 	}
-	.nav:focus {
+	.nav:active,.nav:focus {
 		height: auto;
 		/* Necesary for animations
 		max-height: 500px;
@@ -68,3 +68,4 @@
 		width: 50%;
 	}
 }
+

less/tables.less

@@ -3,7 +3,7 @@
 	text-align: left;
 }
 
-.table tbody>*:nth-child(2n-1) {
+.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 */
 }