Conversion to SASS

See updated README.md for details.

scss/_base.scss

@@ -0,0 +1,93 @@
+// Yaho YUI Reset
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{
+	margin: 0;
+	padding: 0;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+fieldset, img { 
+	border: 0;
+}
+
+address, caption, cite, dfn, th, var {
+	font-style: normal;
+	font-weight: normal;
+}
+
+caption, th {
+	text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-size: 100%;
+	font-weight: bold;
+}
+
+q:before, q:after {
+	content: '';
+}
+
+abbr, acronym {
+	border: 0;
+}
+
+// Normalisation
+
+html {
+	background-color: $bodyBackgroundColour;
+	color: $color;
+	font-family: $baseFontStack;
+	font-size: ($baseFontSize / 16) * 1em;
+	line-height: $baseLineHeight;
+}
+
+h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
+	margin-bottom: $marginBottom * 1px;
+}
+
+ul ul, ol ol {
+	margin-bottom: 0;
+}
+
+h1 {
+	font-size: ($h1FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h1FontSize ) * 1em;
+}
+
+h2 {
+	font-size: ($h2FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h2FontSize ) * 1em;
+}
+
+h3 {
+	font-size: ($h3FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h3FontSize ) * 1em;
+}
+
+h4 {
+	font-size: ($h4FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h4FontSize ) * 1em;
+}
+
+h5 {
+	font-size: ($h5FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h5FontSize ) * 1em;
+}
+
+h6 {
+	font-size: ($h6FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h6FontSize ) * 1em;
+}
+
+ul, ol {
+	margin-left: $listMarginLeft * 1px;
+}
+
+a {
+	text-decoration: none;
+}

scss/_forms.scss

@@ -0,0 +1,34 @@
+input, select, textarea, button {
+	display: inline-block;
+	font-family: $baseFontStack;
+	font-size: 1em;
+	line-height: marginBottom + px;
+	color: #222;
+	padding: ($marginBottom / 2) - 1px;
+	background-color: $inputBackgroundColour;
+	border: solid 1px $inputBorderColour;
+	@include border-radius(3px);
+	margin-right: 5px;
+}
+
+.control-group {
+	margin-bottom: $marginBottom + px;
+}
+
+.control-label {
+	float: left;
+	width: 140px;
+}
+
+.controls {
+	margin-left: 160px;
+}
+
+.btn {
+	display: inline-block;
+	background-color: $btnBackgroundColour;
+	border: solid 1px $btnBorderColour;
+	padding: ($marginBottom / 2) - 1px;
+	@include border-radius(3px);
+	@include box-shadow(3px);
+}

scss/_icons.scss

@@ -0,0 +1,8 @@
+.icon {
+	 display: inline-block;
+	*display: inline;
+	width: 16px;
+	height: 16px;
+	vertical-align: text-top;
+	background: red;
+}

scss/_mixins.scss

@@ -0,0 +1,29 @@
+@mixin border-radius ($radius: 5px) {
+	-webkit-border-radius: $radius;
+	   -moz-border-radius: $radius;
+	     -o-border-radius: $radius;
+	        border-radius: $radius;
+
+}
+
+@mixin col-width ($span: 1) {
+	width: ( $columnWidth * $span ) + ( ( $span - 1 ) * $columnGutter ) * 1px;
+}
+
+@mixin box-sizing ($box-model: 'border-box') {
+	-webkit-box-sizing: $box-model;
+       -moz-box-sizing: $box-model;
+            box-sizing: $box-model;
+}
+
+@mixin box-shadow($x-axis: 0, $y-axis: 2px, $blur: 2px, $alpha: 0.1) {
+	-webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+	   -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+	        box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+}
+
+@mixin transition($duration:0.2s, $ease:ease-out) {
+	-webkit-transition: all $duration $ease;
+	   -moz-transition: all $duration $ease;
+	        transition: all $duration $ease;
+}

scss/_nav.scss

@@ -0,0 +1,36 @@
+.nav {
+	list-style: none;
+	margin-left: 0;
+}
+
+	.nav > li, .nav > li > a {
+		 display: inline-block;
+		*display: inline;
+	}
+	
+.nav-list {
+	border: solid 1px #ddd;
+	@include border-radius();
+	@include box-shadow();
+}
+
+	.nav-list > li, .nav-list > li > a {
+		display: block;
+	}
+	
+	.nav-list > li {
+		border-bottom: solid 1px #ddd;
+	}
+	
+	.nav-list > li:last-child {
+		border-bottom: none;
+	}
+	
+		.nav-list > li > a {
+			padding: 10px;
+			@include transition();
+		}
+		
+		.nav-list > li > a:hover {
+			background-color: #fafafa;
+		}

scss/_normalise.scss

