diff --git a/README.md b/README.md index 5061924..8f676ee 100644 --- a/README.md +++ b/README.md @@ -25,20 +25,18 @@ The boilerplate allows you to do some basic and, I must admit, not so polished c This is done through the `_variables.scss` file. In here you will find variables for common styles such as type color, background, border, font sizes for headings and paragraphs, etc. ```scss -/* Variables -==================================================================================== */ - -/* Switches - turn features on/off +/* Switches ------------------------------------------------------------------------------------ */ -$box-sizing-for-all: true; // add *{box-sizing:border-box} prefixed -$rem-to-px-fallback: false; // create px fallback for rem() formula +// Browser support +$rem-to-px-fallback: false; // Adds px fallback to properties that use the rem() function + +// Special Styles (Use with caution) +$animate-all-links: true; // adds transition(all, .2s ease); to all links +$bg-no-repeat: true; // adds * { background: no-repeat; } +$it-s-all-relative: true; // adds * { position: relative; } +$box-sizing-for-all: true; // adds * { box-sizing: border-box; } (w/ browser prefixes) +$vertical-align-middle: true; // adds * { vertical-align: middle; } -// Styled elements -$style-blockquotes: true; -$style-tables: true; -$style-forms: true; -$style-buttons: true; -$style-code: true; /* Type - use pixels for font-size & line-height ------------------------------------------------------------------------------------ */ @@ -64,8 +62,7 @@ The directory structure is as follows: | | |- base/ | | |- design/ | | |- formulas/ -| | |- helpers/ -| | |- media/ +| | |- modules/ | | |- vendors/ ``` #### main.css @@ -75,31 +72,34 @@ Compressed output file. Here you can find and add all your partials. #### base/ -The base folder contains the `variables`, `base` and `normalize` stylesheets. [Normalize](http://necolas.github.io/normalize.css/) is the reset sheet. Variables is the file where you will customize Base12. Base is the primary file in Base12, this is where most variables end up in and defines most basic styles. Ideally these files will remain untouched unless a new release comes out. +The base folder contains the `variables` and `base` stylesheets. [Variables is the file where you will customize Base12. Base is the primary file in Base12, this is where most variables end up in and defines most basic styles. Ideally these files will remain untouched unless a new release comes out. Base includes styles from Normalize](http://necolas.github.io/normalize.css/) and the H5BP. So it's an all-in-one reset & basic styler. #### design/ -It contains three files `design`, `grid`, and `modules`. +It contains a few files all related to the design of your site `design`, `grid`, `objects`, `helpers`, `print`, and `screens`. ##### _design.scss As you can imagine, this is where all the styles that define the layout and design of the site are located. -##### _modules.scss -Modules includes _element modifiers_ and _objects/modules_. Modifiers are simple classes that change core elements, this includes things such as `p.lead` or `img.img-circle`. Objects and Modules are more complex, e.g., `.media`, `.callout`, etc. There are no modules included as these tend to be more tailored to the design and architecture of the site. - ##### _grid.scss Created specifically to host the grid system of your choosing. This file can end up empty if you decide to keep your grid tied to your `design` file. +##### _objects.scss +Objects can be fairly complex elements, e.g., `.media`, `.callout`, etc. There are no objects included as these tend to be more tailored to the design and architecture of the site. + +##### _helpers.scss +As expected it contains helper classes and you will find some basic that can be useful in almost any design. + +##### \_print.scss & \_screen.scss +Contain all the media queries and stylesheet for other media, such as print and for higher resolution screens. + #### formulas/ Contains mixins and formulas used in Base12, users should keep their own formulas in this folder. -#### helpers/ -As expected it contains helper classes, unlike `modifiers`, these helpers focus more on the function rather than the visual. - -#### media/ -It contains all the media queries and stylesheet for other media, such as print and for higher resolution screens. I wasn't sure what to name this folder, I don't think media is the best name for it. +#### modules/ +Includes multiple stylesheets which can be useful or used as a starting point for your own designs. These modules are often basic modifiers, that build upon core elements. These include blockquotes, tables, forms, code, images, etc. #### vendors/ -Styles from plugins and third-party vendors. Also keep as separate files and `@import` into `vendors` stylesheet. +Third-party vendor stylesheets can be copied into this folder and then linked via the _vendors.scss stylesheet or directly through the main.scss for quicker access. ## Goodies @@ -107,14 +107,11 @@ Styles from plugins and third-party vendors. Also keep as separate files and `@i Turn features on/off according to your preferences. At the moment the features available to switch on/off are: - REM to PX fallback + - Animate all links - Universal `box-sizing: border-box` - Universal NO `background-repeat` - Universal relativity `position: relative` - - Styled blockquotes - - Styled tables - - Styled forms - - Styled buttons - - Styled code + - Universal `vertical-align: middle` ### Formulas The boilerplate includes a few formulas (mixins) to help here and there. I plan to add more depending on which ones get used the most. diff --git a/css/main.css b/css/main.css index cc7341f..fc13b63 100644 --- a/css/main.css +++ b/css/main.css @@ -1,13 +1,25 @@ -/* -** normalize.css v1.1.0 | MIT License | git.io/normalize +/* +** ==================================================================================== +** Base12 v0.5-beta - Sep 5, 2013 - http://cballenar.github.io/base12/ +** ----------------------------------------------------------------------------------- +** Includes normalize.css v2.1.3 & h5bp/main.css v4.2.0 ==================================================================================== -*/article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1,.h1{font-size:2em;margin:0.67em 0}h2,.h2{font-size:1.5em;margin:0.83em 0}h3,.h3{font-size:1.17em;margin:1em 0}h4,.h4{font-size:1em;margin:1.33em 0}h5,.h5{font-size:0.83em;margin:1.67em 0}h6,.h6{font-size:0.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}/* -** Base12 v0.3-beta - Updated: August 10, 2013 - http://cballenar.github.io/base12/ -==================================================================================== -*/*{background-repeat:no-repeat;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body,button,input,select,textarea{color:#202020}html{font-family:"Times New Roman",Times,serif;font-size:12px;line-height:1.62em;font-weight:400;background:#fbfbfb}html *{word-wrap:break-word}:focus{outline:0}::-moz-selection,::selection{background:#202020;color:#ebebeb;text-shadow:none}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{font-family:"Helvetica",sans-serif;font-weight:600}h1,.h1{font-size:4rem;line-height:1.0625em}h2,.h2{font-size:3rem;line-height:1.16667em}h3,.h3{font-size:2.25rem;line-height:1.22222em}h4,.h4{font-size:1.75rem;line-height:1.28571em}h5,.h5{font-size:1.25rem;line-height:1.4em}h6,.h6{font-size:1rem;line-height:1.5em}h1,.h1{margin:0 0 1rem}h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{margin:0 0 0.5rem}p+h1,p+.h1,p+h2,p+.h2,p+h3,p+.h3,p+h4,p+.h4,p+h5,p+.h5,p+h6,p+.h6{margin-top:2rem}img+p,img+ul,img+ol,img+dl,img+h1,img+.h1,img+h2,img+.h2,img+h3,img+.h3,img+h4,img+.h4,img+h5,img+.h5,img+h6,img+.h6{margin-top:1rem}p{font-size:1.25rem;line-height:1.4em;margin:0 0 1rem}ul,ol{margin:1rem 0 2rem 2rem;padding:0 0 0 1rem}li{font-size:1.25rem;line-height:1.4em;margin:0 0 0.5rem}li:last-child{margin-bottom:0}ul{list-style:square}ul ul{list-style:disc}ul ul ul{list-style:circle}ol{list-style:decimal}ol ol{list-style:lower-alpha}ol ol ol{list-style:lower-roman}dl{padding:0;margin:1rem 0 2rem}dl dt,dl dd{font-size:1.25rem;line-height:1.4em}dl dt{font-weight:600;padding:1rem 0 0}dl dd{margin:0;padding:0}a{color:#1b4781;text-decoration:none}a:visited{color:#1b4781}a:hover{color:#173b6c}a:active{color:#dd4b39}a,a:visited,a:hover,a:active{-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}em{font-style:italic}small{font-size:.75em}strong{font-weight:600}sub,sup{line-height:0}abbr{border-bottom:1px dotted #333}address{font-style:italic;font-size:1.25rem;line-height:1.4em;margin:1rem 0 2rem}hr{display:block;width:100%;height:0;border:0;border-top:1px solid #dadada;margin:2rem 0;padding:0}audio,canvas,img,video{vertical-align:middle}code,pre{font-family:"Consolas","Courier New",monospace;font-size:1em}code{padding:0 0.25rem;border-radius:0.25rem;font-size:.8em;line-height:0;border:1px solid rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.05);text-shadow:1px 1px 1px rgba(255,255,255,0.75)}pre{display:block;color:#202020;background-color:#ebebeb;border:1px solid #dadada;margin:0 0 2rem;padding:0.5rem 1rem;border-radius:0.25rem;font-size:1.25rem;line-height:1.4em;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}table{width:100%;border:none;background:transparent;margin:0 0 2rem}table th,table td{font-size:1.25rem;line-height:1.4em;vertical-align:top;border-top:1px solid #dadada;padding:1rem 0.5rem}table th,table thead th{text-align:left;vertical-align:bottom;color:#202020;background:transparent;font-weight:600}table caption+thead tr:first-child th,table caption+thead tr:first-child td,table colgroup+thead tr:first-child th,table colgroup+thead tr:first-child td,table thead:first-child tr:first-child th,table thead:first-child tr:first-child td,table tbody:first-child tr:first-child th,table tbody:first-child tr:first-child td{border-top:0}table tbody tr:nth-child(2n) td{background:transparent}table tbody tr:nth-child(2n+1) td{background:transparent}table tbody:last-child td *:first-child,table tfoot:last-child td *:first-child{margin-top:0}table tbody:last-child td *:last-child,table tfoot:last-child td *:last-child{margin-bottom:0}blockquote{quotes:none;font-size:1.5rem;line-height:1.33333em;margin:0 0 2rem;padding:1rem 2rem;border:1px solid #dadada;border-width:0 0 0 0.5rem}blockquote:before,blockquote:after{content:'';content:none}blockquote p{font-size:1em}blockquote.pull-quote{border:1px solid #EBEBEB;border-width:1px 0;margin:24px 0;padding:12px 24px 12px 60px}blockquote.pull-quote p{margin:0;color:#4C4C4C;font-size:1.75rem;line-height:1.28571em}blockquote.pull-quote cite{font-style:italic;text-align:right;font-size:1.25rem;line-height:0.83333em;margin:0.5rem 0 0}blockquote.pull-quote>*:last-child{margin-bottom:0}form,form fieldset{margin:0 0 2rem;padding:0 0.75rem 0.5rem}form fieldset{border-radius:0.25rem}form input[type="text"],form input[type="email"],form input[type="password"],form textarea,form select{display:block;width:20rem;max-width:100%;margin:0 0 2rem;padding:0.5rem;outline:none;border-radius:0.25rem;border:1px solid #dadada;background:#fafafa;color:#707070}form select{padding:0}form input[type="text"]:focus,form input[type="password"]:focus,form input[type="email"]:focus,form textarea:focus{border:1px solid #c1c1c1;background:#fbfbfb;color:#202020;box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2)}form textarea{min-height:5rem;resize:vertical}form label,form legend{display:block;font-family:"Helvetica",sans-serif;font-weight:600;font-size:1.5rem;margin:0 0 0.5rem}form select{width:20rem}form input[type="checkbox"]{display:inline}form label span,form legend span{font-weight:normal;font-size:1.25rem}button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;cursor:pointer;font-family:"Helvetica",sans-serif;font-weight:600;text-transform:uppercase;text-align:center;font-size:1rem;line-height:2em;border:none;margin:0 0.5rem 0.5rem 0;padding:0.5rem 2rem;background:#4d90fe;color:#fbfbfb}button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{background:#3480fe;color:#fff}button:active,input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active{background:#dd4b39;color:#fff}button.btn-primary,input[type="submit"].btn-primary,input[type="reset"].btn-primary,input[type="button"].btn-primary{color:#4d90fe;background:#fbfbfb}button.btn-disabled,input[type="submit"].btn-disabled,input[type="reset"].btn-disabled,input[type="button"].btn-disabled{color:#dadada;background:#c1c1c1}button.full-width,input[type="submit"].full-width,input[type="reset"].full-width,input[type="button"].full-width{width:100%;padding-left:0 !important;padding-right:0 !important;text-align:center}button button::-moz-focus-inner,button input::-moz-focus-inner,input[type="submit"] button::-moz-focus-inner,input[type="submit"] input::-moz-focus-inner,input[type="reset"] button::-moz-focus-inner,input[type="reset"] input::-moz-focus-inner,input[type="button"] button::-moz-focus-inner,input[type="button"] input::-moz-focus-inner{border:0;padding:0}/* -** Author's Styles -==================================================================================== -*/p.lead{color:#707070;font-size:1.5rem;line-height:1.33333em}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.small-caps{font-variant:small-caps}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}img.img-scaled{max-width:100%;height:auto}img.img-bordered{padding:2px;border:1px solid #dadada}img.img-circle{border-radius:100%}/* -** Helpers, Vendors & Media -==================================================================================== -*/.pull-left{float:left}.pull-right{float:right}.cf,form,form fieldset,.group,.clearfix{zoom:1}.cf:before,form:before,form fieldset:before,.cf:after,form:after,form fieldset:after,.group:before,.group:after,.clearfix:before,.clearfix:after{content:"";display:table}.cf:after,form:after,form fieldset:after,.group:after,.clearfix:after{clear:both}.hide-text{font:0/0 a;text-shadow:none;color:transparent}.ir{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}.ir:before{display:block;content:"";width:0;height:100%}.hidden{display:none !important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.unselectable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.browsehappy{margin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0}@media print{*{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}@page{margin:0.5cm}p,h2,.h2,h3,.h3{orphans:3;widows:3}h2,.h2,h3,.h3{page-break-after:avoid}} +*/article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}*{background-repeat:no-repeat;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;vertical-align:middle;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto}html,button,input,select,textarea{font-family:"Times New Roman",Times,serif;color:#202020}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:12px;line-height:1.62em;font-weight:400;background:#fbfbfb}body{margin:0}::-moz-selection{background:#202020;color:#ebebeb;text-shadow:none}::selection{background:#202020;color:#ebebeb;text-shadow:none}h1,h2,h3,h4,h5,h6{font-family:"Helvetica",sans-serif;font-weight:600}h1,.h1{font-size:4rem;line-height:1.0625em}h2,.h2{font-size:3rem;line-height:1.16667em}h3,.h3{font-size:2.25rem;line-height:1.22222em}h4,.h4{font-size:1.75rem;line-height:1.28571em}h5,.h5{font-size:1.25rem;line-height:1.4em}h6,.h6{font-size:1rem;line-height:1.5em}h1{margin:0 0 1rem}h2,h3,h4,h5,h6{margin:0 0 0.5rem}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6{margin-top:2rem}img+p,img+ul,img+ol,img+dl,img+h1,img+h2,img+h3,img+h4,img+h5,img+h6{margin-top:1rem}p{font-size:1.25rem;line-height:1.4em;margin:0 0 1rem}ul,ol{margin:1rem 0 2rem 2rem;padding:0 0 0 1rem}li{font-size:1.25rem;line-height:1.4em;margin:0 0 0.5rem}li:last-child{margin-bottom:0}ul{list-style:square}ul ul{list-style:disc}ul ul ul{list-style:circle}ol{list-style:decimal}ol ol{list-style:lower-alpha}ol ol ol{list-style:lower-roman}dl{padding:0;margin:1rem 0 2rem}dl dt,dl dd{font-size:1.25rem;line-height:1.4em}dl dt{font-weight:600;padding:1rem 0 0}dl dd{margin:0;padding:0}a{color:#1b4781;text-decoration:none;background:transparent}a:focus{outline:thin dotted}a:visited{color:#1b4781}a:hover{color:#173b6c;outline:0}a:active{color:#dd4b39;outline:0}a,a:visited,a:hover,a:active{-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}em{font-style:italic}strong{font-weight:600}dfn{font-style:italic}mark{color:#202020;background:#ff0}abbr[title]{border-bottom:1px dotted}address{font-size:1.25rem;line-height:1.4em;font-style:italic;margin:1em 0 2em}hr{display:block;width:100%;height:0;margin:2em 0;padding:0;border:0;border-top:1px solid #dadada;-moz-box-sizing:content-box;box-sizing:content-box}code,kbd,pre,samp{font-family:"Consolas","Courier New",monospace;font-size:1em}pre{white-space:pre-wrap}audio,canvas,img,video{vertical-align:middle}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0 0 2em}table{border-spacing:0;border-collapse:collapse}fieldset{border:1px solid #dadada;margin:0 .25em;padding:0.25em 0.5em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,input[type="reset"],input[type="submit"],html input[type="button"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top} /* +** ==================================================================================== +** Borrowing modules from: @sassy-developer-404, @edgar-allan-poe, etc. +** ------------------------------------------------------------------------------------ +** Don't forget to give credit if you're reusing people's modules. +======================================================================================== +*/blockquote{quotes:none;font-size:1.5rem;line-height:1.33333em;margin:0 0 2rem;padding:1rem 2rem;border:1px solid #dadada;border-width:0 0 0 0.5rem}blockquote:before,blockquote:after{content:'';content:none}blockquote p{font-size:1em}blockquote.pull-quote{border:1px solid #EBEBEB;border-width:1px 0;margin:24px 0;padding:12px 24px 12px 60px}blockquote.pull-quote p{margin:0;color:#4C4C4C;font-size:1.75rem;line-height:1.28571em}blockquote.pull-quote cite{font-style:italic;text-align:right;font-size:1.25rem;line-height:0.83333em;margin:0.5rem 0 0}blockquote.pull-quote>*:last-child{margin-bottom:0}button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;cursor:pointer;font-family:"Helvetica",sans-serif;font-weight:600;text-transform:uppercase;text-align:center;font-size:1rem;line-height:2em;border:none;margin:0 0.5rem 0.5rem 0;padding:0.5rem 2rem;background:#4d90fe;color:#fbfbfb}button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{background:#3480fe;color:#fff}button:active,input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active{background:#dd4b39;color:#fff}button.btn-primary,input[type="submit"].btn-primary,input[type="reset"].btn-primary,input[type="button"].btn-primary{color:#4d90fe;background:#fbfbfb}button.btn-disabled,input[type="submit"].btn-disabled,input[type="reset"].btn-disabled,input[type="button"].btn-disabled{color:#dadada;background:#c1c1c1}button.full-width,input[type="submit"].full-width,input[type="reset"].full-width,input[type="button"].full-width{width:100%;padding-left:0 !important;padding-right:0 !important;text-align:center}code{padding:0 0.25rem;border-radius:0.25rem;font-size:.8em;line-height:0;border:1px solid rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.05);text-shadow:1px 1px 1px rgba(255,255,255,0.75)}pre{display:block;color:#202020;background-color:#ebebeb;border:1px solid #dadada;margin:0 0 2rem;padding:0.5rem 1rem;border-radius:0.25rem;font-size:1.25rem;line-height:1.4em;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}form,fieldset{margin:0 0 2rem;padding:0 0.75rem 0.5rem}fieldset{border-radius:0.25rem}input[type="text"],input[type="email"],input[type="password"],textarea,select{display:block;width:20rem;max-width:100%;margin:0 0 2rem;padding:0.5rem;outline:none;border-radius:0.25rem;border:1px solid #dadada;background:#fafafa;color:#707070}select{padding:0}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus{border:1px solid #c1c1c1;background:#fbfbfb;color:#202020;box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2)}textarea{min-height:5rem;resize:vertical}label,legend{display:block;font-family:"Helvetica",sans-serif;font-weight:600;font-size:1.5rem;margin:0 0 0.5rem}select{width:20rem}input[type="checkbox"]{display:inline}label span,legend span{font-weight:normal;font-size:1.25rem}img.img-scaled{max-width:100%;height:auto}img.img-bordered{padding:2px;border:1px solid #dadada}img.img-circle{border-radius:100%}table{width:100%;border:none;background:transparent;margin:0 0 2rem}table th,table td{font-size:1.25rem;line-height:1.4em;vertical-align:top;border-top:1px solid #dadada;padding:1rem 0.5rem}table th,table thead th{text-align:left;vertical-align:bottom;color:#202020;background:transparent;font-weight:600}table caption+thead tr:first-child th,table caption+thead tr:first-child td,table colgroup+thead tr:first-child th,table colgroup+thead tr:first-child td,table thead:first-child tr:first-child th,table thead:first-child tr:first-child td,table tbody:first-child tr:first-child th,table tbody:first-child tr:first-child td{border-top:0}table tbody tr:nth-child(2n) td{background:transparent}table tbody tr:nth-child(2n+1) td{background:transparent}table tbody:last-child td *:first-child,table tfoot:last-child td *:first-child{margin-top:0}table tbody:last-child td *:last-child,table tfoot:last-child td *:last-child{margin-bottom:0}.browsehappy{margin:0;padding:0.25em 0.5em;background:#ccc;color:#000} /* +** ==================================================================================== +** John D'oh's Styles +** ------------------------------------------------------------------------------------ +** Don't forget to give yourself credit. +======================================================================================== +*/p.lead{color:#707070;font-size:1.5rem;line-height:1.33333em}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.small-caps{font-variant:small-caps}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.pull-left{float:left}.pull-right{float:right}.cf,form,fieldset,.group,.clearfix{zoom:1}.cf:before,form:before,fieldset:before,.cf:after,form:after,fieldset:after,.group:before,.group:after,.clearfix:before,.clearfix:after{content:"";display:table}.cf:after,form:after,fieldset:after,.group:after,.clearfix:after{clear:both}.hide-text{font:0/0 a;text-shadow:none;color:transparent}.ir{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}.ir:before{display:block;content:"";width:0;height:100%}.hidden{display:none !important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.unselectable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}@media print{*{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}@page{margin:0.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}} /* +** ==================================================================================== +** Using Vendor X +** ------------------------------------------------------------------------------------ +** Don't forget to give credit to vendors as well. +======================================================================================== +*/ diff --git a/css/scss/base/_base.scss b/css/scss/base/_base.scss index 7772f66..d80a98c 100644 --- a/css/scss/base/_base.scss +++ b/css/scss/base/_base.scss @@ -1,55 +1,107 @@ -/*! -** Base12 v0.3-beta - Updated: August 10, 2013 - http://cballenar.github.io/base12/ -==================================================================================== -*/ +/* ==================================================================================== +** Base12 - Core Base12 styles. Avoid editing this stylesheet for easier updating. +==================================================================================== */ -/* Reusable Mixins +/* HTML5 display definitions ------------------------------------------------------------------------------ */ -@mixin body-copy-sizing { @include rem('font-size', $fs-body); @include em('line-height', $fs-body, $lh-body); } +// Correct `block` display not defined in IE 8/9. +article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { + display: block; } -/* Global Styles +// Correct `inline-block` display not defined in IE 8/9. +audio, canvas, video { + display: inline-block; } + +// Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. +audio:not([controls]) { + display: none; + height: 0; } + +// Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. Known issue: no IE 6 support. +// Hide the `template` element in IE, Safari, and Firefox < 22. +[hidden], +template { + display: none; } + + +/* Switches for universal properties + * ------------------------------------------------------------------------------ + * http://css-tricks.com/things-it-might-be-funuseful-to-try-the-universal-selector-on/ ------------------------------------------------------------------------------ */ * { + // Switch universal background-repeat. @if $bg-no-repeat == true { background-repeat: no-repeat; } + // Switch universal relative positioning. @if $it-s-all-relative == true { - position:relative; } + position: relative; } + // Switch universal box-sizing @if $box-sizing-for-all == true { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - box-sizing: border-box; } } + box-sizing: border-box; } + + // Switch universal box-sizing + @if $vertical-align-middle == true { + vertical-align: middle; } + + // Switch universal word-break + // Prevent URLs from breaking out of container + // http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ + @if $vertical-align-middle == true { + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; // Non standard for webkit -html, body, button, input, select, textarea { color: $font-body-copy-color; } + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; } } + + +/* Base +------------------------------------------------------------------------------ */ + +// Address `font-family` inconsistency between `textarea` and other form elements +html, button, input, select, textarea { + font-family: $font-body-copy; + color: $font-body-copy-color; } html { - font-family: $font-body-copy; - font-size: $base-font-size; - line-height: $base-line-height; - font-weight: $font-normal-weight; + // Prevent iOS text size adjust after orientation change, without disabling user zoom. + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; - background: $body-bg; + // Set values from variables.scss + font-size: $base-font-size; + line-height: $base-line-height; + font-weight: $font-normal-weight; - * { word-wrap: break-word; } }/* Webkit Text Wrap Fix */ + background: $body-bg; } -:focus { outline: 0; } +// Address margins handled incorrectly in IE 6/7. +body { + margin: 0; } -::-moz-selection, -::selection { background: $selection-bg; color: $selection-text; text-shadow: none; } +// Customize selected elements. These selection rule sets have to be separate. +::-moz-selection { + background: $selection-bg; color: $selection-text; text-shadow: none; } +::selection { + background: $selection-bg; color: $selection-text; text-shadow: none; } /* Headings ------------------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: $font-heading; font-weight: $font-heading-weight; } -h1 { @include rem('font-size', $fs-h1); @include em('line-height', $fs-h1, $lh-h1); } -h2 { @include rem('font-size', $fs-h2); @include em('line-height', $fs-h2, $lh-h2); } -h3 { @include rem('font-size', $fs-h3); @include em('line-height', $fs-h3, $lh-h3); } -h4 { @include rem('font-size', $fs-h4); @include em('line-height', $fs-h4, $lh-h4); } -h5 { @include rem('font-size', $fs-h5); @include em('line-height', $fs-h5, $lh-h5); } -h6 { @include rem('font-size', $fs-h6); @include em('line-height', $fs-h6, $lh-h6); } +h1, %h1 { @include rem('font-size', $fs-h1); @include em('line-height', $fs-h1, $lh-h1); } +h2, %h2 { @include rem('font-size', $fs-h2); @include em('line-height', $fs-h2, $lh-h2); } +h3, %h3 { @include rem('font-size', $fs-h3); @include em('line-height', $fs-h3, $lh-h3); } +h4, %h4 { @include rem('font-size', $fs-h4); @include em('line-height', $fs-h4, $lh-h4); } +h5, %h5 { @include rem('font-size', $fs-h5); @include em('line-height', $fs-h5, $lh-h5); } +h6, %h6 { @include rem('font-size', $fs-h6); @include em('line-height', $fs-h6, $lh-h6); } h1 { @include rem('margin', 0 0 12px); } h2, @@ -58,22 +110,21 @@ h4, h5, h6 { @include rem('margin', 0 0 6px); } - // Adjust spacing for content - p + h1, p + h2, p + h3, - p + h4, p + h5, p + h6 { @include rem('margin-top', 24px); } - - img + p, - img + ul, img + ol, img + dl, - img + h1, img + h2, img + h3, - img + h4, img + h5, img + h6 { @include rem('margin-top', 12px); } - +// Adjust spacing for content +p + h1, p + h2, p + h3, +p + h4, p + h5, p + h6 { @include rem('margin-top', 24px); } +img + p, +img + ul, img + ol, img + dl, +img + h1, img + h2, img + h3, +img + h4, img + h5, img + h6 { @include rem('margin-top', 12px); } /* Paragraphs & Lists ------------------------------------------------------------------------------ */ p { - @include body-copy-sizing; + @include rem('font-size', $fs-body); + @include em('line-height', $fs-body, $lh-body); @include rem('margin', 0 0 12px); } ul, @@ -82,7 +133,8 @@ ol{ @include rem('padding', 0 0 0 12px); } li { - @include body-copy-sizing; + @include rem('font-size', $fs-body); + @include em('line-height', $fs-body, $lh-body); @include rem('margin', 0 0 6px); &:last-child { margin-bottom: 0; } } @@ -113,273 +165,196 @@ dl { /* Links ------------------------------------------------------------------------------ */ -a { color: $link-color; - text-decoration:none; +a { + color: $link-color; + text-decoration: none; + + // Remove the gray background color from active links in IE 10. + background: transparent; + + // Address `outline` inconsistency between Chrome and other browsers. + &:focus { outline: thin dotted; } + + // outline:0 to Improve readability when focused and also mouse hovered in all browsers. &:visited { color: $link-color-v; } - &:hover { color: $link-color-h; } - &:active { color: $link-color-a; } + &:hover { color: $link-color-h; outline: 0; } + &:active { color: $link-color-a; outline: 0; } - @if $animate-all-links == true { // Switch animations for all links - &, &:visited, &:hover, &:active { @include transition(all, .2s, ease); } } } + // Switch animations for all links + @if $animate-all-links == true { + &, + &:visited, + &:hover, + &:active { + @include transition(all, .2s, ease); } } } -/* Additional elements +/* Additional Typography elements ------------------------------------------------------------------------------ */ em { font-style: italic; } -small { font-size: .75em; } strong { font-weight: $font-strong-weight; } -sub, sup { line-height: 0; } +// Address styling not present in Safari 5 and Chrome. +dfn { font-style: italic; } + +// Address styling not present in IE 8/9. +mark { + color: $mark-text-color; + background: $mark-bg-color;} -abbr { border-bottom: 1px dotted #333; } +// Address styling not present in IE 8/9, Safari 5, and Chrome. +abbr[title] { border-bottom: 1px dotted; } address { + @include rem('font-size', $fs-body); + @include em('line-height', $fs-body, $lh-body); font-style:italic; - @include body-copy-sizing; - @include rem('margin', 12px 0 24px); } + margin: 1em 0 2em; } +// A better HR element hr { display: block; width: 100%; height: 0; + margin: 2em 0; padding: 0; border: 0; border-top: $border; - @include rem('margin', 24px 0); padding: 0; } + // Address differences between Firefox and other browsers. + -moz-box-sizing: content-box; + box-sizing: content-box; } -/* Images & Media - * Remove the gap between images, videos, audio and canvas and the bottom of - * their containers: h5bp.com/i/440 ------------------------------------------------------------------------------- */ -audio, -canvas, -img, -video { vertical-align:middle; } - - -/* Optional Elements - * The styles below can be turned off from the variables stylesheet ------------------------------------------------------------------------------- */ - -@if $style-code == true { /* Code ------------------------------------------------------------------------------- */ -code, pre { font-family: $font-monospace; font-size: 1em; } - -code { - @include rem('padding', 0 3px); - @include rem('border-radius', 3px); - - font-size: .8em; line-height: 0; - - border: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgba(0, 0, 0, 0.05); - text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.75); } +// Correct font family set oddly in Safari 5 and Chrome. +code, kbd, pre, samp { + font-family: $font-monospace; + font-size: 1em; } +// Improve readability of pre-formatted text in all browsers. pre { - display: block; + white-space: pre-wrap; } - color: $gray-darker; - background-color: $gray-light; - border: $border; - @include rem('margin', 0 0 24px); - @include rem('padding', 6px 12px); - @include rem('border-radius', 3px); +// Remove the gap between images, videos, audio and canvas and the bottom of their containers: h5bp.com/i/440 +audio, canvas, img, video { + vertical-align: middle; } - @include rem('font-size', $fs-body); - @include em('line-height', $fs-body, 21px); - white-space: pre-wrap; - word-break: break-all; - word-wrap: break-word; } } +// Set consistent quote types. +q { + quotes: "\201C" "\201D" "\2018" "\2019"; } +// Address inconsistent and variable font size in all browsers. +small { + font-size: 80%; } -@if $style-tables == true { /* Tables ------------------------------------------------------------------------------- */ -table, -%table { - width: 100%; - border: $table-border; - background: $table-bg; - @include rem('margin', 0 0 24px); - - th, td { - @include body-copy-sizing; - vertical-align: top; - border-top: $border; - - @include rem('padding', 12px 6px); } - - thead > tr > th { } - - th, - thead th, { - text-align: left; - vertical-align: bottom; - color: $th-color; - background: $th-bg; - font-weight: $font-strong-weight; } - - caption + thead, - colgroup + thead, - thead:first-child, - tbody:first-child { - tr:first-child { - th, td { border-top: 0; } } } - - tbody tr { - &:nth-child(2n) td { background: $tr-even; } - &:nth-child(2n+1) td { background: $tr-odd; } } - - tbody:last-child td, - tfoot:last-child td { - *:first-child { margin-top: 0; } - *:last-child { margin-bottom: 0; } } } } - - -@if $style-blockquotes == true { /* Blockquotes ------------------------------------------------------------------------------- */ -blockquote, -%blockquote { - quotes: none; - - @include rem('font-size', $fs-body-accent); - @include em('line-height', $fs-body-accent, $lh-body-accent); - @include rem('margin', 0 0 24px); - @include rem('padding', 12px 24px); +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +sub, sup { + font-size: .75em; + line-height: 0; + position: relative; + vertical-align: baseline; } - border: $border; - @include rem('border-width', 0 0 0 6px); +sup { top: -0.5em; } +sub { bottom: -0.25em; } - &:before, - &:after { content: ''; content: none; } - p { font-size: 1em; } - - // Alternative style for blockquote - &.pull-quote { - border: 1px solid #EBEBEB; border-width:1px 0; - margin: 24px 0; padding: 12px 24px 12px 60px; +/* Embedded Content +------------------------------------------------------------------------------ */ +// Remove border when inside `a` element in IE 8/9. +img { border: 0; } - p { - margin: 0; - color: #4C4C4C; - @include rem('font-size', 21px); - @include em('line-height', 21px, 27px); } +// Correct overflow displayed oddly in IE 9. +svg:not(:root) { overflow: hidden; } - cite { - font-style: italic; - text-align:right; - @include rem('font-size', 15px); - @include em('line-height', 18px, 15px); +// Address margin not present in IE 8/9 and Safari 5. +figure { margin: 0 0 2em; } - @include rem('margin', 6px 0 0); } - & > *:last-child { margin-bottom:0; } } } } +/* Tables +------------------------------------------------------------------------------ */ +// Remove most spacing between table cells. +table { + border-spacing: 0; + border-collapse: collapse; } -@if $style-forms == true { /* Form Elements ------------------------------------------------------------------------------- - Thanks to Dave Gamache for Skeleton [https://github.com/dhg/Skeleton] ------------------------------------------------------------------------------- */ -form, -%form { - &, - fieldset { - @include rem('margin', 0 0 24px); - @include rem('padding', 0 9px 6px); - @extend .cf; } - - fieldset { @include rem('border-radius', 3px); } - - input[type="text"], - input[type="email"], - input[type="password"], - textarea, - select { - display: block; - @include rem('width', 240px); max-width: 100%; - - @include rem('margin', 0 0 24px); - @include rem('padding', 6px); - - outline: none; - @include rem('border-radius', 3px); - - border: $border; - background: $form-field-bg; - color: $form-field-text; } - - select { padding: 0; } - - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - textarea:focus { - border: $form-field-border-focus; - background: $form-field-bg-focus; - color: $form-field-text-focus; - box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); } - - textarea { - @include rem('min-height', 60px); - resize: vertical; } - - label, legend { - display: block; - font-family: $font-heading; - font-weight: $font-strong-weight; - @include rem('font-size', 18px); - @include rem('margin', 0 0 6px);} - - select { - @include rem('width', 240px); } - - input[type="checkbox"] { - display: inline; } - - label span, - legend span { - font-weight: normal; - @include rem('font-size', 15px); } } } - - -@if $style-buttons == true { /* Buttons +/* Forms ------------------------------------------------------------------------------ */ +// Define consistent border, margin, and padding. +fieldset { + border: $border; + margin: 0 .25em; + padding: 0.25em 0.5em 0.75em; } + +// Correct `color` not being inherited in IE 8/9. +// Remove padding so people aren't caught out if they zero out fieldsets. +legend { + border: 0; + padding: 0; } + +// Correct font family not being inherited in all browsers. +// Correct font size not being inherited in all browsers. +// Address margins set differently in Firefox 4+, Safari 5, and Chrome. +button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; } + +// Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. +button, input { + line-height: normal; } + +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. +// Correct `select` style inheritance in Firefox 4+ and Opera. +button, select { + text-transform: none; } + +// Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. +// Correct inability to style clickable `input` types in iOS. +// Improve usability and consistency of cursor style between image-type `input` and others. button, -%button, -input[type="submit"], input[type="reset"], -input[type="button"] { - display: inline-block; cursor: pointer; - - font-family: $font-heading; - font-weight: $font-strong-weight; - text-transform: uppercase; text-align:center; - @include rem('font-size', 12px); - @include em('line-height', 12px, 24px); - - border: none; - @include rem('margin', 0 6px 6px 0); - @include rem('padding', 6px 24px); - - background: $btn-default-bg; color: $btn-default-text; - - &:hover { background: $btn-hover-bg; color: $btn-hover-text; } - &:active { background: $btn-active-bg; color: $btn-active-text; } - - // Disabled - usually a grayed out button - &.btn-primary { - color: $btn-primary-bg; background: $btn-primary-text; } - - // Disabled - usually a grayed out button - &.btn-disabled { - color: $btn-disabled-bg; background: $btn-disabled-text; } - - // Full Width - &.full-width { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - text-align: center; } - -// Fix for odd Mozilla border & padding issues +input[type="submit"], +html input[type="button"] { + -webkit-appearance: button; + cursor: pointer; } + +// Re-set default cursor for disabled elements. +button[disabled], +html input[disabled] { + cursor: default;} + +// Address box sizing set to `content-box` in IE 8/9/10. +// Remove excess padding in IE 8/9/10. +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; } + +// Address `appearance` set to `searchfield` in Safari 5 and Chrome. +// Address `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). +input[type="search"] { + -webkit-appearance: textfield; + + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } + +// Remove inner padding and search cancel button in Safari 5 and Chrome on OS X. +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +// Remove inner padding and border in Firefox 4+. button::-moz-focus-inner, -input::-moz-focus-inner { border: 0; padding: 0; } } } \ No newline at end of file +input::-moz-focus-inner { + border: 0; + padding: 0; } + +// Remove default vertical scrollbar in IE 8/9. +// Improve readability and alignment in all browsers. +textarea { + overflow: auto; + vertical-align: top; } \ No newline at end of file diff --git a/css/scss/base/_normalize.scss b/css/scss/base/_normalize.scss deleted file mode 100644 index efab1b3..0000000 --- a/css/scss/base/_normalize.scss +++ /dev/null @@ -1,530 +0,0 @@ -/*! -** normalize.css v1.1.0 | MIT License | git.io/normalize -==================================================================================== -*/ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. - */ - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. - * Known issue: no IE 6 support. - */ - -[hidden] { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using - * `em` units. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-size: 100%; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ -} - -/** - * Address `font-family` inconsistency between `textarea` and other form - * elements. - */ - -html, -button, -input, -select, -textarea { - font-family: sans-serif; -} - -/** - * Address margins handled incorrectly in IE 6/7. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/** - * Address font sizes and margins set differently in IE 6/7. - * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, - * and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -h2 { - font-size: 1.5em; - margin: 0.83em 0; -} - -h3 { - font-size: 1.17em; - margin: 1em 0; -} - -h4 { - font-size: 1em; - margin: 1.33em 0; -} - -h5 { - font-size: 0.83em; - margin: 1.67em 0; -} - -h6 { - font-size: 0.67em; - margin: 2.33em 0; -} - -/** - * Address styling not present in IE 7/8/9, Safari 5, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -blockquote { - margin: 1em 40px; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - * Known issue: no IE 6/7 normalization. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Address styling not present in IE 6/7/8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address margins set differently in IE 6/7. - */ - -p, -pre { - margin: 1em 0; -} - -/** - * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -/** - * Address CSS quotes not supported in IE 6/7. - */ - -q { - quotes: none; -} - -/** - * Address `quotes` property not supported in Safari 4. - */ - -q:before, -q:after { - content: ''; - content: none; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Lists - ========================================================================== */ - -/** - * Address margins set differently in IE 6/7. - */ - -dl, -menu, -ol, -ul { - margin: 1em 0; -} - -dd { - margin: 0 0 0 40px; -} - -/** - * Address paddings set differently in IE 6/7. - */ - -menu, -ol, -ul { - padding: 0 0 0 40px; -} - -/** - * Correct list images handled incorrectly in IE 7. - */ - -nav ul, -nav ol { - list-style: none; - list-style-image: none; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/** - * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. - * 2. Improve image quality when scaled in IE 7. - */ - -img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ -} - -/** - * Correct overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/** - * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/** - * Correct margin displayed oddly in IE 6/7. - */ - -form { - margin: 0; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct color not being inherited in IE 6/7/8/9. - * 2. Correct text not wrapping in Firefox 3. - * 3. Correct alignment displayed oddly in IE 6/7. - */ - -legend { - border: 0; /* 1 */ - padding: 0; - white-space: normal; /* 2 */ - *margin-left: -7px; /* 3 */ -} - -/** - * 1. Correct font size not being inherited in all browsers. - * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, - * and Chrome. - * 3. Improve appearance and consistency in all browsers. - */ - -button, -input, -select, -textarea { - font-size: 100%; /* 1 */ - margin: 0; /* 2 */ - vertical-align: baseline; /* 3 */ - *vertical-align: middle; /* 3 */ -} - -/** - * Address Firefox 3+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ - *overflow: visible; /* 4 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * 1. Address box sizing set to content-box in IE 8/9. - * 2. Remove excess padding in IE 8/9. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 3+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * 1. Remove default vertical scrollbar in IE 6/7/8/9. - * 2. Improve readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/css/scss/base/_variables.scss b/css/scss/base/_variables.scss index 02c9c59..f6c0396 100644 --- a/css/scss/base/_variables.scss +++ b/css/scss/base/_variables.scss @@ -1,6 +1,14 @@ -/* Variables +/* ==================================================================================== +** Variables - Manage existing and new variables ==================================================================================== */ +/* Author Variables +------------------------------------------------------------------------------------ */ +$primary-color: #BADA55; +$accent-color: #DE1E7E; +// etc... + + /* Switches ------------------------------------------------------------------------------------ */ // Browser support @@ -11,15 +19,7 @@ $animate-all-links: true; // adds transition(all, .2s ease); to all link $bg-no-repeat: true; // adds * { background: no-repeat; } $it-s-all-relative: true; // adds * { position: relative; } $box-sizing-for-all: true; // adds * { box-sizing: border-box; } (w/ browser prefixes) - -// Styled elements (Disable for absolute control) -$style-blockquotes: true; -$style-tables: true; -$style-forms: true; -$style-buttons: true; -$style-code: true; - -// +$vertical-align-middle: true; // adds * { vertical-align: middle; } /* Type - use pixels for font-size & line-height @@ -99,6 +99,10 @@ $link-color-h: darken($link-color, 5%); $link-color-a: #DD4B39; $link-color-v: $link-color; +// Misc +$mark-bg-color: #FFFF00; +$mark-text-color: $font-body-copy-color; + // Borders $border-color: $gray; $border: 1px solid $border-color; diff --git a/css/scss/design/_design.scss b/css/scss/design/_design.scss index 6777ae2..2d1f431 100644 --- a/css/scss/design/_design.scss +++ b/css/scss/design/_design.scss @@ -1,4 +1,7 @@ -/* Design -======================================================================================= - Put all your layout and design related styles here. +/* ==================================================================================== +** Design - Manage layout and design related styles here. ==================================================================================== */ + + + + diff --git a/css/scss/design/_grid.scss b/css/scss/design/_grid.scss index 88e04a4..f158a7f 100644 --- a/css/scss/design/_grid.scss +++ b/css/scss/design/_grid.scss @@ -1,4 +1,7 @@ -/* Grid -======================================================================================= - Place your favorite grid system here. +/* ==================================================================================== +** Grid - Place your favorite grid system here. ==================================================================================== */ + + + + diff --git a/css/scss/helpers/_helpers.scss b/css/scss/design/_helpers.scss similarity index 67% rename from css/scss/helpers/_helpers.scss rename to css/scss/design/_helpers.scss index afee62e..b82c2b5 100644 --- a/css/scss/helpers/_helpers.scss +++ b/css/scss/design/_helpers.scss @@ -1,10 +1,41 @@ -/* Helpers -============================================================================== - The following styles help address special situations that may arise when - building the site, i.e. clearing floats. Unlike Modifiers, these elements - focus more on the function rather than making things visually interesting. +/* ==================================================================================== +** Helpers +======================================================================================= + The following styles help address special situations that may arise when building + the site, i.e. clearing floats. + Unlike Modifiers, these elements focus more on the function rather than making + things visually interesting. These styles have some modifications from the ones in the H5BP. -=========================================================================== */ +==================================================================================== */ + + +// Extend Headings to 'h' classes +.h1 { @extend %h1; } +.h2 { @extend %h2; } +.h3 { @extend %h3; } +.h4 { @extend %h4; } +.h5 { @extend %h5; } +.h6 { @extend %h6; } + + +// Paragraph lead text +p.lead { + color: $gray-dark; + @include rem('font-size', $fs-body-accent); + @include em('line-height', $fs-body-accent, $lh-body-accent); } + + +// Text Modifiers, used with tags +.lowercase { text-transform: lowercase; } +.uppercase { text-transform: uppercase; } +.small-caps { font-variant: small-caps; } + + +// Align content, can be used in blocks +.text-left { text-align: left; } +.text-center { text-align: center; } +.text-right { text-align: right; } + // Floated Elements .pull-left { float: left; } @@ -25,12 +56,14 @@ &:before, &:after { content: ""; display: table; } &:after { clear: both; } } + // Hide text .hide-text { font: 0/0 a; text-shadow: none; color: transparent; } + // Image Replacement .ir { background-color: transparent; @@ -43,6 +76,7 @@ display: block; content: ""; width: 0; height: 100%; } } + // Hide from both screenreaders and browsers: h5bp.com/u .hidden { display: none !important; @@ -70,12 +104,11 @@ position: static; width: auto; } } + // Hide visually and from screenreaders, but maintain layout .invisible { visibility: hidden; } -// Allows to make elements unselectable - Not spec'ed yet, use with caution. -.unselectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } -// Plugins -.browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } \ No newline at end of file +// Allows to make elements unselectable - Not spec'ed yet, use with caution. +.unselectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } \ No newline at end of file diff --git a/css/scss/design/_modules.scss b/css/scss/design/_modules.scss deleted file mode 100644 index b43b33f..0000000 --- a/css/scss/design/_modules.scss +++ /dev/null @@ -1,58 +0,0 @@ -/* Modules -======================================================================================= - Put all your modifiers, modules and objects here. -==================================================================================== */ - -/* Content Modifiers ------------------------------------------------------------------------------- - The following styles build upon the core elements and add some - interesting visual modifications. Unlike Helpers, these elements focus - more on making things visually interesting and less on the function. ------------------------------------------------------------------------------- */ - -// Extend Headings to 'h' classes -.h1 { @extend h1; } -.h2 { @extend h2; } -.h3 { @extend h3; } -.h4 { @extend h4; } -.h5 { @extend h5; } -.h6 { @extend h6; } - - -// Paragraph lead text -p.lead { - color: $gray-dark; - @include rem('font-size', $fs-body-accent); - @include em('line-height', $fs-body-accent, $lh-body-accent); } - - -// Text Modifiers, used with tags -.lowercase { text-transform: lowercase; } -.uppercase { text-transform: uppercase; } -.small-caps { font-variant: small-caps; } - - -// Align content, can be used in blocks -.text-left { text-align: left; } -.text-center { text-align: center; } -.text-right { text-align: right; } - - -// Image Modifiers -img { - &.img-scaled { - max-width: 100%; - height: auto; } - - &.img-bordered { - padding: 2px; - border: $border; } - - &.img-circle { - border-radius: 100%; } } - - -/* Modules & Objects, ------------------------------------------------------------------------------- - Enter all your module and object class here, e.g., .media, .callout, etc. ------------------------------------------------------------------------------- */ diff --git a/css/scss/design/_objects.scss b/css/scss/design/_objects.scss new file mode 100644 index 0000000..07f95f5 --- /dev/null +++ b/css/scss/design/_objects.scss @@ -0,0 +1,7 @@ +/* ==================================================================================== +** Objects - Manage existing & new objects, e.g., .media, .callout, etc. +==================================================================================== */ + + + + diff --git a/css/scss/media/_print.scss b/css/scss/design/_print.scss similarity index 90% rename from css/scss/media/_print.scss rename to css/scss/design/_print.scss index 1af8bd1..523b46f 100644 --- a/css/scss/media/_print.scss +++ b/css/scss/design/_print.scss @@ -1,7 +1,6 @@ -/* ========================================================================== - Print styles. - Inlined to avoid required HTTP connection: h5bp.com/r -========================================================================== */ +/* ==================================================================================== +** Print styles +==================================================================================== */ @media print { * { diff --git a/css/scss/media/_screens.scss b/css/scss/design/_screens.scss similarity index 60% rename from css/scss/media/_screens.scss rename to css/scss/design/_screens.scss index 75552ef..1754b6b 100644 --- a/css/scss/media/_screens.scss +++ b/css/scss/design/_screens.scss @@ -1,8 +1,6 @@ -/* ========================================================================== - Media Queries for Responsive Design. - These examples override the primary ('mobile first') styles. - Modify as content requires. -========================================================================== */ +/* ==================================================================================== +** Media Queries for Responsive Design. +==================================================================================== */ @media only screen and (min-width: 480px) { // Style adjustments for screens wider than 480px diff --git a/css/scss/formulas/_mixin-em.scss b/css/scss/formulas/_mixin-em.scss index d396e7f..6f70cb7 100644 --- a/css/scss/formulas/_mixin-em.scss +++ b/css/scss/formulas/_mixin-em.scss @@ -1,6 +1,6 @@ -/* +/* ==================================================================================== ** em() - By CBallenar [ https://github.com/cballenar ] -==================================================================================== +======================================================================================= 'em' is a Sass mixin that converts pixel values to em values Returns 1 line of code, converted em values diff --git a/css/scss/formulas/_mixin-rem.scss b/css/scss/formulas/_mixin-rem.scss index b632947..dc56cb0 100644 --- a/css/scss/formulas/_mixin-rem.scss +++ b/css/scss/formulas/_mixin-rem.scss @@ -1,6 +1,6 @@ -/* +/* ==================================================================================== ** rem() - By GrowDigital [ https://gist.github.com/growdigital/1778907 ] -==================================================================================== +======================================================================================= 'rem' is a Sass mixin that converts pixel values to rem values Returns 2 lines of code — regular pixel values and converted rem values diff --git a/css/scss/formulas/_mixin-transition.scss b/css/scss/formulas/_mixin-transition.scss index 468e88b..c9a692b 100644 --- a/css/scss/formulas/_mixin-transition.scss +++ b/css/scss/formulas/_mixin-transition.scss @@ -1,3 +1,6 @@ +/* ==================================================================================== +** transition() - By CBallenar [ https://github.com/cballenar ] +==================================================================================== */ @mixin transition($property:all, $duration:.5s, $timing: ease, $delay: null) { -webkit-transition: $property $duration $timing $delay; -moz-transition: $property $duration $timing $delay; diff --git a/css/scss/main.scss b/css/scss/main.scss index b569d09..1ee2069 100644 --- a/css/scss/main.scss +++ b/css/scss/main.scss @@ -1,32 +1,65 @@ -/* Main.css -======================================================================================= - Call all your partials from here +/* ==================================================================================== +** Main - Manage existing & new partials ==================================================================================== */ -@import + +/*! +** ==================================================================================== +** Base12 v0.5-beta - Sep 5, 2013 - http://cballenar.github.io/base12/ +** ----------------------------------------------------------------------------------- +** Includes normalize.css v2.1.3 & h5bp/main.css v4.2.0 +==================================================================================== +*/ @import + "base/variables" , "formulas/mixin-em" , "formulas/mixin-rem" , "formulas/mixin-transition" - , "base/normalize" - , "base/base"; + , "base/base" + +;/*! +** ==================================================================================== +** Borrowing modules from: @sassy-developer-404, @edgar-allan-poe, etc. +** ------------------------------------------------------------------------------------ +** Don't forget to give credit if you're reusing people's modules. +======================================================================================== +*/ @import + + "modules/blockquotes" + , "modules/buttons" + , "modules/code" + , "modules/forms" + , "modules/images" + , "modules/tables" + + , "modules/browse-happy" + +;/*! +** ==================================================================================== +** John D'oh's Styles +** ------------------------------------------------------------------------------------ +** Don't forget to give yourself credit. +======================================================================================== +*/ @import -/*! -** Author's Styles -==================================================================================== -*/ -@import "design/design" , "design/grid" - , "design/modules"; -/*! -** Helpers, Vendors & Media -==================================================================================== -*/ -@import - "helpers/helpers" - , "vendors/vendors" - , "media/screens" - , "media/print"; \ No newline at end of file + , "design/objects" + , "design/helpers" + + , "design/screens" + , "design/print" + +;/*! +** ==================================================================================== +** Using Vendor X +** ------------------------------------------------------------------------------------ +** Don't forget to give credit to vendors as well. +======================================================================================== +*/ @import + + "vendors/vendors" + +; \ No newline at end of file diff --git a/css/scss/modules/_blockquotes.scss b/css/scss/modules/_blockquotes.scss new file mode 100644 index 0000000..9b091e0 --- /dev/null +++ b/css/scss/modules/_blockquotes.scss @@ -0,0 +1,38 @@ +/* Blockquotes +------------------------------------------------------------------------------ */ +blockquote { + quotes: none; + + @include rem('font-size', $fs-body-accent); + @include em('line-height', $fs-body-accent, $lh-body-accent); + @include rem('margin', 0 0 24px); + @include rem('padding', 12px 24px); + + border: $border; + @include rem('border-width', 0 0 0 6px); + + &:before, + &:after { content: ''; content: none; } + + p { font-size: 1em; } + + // Alternative style for blockquote + &.pull-quote { + border: 1px solid #EBEBEB; border-width:1px 0; + margin: 24px 0; padding: 12px 24px 12px 60px; + + p { + margin: 0; + color: #4C4C4C; + @include rem('font-size', 21px); + @include em('line-height', 21px, 27px); } + + cite { + font-style: italic; + text-align:right; + @include rem('font-size', 15px); + @include em('line-height', 18px, 15px); + + @include rem('margin', 6px 0 0); } + + & > *:last-child { margin-bottom:0; } } } \ No newline at end of file diff --git a/css/scss/modules/_browse-happy.scss b/css/scss/modules/_browse-happy.scss new file mode 100644 index 0000000..d58356b --- /dev/null +++ b/css/scss/modules/_browse-happy.scss @@ -0,0 +1,5 @@ +/* Browse Happy +------------------------------------------------------------------------------ */ +.browsehappy { + margin: 0; padding: 0.25em 0.5em; + background: #ccc; color: #000; } \ No newline at end of file diff --git a/css/scss/modules/_buttons.scss b/css/scss/modules/_buttons.scss new file mode 100644 index 0000000..293e0da --- /dev/null +++ b/css/scss/modules/_buttons.scss @@ -0,0 +1,37 @@ +/* Buttons +------------------------------------------------------------------------------ */ +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; cursor: pointer; + + font-family: $font-heading; + font-weight: $font-strong-weight; + text-transform: uppercase; text-align:center; + @include rem('font-size', 12px); + @include em('line-height', 12px, 24px); + + border: none; + @include rem('margin', 0 6px 6px 0); + @include rem('padding', 6px 24px); + + background: $btn-default-bg; color: $btn-default-text; + + &:hover { background: $btn-hover-bg; color: $btn-hover-text; } + &:active { background: $btn-active-bg; color: $btn-active-text; } + + // Disabled - usually a grayed out button + &.btn-primary { + color: $btn-primary-bg; background: $btn-primary-text; } + + // Disabled - usually a grayed out button + &.btn-disabled { + color: $btn-disabled-bg; background: $btn-disabled-text; } + + // Full Width + &.full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; } } \ No newline at end of file diff --git a/css/scss/modules/_code.scss b/css/scss/modules/_code.scss new file mode 100644 index 0000000..631d862 --- /dev/null +++ b/css/scss/modules/_code.scss @@ -0,0 +1,27 @@ +/* Code +------------------------------------------------------------------------------ */ +code { + @include rem('padding', 0 3px); + @include rem('border-radius', 3px); + + font-size: .8em; line-height: 0; + + border: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgba(0, 0, 0, 0.05); + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.75); } + +pre { + display: block; + + color: $gray-darker; + background-color: $gray-light; + border: $border; + @include rem('margin', 0 0 24px); + @include rem('padding', 6px 12px); + @include rem('border-radius', 3px); + + @include rem('font-size', $fs-body); + @include em('line-height', $fs-body, 21px); + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; } \ No newline at end of file diff --git a/css/scss/modules/_forms.scss b/css/scss/modules/_forms.scss new file mode 100644 index 0000000..86502bb --- /dev/null +++ b/css/scss/modules/_forms.scss @@ -0,0 +1,62 @@ +/* Form Elements +------------------------------------------------------------------------------ + Thanks to Dave Gamache for Skeleton [https://github.com/dhg/Skeleton] +------------------------------------------------------------------------------ */ +form, +fieldset { + @include rem('margin', 0 0 24px); + @include rem('padding', 0 9px 6px); + @extend .cf; } + +fieldset { @include rem('border-radius', 3px); } + +input[type="text"], +input[type="email"], +input[type="password"], +textarea, +select { + display: block; + @include rem('width', 240px); max-width: 100%; + + @include rem('margin', 0 0 24px); + @include rem('padding', 6px); + + outline: none; + @include rem('border-radius', 3px); + + border: $border; + background: $form-field-bg; + color: $form-field-text; } + +select { padding: 0; } + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus, +textarea:focus { + border: $form-field-border-focus; + background: $form-field-bg-focus; + color: $form-field-text-focus; + box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); } + +textarea { + @include rem('min-height', 60px); + resize: vertical; } + +label, legend { + display: block; + font-family: $font-heading; + font-weight: $font-strong-weight; + @include rem('font-size', 18px); + @include rem('margin', 0 0 6px);} + +select { + @include rem('width', 240px); } + +input[type="checkbox"] { + display: inline; } + +label span, +legend span { + font-weight: normal; + @include rem('font-size', 15px); } \ No newline at end of file diff --git a/css/scss/modules/_images.scss b/css/scss/modules/_images.scss new file mode 100644 index 0000000..1bde8a7 --- /dev/null +++ b/css/scss/modules/_images.scss @@ -0,0 +1,13 @@ +/* Image modifiers +------------------------------------------------------------------------------ */ +img { + &.img-scaled { + max-width: 100%; + height: auto; } + + &.img-bordered { + padding: 2px; + border: $border; } + + &.img-circle { + border-radius: 100%; } } \ No newline at end of file diff --git a/css/scss/modules/_tables.scss b/css/scss/modules/_tables.scss new file mode 100644 index 0000000..c316055 --- /dev/null +++ b/css/scss/modules/_tables.scss @@ -0,0 +1,41 @@ +/* Tables +------------------------------------------------------------------------------ */ +table { + width: 100%; + border: $table-border; + background: $table-bg; + @include rem('margin', 0 0 24px); + + th, td { + @include rem('font-size', $fs-body); + @include em('line-height', $fs-body, $lh-body); + vertical-align: top; + border-top: $border; + + @include rem('padding', 12px 6px); } + + thead > tr > th { } + + th, + thead th, { + text-align: left; + vertical-align: bottom; + color: $th-color; + background: $th-bg; + font-weight: $font-strong-weight; } + + caption + thead, + colgroup + thead, + thead:first-child, + tbody:first-child { + tr:first-child { + th, td { border-top: 0; } } } + + tbody tr { + &:nth-child(2n) td { background: $tr-even; } + &:nth-child(2n+1) td { background: $tr-odd; } } + + tbody:last-child td, + tfoot:last-child td { + *:first-child { margin-top: 0; } + *:last-child { margin-bottom: 0; } } } \ No newline at end of file diff --git a/css/scss/vendors/_vendors.scss b/css/scss/vendors/_vendors.scss index 74c9676..9023801 100644 --- a/css/scss/vendors/_vendors.scss +++ b/css/scss/vendors/_vendors.scss @@ -3,4 +3,6 @@ This folder is for all plugins created by third-parties. Don't copy the styles to this file as it would make it difficult to update them. Instead, place them in this folder as partials and import them to this page. + You can also import them directly to the main.scss file for more direct management. ==================================================================================== */ +