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