From c08a6446ec001a977ee3368dac72f69f84ed69b4 Mon Sep 17 00:00:00 2001 From: Mike Francis Date: Mon, 1 Dec 2014 12:26:25 +0000 Subject: [PATCH] Variable name change --- scss/_vars.scss | 4 +-- scss/base/_forms.scss | 10 +++--- scss/base/_normalise.scss | 18 +++------- scss/generic/_reset.scss | 66 ++++-------------------------------- scss/generic/_utilities.scss | 6 ++-- scss/modules/_buttons.scss | 6 ++-- scss/style.scss | 2 +- style.css | 2 +- 8 files changed, 27 insertions(+), 87 deletions(-) diff --git a/scss/_vars.scss b/scss/_vars.scss index b812c3c..02c0192 100755 --- a/scss/_vars.scss +++ b/scss/_vars.scss @@ -7,7 +7,7 @@ $base-background-colour: #fff; $base-font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif; $base-font-size: 16; $base-line-height: 1.5; -$base-margin-bottom: ($base-font-size * $base-line-height) * 1px; +$base-spacing-unit: ($base-font-size * $base-line-height) * 1px; /** @@ -25,7 +25,7 @@ $breakpoint-ld: 2000px; $grid-max-width: 1200px; $grid-grid-columns: 12; -$grid-gutter: $base-margin-bottom; +$grid-gutter: $base-spacing-unit; /** diff --git a/scss/base/_forms.scss b/scss/base/_forms.scss index 2f4cef2..e751cc0 100755 --- a/scss/base/_forms.scss +++ b/scss/base/_forms.scss @@ -6,8 +6,8 @@ textarea { color: $base-colour; display: inline-block; font: inherit; - line-height: $base-margin-bottom; - padding: ($base-margin-bottom / 4); + line-height: $base-spacing-unit; + padding: ($base-spacing-unit / 4); width: 100%; } @@ -24,15 +24,15 @@ label { } select { - height: ($base-margin-bottom * 1.5); + height: ($base-spacing-unit * 1.5); } textarea { - min-height: ($base-margin-bottom * 4); + min-height: ($base-spacing-unit * 4); } .form__group { - margin-bottom: $base-margin-bottom; + margin-bottom: $base-spacing-unit; .form__group__controls { @extend .clearfix; label { diff --git a/scss/base/_normalise.scss b/scss/base/_normalise.scss index b195b62..a4fcac3 100755 --- a/scss/base/_normalise.scss +++ b/scss/base/_normalise.scss @@ -1,11 +1,3 @@ -*, -*:before, -*:after { - box-sizing: border-box; - font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} - html { background-color: $base-background-colour; color: $base-colour; @@ -28,7 +20,7 @@ p, hr, ul, ol { - margin-bottom: $base-margin-bottom; + margin-bottom: $base-spacing-unit; } h1, @@ -37,7 +29,7 @@ h3, h4, h5, h6 { - line-height: $base-margin-bottom; + line-height: $base-spacing-unit; } h1, @@ -53,7 +45,7 @@ th { ul, ol { - margin-left: $base-margin-bottom; + margin-left: $base-spacing-unit; } ul ul, @@ -69,7 +61,7 @@ img { blockquote { font-family: serif; - padding-left: $base-margin-bottom; + padding-left: $base-spacing-unit; } em { @@ -87,7 +79,7 @@ table { width: 100%; th, td { - padding: ($base-margin-bottom / 4); + padding: ($base-spacing-unit / 4); text-align: left; } } diff --git a/scss/generic/_reset.scss b/scss/generic/_reset.scss index 6969838..9c531ba 100755 --- a/scss/generic/_reset.scss +++ b/scss/generic/_reset.scss @@ -1,63 +1,11 @@ -/* - * HTML5 Reset - - * This is a slimmed down version of the following: - * http://html5doctor.com/html-5-reset-stylesheet - */ - -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { +* { border: 0; + box-sizing: border-box; font-size: 100%; - font: inherit; - margin: 0; - padding: 0; - vertical-align: baseline; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section, -main { - display: block; -} - -address, -caption, -cite, -dfn, -th, -var { + font-smoothing: antialiased; font-style: normal; font-weight: normal; -} - -blockquote, q { - quotes: none; -} - -blockquote, -q { - &:before, - &:after { - content: ''; - content: none; - } -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -th { - font-weight: bold; - text-align: left; -} + margin: 0; + padding: 0; + text-rendering: optimizeLegibility; +} \ No newline at end of file diff --git a/scss/generic/_utilities.scss b/scss/generic/_utilities.scss index 140ef66..3670df2 100755 --- a/scss/generic/_utilities.scss +++ b/scss/generic/_utilities.scss @@ -7,7 +7,7 @@ } img.alignleft { - margin-right: $base-margin-bottom; + margin-right: $base-spacing-unit; } .alignright { @@ -15,7 +15,7 @@ img.alignleft { } img.alignright { - margin-left : $base-margin-bottom; + margin-left : $base-spacing-unit; } .aligncenter { @@ -27,7 +27,7 @@ img.alignright { } img.aligncenter { - margin-bottom: $base-margin-bottom; + margin-bottom: $base-spacing-unit; } diff --git a/scss/modules/_buttons.scss b/scss/modules/_buttons.scss index 1643a98..ebe3195 100644 --- a/scss/modules/_buttons.scss +++ b/scss/modules/_buttons.scss @@ -6,9 +6,9 @@ display: inline-block; font: inherit; font-weight: bold; - height: ($base-margin-bottom * 1.5); - line-height: ($base-margin-bottom * 1.5); - padding: 0 $base-margin-bottom; + height: ($base-spacing-unit * 1.5); + line-height: ($base-spacing-unit * 1.5); + padding: 0 $base-spacing-unit; text-align: center; width: auto; &::-moz-focus-inner { diff --git a/scss/style.scss b/scss/style.scss index a87b176..7cc0ac4 100755 --- a/scss/style.scss +++ b/scss/style.scss @@ -16,4 +16,4 @@ Author: Mike Francis @import 'base/forms'; @import 'modules/nav'; -@import 'modules/buttons'; +@import 'modules/buttons'; \ No newline at end of file diff --git a/style.css b/style.css index 2a1b11c..0969fe8 100644 --- a/style.css +++ b/style.css @@ -1 +1 @@ -.container{max-width:1200px;margin:0 auto;padding:0 24px}.row{margin-left:-24px}.row:before,.row:after{content:'';display:table;line-height:0}.row:after{clear:both}.col{float:left;padding-left:24px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.col--ld-offset-0{margin-left:0%}.col--ld-1{width:8.33333%}.col--ld-offset-1{margin-left:8.33333%}.col--ld-2{width:16.66667%}.col--ld-offset-2{margin-left:16.66667%}.col--ld-3{width:25%}.col--ld-offset-3{margin-left:25%}.col--ld-4{width:33.33333%}.col--ld-offset-4{margin-left:33.33333%}.col--ld-5{width:41.66667%}.col--ld-offset-5{margin-left:41.66667%}.col--ld-6{width:50%}.col--ld-offset-6{margin-left:50%}.col--ld-7{width:58.33333%}.col--ld-offset-7{margin-left:58.33333%}.col--ld-8{width:66.66667%}.col--ld-offset-8{margin-left:66.66667%}.col--ld-9{width:75%}.col--ld-offset-9{margin-left:75%}.col--ld-10{width:83.33333%}.col--ld-offset-10{margin-left:83.33333%}.col--ld-11{width:91.66667%}.col--ld-offset-11{margin-left:91.66667%}.col--ld-12{width:100%}.col--ld-offset-12{margin-left:100%}@media only screen and (min-width: 641px) and (max-width: 1999px){.col--md-offset-0{margin-left:0%}.col--md-1{width:8.33333%}.col--md-offset-1{margin-left:8.33333%}.col--md-2{width:16.66667%}.col--md-offset-2{margin-left:16.66667%}.col--md-3{width:25%}.col--md-offset-3{margin-left:25%}.col--md-4{width:33.33333%}.col--md-offset-4{margin-left:33.33333%}.col--md-5{width:41.66667%}.col--md-offset-5{margin-left:41.66667%}.col--md-6{width:50%}.col--md-offset-6{margin-left:50%}.col--md-7{width:58.33333%}.col--md-offset-7{margin-left:58.33333%}.col--md-8{width:66.66667%}.col--md-offset-8{margin-left:66.66667%}.col--md-9{width:75%}.col--md-offset-9{margin-left:75%}.col--md-10{width:83.33333%}.col--md-offset-10{margin-left:83.33333%}.col--md-11{width:91.66667%}.col--md-offset-11{margin-left:91.66667%}.col--md-12{width:100%}.col--md-offset-12{margin-left:100%}}@media only screen and (max-width: 640px){.col--sd-offset-0{margin-left:0%}.col--sd-1{width:8.33333%}.col--sd-offset-1{margin-left:8.33333%}.col--sd-2{width:16.66667%}.col--sd-offset-2{margin-left:16.66667%}.col--sd-3{width:25%}.col--sd-offset-3{margin-left:25%}.col--sd-4{width:33.33333%}.col--sd-offset-4{margin-left:33.33333%}.col--sd-5{width:41.66667%}.col--sd-offset-5{margin-left:41.66667%}.col--sd-6{width:50%}.col--sd-offset-6{margin-left:50%}.col--sd-7{width:58.33333%}.col--sd-offset-7{margin-left:58.33333%}.col--sd-8{width:66.66667%}.col--sd-offset-8{margin-left:66.66667%}.col--sd-9{width:75%}.col--sd-offset-9{margin-left:75%}.col--sd-10{width:83.33333%}.col--sd-offset-10{margin-left:83.33333%}.col--sd-11{width:91.66667%}.col--sd-offset-11{margin-left:91.66667%}.col--sd-12{width:100%}.col--sd-offset-12{margin-left:100%}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;text-align:left}.alignleft{float:left}img.alignleft{margin-right:24px}.alignright{float:right}img.alignright{margin-left:24px}.aligncenter{display:block;margin-left:auto;margin-right:auto}img.aligncenter{margin-bottom:24px}.clearfix:before,.form__group .form__group__controls:before,.clearfix:after,.form__group .form__group__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__group .form__group__controls:after{clear:both}.sr-only{display:none}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-smoothing:antialiased;text-rendering:optimizeLegibility}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;min-height:100%}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol{margin-bottom:24px}h1,h2,h3,h4,h5,h6{line-height:24px}h1,h2,h3,h4,h5,h6,strong,th{font-weight:bold}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;height:auto;max-width:100%}blockquote{font-family:serif;padding-left:24px}em{font-style:italic}hr{background-color:#444;border:0;color:#444;height:1px}table{width:100%}table th,table td{padding:6px;text-align:left}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}label{display:block;font-weight:bold}select{height:36px}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__group .form__group__controls label{font-weight:normal}.form__group .form__group__controls.form__group__controls--inline label{display:inline-block}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block}.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;font:inherit;font-weight:bold;height:36px;line-height:36px;padding:0 24px;text-align:center;width:auto}.btn::-moz-focus-inner{border:0;padding:0} +.container{max-width:1200px;margin:0 auto;padding:0 24px}.row{margin-left:-24px}.row:before,.row:after{content:'';display:table;line-height:0}.row:after{clear:both}.col{float:left;padding-left:24px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.col--ld-offset-0{margin-left:0%}.col--ld-1{width:8.33333%}.col--ld-offset-1{margin-left:8.33333%}.col--ld-2{width:16.66667%}.col--ld-offset-2{margin-left:16.66667%}.col--ld-3{width:25%}.col--ld-offset-3{margin-left:25%}.col--ld-4{width:33.33333%}.col--ld-offset-4{margin-left:33.33333%}.col--ld-5{width:41.66667%}.col--ld-offset-5{margin-left:41.66667%}.col--ld-6{width:50%}.col--ld-offset-6{margin-left:50%}.col--ld-7{width:58.33333%}.col--ld-offset-7{margin-left:58.33333%}.col--ld-8{width:66.66667%}.col--ld-offset-8{margin-left:66.66667%}.col--ld-9{width:75%}.col--ld-offset-9{margin-left:75%}.col--ld-10{width:83.33333%}.col--ld-offset-10{margin-left:83.33333%}.col--ld-11{width:91.66667%}.col--ld-offset-11{margin-left:91.66667%}.col--ld-12{width:100%}.col--ld-offset-12{margin-left:100%}@media only screen and (min-width: 641px) and (max-width: 1999px){.col--md-offset-0{margin-left:0%}.col--md-1{width:8.33333%}.col--md-offset-1{margin-left:8.33333%}.col--md-2{width:16.66667%}.col--md-offset-2{margin-left:16.66667%}.col--md-3{width:25%}.col--md-offset-3{margin-left:25%}.col--md-4{width:33.33333%}.col--md-offset-4{margin-left:33.33333%}.col--md-5{width:41.66667%}.col--md-offset-5{margin-left:41.66667%}.col--md-6{width:50%}.col--md-offset-6{margin-left:50%}.col--md-7{width:58.33333%}.col--md-offset-7{margin-left:58.33333%}.col--md-8{width:66.66667%}.col--md-offset-8{margin-left:66.66667%}.col--md-9{width:75%}.col--md-offset-9{margin-left:75%}.col--md-10{width:83.33333%}.col--md-offset-10{margin-left:83.33333%}.col--md-11{width:91.66667%}.col--md-offset-11{margin-left:91.66667%}.col--md-12{width:100%}.col--md-offset-12{margin-left:100%}}@media only screen and (max-width: 640px){.col--sd-offset-0{margin-left:0%}.col--sd-1{width:8.33333%}.col--sd-offset-1{margin-left:8.33333%}.col--sd-2{width:16.66667%}.col--sd-offset-2{margin-left:16.66667%}.col--sd-3{width:25%}.col--sd-offset-3{margin-left:25%}.col--sd-4{width:33.33333%}.col--sd-offset-4{margin-left:33.33333%}.col--sd-5{width:41.66667%}.col--sd-offset-5{margin-left:41.66667%}.col--sd-6{width:50%}.col--sd-offset-6{margin-left:50%}.col--sd-7{width:58.33333%}.col--sd-offset-7{margin-left:58.33333%}.col--sd-8{width:66.66667%}.col--sd-offset-8{margin-left:66.66667%}.col--sd-9{width:75%}.col--sd-offset-9{margin-left:75%}.col--sd-10{width:83.33333%}.col--sd-offset-10{margin-left:83.33333%}.col--sd-11{width:91.66667%}.col--sd-offset-11{margin-left:91.66667%}.col--sd-12{width:100%}.col--sd-offset-12{margin-left:100%}}*{border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:100%;font-smoothing:antialiased;font-style:normal;font-weight:normal;margin:0;padding:0;text-rendering:optimizeLegibility}.alignleft{float:left}img.alignleft{margin-right:24px}.alignright{float:right}img.alignright{margin-left:24px}.aligncenter{display:block;margin-left:auto;margin-right:auto}img.aligncenter{margin-bottom:24px}.clearfix:before,.form__group .form__group__controls:before,.clearfix:after,.form__group .form__group__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__group .form__group__controls:after{clear:both}.sr-only{display:none}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;min-height:100%}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol{margin-bottom:24px}h1,h2,h3,h4,h5,h6{line-height:24px}h1,h2,h3,h4,h5,h6,strong,th{font-weight:bold}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;height:auto;max-width:100%}blockquote{font-family:serif;padding-left:24px}em{font-style:italic}hr{background-color:#444;border:0;color:#444;height:1px}table{width:100%}table th,table td{padding:6px;text-align:left}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}label{display:block;font-weight:bold}select{height:36px}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__group .form__group__controls label{font-weight:normal}.form__group .form__group__controls.form__group__controls--inline label{display:inline-block}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block}.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;font:inherit;font-weight:bold;height:36px;line-height:36px;padding:0 24px;text-align:center;width:auto}.btn::-moz-focus-inner{border:0;padding:0}