Refactored SASS, mobile first

_/scss/generic/_mixins.scss

@@ -0,0 +1,49 @@
+@mixin breakpoint($point) {
+  @if $point == desktop {
+    @media (min-width: 1200px) { @content; }
+  }
+  @else if $point == tablet-landscape {
+    @media (min-width: 1024px) { @content; }
+  }
+  @else if $point == tablet-portrait {
+    @media (min-width: 768px)  { @content; }
+  }
+}
+
+@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: ((($container-width / $column-count) * $span) - $column-gutter) / $container-width * 100%;
+	width: ((100 / $column-count) * $span) - ($column-gutter / $container-max-width) * 100%;
+}
+
+@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;
+}
+
+@mixin gradient($from, $to) {
+  background-color: $from;
+	background-image: -webkit-linear-gradient($from, $to);
+	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
+  background-image: -moz-linear-gradient($from, $to);
+	background-image: -o-linear-gradient($from, $to);	
+}

_/scss/generic/_normalise.scss

@@ -0,0 +1,53 @@
+html {
+	background-color: $base-background-colour;
+	color: $base-colour;
+	font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
+}
+
+h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
+	margin-bottom: $base-margin-bottom * 1px;
+}
+
+h1 {
+	font-size: ($h1-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h1-font-size ) * 1em;
+}
+
+h2 {
+	font-size: ($h2-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h2-font-size ) * 1em;
+}
+
+h3 {
+	font-size: ($h3-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h3-font-size ) * 1em;
+}
+
+h4 {
+	font-size: ($h4-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h4-font-size ) * 1em;
+}
+
+h5 {
+	font-size: ($h5-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h5-font-size ) * 1em;
+}
+
+h6 {
+	font-size: ($h6-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h6-font-size ) * 1em;
+}
+
+ul, ol {
+	margin-left: $list-margin-left * 1px;
+}
+
+ul ul, ol ol {
+	margin-bottom: 0;
+}
+
+img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}

_/scss/generic/_reset.scss

@@ -0,0 +1,35 @@
+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;
+}

_/scss/generic/_utilities.scss

@@ -0,0 +1,33 @@
+.alignleft {
+	float: left;
+}
+
+img.alignleft {
+	margin-right: $column-gutter * 1px;
+}
+
+.alignright {
+	float: right;
+}
+
+img.alignright {
+	margin-left	: $column-gutter * 1px;
+}
+
+.aligncenter {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.clearfix {
+	*zoom:1;
+	&:before,
+	&:after{
+		content: " ";
+		display: table;
+	}
+	&:after{
+		clear: both;
+	}
+}