From 02cf36b33ff1b0c7df23b7f2fbd2616fa2f7c968 Mon Sep 17 00:00:00 2001 From: Owen Versteeg Date: Sat, 6 Sep 2014 17:41:23 -0400 Subject: [PATCH] Reduce size substantially+add messages --- build.sh | 2 +- compiled/buttons.css | 9 --------- compiled/forms.css | 26 ++++++++++++++++++++++++++ compiled/forms.min.css | 1 + compiled/general.css | 6 +++--- compiled/general.min.css | 2 +- compiled/grid.css | 1 - compiled/icons.css | 2 -- compiled/messages.css | 5 +++++ compiled/messages.min.css | 1 + compiled/navbar.css | 32 ++++++++++++++------------------ compiled/navbar.min.css | 2 +- compiled/tables.css | 5 ----- compiled/tables.min.css | 2 +- compiledcss.js | 9 +++++---- entireframework.min.css | 2 +- less/forms.less | 4 ++-- less/messages.less | 5 +++++ less/navbar.less | 4 ++-- less/tables.less | 4 ---- 20 files changed, 69 insertions(+), 55 deletions(-) create mode 100644 compiled/forms.css create mode 100644 compiled/forms.min.css create mode 100644 compiled/messages.css create mode 100644 compiled/messages.min.css create mode 100644 less/messages.less diff --git a/build.sh b/build.sh index de70adf..be8da3b 100644 --- a/build.sh +++ b/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 diff --git a/compiled/buttons.css b/compiled/buttons.css index 8746523..5ad5f87 100644 --- a/compiled/buttons.css +++ b/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
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; } diff --git a/compiled/forms.css b/compiled/forms.css new file mode 100644 index 0000000..add0e6f --- /dev/null +++ b/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; +} diff --git a/compiled/forms.min.css b/compiled/forms.min.css new file mode 100644 index 0000000..cebae7e --- /dev/null +++ b/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} \ No newline at end of file diff --git a/compiled/general.css b/compiled/general.css index 5157415..55fdfa6 100644 --- a/compiled/general.css +++ b/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 > * { diff --git a/compiled/general.min.css b/compiled/general.min.css index 85397f7..ab456e2 100644 --- a/compiled/general.min.css +++ b/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} \ No newline at end of file +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} \ No newline at end of file diff --git a/compiled/grid.css b/compiled/grid.css index f35e655..6af9062 100644 --- a/compiled/grid.css +++ b/compiled/grid.css @@ -3,7 +3,6 @@ margin: 1% 0; overflow: auto; /* required - without this, the page layout is screwed up */ - } .col { float: left; diff --git a/compiled/icons.css b/compiled/icons.css index aad46f5..62d5ee7 100644 --- a/compiled/icons.css +++ b/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 */ - } diff --git a/compiled/messages.css b/compiled/messages.css new file mode 100644 index 0000000..868618c --- /dev/null +++ b/compiled/messages.css @@ -0,0 +1,5 @@ +.msg { + padding: 1.5em; + background: #def; + border-left: 5px solid #59d; +} diff --git a/compiled/messages.min.css b/compiled/messages.min.css new file mode 100644 index 0000000..81ca048 --- /dev/null +++ b/compiled/messages.min.css @@ -0,0 +1 @@ +.msg{padding:1.5em;background:#def;border-left:5px solid #59d} \ No newline at end of file diff --git a/compiled/navbar.css b/compiled/navbar.css index ca7810c..642f99f 100644 --- a/compiled/navbar.css +++ b/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; } } diff --git a/compiled/navbar.min.css b/compiled/navbar.min.css index 65411c6..ca2c5b0 100644 --- a/compiled/navbar.min.css +++ b/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}} \ No newline at end of file +.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%}} \ No newline at end of file diff --git a/compiled/tables.css b/compiled/tables.css index 7bd0544..409eb34 100644 --- a/compiled/tables.css +++ b/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 */ - } diff --git a/compiled/tables.min.css b/compiled/tables.min.css index 59bbd38..ad7130d 100644 --- a/compiled/tables.min.css +++ b/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} \ No newline at end of file +.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd} \ No newline at end of file diff --git a/compiledcss.js b/compiledcss.js index 83fb42e..1856da5 100644 --- a/compiledcss.js +++ b/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}" }; diff --git a/entireframework.min.css b/entireframework.min.css index 9cf5261..3c8393d 100644 --- a/entireframework.min.css +++ b/entireframework.min.css @@ -1 +1 @@ -/*Copyright 2014 Owen Versteeg; MIT licensed*/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}.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}.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%}}h1{font-size:4em}h2,.btn{font-size:2em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}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}.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}}.table{border-spacing:0}.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd} \ No newline at end of file +/*Copyright 2014 Owen Versteeg; MIT licensed*/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}.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}.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%}}h1{font-size:4em}h2,.btn{font-size:2em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}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}.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%}}.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} \ No newline at end of file diff --git a/less/forms.less b/less/forms.less index 7a215de..61cf1fc 100644 --- a/less/forms.less +++ b/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; } diff --git a/less/messages.less b/less/messages.less new file mode 100644 index 0000000..6558102 --- /dev/null +++ b/less/messages.less @@ -0,0 +1,5 @@ +.msg { + padding: 1.5em; + background: #def; + border-left: 5px solid #59d; +} \ No newline at end of file diff --git a/less/navbar.less b/less/navbar.less index 818add6..9f3ceec 100644 --- a/less/navbar.less +++ b/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; */ diff --git a/less/tables.less b/less/tables.less index dbd166e..15b0f31 100644 --- a/less/tables.less +++ b/less/tables.less @@ -1,7 +1,3 @@ -.table { - border-spacing: 0; -} - .table th, .table td { padding: .5em; text-align: left;