From c52c2eef44241f4daa03cabb07145c88380dac00 Mon Sep 17 00:00:00 2001 From: Carlos Ballena Date: Sat, 24 Aug 2013 11:15:08 -0400 Subject: [PATCH] Made updates to CSS, removed modifiers.scss and moved its contents to modules.scss which got moved into design/ More variables. Cleaner. --- README.md | 23 ++++--- css/main.css | 6 +- css/scss/base/_base.scss | 36 +++++++---- css/scss/base/_variables.scss | 23 ++++++- .../_modules.scss => design/_grid.scss} | 4 +- css/scss/design/_modifiers.scss | 61 ------------------- css/scss/design/_modules.scss | 58 ++++++++++++++++++ css/scss/helpers/_helpers.scss | 13 ++++ css/scss/main.scss | 6 +- 9 files changed, 137 insertions(+), 93 deletions(-) rename css/scss/{modules/_modules.scss => design/_grid.scss} (73%) delete mode 100644 css/scss/design/_modifiers.scss create mode 100644 css/scss/design/_modules.scss diff --git a/README.md b/README.md index 2871461..5061924 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ __A SCSS framework built around 12__ ## Huh... ? -Base12 is a framework that provides you with a basic SCSS folder structure for your projects. Base12 measurements are built around the number 12 . +Base12 is a framework that provides you with a basic SCSS folder structure for your projects. Its measurements are built around the number 12 for increased flexibility & math goodies. -Because Base12 uses the CSS from the [_HTML5 Boilerplate_](https://github.com/h5bp/html5-boilerplate/), it can be used in combination with it. +Because Base12 uses the starting CSS from the [_HTML5 Boilerplate_](https://github.com/h5bp/html5-boilerplate/), it can be used in combination with it. ### How do I use it? 1. Start a new project with the [Classic H5BP](http://www.initializr.com/) @@ -66,7 +66,6 @@ The directory structure is as follows: | | |- formulas/ | | |- helpers/ | | |- media/ -| | |- modules/ | | |- vendors/ ``` #### main.css @@ -79,7 +78,16 @@ Here you can find and add all your partials. 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. #### design/ -It contains two files `design` and `modifiers`. Design, as you can imagine, is where all the styles that define the design of the site are located. Modifiers are "element modifiers" they are simple classes that change existing elements, this includes things such as `p.lead` or `.subheader`. +It contains three files `design`, `grid`, and `modules`. + +##### _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. #### formulas/ Contains mixins and formulas used in Base12, users should keep their own formulas in this folder. @@ -90,9 +98,6 @@ As expected it contains helper classes, unlike `modifiers`, these helpers focus #### 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/ -We all love Object Oriented CSS, right? This is where we get to put all those sweet modules we gather from across the webiverse! (?). I would recommend keeping the modules in their own files and then `@import` them into the `modules` stylesheet for easy management. - #### vendors/ Styles from plugins and third-party vendors. Also keep as separate files and `@import` into `vendors` stylesheet. @@ -101,8 +106,10 @@ Styles from plugins and third-party vendors. Also keep as separate files and `@i ### Switches Turn features on/off according to your preferences. At the moment the features available to switch on/off are: - - Universal Box Sizing - REM to PX fallback + - Universal `box-sizing: border-box` + - Universal NO `background-repeat` + - Universal relativity `position: relative` - Styled blockquotes - Styled tables - Styled forms diff --git a/css/main.css b/css/main.css index e1b196a..cc7341f 100644 --- a/css/main.css +++ b/css/main.css @@ -4,10 +4,10 @@ */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/ ==================================================================================== -*/*{position:relative;background-repeat:no-repeat;-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+h2,p+.h2,p+h3,p+.h3,p+h4,p+.h4,p+h5,p+.h5,p+h6,p+.h6{margin-top:2rem}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>li{list-style:square}ol li{list-style:decimal}ol ol li{list-style:lower-alpha}ol ol ol li{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.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s 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}/* +*/*{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 ==================================================================================== -*/.pull-left{float:left}.pull-right{float:right}.subheader{color:#707070}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%}/* +*/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 ==================================================================================== -*/.cf,form,form fieldset,.clearfix{zoom:1}.cf:before,form:before,form fieldset:before,.cf:after,form:after,form fieldset:after,.clearfix:before,.clearfix:after{content:"";display:table}.cf:after,form:after,form fieldset: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}} +*/.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}} diff --git a/css/scss/base/_base.scss b/css/scss/base/_base.scss index a69f60e..7772f66 100644 --- a/css/scss/base/_base.scss +++ b/css/scss/base/_base.scss @@ -11,8 +11,11 @@ /* Global Styles ------------------------------------------------------------------------------ */ * { - position:relative; - background-repeat: no-repeat; + @if $bg-no-repeat == true { + background-repeat: no-repeat; } + + @if $it-s-all-relative == true { + position:relative; } @if $box-sizing-for-all == true { -webkit-box-sizing: border-box; @@ -55,12 +58,16 @@ h4, h5, h6 { @include rem('margin', 0 0 6px); } - // Adjust spacing after paragraphs - p + h2, - p + h3, - p + h4, - p + h5, - p + h6 { @include rem('margin-top', 24px); } + // 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 @@ -80,11 +87,13 @@ li { &:last-child { margin-bottom: 0; } } -ul > li { list-style: square; } +ul { list-style: $ul-style; } +ul ul { list-style: $ul-ul-style; } +ul ul ul { list-style: $ul-ul-ul-style; } -ol li { list-style: decimal; } -ol ol li { list-style: lower-alpha; } -ol ol ol li { list-style: lower-roman; } +ol { list-style: $ol-style; } +ol ol { list-style: $ol-ol-style; } +ol ol ol { list-style: $ol-ol-ol-style; } dl { padding: 0; @@ -111,7 +120,8 @@ a { color: $link-color; &:hover { color: $link-color-h; } &:active { color: $link-color-a; } - &, &:visited, &:hover, &:active { @include transition(all, .5s, ease); } } + @if $animate-all-links == true { // Switch animations for all links + &, &:visited, &:hover, &:active { @include transition(all, .2s, ease); } } } /* Additional elements diff --git a/css/scss/base/_variables.scss b/css/scss/base/_variables.scss index a459769..02c9c59 100644 --- a/css/scss/base/_variables.scss +++ b/css/scss/base/_variables.scss @@ -3,16 +3,25 @@ /* Switches ------------------------------------------------------------------------------------ */ -$box-sizing-for-all: true; -$rem-to-px-fallback: false; +// Browser support +$rem-to-px-fallback: false; // Adds px fallback to properties that use the rem() function -// Styled elements +// 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) + +// Styled elements (Disable for absolute control) $style-blockquotes: true; $style-tables: true; $style-forms: true; $style-buttons: true; $style-code: true; +// + + /* Type - use pixels for font-size & line-height ------------------------------------------------------------------------------------ */ // Base @@ -52,6 +61,14 @@ $lh-h6: 18px; $fs-body: 15px; $lh-body: 21px; +$ul-style: square; +$ul-ul-style: disc; +$ul-ul-ul-style: circle; + +$ol-style: decimal; +$ol-ol-style: lower-alpha; +$ol-ol-ol-style: lower-roman; + // blockquote, lead, etc. $fs-body-accent: 18px; $lh-body-accent: 24px; diff --git a/css/scss/modules/_modules.scss b/css/scss/design/_grid.scss similarity index 73% rename from css/scss/modules/_modules.scss rename to css/scss/design/_grid.scss index 2e0a409..88e04a4 100644 --- a/css/scss/modules/_modules.scss +++ b/css/scss/design/_grid.scss @@ -1,4 +1,4 @@ -/* Modules +/* Grid ======================================================================================= - Put all your module and object related styles here. + Place your favorite grid system here. ==================================================================================== */ diff --git a/css/scss/design/_modifiers.scss b/css/scss/design/_modifiers.scss deleted file mode 100644 index 8b2feeb..0000000 --- a/css/scss/design/_modifiers.scss +++ /dev/null @@ -1,61 +0,0 @@ -/* 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 interest and are less about the function. -=========================================================================== */ - -/* Floats ------------------------------------------------------------------------------- */ -.pull-left { float: left; } -.pull-right { float: right; } - - -/* Headers ------------------------------------------------------------------------------- */ -.h1 { @extend h1; } -.h2 { @extend h2; } -.h3 { @extend h3; } -.h4 { @extend h4; } -.h5 { @extend h5; } -.h6 { @extend h6; } - -.subheader { color: $gray-dark; } - - -/* Paragraphs ------------------------------------------------------------------------------- */ -p { - &.lead { - color: $gray-dark; - @include rem('font-size', $fs-body-accent); - @include em('line-height', $fs-body-accent, $lh-body-accent); } } - - -/* Text Modifiers ------------------------------------------------------------------------------- */ -.lowercase { text-transform: lowercase; } -.uppercase { text-transform: uppercase; } -.small-caps { font-variant: small-caps; } - -// Align -.text-left { text-align: left; } -.text-center { text-align: center; } -.text-right { text-align: right; } - - -/* Modifiers for Images ------------------------------------------------------------------------------- */ -img { - &.img-scaled { - max-width: 100%; - height: auto; } - - &.img-bordered { - padding: 2px; - border: $border; } - - &.img-circle { - border-radius: 100%; } } - - diff --git a/css/scss/design/_modules.scss b/css/scss/design/_modules.scss new file mode 100644 index 0000000..b43b33f --- /dev/null +++ b/css/scss/design/_modules.scss @@ -0,0 +1,58 @@ +/* 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/helpers/_helpers.scss b/css/scss/helpers/_helpers.scss index f45c9a0..afee62e 100644 --- a/css/scss/helpers/_helpers.scss +++ b/css/scss/helpers/_helpers.scss @@ -6,9 +6,22 @@ These styles have some modifications from the ones in the H5BP. =========================================================================== */ +// Floated Elements +.pull-left { float: left; } +.pull-right { float: right; } + + // Clearfix +// I decided to accomodate the different ways of naming .clearfix +// .cf - minimal one, you get a clearfix! +// .group - semantic one, you get a clearfix! +// .clearfix - standard, you get a clearfix! +// EVERYBODY GETS A CLEARFIX!!! +// P.S. Just to be clear, I'm quoting Neil Patrick Harris, playing Barney Stintson, imitating Oprah; not Oprah. .cf, +.group, .clearfix { zoom: 1; + &:before, &:after { content: ""; display: table; } &:after { clear: both; } } diff --git a/css/scss/main.scss b/css/scss/main.scss index 43f19b8..b569d09 100644 --- a/css/scss/main.scss +++ b/css/scss/main.scss @@ -17,9 +17,9 @@ ==================================================================================== */ @import - "design/modifiers" - , "design/design" - , "modules/modules"; + "design/design" + , "design/grid" + , "design/modules"; /*! ** Helpers, Vendors & Media