From 0fcf83793eb68c8029ac305830b9b1f99e71c1ee Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Mon, 15 Jul 2013 10:19:46 +0100 Subject: [PATCH] Yet more variables, and a fair bit of housekeeping --- Gruntfile.js | 2 +- css/Ribs.css | 71 +++++++++---------------------------------- css/Ribs.min.css | 4 +-- scss/Ribs.scss | 26 ++++++++-------- scss/_forms.scss | 22 +++++++------- scss/_grid.scss | 20 ++++++------ scss/_images.scss | 4 +-- scss/_links.scss | 4 +-- scss/_lists.scss | 10 +++--- scss/_mixins.scss | 7 ++--- scss/_typography.scss | 30 +++--------------- scss/_variables.scss | 18 ++++++++++- 12 files changed, 86 insertions(+), 132 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 6bb0afd..8f6301f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,7 +22,7 @@ module.exports = function(grunt) { cssmin: { compress: { options: { - banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */' + banner: '/* <%= pkg.name %> <%= pkg.version %> - https://github.com/nickpack/Ribs - <%= grunt.template.today("dd-mm-yyyy") %> */' }, files: { 'css/Ribs.min.css': 'css/Ribs.css' diff --git a/css/Ribs.css b/css/Ribs.css index d11c46d..e2fc9db 100644 --- a/css/Ribs.css +++ b/css/Ribs.css @@ -1,13 +1,11 @@ /* -* Ribs V1.0.2 +* Ribs * Skeleton is Copyright 2011, Dave Gamache * * Ribs is the evolution of Skeleton by Nick Pack * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 28/05/2013 */ -/* ul, ol with disc, square etc. */ /* normalize.css v2.1.2 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions @@ -348,8 +346,6 @@ table { border-collapse: collapse; border-spacing: 0; } -/* #Basic Styles -================================================== */ body { background: #fff; font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -357,6 +353,13 @@ body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } +hr { + border: solid #dddddd; + border-width: 1px 0 0; + clear: both; + margin: 10px 0 30px; + height: 0; } + .container { position: relative; margin: 0 auto; @@ -371,6 +374,10 @@ body { margin-left: 10px; margin-right: 10px; } +.alpha-omega { + margin-right: 0; + margin-left: 0; } + .row { margin-bottom: 20px; } @@ -530,11 +537,7 @@ body { .container .alpha { margin-right: 10px; } .container .omega { - margin-left: 10px; } - - .alpha-omega { - margin-right: 0; - margin-left: 0; } } + margin-left: 10px; } } @media only screen and (max-width: 767px) { .container { width: 90%; } @@ -558,9 +561,6 @@ body { .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } -/* #Clearing -================================================== */ -/* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; @@ -568,8 +568,6 @@ body { clear: both; visibility: hidden; } -/* Use clearfix class on parent to clear nested columns, -or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, @@ -589,7 +587,6 @@ or wrap each row of columns in a
*/ .clearfix { zoom: 1; } -/* You can also use a
to clear columns */ .clear { clear: both; display: block; @@ -598,18 +595,6 @@ or wrap each row of columns in a
*/ width: 0; height: 0; } -/* #Typography -================================================== */ -/* @font-face { - font-family: 'FontName'; - src: url('../fonts/FontName.eot'); - src: url('../fonts/FontName.eot?iefix') format('eot'), - url('../fonts/FontName.woff') format('woff'), - url('../fonts/FontName.ttf') format('truetype'), - url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); - font-weight: normal; - font-style: normal; } -*/ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } @@ -684,7 +669,6 @@ strong { small { font-size: 80%; } -/* Blockquotes */ blockquote, blockquote p { font-size: 17px; line-height: 24px; @@ -707,16 +691,6 @@ blockquote cite:before { blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555555; } -/* not really typographical, but I couldnt find anywhere else to put it */ -hr { - border: solid #dddddd; - border-width: 1px 0 0; - clear: both; - margin: 10px 0 30px; - height: 0; } - -/* #Links -================================================== */ a, a:visited { color: #333333; text-decoration: underline; } @@ -729,8 +703,6 @@ a:hover, a:focus { p a, p a:visited { line-height: inherit; } -/* #Lists -================================================== */ ul, ol { margin: 0 0 20px 0; } @@ -767,8 +739,6 @@ li { li p { line-height: 21px; } -/* #Buttons -================================================== */ .button, button, input[type="submit"], @@ -843,14 +813,11 @@ input[type="button"].full-width { padding-right: 0; text-align: center; } -/* Fix for odd Mozilla border & padding issues */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } -/* #Forms -================================================== */ form { margin: 0 0 20px 0; } @@ -885,7 +852,7 @@ select { background: white; } select { - padding: 0; } + padding: 10px; } input[type="text"]:focus, input[type="password"]:focus, @@ -923,16 +890,6 @@ legend span { font-size: 13px; color: #444444; } -/* #Images -================================================== */ .scale-with-grid { max-width: 100%; height: auto; } - -/* #Example Media Queries -================================================== */ -/* Smaller than standard 960 (devices and browsers) */ -/* Tablet Portrait size to standard 960 (devices and browsers) */ -/* All Mobile Sizes (devices and browser) */ -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ diff --git a/css/Ribs.min.css b/css/Ribs.min.css index 610dfed..9bf47af 100644 --- a/css/Ribs.min.css +++ b/css/Ribs.min.css @@ -1,2 +1,2 @@ -/* Ribs 1.0.4 14-07-2013 */ -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}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .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,html input[type=button],input[type=reset],input[type=submit]{-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;-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}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .one-half{width:460px}.container .one-quarter{width:220px}.container .three-quarters{width:700px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}@media only screen and (max-width:959px){.container{width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .one-half{width:364px}.container .one-quarter{width:172px}.container .three-quarters{width:556px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}.alpha-omega{margin-right:0;margin-left:0}}@media only screen and (max-width:767px){.container{width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds,.container .one-half,.container .one-quarter,.container .three-quarters{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:69px;margin:0 0 14px}h2{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;line-height:52.5px;margin:0 0 10px}h3{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:42px;margin:0 0 8px}h4{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:31.5px;margin:0 0 4px}h5{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px;line-height:25.5px}h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px;line-height:21px}p img{margin:0}.lead{font-size:21px;line-height:31.5px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 30px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:0}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}select{width:220px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto} \ No newline at end of file +/* Ribs 1.0.4 - https://github.com/nickpack/Ribs - 15-07-2013 */ +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}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .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,html input[type=button],input[type=reset],input[type=submit]{-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;-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}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.alpha-omega{margin-right:0;margin-left:0}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .one-half{width:460px}.container .one-quarter{width:220px}.container .three-quarters{width:700px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}@media only screen and (max-width:959px){.container{width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .one-half{width:364px}.container .one-quarter{width:172px}.container .three-quarters{width:556px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}}@media only screen and (max-width:767px){.container{width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds,.container .one-half,.container .one-quarter,.container .three-quarters{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:69px;margin:0 0 14px}h2{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;line-height:52.5px;margin:0 0 10px}h3{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:42px;margin:0 0 8px}h4{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:31.5px;margin:0 0 4px}h5{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px;line-height:25.5px}h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px;line-height:21px}p img{margin:0}.lead{font-size:21px;line-height:31.5px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 30px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:10px}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}select{width:220px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto} \ No newline at end of file diff --git a/scss/Ribs.scss b/scss/Ribs.scss index 488a3f9..ecd1982 100644 --- a/scss/Ribs.scss +++ b/scss/Ribs.scss @@ -1,19 +1,16 @@ /* -* Ribs V1.0.2 +* Ribs * Skeleton is Copyright 2011, Dave Gamache * * Ribs is the evolution of Skeleton by Nick Pack * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 28/05/2013 */ @import "_variables"; @import "normalize/_normalize"; @import "_mixins"; -/* #Basic Styles -================================================== */ body { background: #fff; font: 14px/21px $body_font_family; @@ -22,6 +19,14 @@ body { -ms-text-size-adjust: 100%; } +hr { + border: $hr_border; + border-width: $hr_border_width; + clear: both; + margin: $hr_margin; + height: 0; +} + @import "_grid"; @import "_typography"; @import "_links"; @@ -29,20 +34,17 @@ body { @import "_forms"; @import "_images"; -/* #Example Media Queries -================================================== */ - -/* Smaller than standard 960 (devices and browsers) */ +// Smaller than standard 960 (devices and browsers) @media only screen and (max-width: 959px) {} -/* Tablet Portrait size to standard 960 (devices and browsers) */ +// Tablet Portrait size to standard 960 (devices and browsers) @media only screen and (min-width: 768px) and (max-width: 959px) {} -/* All Mobile Sizes (devices and browser) */ +// All Mobile Sizes (devices and browser) @media only screen and (max-width: 767px) {} -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ +// Mobile Landscape Size to Tablet Portrait (devices and browsers) @media only screen and (min-width: 480px) and (max-width: 767px) {} -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ +// Mobile Portrait Size to Mobile Landscape Size (devices and browsers) @media only screen and (max-width: 479px) {} \ No newline at end of file diff --git a/scss/_forms.scss b/scss/_forms.scss index ee9f7c8..0a9e470 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,5 +1,5 @@ -/* #Buttons -================================================== */ +// #Buttons +// ================================================== .button, button, input[type="submit"], @@ -51,15 +51,15 @@ input[type="button"].full-width { text-align: center; } -/* Fix for odd Mozilla border & padding issues */ +// Fix for odd Mozilla border & padding issues button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } -/* #Forms -================================================== */ +// #Forms +// ================================================== form { margin: $form_fieldset_margin; @@ -86,7 +86,7 @@ textarea, select { border: $form_input_border; padding: $form_input_padding; - @include border-radius(2px); + @include border-radius($form_input_border_radius); font: $form_input_font_size $form_element_font; color: $form_input_text_colour; width: $form_input_width; @@ -97,7 +97,7 @@ select { } select { - padding: 0; + padding: $form_input_select_padding; } input[type="text"]:focus, @@ -110,12 +110,12 @@ input[type="tel"]:focus, textarea:focus { border: $form_input_focus_border; color: $form_input_focus_text_colour; - outline: none; - @include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2)) + outline: $form_input_focus_outline; + @include box-shadow($form_input_focus_box_shadow_x, $form_input_focus_box_shadow_y, $form_input_focus_box_shadow_blur, $form_input_focus_box_shadow_colour) } textarea { - min-height: 60px; + min-height: $form_textarea_min_height; } label, @@ -130,7 +130,7 @@ select { } input[type="checkbox"] { - display: inline; + display: $form_input_checkbox_display; } label span, diff --git a/scss/_grid.scss b/scss/_grid.scss index 85b89e3..b7ff348 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -12,6 +12,11 @@ margin-right: $gutter/2; } +.alpha-omega { + margin-right: 0; + margin-left: 0; +} + .row { margin-bottom: $gutter; } @include grid($desktop-container-width, $column-count, $gutter); @@ -26,10 +31,6 @@ & .alpha { margin-right: 10px; } & .omega { margin-left: 10px; } } - - .alpha-omega { - margin-right: 0; - margin-left: 0; } } //-------------------------------------------------------------------- // #Mobile @@ -81,14 +82,13 @@ } } -/* #Clearing -================================================== */ +// #Clearing +// ================================================== -/* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } -/* Use clearfix class on parent to clear nested columns, -or wrap each row of columns in a
*/ +// Use clearfix class on parent to clear nested columns, +// or wrap each row of columns in a
.clearfix:before, .clearfix:after, .row:before, @@ -106,7 +106,7 @@ or wrap each row of columns in a
*/ .clearfix { zoom: 1; } -/* You can also use a
to clear columns */ +// You can also use a
to clear columns .clear { clear: both; display: block; diff --git a/scss/_images.scss b/scss/_images.scss index 32e7ab9..af1e6d7 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -1,5 +1,5 @@ -/* #Images -================================================== */ +// #Images +// ================================================== .scale-with-grid { max-width: 100%; diff --git a/scss/_links.scss b/scss/_links.scss index af7b65d..bf5b643 100644 --- a/scss/_links.scss +++ b/scss/_links.scss @@ -1,5 +1,5 @@ -/* #Links -================================================== */ +// #Links +// ================================================== a, a:visited { color: $link_colour; text-decoration: $link_decoration; diff --git a/scss/_lists.scss b/scss/_lists.scss index c51c2da..96b5546 100644 --- a/scss/_lists.scss +++ b/scss/_lists.scss @@ -1,5 +1,5 @@ -/* #Lists -================================================== */ +// #Lists +// ================================================== ul, ol { margin: $list_margin; } @@ -17,15 +17,15 @@ ol, ul.square, ul.circle, ul.disc { } ul.square { - list-style: square outside; + list-style: square $list_styled_position; } ul.circle { - list-style: circle outside; + list-style: circle $list_styled_position; } ul.disc { - list-style: disc outside; + list-style: disc $list_styled_position; } ul ul, ul ol, diff --git a/scss/_mixins.scss b/scss/_mixins.scss index cb929ca..9abdd0f 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -112,7 +112,7 @@ @mixin box-shadow($a, $b, $c, $colour) { -moz-box-shadow: $a $b $c $colour; -webkit-box-shadow: $a $b $c $colour; - box-shadow: $a $b $c $colour; + box-shadow: $a $b $c $colour; } @mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) { @@ -142,10 +142,9 @@ .two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } .one-half { width: ($grid-container-width/2) - $grid-gutter; } .one-quarter { width: ($grid-container-width/4) - $grid-gutter; } - .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;} + .three-quarters { width: (($grid-container-width/4)*3) - $grid-gutter; } - - .offset-by-one { padding-left: $grid-column-width; } + .offset-by-one { padding-left: $grid-column-width; } .offset-by-two { padding-left: $grid-column-width*2; } .offset-by-three { padding-left: $grid-column-width*3; } .offset-by-four { padding-left: $grid-column-width*4; } diff --git a/scss/_typography.scss b/scss/_typography.scss index 06a927f..a7dc7ad 100644 --- a/scss/_typography.scss +++ b/scss/_typography.scss @@ -1,15 +1,5 @@ -/* #Typography -================================================== */ -/* @font-face { - font-family: 'FontName'; - src: url('../fonts/FontName.eot'); - src: url('../fonts/FontName.eot?iefix') format('eot'), - url('../fonts/FontName.woff') format('woff'), - url('../fonts/FontName.ttf') format('truetype'), - url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); - font-weight: normal; - font-style: normal; } -*/ +// #Typography +// ================================================== h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; @@ -99,12 +89,11 @@ small { font-size: 80%; } -/* Blockquotes */ blockquote, blockquote p { - font-size: 17px; - line-height: 24px; + font-size: $blockquote_font_size; + line-height: $blockquote_line_height; color: $blockquote_colour; - font-style: italic; + font-style: $blockquote_font_style; } blockquote { @@ -125,13 +114,4 @@ blockquote cite:before { blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: $blockquote_cite_link_colour; -} - -/* not really typographical, but I couldnt find anywhere else to put it */ -hr { - border: $hr_border; - border-width: $hr_border_width; - clear: both; - margin: $hr_margin; - height: 0; } \ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss index 3cb2723..47651a2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -37,9 +37,19 @@ $form_input_width: 210px; $form_input_select_width: 220px; $form_input_margin: 0 0 20px 0; $form_input_font_size: 13px; +$form_input_border_radius: 2px; + +$form_input_checkbox_display: inline; $form_input_focus_border: 1px solid #aaa; $form_input_focus_text_colour: #444; +$form_input_focus_outline: none; +$form_input_focus_box_shadow_x: 0; +$form_input_focus_box_shadow_y: 0; +$form_input_focus_box_shadow_blur: 3px; +$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2); + +$form_input_select_padding: 10px; $form_label_legend_colour: #444; $form_fieldset_margin: 0 0 20px 0; @@ -47,6 +57,8 @@ $form_fieldset_margin: 0 0 20px 0; $legend_font_weight: bold; $legend_font_size: $form_input_font_size; +$form_textarea_min_height: 60px; + $link_colour: #333; $link_decoration: underline; $link_outline: 0; @@ -98,6 +110,9 @@ $blockquote_cite_link_colour: #555; $blockquote_cite_font_size: 12px; $blockquote_margin: 0 0 20px; $blockquote_padding: 9px 20px 0 19px; +$blockquote_font_size: 17px; +$blockquote_line_height: 24px; +$blockquote_font_style: italic; $hr_border: solid #ddd; $hr_border_width: 1px 0 0; @@ -111,7 +126,8 @@ $list_large_line_height: 21px; $ul_list_style: none outside; $ol_list_style: decimal; -$list_styled_margin: 0 0 0 30px; /* ul, ol with disc, square etc. */ +$list_styled_margin: 0 0 0 30px; // ul, ol with disc, square etc. +$list_styled_position: outside; // List item bullet position $nested_list_margin: 4px 0 5px 30px; $nested_list_font_size: 90%;