Reduce size substantially+add messages

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 forms navbar tables)
+subtypes=(general buttons grid headings icons forms navbar tables messages)
 #You can change the subtypes used by changing this.
 
 rm -f compiledcss.js

compiled/buttons.css

@@ -2,13 +2,11 @@
   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: .2em .3em .2em 0;
   padding: 12px 30px 14px;
 }
@@ -25,13 +23,11 @@
 .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;
@@ -39,13 +35,11 @@
 .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;
@@ -53,17 +47,14 @@
 .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 15px 11px;
 }

compiled/forms.css

@@ -0,0 +1,26 @@
+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;
+  /* make iOS inputs pretty */
+  width: 13em;
+}
+.addon {
+  box-shadow: 0 0 0 1px #ccc;
+  padding: 8px 12px;
+}

compiled/forms.min.css

@@ -0,0 +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}

compiled/general.css

@@ -1,10 +1,10 @@
 body,
 textarea,
 input {
+  background: 0;
+  border-radius: 0;
   font: 16px sans-serif;
   margin: 0;
-  border-radius: 0;
-  background: 0;
 }
 .smooth {
   transition: all .2s;
@@ -22,8 +22,8 @@ input {
 }
 @media (min-width: 1310px) {
   .container {
-    width: 1270px;
     margin: auto;
+    width: 1270px;
   }
 }
 label > * {

compiled/general.min.css

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

compiled/grid.css

@@ -3,7 +3,6 @@
   margin: 1% 0;
   overflow: auto;
   /* required - without this, the page layout is screwed up */
-
 }
 .col {
   float: left;

compiled/icons.css

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

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

compiled/messages.min.css

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

compiled/navbar.css

@@ -8,24 +8,22 @@
   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 {
-  padding-right: 1em;
   color: #aaa;
-  top: -1px;
+  padding-right: 1em;
   position: relative;
+  top: -1px;
 }
 .btn.btn-close {
   background: #000;
-  visibility: hidden;
   float: right;
-  margin-top: -54px;
   font-size: 25px;
+  margin-top: -54px;
+  display: none;
 }
 .nav .pagename {
   font-size: 22px;
@@ -33,39 +31,37 @@
 }
 @media (max-width: 500px) {
   .btn.btn-close {
-    visibility: visible;
+    display: block;
   }
   .nav {
     /* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
-  
     overflow: hidden;
   }
   .pagename {
     margin-top: -11px;
   }
   .nav:focus {
-    /* Necesary for animations
-  		max-height: 500px;
-  		height: 100%;
-  		*/
-  
     height: auto;
+    /* Necesary for animations
+		max-height: 500px;
+		height: 100%;
+		*/
   }
   .nav div:before {
-    content: '';
-    border-top: 3px solid;
+    background: #000;
     border-bottom: 10px double;
+    border-top: 3px solid;
+    content: '';
     float: right;
     height: 4px;
+    position: relative;
     right: 3px;
     top: 14px;
     width: 20px;
-    position: relative;
-    background: #000;
   }
   .nav a {
+    display: block;
     padding: .5em 0;
     width: 50%;
-    display: block;
   }
 }

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

compiled/tables.css

@@ -1,6 +1,3 @@
-.table {
-  border-spacing: 0;
-}
 .table th,
 .table td {
   padding: .5em;
@@ -8,8 +5,6 @@
 }
 .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{border-spacing:0}.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,10 +1,11 @@
 var css = {
-	"general": "body,textarea,input{font:16px sans-serif;margin:0;border-radius:0;background:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{width:1270px;margin:auto}}label>*{display:inline}form>*{display:block;margin-bottom:10px}",
+	"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}",
 	"icons": ".ico{font:33px Arial Unicode MS,Lucida Sans Unicode}",
-	"inputs": "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}",
-	"navbar": ".nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{padding-right:1em;color:#aaa;top:-1px;position:relative}.btn.btn-close{background:#000;visibility:hidden;float:right;margin-top:-54px;font-size:25px}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{visibility:visible}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{content:'';border-top:3px solid;border-bottom:10px double;float:right;height:4px;right:3px;top:14px;width:20px;position:relative;background:#000}.nav a{padding:.5em 0;width:50%;display:block}}",
-	"tables": ".table{border-spacing:0}.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}"
+	"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}"
 };

less/forms.less

@@ -1,4 +1,4 @@
-textarea, input, .addon-front, .btn-sm, .nav a {
+textarea, input, .addon, .btn-sm, .nav a {
 	font-size: 14px;
 }
 
@@ -16,7 +16,7 @@ textarea, input[type='text'] {
 	width: 13em;
 }
 
-.addon-front {
+.addon {
 	box-shadow: 0 0 0 1px #ccc;
 	padding: 8px 12px;
 }

less/messages.less

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

less/navbar.less

@@ -24,7 +24,7 @@
 	float: right;
 	font-size: 25px;
 	margin-top: -54px;
-	visibility: hidden;
+	display: none;
 }
 
 .nav .pagename {
@@ -34,7 +34,7 @@
 
 @media (max-width:500px) {
 	.btn.btn-close {
-		visibility: visible;
+		display: block;
 	}
 	.nav {
 		/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */

less/tables.less

@@ -1,7 +1,3 @@
-.table {
-	border-spacing: 0;
-}
-
 .table th, .table td {
 	padding: .5em;
 	text-align: left;