diff --git a/README.md b/README.md index 56d91a7..1c94285 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ A minimal, responsive CSS framework to get you started. ## Components -- **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,183 bytes +- **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,186 bytes - **button**: button styles `GZIPPED SIZE`: 443 bytes - **form**: coming soon - **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes diff --git a/css/mini-base-button.css b/css/mini-base-button.css deleted file mode 100644 index 4df6513..0000000 --- a/css/mini-base-button.css +++ /dev/null @@ -1,246 +0,0 @@ -/* Base */ -/* Button */ -html { - font-family: "Helvetica Neue", Helvetica, sans-serif; - font-size: 1em; - line-height: 1.5; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; } - -body { - margin: 0; - color: #222; - background-color: #eee; } - -article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { - display: block; } - -h1, h2, h3, h4, h5, h6, hr { - line-height: 1.3; - margin: 0.7em 0; - font-weight: 500; } - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, hr small { - color: #484848; - font-weight: 200; } - -h1 { - font-size: 2em; } - -h2 { - font-size: 1.5em; } - -h3 { - font-size: 1.15em; } - -h4 { - font-size: 1em; } - -h5 { - font-size: 0.8em; } - -h6 { - font-size: 0.7em; } - -small { - font-size: 75%; } - -p, pre { - margin: 0 0 0.6em; } - -ul, ol { - margin-top: 0; - margin-bottom: 0.6em; } - ul ul, ul ol, ol ul, ol ol { - margin-bottom: 0; } - -hr { - box-sizing: content-box; - height: 0; - border: 0; - border-top: 1px solid #c8c8c8; } - -code, pre, kbd, samp { - font-family: monospace; - font-size: 1em; } - -code, pre { - padding: 2px 4px; - background-color: #d8d8d8; - border-radius: 4px; } - -kbd { - padding: 2px 4px; - color: #eee; - background-color: #2b2b2b; - border-radius: 4px; } - -pre { - display: block; - word-break: break-all; - word-wrap: break-word; } - pre code { - padding: 0; - font-size: inherit; - color: inherit; - white-space: pre-wrap; - background-color: transparent; - border-radius: 0; } - -a { - background-color: transparent; - -webkit-text-decoration-skip: objects; - color: #2678b3; } - a:active, a:hover { - outline-width: 0; - color: #3793d5; } - a:visited { - color: #1d5c89; } - a:visited:active, a:visited:hover { - color: #2678b3; } - -figure { - margin: 1em 40px; } - -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; } - -b, strong { - font-weight: inherit; } - -b, strong { - font-weight: bolder; } - -dfn { - font-style: italic; } - -mark { - background-color: #ffff33; - color: #222; } - -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sub { - bottom: -0.25em; } - -sup { - top: -0.5em; } - -[hidden], .hidden, template { - display: none; } - -audio, video { - display: inline-block; } - -audio:not([controls]) { - display: none; - height: 0; } - -img { - border-style: none; } - -svg:not(:root) { - overflow: hidden; } - -button, input, optgroup, select, textarea { - font-family: "Helvetica Neue", Helvetica, sans-serif; - font-size: 100%; - line-height: 1.3; - margin: 0; } - -button, input, hr { - overflow: visible; } - -button, select { - text-transform: none; } - -button, html [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; } - button::-moz-focus-inner, html [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; } - button:-moz-focusring, html [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; } - -fieldset { - border: 1px solid #c8c8c8; - border-radius: 4px; - margin: 0 2px; - padding: 0.35em 0.65em 0.75em; } - -[type="checkbox"], [type="radio"], legend { - box-sizing: border-box; - padding: 0; } - -legend { - color: inherit; - display: table; - max-width: 100%; - white-space: normal; } - -progress { - display: inline-block; - vertical-align: baseline; } - -textarea { - overflow: auto; } - -[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; } - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; } - [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; } - -.btn, a.btn, a.btn:visited { - border-radius: 4px; - cursor: pointer; - display: inline-block; - margin: 2px 0; - padding: 6px 12px; - border: 0; - text-decoration: none; - color: #2a2a2a; - background: #c2c2c2; } - .btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus { - background: #d5d5d5; } - .btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] { - cursor: not-allowed; - opacity: .65; } - -.btn.blue, a.btn.blue, a.btn.blue:visited { - color: #eeeeee; - background: #3f84b3; } - .btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus { - background: #5597c3; } - -.btn.green, a.btn.green, a.btn.green:visited { - color: #eeeeee; - background: #2db747; } - .btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus { - background: #3bcf57; } - -.btn.red, a.btn.red, a.btn.red:visited { - color: #eeeeee; - background: #ea4848; } - .btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus { - background: #ee6a6a; } - -.btn.lg { - padding: 9px 15px; - font-size: 135%; } - -.btn.sm { - padding: 4px 8px; - font-size: 80%; } diff --git a/css/mini-base-button.min.css b/css/mini-base-button.min.css deleted file mode 100644 index 159161b..0000000 --- a/css/mini-base-button.min.css +++ /dev/null @@ -1 +0,0 @@ -html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn,a.btn,a.btn:visited{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;border:0;text-decoration:none;color:#2a2a2a;background:#c2c2c2}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#d5d5d5}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%} \ No newline at end of file diff --git a/css/mini-base.css b/css/mini-base.css deleted file mode 100644 index b29a0af..0000000 --- a/css/mini-base.css +++ /dev/null @@ -1,204 +0,0 @@ -/* Base */ -/* Button */ -html { - font-family: "Helvetica Neue", Helvetica, sans-serif; - font-size: 1em; - line-height: 1.5; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; } - -body { - margin: 0; - color: #222; - background-color: #eee; } - -article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { - display: block; } - -h1, h2, h3, h4, h5, h6, hr { - line-height: 1.3; - margin: 0.7em 0; - font-weight: 500; } - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, hr small { - color: #484848; - font-weight: 200; } - -h1 { - font-size: 2em; } - -h2 { - font-size: 1.5em; } - -h3 { - font-size: 1.15em; } - -h4 { - font-size: 1em; } - -h5 { - font-size: 0.8em; } - -h6 { - font-size: 0.7em; } - -small { - font-size: 75%; } - -p, pre { - margin: 0 0 0.6em; } - -ul, ol { - margin-top: 0; - margin-bottom: 0.6em; } - ul ul, ul ol, ol ul, ol ol { - margin-bottom: 0; } - -hr { - box-sizing: content-box; - height: 0; - border: 0; - border-top: 1px solid #c8c8c8; } - -code, pre, kbd, samp { - font-family: monospace; - font-size: 1em; } - -code, pre { - padding: 2px 4px; - background-color: #d8d8d8; - border-radius: 4px; } - -kbd { - padding: 2px 4px; - color: #eee; - background-color: #2b2b2b; - border-radius: 4px; } - -pre { - display: block; - word-break: break-all; - word-wrap: break-word; } - pre code { - padding: 0; - font-size: inherit; - color: inherit; - white-space: pre-wrap; - background-color: transparent; - border-radius: 0; } - -a { - background-color: transparent; - -webkit-text-decoration-skip: objects; - color: #2678b3; } - a:active, a:hover { - outline-width: 0; - color: #3793d5; } - a:visited { - color: #1d5c89; } - a:visited:active, a:visited:hover { - color: #2678b3; } - -figure { - margin: 1em 40px; } - -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; } - -b, strong { - font-weight: inherit; } - -b, strong { - font-weight: bolder; } - -dfn { - font-style: italic; } - -mark { - background-color: #ffff33; - color: #222; } - -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sub { - bottom: -0.25em; } - -sup { - top: -0.5em; } - -[hidden], .hidden, template { - display: none; } - -audio, video { - display: inline-block; } - -audio:not([controls]) { - display: none; - height: 0; } - -img { - border-style: none; } - -svg:not(:root) { - overflow: hidden; } - -button, input, optgroup, select, textarea { - font-family: "Helvetica Neue", Helvetica, sans-serif; - font-size: 100%; - line-height: 1.3; - margin: 0; } - -button, input, hr { - overflow: visible; } - -button, select { - text-transform: none; } - -button, html [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; } - button::-moz-focus-inner, html [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; } - button:-moz-focusring, html [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; } - -fieldset { - border: 1px solid #c8c8c8; - border-radius: 4px; - margin: 0 2px; - padding: 0.35em 0.65em 0.75em; } - -[type="checkbox"], [type="radio"], legend { - box-sizing: border-box; - padding: 0; } - -legend { - color: inherit; - display: table; - max-width: 100%; - white-space: normal; } - -progress { - display: inline-block; - vertical-align: baseline; } - -textarea { - overflow: auto; } - -[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; } - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; } - [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; } diff --git a/css/mini-base.min.css b/css/mini-base.min.css deleted file mode 100644 index c32f206..0000000 --- a/css/mini-base.min.css +++ /dev/null @@ -1 +0,0 @@ -html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} \ No newline at end of file diff --git a/css/mini-button.css b/css/mini-button.css deleted file mode 100644 index 0dbf59d..0000000 --- a/css/mini-button.css +++ /dev/null @@ -1,43 +0,0 @@ -/* Base */ -/* Button */ -.btn, a.btn, a.btn:visited { - border-radius: 4px; - cursor: pointer; - display: inline-block; - margin: 2px 0; - padding: 6px 12px; - border: 0; - text-decoration: none; - color: #2a2a2a; - background: #c2c2c2; } - .btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus { - background: #d5d5d5; } - .btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] { - cursor: not-allowed; - opacity: .65; } - -.btn.blue, a.btn.blue, a.btn.blue:visited { - color: #eeeeee; - background: #3f84b3; } - .btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus { - background: #5597c3; } - -.btn.green, a.btn.green, a.btn.green:visited { - color: #eeeeee; - background: #2db747; } - .btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus { - background: #3bcf57; } - -.btn.red, a.btn.red, a.btn.red:visited { - color: #eeeeee; - background: #ea4848; } - .btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus { - background: #ee6a6a; } - -.btn.lg { - padding: 9px 15px; - font-size: 135%; } - -.btn.sm { - padding: 4px 8px; - font-size: 80%; } diff --git a/css/mini-button.min.css b/css/mini-button.min.css deleted file mode 100644 index 750bcab..0000000 --- a/css/mini-button.min.css +++ /dev/null @@ -1 +0,0 @@ -.btn,a.btn,a.btn:visited{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;border:0;text-decoration:none;color:#2a2a2a;background:#c2c2c2}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#d5d5d5}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%} \ No newline at end of file diff --git a/css/mini-full.css b/css/mini-full.css index ee19a67..e42e617 100644 --- a/css/mini-full.css +++ b/css/mini-full.css @@ -1,5 +1,7 @@ -/* Base */ -/* Button */ +/* + Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS. + Set body colors and margin. +*/ html { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 1em; @@ -10,16 +12,28 @@ html { body { margin: 0; color: #222; - background-color: #eee; } + background-color: #efefef; } +/* + Correct display in IE 9-. +*/ article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { display: block; } -h1, h2, h3, h4, h5, h6, hr { - line-height: 1.3; +/* + Correct margin in IE 8. +*/ +figure { + margin: 1em 40px; } + +/* + Styles for headers. +*/ +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; margin: 0.7em 0; font-weight: 500; } - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, hr small { + h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: #484848; font-weight: 200; } @@ -41,38 +55,56 @@ h5 { h6 { font-size: 0.7em; } -small { +/* + Correct box-sizing in Firefox. + Style for horizontal rule. +*/ +hr { + box-sizing: content-box; + line-height: 1.2; + margin: 0.7em 0; + height: 0; + border: 0; + border-top: 1px solid #c9c9c9; } + +/* + Style for all small text and size for sub and sup. +*/ +small, sub, sup { font-size: 75%; } +/* + Style for paragraph and preformatted elements. +*/ p, pre { margin: 0 0 0.6em; } +/* + Style for lists. +*/ ul, ol { margin-top: 0; margin-bottom: 0.6em; } ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; } -hr { - box-sizing: content-box; - height: 0; - border: 0; - border-top: 1px solid #c8c8c8; } - -code, pre, kbd, samp { - font-family: monospace; +/* + Styles for code and preformatted. +*/ +samp, kbd, code, pre { + font-family: monospace, monospace; font-size: 1em; } -code, pre { +kbd, code, pre { padding: 2px 4px; - background-color: #d8d8d8; border-radius: 4px; } +code, pre { + background-color: #d5d5d5; } + kbd { - padding: 2px 4px; - color: #eee; - background-color: #2b2b2b; - border-radius: 4px; } + color: #f8f8f8; + background-color: #222; } pre { display: block; @@ -86,9 +118,14 @@ pre { background-color: transparent; border-radius: 0; } +/* + Style for hyperlinks, remove underline. + Remove gray background on active links in IE 10. + Remove outline on focused links when they are also active or hovered. +*/ a { background-color: transparent; - -webkit-text-decoration-skip: objects; + text-decoration: none; color: #2678b3; } a:active, a:hover { outline-width: 0; @@ -98,67 +135,111 @@ a { a:visited:active, a:visited:hover { color: #2678b3; } -figure { - margin: 1em 40px; } +/* + Prevent the duplicate application of `bolder` in Safari 6. +*/ +b, strong { + font-weight: inherit; } +/* + Correct font weight in Chrome, Edge, Safari. +*/ +b, strong { + font-weight: bolder; } + +/* + Correct font style in Android 4.3-. +*/ +dfn { + font-style: italic; } + +/* + Remove botom border in Firefox 39-. + Correct text decoration in Chrome, Edge, IE, Opera, and Safari. +*/ abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } -b, strong { - font-weight: inherit; } - -b, strong { - font-weight: bolder; } - -dfn { - font-style: italic; } - +/* + Style for mark. +*/ mark { background-color: #ffff33; color: #222; } -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; +/* + Styling for hidden elements. + Correct display for template in IE. + Correct display for audio:not([controls]) in iOS 4-7. +*/ +[hidden], .hidden, template, audio:not([controls]) { + display: none; } + +audio:not([controls]) { + height: 0; } + +/* + Correct display in IE 9-. +*/ +audio, video, progress { + display: inline-block; } + +/* + Styles for sub and sup. + Prevent `sub` and `sup` elements from affecting the line height. + Correct vertical alignment of progress in Chrome, Firefox, and Opera. +*/ +sub, sup, progress { vertical-align: baseline; } +sub, sup { + line-height: 0; + position: relative; } + sub { bottom: -0.25em; } sup { top: -0.5em; } -[hidden], .hidden, template { - display: none; } - -audio, video { - display: inline-block; } - -audio:not([controls]) { - display: none; - height: 0; } - +/* + Remove the border on images inside links in IE 10-. +*/ img { border-style: none; } +/* + Hide the overflow in IE. +*/ svg:not(:root) { overflow: hidden; } -button, input, optgroup, select, textarea { - font-family: "Helvetica Neue", Helvetica, sans-serif; - font-size: 100%; - line-height: 1.3; - margin: 0; } - +/* + Show the overflow in IE and Edge. +*/ button, input, hr { overflow: visible; } +/* + Style for buttons and input elements. +*/ +button, input, optgroup, select, textarea { + font-family: '"Helvetica Neue", Helvetica, sans-serif'; + font-size: 100%; + line-height: 1.2; + margin: 0; } + +/* + Remove the inheritance of text transform in Edge, Firefox, and IE. +*/ button, select { text-transform: none; } +/* + Correct styling for iOS, Safari and Firefox. +*/ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, html [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { @@ -167,296 +248,65 @@ button, html [type="button"], [type="reset"], [type="submit"] { button:-moz-focusring, html [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } +/* + Style for fieldset. +*/ fieldset { - border: 1px solid #c8c8c8; + border: 1px solid #c9c9c9; border-radius: 4px; margin: 0 2px; padding: 0.35em 0.65em 0.75em; } +/* + Add correct box sizing and remove padding in IE 10-. +*/ [type="checkbox"], [type="radio"], legend { box-sizing: border-box; padding: 0; } +/* + + Correct text wrapping and color inheritance from `fieldset` elements in Edge and IE. + Remove the padding so developers are not caught out when they zero out `fieldset` + elements in all browsers. +*/ legend { color: inherit; display: table; max-width: 100%; white-space: normal; } -progress { - display: inline-block; - vertical-align: baseline; } - +/* + Remove the default vertical scrollbar in IE. +*/ textarea { overflow: auto; } +/* + Correct the cursor style of increment and decrement buttons in Chrome. +*/ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } +/* + Correct styling in Chrome and Safari. + Remove the inner padding and cancel buttons in Chrome and Safari on OS X. +*/ [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } +/* + Correct the inability to style clickable types in iOS and Safari. + Change font properties to `inherit` in Safari. +*/ ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } -.btn, a.btn, a.btn:visited { - border-radius: 4px; - cursor: pointer; - display: inline-block; - margin: 2px 0; - padding: 6px 12px; - border: 0; - text-decoration: none; - color: #2a2a2a; - background: #c2c2c2; } - .btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus { - background: #d5d5d5; } - .btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] { - cursor: not-allowed; - opacity: .65; } - -.btn.blue, a.btn.blue, a.btn.blue:visited { - color: #eeeeee; - background: #3f84b3; } - .btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus { - background: #5597c3; } - -.btn.green, a.btn.green, a.btn.green:visited { - color: #eeeeee; - background: #2db747; } - .btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus { - background: #3bcf57; } - -.btn.red, a.btn.red, a.btn.red:visited { - color: #eeeeee; - background: #ea4848; } - .btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus { - background: #ee6a6a; } - -.btn.lg { - padding: 9px 15px; - font-size: 135%; } - -.btn.sm { - padding: 4px 8px; - font-size: 80%; } - -/* - Mixin for responsive, mobile-first grid. - Parameters: - - $container-name : The class name of the container for the grid. - - $container-padding : The left and right padding of the container. [1] - - $row-name : The class name of the grid's rows. - - $col-name : The class name of the grid's columns. - - $col-number : The amount of columns in the grid. - - $xs-prefix : Class prefix for extra small screens. - - $sm-prefix : Class prefix for small screens. - - $md-prefix : Class prefix for medium screens. - - $lg-prefix : Class prefix for large screens. - - $hide-suffix : Class suffix for hidden columns. [2] - - $sm-breakpoint : Breakpoint for small screens. - - $md-breakpoint : Breakpoint for medium screens. - - $lg-breakpoint : Breakpoint for large screens. - Notes: - - [1] : The padding of the container might cause the page to grow by $container-padding to the right. This - can be fixed either via @media queries or setting the padding to 0. - - [2] : Columns with the $hide-suffix will be only hidden in the screen size specified. -*/ -.grid-container { - padding-right: 12px; - padding-left: 12px; - margin-right: auto; - margin-left: auto; - width: 100%; } - .grid-container * { - box-sizing: border-box; } - -.row:before, .row:after { - content: ""; - display: table; - clear: both; } - -.col { - float: left; - padding: 12px; } - -.xs-1 { - width: 8.33333%; } - -.xs-2 { - width: 16.66667%; } - -.xs-3 { - width: 25%; } - -.xs-4 { - width: 33.33333%; } - -.xs-5 { - width: 41.66667%; } - -.xs-6 { - width: 50%; } - -.xs-7 { - width: 58.33333%; } - -.xs-8 { - width: 66.66667%; } - -.xs-9 { - width: 75%; } - -.xs-10 { - width: 83.33333%; } - -.xs-11 { - width: 91.66667%; } - -.xs-12 { - width: 100%; } - -.sm-no, -.md-no, -.lg-no { - display: block; } - -.xs-no { - display: none; } - -@media (min-width: 768px) { - .sm-1 { - width: 8.33333%; } - - .sm-2 { - width: 16.66667%; } - - .sm-3 { - width: 25%; } - - .sm-4 { - width: 33.33333%; } - - .sm-5 { - width: 41.66667%; } - - .sm-6 { - width: 50%; } - - .sm-7 { - width: 58.33333%; } - - .sm-8 { - width: 66.66667%; } - - .sm-9 { - width: 75%; } - - .sm-10 { - width: 83.33333%; } - - .sm-11 { - width: 91.66667%; } - - .sm-12 { - width: 100%; } - - .xs-no, - .md-no, - .lg-no { - display: block; } - - .sm-no { - display: none; } } -@media (min-width: 1024px) { - .md-1 { - width: 8.33333%; } - - .md-2 { - width: 16.66667%; } - - .md-3 { - width: 25%; } - - .md-4 { - width: 33.33333%; } - - .md-5 { - width: 41.66667%; } - - .md-6 { - width: 50%; } - - .md-7 { - width: 58.33333%; } - - .md-8 { - width: 66.66667%; } - - .md-9 { - width: 75%; } - - .md-10 { - width: 83.33333%; } - - .md-11 { - width: 91.66667%; } - - .md-12 { - width: 100%; } - - .xs-no, - .sm-no, - .lg-no { - display: block; } - - .md-no { - display: none; } } -@media (min-width: 1280px) { - .lg-1 { - width: 8.33333%; } - - .lg-2 { - width: 16.66667%; } - - .lg-3 { - width: 25%; } - - .lg-4 { - width: 33.33333%; } - - .lg-5 { - width: 41.66667%; } - - .lg-6 { - width: 50%; } - - .lg-7 { - width: 58.33333%; } - - .lg-8 { - width: 66.66667%; } - - .lg-9 { - width: 75%; } - - .lg-10 { - width: 83.33333%; } - - .lg-11 { - width: 91.66667%; } - - .lg-12 { - width: 100%; } - - .xs-no, - .sm-no, - .md-no { - display: block; } - - .lg-no { - display: none; } } +/*@import 'mini/button'; +@import 'mini/grid'; +// Use grid mixin to create grid with default specs. +@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);*/ diff --git a/css/mini-full.min.css b/css/mini-full.min.css index a044188..75af0bb 100644 --- a/css/mini-full.min.css +++ b/css/mini-full.min.css @@ -1 +1 @@ -html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn,a.btn,a.btn:visited{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;border:0;text-decoration:none;color:#2a2a2a;background:#c2c2c2}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#d5d5d5}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:12px;padding-left:12px;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}} \ No newline at end of file +html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#efefef}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #c9c9c9}small,sub,sup{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#d5d5d5}kbd{color:#f8f8f8;background-color:#222}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c9c9c9;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} \ No newline at end of file diff --git a/scss/mini-base-button.scss b/scss/mini-base-button.scss deleted file mode 100644 index cd48094..0000000 --- a/scss/mini-base-button.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'mini/variables'; -@import 'mini/base'; -@import 'mini/button'; \ No newline at end of file diff --git a/scss/mini-base.scss b/scss/mini-base.scss deleted file mode 100644 index be35e3b..0000000 --- a/scss/mini-base.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'mini/variables'; -@import 'mini/base'; \ No newline at end of file diff --git a/scss/mini-button.scss b/scss/mini-button.scss deleted file mode 100644 index 25c5b69..0000000 --- a/scss/mini-button.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'mini/variables'; -@import 'mini/button'; \ No newline at end of file diff --git a/scss/mini-full.scss b/scss/mini-full.scss index 8307511..a296f45 100644 --- a/scss/mini-full.scss +++ b/scss/mini-full.scss @@ -1,6 +1,6 @@ @import 'mini/variables'; @import 'mini/base'; -@import 'mini/button'; +/*@import 'mini/button'; @import 'mini/grid'; // Use grid mixin to create grid with default specs. -@include make-grid(grid-container, 12px, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px); \ No newline at end of file +@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);*/ diff --git a/scss/mini/_base.scss b/scss/mini/_base.scss index 17aac2c..b703628 100644 --- a/scss/mini/_base.scss +++ b/scss/mini/_base.scss @@ -1,94 +1,101 @@ +/* + Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS. + Set body colors and margin. +*/ html { - font-family: "Helvetica Neue", Helvetica, sans-serif; - font-size: 1em; - line-height: 1.5; + font-family: #{$base-fonts}; + font-size: $base-font-size; + line-height: $base-line-height; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { - margin: 0; + margin: $body-margin; color: $body-color; - background-color: $body-background-color; + background-color: $body-bg-color; } +/* + Correct display in IE 9-. +*/ article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { display: block; } - -h1, h2, h3, h4, h5, h6, hr{ - line-height: 1.3; - margin: 0.7em 0; - font-weight: 500; +/* + Correct margin in IE 8. +*/ +figure { + margin: 1em 40px; +} +/* + Styles for headers. +*/ +h1, h2, h3, h4, h5, h6{ + line-height: $base-line-height * $header-line-height-multiplier; + margin: $header-margin ; + font-weight: $header-font-weight ; small{ - color: lighten($body-color, 15%); - font-weight: 200; + color: $header-small-color ; + font-weight: $header-small-font-weight ; } } - -h1{ - font-size: 2em; +h1{ font-size: $base-font-size * $h1-multiplier; } +h2{ font-size: $base-font-size * $h2-multiplier; } +h3{ font-size: $base-font-size * $h3-multiplier; } +h4{ font-size: $base-font-size * $h4-multiplier; } +h5{ font-size: $base-font-size * $h5-multiplier; } +h6{ font-size: $base-font-size * $h6-multiplier; } +/* + Correct box-sizing in Firefox. + Style for horizontal rule. +*/ +hr { + box-sizing: content-box; + line-height: $base-line-height * $hr-line-height-multiplier ; + margin: $hr-margin ; + height: 0; + border: 0; + border-top: $hr-border-style; } - -h2{ - font-size: 1.5em; +/* + Style for all small text and size for sub and sup. +*/ +small, sub, sup{ + font-size: $small-font-size; } - -h3{ - font-size: 1.15em; -} - -h4{ - font-size: 1em; -} - -h5{ - font-size: 0.8em; -} - -h6{ - font-size: 0.7em; -} - -small{ - font-size: 75%; -} - +/* + Style for paragraph and preformatted elements. +*/ p, pre { - margin: 0 0 0.6em; + margin: $p-margin; } - +/* + Style for lists. +*/ ul, ol { - margin-top: 0; - margin-bottom: 0.6em; + margin-top: $list-margin-top; + margin-bottom: $list-margin-bottom; ul, ol { margin-bottom: 0; } } - -hr { - box-sizing: content-box; - height: 0; - border:0; - border-top:1px solid darken($body-background-color, 15%); +/* + Styles for code and preformatted. +*/ +samp, kbd, code, pre{ + font-family: $code-fonts; + font-size: $base-font-size; } - -code, pre, kbd, samp{ - font-family: monospace; - font-size: 1em; +kbd, code, pre { + padding: $code-padding; + border-radius: $code-border-radius; } - -code, pre { - padding: 2px 4px; - background-color: darken($body-background-color, 8.5%); - border-radius: 4px; +code, pre{ + background-color: $code-bg-color; } - kbd { - padding: 2px 4px; - color: $body-background-color; - background-color: lighten($body-color, 3.5%); - border-radius: 4px; + color: $kbd-color; + background-color: $kbd-bg-color; } - pre { display: block; word-break: break-all; @@ -102,101 +109,132 @@ pre { border-radius: 0; } } - +/* + Style for hyperlinks, remove underline. + Remove gray background on active links in IE 10. + Remove outline on focused links when they are also active or hovered. +*/ a { background-color: transparent; - -webkit-text-decoration-skip: objects; + text-decoration: none; color: $a-color; &:active, &:hover{ outline-width: 0; - color: lighten($a-color, 10%); + color: $a-hover-color; } &:visited{ - color: darken($a-color, 10%); + color: $a-visited-color; &:active, &:hover{ - color: $a-color; + color: $a-visited-hover-color; } } } - -figure { - margin: 1em 40px; +/* + Prevent the duplicate application of `bolder` in Safari 6. +*/ +b, strong { + font-weight: inherit; } - +/* + Correct font weight in Chrome, Edge, Safari. +*/ +b, strong { + font-weight: bolder; +} +/* + Correct font style in Android 4.3-. +*/ +dfn { + font-style: italic; +} +/* + Remove botom border in Firefox 39-. + Correct text decoration in Chrome, Edge, IE, Opera, and Safari. +*/ abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } - -b, strong { - font-weight: inherit; -} - -b, strong { - font-weight: bolder; -} - -dfn { - font-style: italic; -} - +/* + Style for mark. +*/ mark { - background-color: $mark-color; - color: $body-color; + background-color: $mark-bg-color; + color: $mark-color; } - -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -[hidden], .hidden, template { +/* + Styling for hidden elements. + Correct display for template in IE. + Correct display for audio:not([controls]) in iOS 4-7. +*/ +[hidden], .hidden, template, audio:not([controls]) { display: none; } - -audio, video { - display: inline-block; -} - audio:not([controls]) { - display: none; height: 0; } - +/* + Correct display in IE 9-. +*/ +audio, video, progress { + display: inline-block; +} +/* + Styles for sub and sup. + Prevent `sub` and `sup` elements from affecting the line height. + Correct vertical alignment of progress in Chrome, Firefox, and Opera. +*/ +sub, sup, progress{ + vertical-align: baseline; +} +sub, sup { + line-height: 0; + position: relative; + +} +sub { + bottom: $sub-bottom; +} +sup { + top: $sup-top; +} +/* + Remove the border on images inside links in IE 10-. +*/ img { border-style: none; } - +/* + Hide the overflow in IE. +*/ svg:not(:root) { overflow: hidden; } - -button, input, optgroup, select, textarea { - font-family: "Helvetica Neue", Helvetica, sans-serif; - font-size: 100%; - line-height: 1.3; - margin: 0; -} - +/* + Show the overflow in IE and Edge. +*/ button, input, hr { overflow: visible; } - +/* + Style for buttons and input elements. +*/ +button, input, optgroup, select, textarea { + font-family: $button-fonts; + font-size: $button-font-size; + line-height: $base-line-height * $button-line-height-multiplier; + margin: $button-margin; +} +/* + Remove the inheritance of text transform in Edge, Firefox, and IE. +*/ button, select { text-transform: none; } - +/* + Correct styling for iOS, Safari and Firefox. +*/ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; &::-moz-focus-inner{ @@ -207,39 +245,50 @@ button, html [type="button"], [type="reset"], [type="submit"] { outline: 1px dotted ButtonText; } } - +/* + Style for fieldset. +*/ fieldset { - border: 1px solid darken($body-background-color, 15%); - border-radius: 4px; - margin: 0 2px; - padding: 0.35em 0.65em 0.75em; + border: $fieldset-border; + border-radius: $fieldset-border-radius; + margin: $fieldset-margin; + padding: $fieldset-padding; } - +/* + Add correct box sizing and remove padding in IE 10-. +*/ [type="checkbox"], [type="radio"], legend { box-sizing: border-box; padding: 0; } +/* + Correct text wrapping and color inheritance from `fieldset` elements in Edge and IE. + Remove the padding so developers are not caught out when they zero out `fieldset` + elements in all browsers. +*/ legend { color: inherit; display: table; max-width: 100%; white-space: normal; } - -progress { - display: inline-block; - vertical-align: baseline; -} - +/* + Remove the default vertical scrollbar in IE. +*/ textarea { overflow: auto; } - +/* + Correct the cursor style of increment and decrement buttons in Chrome. +*/ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } - +/* + Correct styling in Chrome and Safari. + Remove the inner padding and cancel buttons in Chrome and Safari on OS X. +*/ [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; @@ -247,7 +296,10 @@ textarea { -webkit-appearance: none; } } - +/* + Correct the inability to style clickable types in iOS and Safari. + Change font properties to `inherit` in Safari. +*/ ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; diff --git a/scss/mini/_button.scss b/scss/mini/_button.scss index 2902613..3058f58 100644 --- a/scss/mini/_button.scss +++ b/scss/mini/_button.scss @@ -13,7 +13,6 @@ margin: 2px 0; padding: 6px 12px; border: 0; - text-decoration: none; @include btn-variant($btn-color, $btn-background-color); &.disabled, &[disabled], &fieldset[disabled]{ cursor: not-allowed; diff --git a/scss/mini/_grid.scss b/scss/mini/_grid.scss index 5babcf9..6c324cb 100644 --- a/scss/mini/_grid.scss +++ b/scss/mini/_grid.scss @@ -18,6 +18,7 @@ - [1] : The padding of the container might cause the page to grow by $container-padding to the right. This can be fixed either via @media queries or setting the padding to 0. - [2] : Columns with the $hide-suffix will be only hidden in the screen size specified. + - [3] : Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information. */ @mixin make-grid( $container-name, $container-padding, $row-name, $col-name, $col-number, $col-padding, diff --git a/scss/mini/_variables.scss b/scss/mini/_variables.scss index 495c542..001dbf0 100644 --- a/scss/mini/_variables.scss +++ b/scss/mini/_variables.scss @@ -1,9 +1,53 @@ -/* Base */ -$body-background-color: #eee; -$body-color: #222; -$a-color: #2678b3; -$mark-color: #ffff33; -/* Button */ +// Base +$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family +$base-font-size: 1em; // Font-size +$base-line-height: 1.5; // Line-height +$body-margin: 0; // Margin for body +$body-bg-color: #efefef; // Body background color +$body-color: #222; // Body text color +$header-line-height-multiplier: 0.8; // Multiplier for line height of headers +$header-margin: 0.7em 0; // Margin for headers +$header-font-weight: 500; // Font weight for headers +$h1-multiplier: 2; // Header 1 font-sze multiplier +$h2-multiplier: 1.5; // Header 2 font-sze multiplier +$h3-multiplier: 1.15; // Header 3 font-sze multiplier +$h4-multiplier: 1; // Header 4 font-sze multiplier +$h5-multiplier: 0.8; // Header 5 font-sze multiplier +$h6-multiplier: 0.7; // Header 6 font-sze multiplier +$header-small-color: lighten($body-color, 15%); // Header small text color +$header-small-font-weight: 200; // Header small font weight +$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule +$hr-margin: 0.7em 0; // Margin for horizontal rule +$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule +$small-font-size: 75%; // Font size for small, sub and sup elements +$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements +$list-margin-top: 0; // Top margin for lists +$list-margin-bottom: 0.6em; // Bottom margin for lists +$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements +$code-padding: 2px 4px; // Padding for code and pre elements +$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color +$code-border-radius: 4px; // Border radius for code, pre and kbd elements +$kbd-bg-color: $body-color; // Kbd background color +$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color +$a-color: #2678b3; // Hyperlink text color +$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color +$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color +$a-visited-hover-color: #2678b3; // Hyperlink visited hover text color +$mark-bg-color: #ffff33; // Mark background color +$mark-color: $body-color; // Mark text color +$sub-bottom: -0.25em; // Sub bottom +$sup-top: -0.5em; // Sup top +$button-fonts: $base-fonts; // Font-family for buttons and inputs +$button-font-size: 100%; // Font size for buttons and inputs +$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs +$button-margin: 0; // Margin for buttons and inputs +$fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style for fieldset +$fieldset-border-radius: 4px; // Border radius for fieldset +$fieldset-margin: 0 2px; // Margin for fieldset +$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset + + +// Button defaults $btn-color: #2a2a2a; $btn-color-alt: #eeeeee; $btn-background-color: #c2c2c2;