From f10d7fb1a31976003d3d1ef8f722ef592d3ab4da Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Tue, 23 Apr 2013 20:56:43 +0100 Subject: [PATCH] Moar variablez kthx --- README | 5 - README.md | 20 + css/skeleton.css | 745 +++++++++++++++++++ {images => img}/apple-touch-icon-114x114.png | Bin {images => img}/apple-touch-icon-72x72.png | Bin {images => img}/apple-touch-icon.png | Bin {images => img}/favicon.ico | Bin index.html | 20 +- scss/_forms.scss | 27 +- scss/_links.scss | 5 +- scss/_lists.scss | 25 +- scss/_typography.scss | 58 +- scss/_variables.scss | 71 +- scss/{style.scss => skeleton.scss} | 0 stylesheets/.gitkeep | 0 15 files changed, 899 insertions(+), 77 deletions(-) delete mode 100644 README create mode 100644 README.md create mode 100644 css/skeleton.css rename {images => img}/apple-touch-icon-114x114.png (100%) rename {images => img}/apple-touch-icon-72x72.png (100%) rename {images => img}/apple-touch-icon.png (100%) rename {images => img}/favicon.ico (100%) rename scss/{style.scss => skeleton.scss} (100%) delete mode 100644 stylesheets/.gitkeep diff --git a/README b/README deleted file mode 100644 index 0cccc2d..0000000 --- a/README +++ /dev/null @@ -1,5 +0,0 @@ -Skeleton SCSS Conversion -============================ - -Compile with: -sass scss/style.scss:stylesheets/style.css \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..03e2b9a --- /dev/null +++ b/README.md @@ -0,0 +1,20 @@ +Skeleton SCSS +============= +> This is my opinionated fork of Skeleton, the original author seems to have disappeared and/or lost interest in the project, and my colleagues and I use this an awful lot. + +## Whats different here? +My fork has one significant difference over the original project, that is a full SCSS conversion to make use of more modern technologies and to expose a lot more customisation options quickly and easily. + +As time goes by I will gradually extend the available options and build a packaging tool that allows you to select all of your customisations in a graphical way, thinking something along the lines of jQuery themeroller, just a bit more lightweight. + +## Changelog +* Apr 23, 2013 - Skeleton SCSS v1.0 - Additional variable conversions and bower submission. +* Jan 31, 2013 - Completed SCSS conversion of Skeleton 1.2. + +## Contributers +* Nick Pack + +## Licence +Copyright (c) 2013 Nick Pack +Based on the original skeleton project which is Copyright 2011 Dave Gamache +Licensed under the MIT license. \ No newline at end of file diff --git a/css/skeleton.css b/css/skeleton.css new file mode 100644 index 0000000..d31addf --- /dev/null +++ b/css/skeleton.css @@ -0,0 +1,745 @@ +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* +* SCSS Conversion and Mixins by Nick Pack +* +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ +/* ul, ol with disc, square etc. */ +/* #Reset & Basics (Inspired by E. Meyers) +================================================== */ +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 { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + +body { + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +/* #Misc +================================================== */ +.remove-bottom { + margin-bottom: 0 !important; } + +.half-bottom { + margin-bottom: 10px !important; } + +.add-bottom { + margin-bottom: 20px !important; } + +/* #Basic Styles +================================================== */ +body { + background: #fff; + font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + /* Fix for webkit rendering */ + -webkit-text-size-adjust: 100%; } + +/* #Forms +================================================== */ +/* #Base 960 Grid +================================================== */ +.container { + position: relative; + width: 960px; + margin: 0 auto; + padding: 0; } + +.container .column, +.container .columns { + float: left; + display: inline; + margin-left: 10px; + margin-right: 10px; } + +.row { + margin-bottom: 20px; } + +/* Nested Column Classes */ +.column.alpha, .columns.alpha { + margin-left: 0; } + +.column.omega, .columns.omega { + margin-right: 0; } + +/* Base Grid */ +.container .one.column, +.container .one.columns { + width: 40px; } + +.container .two.columns { + width: 100px; } + +.container .three.columns { + width: 160px; } + +.container .four.columns { + width: 220px; } + +.container .five.columns { + width: 280px; } + +.container .six.columns { + width: 340px; } + +.container .seven.columns { + width: 400px; } + +.container .eight.columns { + width: 460px; } + +.container .nine.columns { + width: 520px; } + +.container .ten.columns { + width: 580px; } + +.container .eleven.columns { + width: 640px; } + +.container .twelve.columns { + width: 700px; } + +.container .thirteen.columns { + width: 760px; } + +.container .fourteen.columns { + width: 820px; } + +.container .fifteen.columns { + width: 880px; } + +.container .sixteen.columns { + width: 940px; } + +.container .one-third.column { + width: 300px; } + +.container .two-thirds.column { + width: 620px; } + +/* Offsets */ +.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; } + +/* #Tablet (Portrait) +================================================== */ +/* Note: Design for a width of 768px */ +@media only screen and (min-width: 768px) and (max-width: 959px) { + .container { + width: 768px; } + + .container .column, + .container .columns { + margin-left: 10px; + margin-right: 10px; } + + .column.alpha, .columns.alpha { + margin-left: 0; + margin-right: 10px; } + + .column.omega, .columns.omega { + margin-right: 0; + margin-left: 10px; } + + .alpha.omega { + margin-left: 0; + margin-right: 0; } + + .container .one.column, + .container .one.columns { + width: 28px; } + + .container .two.columns { + width: 76px; } + + .container .three.columns { + width: 124px; } + + .container .four.columns { + width: 172px; } + + .container .five.columns { + width: 220px; } + + .container .six.columns { + width: 268px; } + + .container .seven.columns { + width: 316px; } + + .container .eight.columns { + width: 364px; } + + .container .nine.columns { + width: 412px; } + + .container .ten.columns { + width: 460px; } + + .container .eleven.columns { + width: 508px; } + + .container .twelve.columns { + width: 556px; } + + .container .thirteen.columns { + width: 604px; } + + .container .fourteen.columns { + width: 652px; } + + .container .fifteen.columns { + width: 700px; } + + .container .sixteen.columns { + width: 748px; } + + .container .one-third.column { + width: 236px; } + + .container .two-thirds.column { + width: 492px; } + + /* Offsets */ + .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; } } +/* #Mobile (Portrait) +================================================== */ +/* Note: Design for a width of 320px */ +@media only screen and (max-width: 767px) { + .container { + width: 300px; } + + .container .columns, + .container .column { + margin: 0; } + + .container .one.column, + .container .one.columns, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { + width: 300px; } + + /* Offsets */ + .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; } } +/* #Mobile (Landscape) +================================================== */ +/* Note: Design for a width of 480px */ +@media only screen and (min-width: 480px) and (max-width: 767px) { + .container { + width: 420px; } + + .container .columns, + .container .column { + margin: 0; } + + .container .one.column, + .container .one.columns, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { + width: 420px; } } +/* #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
*/ +.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; } + +/* You can also use a
to clear columns */ +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + 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, h2, h3, h4, h5, h6 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; } + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + font-weight: inherit; } + +h1 { + font-size: 46px; + line-height: 50px; + margin: 0 0 14px 0; } + +h2 { + font-size: 35px; + line-height: 40px; + margin: 0 0 10px 0; } + +h3 { + font-size: 28px; + line-height: 34px; + margin: 0 0 8px 0; } + +h4 { + font-size: 21px; + line-height: 30px; + margin: 0 0 4px 0; } + +h5 { + font-size: 17px; + line-height: 24px; } + +h6 { + font-size: 14px; + line-height: 21px; } + +.subheader { + color: #777777; } + +p { + margin: 0 0 20px 0; } + +p img { + margin: 0; } + +p.lead { + font-size: 21px; + line-height: 27px; + color: #777777; } + +em { + font-style: italic; } + +strong { + font-weight: bold; + color: #333333; } + +small { + font-size: 80%; } + +/* Blockquotes */ +blockquote, blockquote p { + font-size: 17px; + line-height: 24px; + color: #777777; + font-style: italic; } + +blockquote { + margin: 0 0 20px; + padding: 9px 20px 0 19px; + border-left: 1px solid #dddddd; } + +blockquote cite { + display: block; + font-size: 12px; + color: #555555; } + +blockquote cite:before { + content: "\2014 \0020"; } + +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; + outline: 0; } + +a:hover, a:focus { + color: black; + text-decoration: none; } + +p a, p a:visited { + line-height: inherit; } + +/* #Lists +================================================== */ +ul, ol { + margin: 0 0 20px 0; } + +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 0; } + +ul.large li { + line-height: 21px; } + +li p { + line-height: 21px; } + +/* #Buttons +================================================== */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + background-color: rgba(153, 153, 153, 0.2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-repeat: repeat-x; + border: 1px solid #aaaaaa; + border-top: 1px solid #cccccc; + border-left: 1px solid #cccccc; + border-radius: 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + color: #444444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, 0.75); + cursor: pointer; + margin: 0 0 20px 0; + 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: rgba(153, 153, 153, 0.3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-repeat: repeat-x; + color: #222222; + border: 1px solid #888888; + border-top: 1px solid #aaaaaa; + border-left: 1px solid #aaaaaa; } + +.button:active, +button:active, +input[type="submit"]:active, +input[type="reset"]:active, +input[type="button"]:active { + background-color: rgba(153, 153, 153, 0.2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-repeat: repeat-x; + border: 1px solid #666666; } + +.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 !important; + padding-right: 0 !important; + 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; } + +fieldset { + margin: 0 0 20px 0; } + +input[type="text"], +input[type="password"], +input[type="email"], +textarea, +select { + border: 1px solid #cccccc; + padding: 6px 4px; + outline: none; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777777; + width: 210px; + max-width: 100%; + display: block; + margin: 0 0 20px 0; + background: white; } + +select { + padding: 0; } + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus, +textarea:focus { + border: 1px solid #aaaaaa; + color: #444444; + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } + +textarea { + min-height: 60px; } + +label, +legend { + display: block; + font-weight: bold; + font-size: 13px; } + +select { + width: 220px; } + +input[type="checkbox"] { + display: inline; } + +label span, +legend span { + font-weight: normal; + font-size: 13px; + color: #444444; } + +/* #Images +================================================== */ +img.scale-with-grid { + max-width: 100%; + height: auto; } + +/* #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/images/apple-touch-icon-114x114.png b/img/apple-touch-icon-114x114.png similarity index 100% rename from images/apple-touch-icon-114x114.png rename to img/apple-touch-icon-114x114.png diff --git a/images/apple-touch-icon-72x72.png b/img/apple-touch-icon-72x72.png similarity index 100% rename from images/apple-touch-icon-72x72.png rename to img/apple-touch-icon-72x72.png diff --git a/images/apple-touch-icon.png b/img/apple-touch-icon.png similarity index 100% rename from images/apple-touch-icon.png rename to img/apple-touch-icon.png diff --git a/images/favicon.ico b/img/favicon.ico similarity index 100% rename from images/favicon.ico rename to img/favicon.ico diff --git a/index.html b/index.html index f255355..140e54b 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - Your Page Title Here :) + Your Page Title Here @@ -18,7 +18,7 @@ - + - - - - + + + + - - @@ -43,8 +41,8 @@
-

Skeleton

-
Version 1.2
+

Skeleton-SCSS

+
Version 1.0
@@ -62,7 +60,7 @@

Docs & Support

-

The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi@getskeleton.com.

+

The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com. - this is the main set of docs for the original css project, but will provide all of the needed insight. Skeleton SCSS is also open-source and has a project on github, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at nick@nickpack.com.

diff --git a/scss/_forms.scss b/scss/_forms.scss index 1990879..57da6a7 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -10,14 +10,14 @@ input[type="button"] { @include border-radius($form_button_border_radius); color: $form_button_text_colour; display: inline-block; - font-size: 11px; + font-size: $form_button_font_size; font-weight: bold; text-decoration: none; text-shadow: $form_button_text_shadow; cursor: pointer; - margin-bottom: 20px; + margin: $form_input_margin; line-height: normal; - padding: 8px 10px; + padding: $form_button_padding; font-family: $form_element_font; } @@ -62,11 +62,11 @@ input::-moz-focus-inner { ================================================== */ form { - margin-bottom: 20px; + margin: $form_fieldset_margin; } fieldset { - margin-bottom: 20px; + margin: $form_fieldset_margin; } input[type="text"], @@ -75,16 +75,15 @@ input[type="email"], textarea, select { border: $form_input_border; - padding: 6px 4px; + padding: $form_input_padding; outline: none; @include border-radius(2px); - font: 13px $form_element_font; + font: $form_input_font_size $form_element_font; color: $form_input_text_colour; - margin: 0; - width: 210px; + width: $form_input_width; max-width: 100%; display: block; - margin-bottom: 20px; + margin: $form_input_margin; background: $form_input_background; } @@ -108,12 +107,12 @@ textarea { label, legend { display: block; - font-weight: bold; - font-size: 13px; + font-weight: $legend_font_weight; + font-size: $legend_font_size; } select { - width: 220px; + width: $form_input_select_width; } input[type="checkbox"] { @@ -123,6 +122,6 @@ input[type="checkbox"] { label span, legend span { font-weight: normal; - font-size: 13px; + font-size: $form_input_font_size; color: $form_label_legend_colour; } \ No newline at end of file diff --git a/scss/_links.scss b/scss/_links.scss index 36b9a72..c726cab 100644 --- a/scss/_links.scss +++ b/scss/_links.scss @@ -2,12 +2,13 @@ ================================================== */ a, a:visited { color: $link_colour; - text-decoration: underline; - outline: 0; + text-decoration: $link_decoration; + outline: $link_outline; } a:hover, a:focus { color: $link_hover_colour; + text-decoration: $link_hover_decoration; } p a, p a:visited { diff --git a/scss/_lists.scss b/scss/_lists.scss index 0e727d9..0bbe9fc 100644 --- a/scss/_lists.scss +++ b/scss/_lists.scss @@ -1,19 +1,19 @@ /* #Lists ================================================== */ ul, ol { - margin-bottom: 20px; + margin: $list_margin; } ul { - list-style: none outside; + list-style: $ul_list_style; } ol { - list-style: decimal; + list-style: $ol_list_style; } ol, ul.square, ul.circle, ul.disc { - margin-left: 30px; + margin: $list_styled_margin; } ul.square { @@ -30,24 +30,19 @@ ul.disc { ul ul, ul ol, ol ol, ol ul { - margin: 4px 0 5px 30px; - font-size: 90%; -} - -ul ul li, ul ol li, -ol ol li, ol ul li { - margin-bottom: 6px; + margin: $nested_list_margin; + font-size: $nested_list_font_size; } li { - line-height: 18px; - margin-bottom: 12px; + line-height: $list_item_line_height; + margin: $list_item_margin; } ul.large li { - line-height: 21px; + line-height: $list_large_line_height; } li p { - line-height: 21px; + line-height: $list_item_paragraph_line_height; } \ No newline at end of file diff --git a/scss/_typography.scss b/scss/_typography.scss index ec48607..43973cc 100644 --- a/scss/_typography.scss +++ b/scss/_typography.scss @@ -14,7 +14,7 @@ h1, h2, h3, h4, h5, h6 { color: $heading_colour; font-family: $heading_font; - font-weight: normal; + font-weight: $heading_font_weight; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { @@ -22,55 +22,55 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { } h1 { - font-size: 46px; - line-height: 50px; - margin-bottom: 14px; + font-size: $heading1_font_size; + line-height: $heading1_line_height; + margin: $heading1_margin; } h2 { - font-size: 35px; - line-height: 40px; - margin-bottom: 10px; + font-size: $heading2_font_size; + line-height: $heading2_line_height; + margin: $heading2_margin; } h3 { - font-size: 28px; - line-height: 34px; - margin-bottom: 8px; + font-size: $heading3_font_size; + line-height: $heading3_line_height; + margin: $heading3_margin; } h4 { - font-size: 21px; - line-height: 30px; - margin-bottom: 4px; + font-size: $heading4_font_size; + line-height: $heading4_line_height; + margin: $heading4_margin; } h5 { - font-size: 17px; - line-height: 24px; + font-size: $heading5_font_size; + line-height: $heading5_line_height; } h6 { - font-size: 14px; - line-height: 21px; + font-size: $heading6_font_size; + line-height: $heading6_line_height; } .subheader { - color: #777; + color: $subheader_colour; } p { - margin: 0 0 20px 0; + margin: $paragraph_margin; } p img { - margin: 0; + margin: $paragraph_image_margin; } p.lead { - font-size: 21px; - line-height: 27px; - color: #777; + font-size: $paragraph_lead_font_size; + line-height: $paragraph_lead_line_height; + color: $paragraph_lead_colour; } em { @@ -79,7 +79,7 @@ em { strong { font-weight: bold; - color: #333; + color: $strong_colour; } small { @@ -95,14 +95,14 @@ blockquote, blockquote p { } blockquote { - margin: 0 0 20px; - padding: 9px 20px 0 19px; + margin: $blockquote_margin; + padding: $blockquote_padding; border-left: $blockquote_border_left; } blockquote cite { display: block; - font-size: 12px; + font-size: $blockquote_cite_font_size; color: $blockquote_cite_colour; } @@ -117,8 +117,8 @@ blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { /* not really typographical, but I couldnt find anywhere else to put it */ hr { border: $hr_border; - border-width: 1px 0 0; + border-width: $hr_border_width; clear: both; - margin: 10px 0 30px; + margin: $hr_margin; height: 0; } \ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss index 0a264e2..120bd73 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -7,6 +7,8 @@ $form_button_text_colour: #444; $form_button_text_shadow: 0 1px rgba(255, 255, 255, .75); $form_button_gradient_start: rgba(255, 255, 255, .2); $form_button_gradient_end: rgba(0, 0, 0, .2); +$form_button_font_size: 11px; +$form_button_padding: 8px 10px; $form_button_hover_border_topleft: 1px solid #aaa; $form_button_hover_border_rightbottom: 1px solid #888; @@ -21,23 +23,90 @@ $form_button_active_gradient_end: rgba(0, 0, 0, .2); $form_input_border: 1px solid #ccc; $form_input_text_colour: #777; $form_input_background: #fff; +$form_input_padding: 6px 4px; +$form_input_width: 210px; +$form_input_select_width: 220px; +$form_input_margin: 0 0 20px 0; +$form_input_font_size: 13px; $form_input_focus_border: 1px solid #aaa; $form_input_focus_text_colour: #444; $form_label_legend_colour: #444; +$form_fieldset_margin: 0 0 20px 0; + +$legend_font_weight: bold; +$legend_font_size: $form_input_font_size; $link_colour: #333; +$link_decoration: underline; +$link_outline: 0; $link_hover_colour: #000; +$link_hover_decoration: none; $heading_font: "Georgia", "Times New Roman", serif; +$heading_font_weight: normal; $heading_colour: #181818; +$heading1_font_size: 46px; +$heading1_line_height: 50px; +$heading1_margin: 0 0 14px 0; + +$heading2_font_size: 35px; +$heading2_line_height: 40px; +$heading2_margin: 0 0 10px 0; + +$heading3_font_size: 28px; +$heading3_line_height: 34px; +$heading3_margin: 0 0 8px 0; + +$heading4_font_size: 21px; +$heading4_line_height: 30px; +$heading4_margin: 0 0 4px 0; + +$heading5_font_size: 17px; +$heading5_line_height: 24px; + +$heading6_font_size: 14px; +$heading6_line_height: 21px; + +$subheader_colour: #777; + +$paragraph_margin: 0 0 20px 0; +$paragraph_image_margin: 0; + +$paragraph_lead_font_size: 21px; +$paragraph_lead_line_height: 27px; +$paragraph_lead_colour: #777; + +$strong_colour: #333; + $blockquote_colour: #777; $blockquote_border_left: 1px solid #ddd; $blockquote_cite_colour: #555; $blockquote_cite_link_colour: #555; +$blockquote_cite_font_size: 12px; +$blockquote_margin: 0 0 20px; +$blockquote_padding: 9px 20px 0 19px; $hr_border: solid #ddd; +$hr_border_width: 1px 0 0; +$hr_margin: 10px 0 30px; + +$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + +$list_margin: 0 0 20px 0; +$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. */ + +$nested_list_margin: 4px 0 5px 30px; +$nested_list_font_size: 90%; + +$list_item_line_height: 18px; +$list_item_margin: 0 0 12px 0; +$list_item_paragraph_line_height: 21px; -$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; \ No newline at end of file diff --git a/scss/style.scss b/scss/skeleton.scss similarity index 100% rename from scss/style.scss rename to scss/skeleton.scss diff --git a/stylesheets/.gitkeep b/stylesheets/.gitkeep deleted file mode 100644 index e69de29..0000000