Moar variablez kthx

README

@@ -1,5 +0,0 @@
-Skeleton SCSS Conversion
-============================
-
-Compile with:
-sass scss/style.scss:stylesheets/style.css

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.	

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 <div class="row"> */
+.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 <br class="clear" /> 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) */

index.html

@@ -8,7 +8,7 @@
 	<!-- Basic Page Needs
   ================================================== -->
 	<meta charset="utf-8">
-	<title>Your Page Title Here :)</title>
+	<title>Your Page Title Here</title>
 	<meta name="description" content="">
 	<meta name="author" content="">
 
@@ -18,7 +18,7 @@
 
 	<!-- CSS
   ================================================== -->
-	<link rel="stylesheet" href="stylesheets/style.css">
+	<link rel="stylesheet" href="css/skeleton.css">
 
 	<!--[if lt IE 9]>
 		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
@@ -26,16 +26,14 @@
 
 	<!-- Favicons
 	================================================== -->
-	<link rel="shortcut icon" href="images/favicon.ico">
+	<link rel="shortcut icon" href="img/favicon.ico">
-	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+	<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
 
 </head>
 <body>
 
-
-
 	<!-- Primary Page Layout
 	================================================== -->
 
@@ -43,8 +41,8 @@
 
 	<div class="container">
 		<div class="sixteen columns">
-			<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
+			<h1 class="remove-bottom" style="margin-top: 40px">Skeleton-SCSS</h1>
-			<h5>Version 1.2</h5>
+			<h5>Version 1.0</h5>
 			<hr />
 		</div>
 		<div class="one-third column">
@@ -62,7 +60,7 @@
 		</div>
 		<div class="one-third column">
 			<h3>Docs &amp; Support</h3>
-			<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, 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 <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
+			<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a> - 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 <a href="https://github.com/nickpack/Skeleton-SCSS">project on github</a>, 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 <a href="mailto:nick@nickpack.com">nick@nickpack.com</a>.</p>
 		</div>
 
 	</div><!-- container -->

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: $form_input_width;
-  width: 210px;
   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-weight: $legend_font_weight;
-  font-size: 13px;
+  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;
 }

scss/_links.scss

@@ -2,12 +2,13 @@
 ================================================== */
 a, a:visited {
   color: $link_colour;
-  text-decoration: underline;
+  text-decoration: $link_decoration;
-  outline: 0;
+  outline: $link_outline;
 }
 
 a:hover, a:focus {
   color: $link_hover_colour;
+  text-decoration: $link_hover_decoration;
 }
 
 p a, p a:visited {

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;
+  margin: $nested_list_margin;
-  font-size: 90%;
+  font-size: $nested_list_font_size;
-}
-
-ul ul li, ul ol li,
-ol ol li, ol ul li {
-  margin-bottom: 6px;
 }
 
 li {
-  line-height: 18px;
+  line-height: $list_item_line_height;
-  margin-bottom: 12px;
+  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;
 }

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;
+  font-size: $heading1_font_size;
-  line-height: 50px;
+  line-height: $heading1_line_height;
-  margin-bottom: 14px;
+  margin: $heading1_margin;
 }
 
 h2 {
-  font-size: 35px;
+  font-size: $heading2_font_size;
-  line-height: 40px;
+  line-height: $heading2_line_height;
-  margin-bottom: 10px;
+  margin: $heading2_margin;
 }
 
 h3 {
-  font-size: 28px;
+  font-size: $heading3_font_size;
-  line-height: 34px;
+  line-height: $heading3_line_height;
-  margin-bottom: 8px;
+  margin: $heading3_margin;
 }
 
 h4 {
-  font-size: 21px;
+  font-size: $heading4_font_size;
-  line-height: 30px;
+  line-height: $heading4_line_height;
-  margin-bottom: 4px;
+  margin: $heading4_margin;
 }
 
 h5 {
-  font-size: 17px;
+  font-size: $heading5_font_size;
-  line-height: 24px;
+  line-height: $heading5_line_height;
 }
 
 h6 {
-  font-size: 14px;
+  font-size: $heading6_font_size;
-  line-height: 21px;
+  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;
+  font-size: $paragraph_lead_font_size;
-  line-height: 27px;
+  line-height: $paragraph_lead_line_height;
-  color: #777;
+  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;
+  margin: $blockquote_margin;
-  padding: 9px 20px 0 19px;
+  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;
 }

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;