@@ -0,0 +1,49 @@
+html {
+	background-color: $bodyBackgroundColour;
+	color: $color;
+	font-family: $baseFontStack;
+	font-size: ($baseFontSize / 16) * 1em;
+	line-height: $baseLineHeight;
+}
+
+h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
+	margin-bottom: $marginBottom * 1px;
+}
+
+ul ul, ol ol {
+	margin-bottom: 0;
+}
+
+h1 {
+	font-size: ($h1FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h1FontSize ) * 1em;
+}
+
+h2 {
+	font-size: ($h2FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h2FontSize ) * 1em;
+}
+
+h3 {
+	font-size: ($h3FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h3FontSize ) * 1em;
+}
+
+h4 {
+	font-size: ($h4FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h4FontSize ) * 1em;
+}
+
+h5 {
+	font-size: ($h5FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h5FontSize ) * 1em;
+}
+
+h6 {
+	font-size: ($h6FontSize / $baseFontSize) * 1em;
+	line-height: ($marginBottom / $h6FontSize ) * 1em;
+}
+
+ul, ol {
+	margin-left: $listMarginLeft * 1px;
+}

scss/_scaffolding.scss

@@ -0,0 +1,96 @@
+// Utils
+
+.alignleft {
+	float: left;
+}
+
+img.alignleft {
+	margin-right: $columnGutter * 1px;
+}
+
+.alignright {
+	float: right;
+}
+
+img.alignright {
+	margin-left	: $columnGutter * 1px;
+}
+
+.aligncenter {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+// Grid
+
+.container {
+	width: $containerWidth * 1px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 0 $containerPadding * 1px;
+	@media (max-width: 767px) {
+		width: auto;
+	}
+}
+
+.container-fluid {
+	@media (max-width: 767px) {
+		padding: 0;
+	}
+}
+
+.row {
+	margin-left: -$columnGutter * 1px;
+	*zoom: 1;
+	@media (max-width: 767px) {
+	 margin-left: 0;
+	}
+}
+
+.row:before,
+.row:after {
+	display: table;
+	line-height: 0;
+	content: "";
+}
+
+.row:after {
+	clear: both;
+}
+
+.row-fluid {
+	@media (max-width: 767px) {
+		padding: 0;
+	}
+}
+
+.col {
+	display: inline-block;
+	*display: inline;
+	float: left;
+	margin-left: $columnGutter * 1px;
+	img {
+		width: 100%;
+	}
+	@media (max-width: 767px) {
+		display: block;
+    float: none;
+    width: 100%;
+    margin-left: 0;
+    @include box-sizing(border-box);
+	}
+}
+
+.col1  { @include col-width(); }
+.col2  { @include col-width(2); }
+.col3  { @include col-width(3); }
+.col4  { @include col-width(4); }
+.col5  { @include col-width(5); }
+.col6  { @include col-width(6); }
+.col7  { @include col-width(7); }
+.col8  { @include col-width(8); }
+.col9  { @include col-width(9); }
+.col10 { @include col-width(10); }
+.col11 { @include col-width(11); }
+.col12 { @include col-width(12); }

scss/_tables.scss

@@ -0,0 +1,21 @@
+.table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+	.table th, 
+	.table td {
+		text-align: left;
+		vertical-align: top;
+		border-top: 1px solid $tableBorderColour;
+		padding: ($marginBottom / 2) * 1px 10px;
+	}
+	
+	.table th {
+		font-weight: bold;
+		border-top: 0;
+	}
+
+	.table thead th {
+	  vertical-align: bottom;
+	}

scss/_variables.scss

@@ -0,0 +1,38 @@
+// Base
+
+$color: 									#222;
+$bodyBackgroundColour: 		#fff;
+
+$baseFontStack: 					'Helvetica Neue', Helvetica, Arial, sans-serif;
+$baseFontSize: 						14;
+$baseLineHeight: 					1.5;
+$marginBottom: 						($baseFontSize * $baseLineHeight);
+
+$h1FontSize: 							28;
+$h2FontSize: 							24;
+$h3FontSize: 							21;
+$h4FontSize: 							18;
+$h5FontSize: 							16;
+$h6FontSize: 							16;
+
+// Lists
+
+$listMarginLeft:					24;
+
+// Scaffolding
+
+$containerWidth:					1200;
+$containerPadding:				40;
+$columnGutter:						20;
+$columnCount:							12;
+$columnWidth:							( ( $containerWidth + $columnGutter ) - ( $columnGutter * $columnCount ) ) / $columnCount;
+
+// Tables
+
+$tableBorderColour:				#ddd;
+
+// Forms
+$inputBorderColour: 			#ccc;
+$inputBackgroundColour:		#fff;
+$btnBorderColour:					#ccc;
+$btnBackgroundColour:			#eee;

scss/style.scss

@@ -0,0 +1,24 @@
+/*
+Theme Name: Bare Bones
+Theme URI: http://github.com/mikefrancis/barebones
+Author:  Mike Francis
+*/
+
+// Variables, Mixins (setup)
+@import "variables";
+@import "mixins";
+
+// Base (SMCSS)
+@import "base";
+
+// Main
+@import "scaffolding";
+@import "nav";
+@import "tables";
+@import "forms";
+@import "icons";
+
+body {
+	background: url(http://basehold.it/i/#{$marginBottom});
+	//background: url(http://basehold.it/i/21);
+}