diff --git a/_sass/coderay.scss b/_sass/coderay.scss
index 200fd8ca..55dd71bc 100644
--- a/_sass/coderay.scss
+++ b/_sass/coderay.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Coderay syntax highlighting
+   ========================================================================== */
+
 .CodeRay {
   background-color: #efefef;
   font-family: $code-font;
@@ -130,4 +134,4 @@ ol.CodeRay li { white-space: pre }
 .CodeRay .insert .insert { color: #080; font-weight:bold }
 .CodeRay .delete .delete { color: #800; font-weight:bold }
 .CodeRay .change .change { color: #66f; }
-.CodeRay .head .head { color: #f4f; }
\ No newline at end of file
+.CodeRay .head .head { color: #f4f; }
diff --git a/_sass/elements.scss b/_sass/elements.scss
index 18b8c152..689ad633 100644
--- a/_sass/elements.scss
+++ b/_sass/elements.scss
@@ -1,3 +1,7 @@
+/* 
+   Rules
+   ========================================================================== */
+
 hr { 
 	display: block; 
 	margin: 1em 0; 
@@ -7,10 +11,15 @@ hr {
 	border-top: 1px solid #ccc;
 	border-bottom: 1px solid #fff; 
 }
-/* Figures and images ==================================== */
+
+/* 
+   Figures and images
+   ========================================================================== */
+
 figure {
 	margin-bottom: $indent-var;
 }
+
 article img {
 	max-width: 100%;
 	height: auto;
@@ -18,9 +27,13 @@ article img {
 	vertical-align: middle; 
 	-ms-interpolation-mode: bicubic; 
 }
+
 svg:not(:root) {
 		overflow: hidden; 
 }
+
+/* 2 images of equal dimensions in a row */
+
 .half {
 	@include container;
 	@include clearfix;
@@ -33,6 +46,9 @@ svg:not(:root) {
 		}
 	}
 }
+
+/* 3 images of equal dimensions in a row */
+
 .third {
 	@include container;
 	@include clearfix;
@@ -45,7 +61,13 @@ svg:not(:root) {
 		}
 	}
 }
-/* Buttons ============================================== */
+
+/* 
+   Buttons
+   ========================================================================== */
+
+/* Default button */
+
 .btn {
   display: inline-block;
   margin-bottom: 20px;
@@ -68,6 +90,9 @@ svg:not(:root) {
     color: $primary;
   }
 }
+
+/* Success button */
+
 .btn-success {
   background-color: $success;
   color: $white;
@@ -80,6 +105,9 @@ svg:not(:root) {
     color: $success;
   }
 }
+
+/* Warning button */
+
 .btn-warning {
   background-color: $warning;
   color: $white;
@@ -92,6 +120,9 @@ svg:not(:root) {
     color: $warning;
   }
 }
+
+/* Danger button */
+
 .btn-danger {
   background-color: $danger;
   color: $white;
@@ -104,6 +135,9 @@ svg:not(:root) {
     color: $danger;
   }
 }
+
+/* Information button */
+
 .btn-info {
   background-color: $info;
   color: $white;
@@ -116,7 +150,11 @@ svg:not(:root) {
     color: $info;
   }
 }
-/* Well ================================================= */
+
+/* 
+   Wells
+   ========================================================================== */
+
 .well {
 	min-height: 20px;
 	padding: 19px;
diff --git a/_sass/forms.scss b/_sass/forms.scss
index 19c1b3b0..8ce8c67a 100644
--- a/_sass/forms.scss
+++ b/_sass/forms.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
 btnform { 
 	margin: 0 0 5px 0;
 	fieldset { 
@@ -158,7 +162,11 @@ input[type="hidden"] {
 .checkbox.inline + .checkbox.inline {
 	margin-left : 10px; 
 }
-/* disabled ==================================== */
+
+/* 
+   Disabled state
+   ========================================================================== */
+
 input[disabled],
 select[disabled],
 textarea[disabled],
@@ -168,7 +176,11 @@ textarea[readonly] {
 	@include opacity(.5);
 	cursor : not-allowed; 
 }
-/* focus and active ============================ */
+
+/* 
+   Focus & active state
+   ========================================================================== */
+
 input:focus,
 textarea:focus {
 	border-color : $accentcolor;
@@ -181,7 +193,11 @@ input[type="checkbox"]:focus,
 select:focus {
 	@include box-shadow(none); 
 }
-/* help text ==================================== */
+
+/* 
+   Help text
+   ========================================================================== */
+
 .help-block,
 .help-inline {
 	color : lighten($black, 50); 
@@ -196,7 +212,11 @@ select:focus {
 	vertical-align : middle;
 	padding-left : 5px; 
 }
-/* .form-inline ================================= */
+
+/* 
+   .form-inline
+   ========================================================================== */
+
 .form-inline input,
 .form-inline textarea,
 .form-inline select {
@@ -218,7 +238,11 @@ select:focus {
 	float : left;
 	margin-left : 0;
 	margin-right : 3px; }
-/* .form-search ================================= */
+
+/* 
+   .form-search
+   ========================================================================== */
+
 .form-search input,
 .form-search textarea,
 .form-search select {
@@ -246,4 +270,4 @@ select:focus {
 	float : left;
 	margin-left : 0;
 	margin-right : 3px;
-}
\ No newline at end of file
+}
diff --git a/_sass/grid.scss b/_sass/grid.scss
index ffb89e7a..4f8d4666 100644
--- a/_sass/grid.scss
+++ b/_sass/grid.scss
@@ -1,5 +1,12 @@
-// Defining number of columns in the grid.
-// Common Values would be 12, 16 or 24
+/* ==========================================================================
+   Grid mixins
+   ========================================================================== */
+
+/* 
+   Define number of columns in the grid
+   Common values would be 12, 16 or 24
+   ========================================================================== */
+
 $width: 100%;
 $def_grid: 12;
 $margin: 0;
@@ -8,40 +15,70 @@ $margin: 0;
   margin:0 auto;
   width:$width;
 }
-                                      
-// Works out the width of elements based
-// on total number of columns and width
-// number of columns being displayed.
-// Removes 20px for margins
+
+/* 
+   Works out the width of elements based on total number of columns and width
+   number of columns being displayed. Removes 20px for margins.
+   ========================================================================== */
+
 @mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
   display:$display;
   float:$float;
   width:(100%/$grid * $cols) - ($margin * 2);
 }  
 
-// Allows for padding before element
+/* 
+   Add x amount of column padding before an element
+   Example: @include prefix(1,12);
+   ========================================================================== */
+
 @mixin prefix($grid:$def_grid,$cols:''){
   margin-left:(100%/$grid * $cols);
 }
-// Allows for padding after element
+
+/* 
+   Add x amount of column padding after an element
+   Example: @include suffix(2,12);
+   ========================================================================== */
+
 @mixin suffix($grid:$def_grid,$cols:''){  
   margin-right:(100%/$grid * $cols);    
 }
-// Removes left margin
+
+/* 
+   Remove left margin
+   Example: @include first;
+   ========================================================================== */
+
 @mixin first(){
   margin-left:0;
 }
-// Removes right margin
+
+/* 
+   Remove right margin
+   Example: @include last;
+   ========================================================================== */
+
 @mixin last(){
   margin-right:0;
 }
 
+/* 
+   Push an element x amount of column(s) to the right
+   Example: @include push(2,12);
+   ========================================================================== */
+
 @mixin push($grid:$def_grid,$move:'') {
   position:relative;
   left:(100%/$grid * $move);
 } 
 
+/* 
+   Pull an element x amount of column(s) to the left
+   Example: @include pull(1,12);
+   ========================================================================== */
+
 @mixin pull($grid:$def_grid,$move:''){
   position:relative;
   left:(100%/$grid * $move) * -1;
-}
\ No newline at end of file
+}
diff --git a/_sass/mixins.scss b/_sass/mixins.scss
index ac952d98..1d244115 100644
--- a/_sass/mixins.scss
+++ b/_sass/mixins.scss
@@ -1,17 +1,20 @@
-// UTILITY MIXINS
-// --------------------------------------------------
+/* ==========================================================================
+   Utility mixins
+   ========================================================================== */
+
+/* 
+   Clearfix
+   For clearing floats like a boss h5bp.com/q
+   ========================================================================== */
 
-// Clearfix
-// --------------------
-// For clearing floats like a boss h5bp.com/q
 @mixin clearfix {
   *zoom: 1;
   &:before,
   &:after {
     display: table;
     content: "";
-    // Fixes Opera/contenteditable bug:
-    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+    /* Fixes Opera/contenteditable bug: */
+    /* http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 */
     line-height: 0;
   }
   &:after {
@@ -19,29 +22,38 @@
   }
 }
 
-// Webkit-style focus
-// --------------------
+/* 
+   Webkit-style focus
+   ========================================================================== */
+
 @mixin tab-focus() {
-  // Default
+  /* Default */
   outline: thin dotted #333;
-  // Webkit
+  /* Webkit */
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 
-// Center-align a block level element
-// ----------------------------------
+/* 
+   Center-align a block level element
+   ========================================================================== */
+
 @mixin center-block() {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
-// TYPOGRAPHY
-// --------------------------------------------------
+/* ==========================================================================
+   Typography related mixins
+   ========================================================================== */
+
+/* 
+   Maintains vertical rhythm by setting a font-sizes proportional to
+   line-height and bottom margin
+   example: @font-size(16);
+   ========================================================================== */
 
-// Full-fat vertical rhythm
-// ------------------------
 @mixin font-size($size) {
   font-size: 0px + $size;
   font-size: 0rem + $size / $doc-font-size;
@@ -50,153 +62,225 @@
   margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
 }
 
-// Just the REMs
-// -------------
+/* 
+   Just font-size (REMs + pixel fallback)
+   example: @include font-rem(16);
+   ========================================================================== */
+
 @mixin font-rem($size) {
   font-size: 0px + $size;
   font-size: 0rem + $size / $doc-font-size;
 }
 
-// Just font-size and line-height
-// ------------------------------
+/* 
+   Just font-size (REMs + pixel fallback) and line-height
+   @include font(16);
+   ========================================================================== */
+
 @mixin font($size) {
   font-size: 0px + $size;
   font-size: 0rem + $size / $doc-font-size;
   line-height: 0 + round($doc-line-height / $size*10000) / 10000;
 }
 
+/* 
+   Hide text overflow and end with ...
+   ========================================================================== */
+
 @mixin text-overflow() {
-overflow: hidden;
-text-overflow: ellipsis;
-white-space: nowrap; }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; 
+}
+
+/* Indentation variable */
 
 $indent-var: 0rem + ($doc-line-height / $doc-font-size);
 
-// GRADIENTS
-// --------------------------------------------------
+/* ==========================================================================
+   Gradient mixins
+   ========================================================================== */
 
 @mixin horizontal($startColor : $white, $endColor : $lightergrey) {
-background-color: $endColor;
-background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
-background-image  : -webkit-linear-gradient(left, $startColor, $endColor);           // Safari 5.1+, Chrome 10+
-background-image  : -moz-linear-gradient(left, $startColor, $endColor);            // FF 3.6+
-background-image  : -ms-linear-gradient(left, $startColor, $endColor);             // IE10
-background-image  : -o-linear-gradient(left, $startColor, $endColor);              // Opera 11.10
-background-image  : linear-gradient(left, $startColor, $endColor);               // W3C
-background-repeat : repeat-x; }
+  background-color: $endColor;
+  background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image  : -webkit-linear-gradient(left, $startColor, $endColor);           // Safari 5.1+, Chrome 10+
+  background-image  : -moz-linear-gradient(left, $startColor, $endColor);            // FF 3.6+
+  background-image  : -ms-linear-gradient(left, $startColor, $endColor);             // IE10
+  background-image  : -o-linear-gradient(left, $startColor, $endColor);              // Opera 11.10
+  background-image  : linear-gradient(left, $startColor, $endColor);               // W3C
+  background-repeat : repeat-x;
+ }
 
 @mixin vertical($startColor : $white, $endColor:  $lightergrey) {
-background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
-background-image  : -webkit-linear-gradient(top, $startColor, $endColor);            // Safari 5.1+, Chrome 10+
-background-color  : $endColor;
-background-image  : -moz-linear-gradient(top, $startColor, $endColor);             // FF 3.6+
-background-image  : -ms-linear-gradient(top, $startColor, $endColor);              // IE10
-background-image  : -o-linear-gradient(top, $startColor, $endColor);             // Opera 11.10
-background-image  : linear-gradient(top, $startColor, $endColor);                // W3C
-background-repeat : repeat-x; }
+  background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image  : -webkit-linear-gradient(top, $startColor, $endColor);            // Safari 5.1+, Chrome 10+
+  background-color  : $endColor;
+  background-image  : -moz-linear-gradient(top, $startColor, $endColor);             // FF 3.6+
+  background-image  : -ms-linear-gradient(top, $startColor, $endColor);              // IE10
+  background-image  : -o-linear-gradient(top, $startColor, $endColor);             // Opera 11.10
+  background-image  : linear-gradient(top, $startColor, $endColor);                // W3C
+  background-repeat : repeat-x; 
+}
 
 @mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
-background-color  : $endColor;
-background-image  : -moz-linear-gradient($deg, $startColor, $endColor);           // FF 3.6+
-background-image  : -ms-linear-gradient($deg, $startColor, $endColor);            // IE10
-background-image  : -webkit-linear-gradient($deg, $startColor, $endColor);          // Safari 5.1+, Chrome 10+
-background-image  : -o-linear-gradient($deg, $startColor, $endColor);             // Opera 11.10
-background-image  : linear-gradient($deg, $startColor, $endColor);              // W3C
-background-repeat : repeat-x; }
+  background-color  : $endColor;
+  background-image  : -moz-linear-gradient($deg, $startColor, $endColor);           // FF 3.6+
+  background-image  : -ms-linear-gradient($deg, $startColor, $endColor);            // IE10
+  background-image  : -webkit-linear-gradient($deg, $startColor, $endColor);          // Safari 5.1+, Chrome 10+
+  background-image  : -o-linear-gradient($deg, $startColor, $endColor);             // Opera 11.10
+  background-image  : linear-gradient($deg, $startColor, $endColor);              // W3C
+  background-repeat : repeat-x; 
+}
 
 // .bordered(COLOR, COLOR, COLOR, COLOR);
 @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
-border-top : solid 1px $top-color;
-border-left : solid 1px $left-color;
-border-right : solid 1px $right-color;
-border-bottom : solid 1px $bottom-color; }
+  border-top : solid 1px $top-color;
+  border-left : solid 1px $left-color;
+  border-right : solid 1px $right-color;
+  border-bottom : solid 1px $bottom-color; 
+}
 
-// ROUND CORNERS
-// --------------------------------------------------
+/* ==========================================================================
+   Rounded corners
+   ========================================================================== */
+
+
+
+/* 
+   Round all corners
+   example: @include rounded(4px);
+   ========================================================================== */
 
-// .rounded(VALUE);
 @mixin rounded($radius:4px) {
-border-radius : $radius; }
+  border-radius : $radius; 
+}
+
+/* 
+   Round individual corners (top right, bottom right, bottom left, top left)
+   example: @include border-radius(4px, 0, 0, 4px);
+   ========================================================================== */
 
-// .border-radius(VALUE,VALUE,VALUE,VALUE);
 @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
-border-top-right-radius : $topright;
-border-bottom-right-radius : $bottomright;
-border-bottom-left-radius : $bottomleft;
-border-top-left-radius : $topleft;
--webkit-background-clip : padding-box;
--moz-background-clip : padding;  
-background-clip : padding-box; }
+  border-top-right-radius: $topright;
+  border-bottom-right-radius: $bottomright;
+  border-bottom-left-radius: $bottomleft;
+  border-top-left-radius: $topleft;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;  
+  background-clip: padding-box; 
+}
+
+/* 
+   Box shadow
+   example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR));
+   ========================================================================== */
 
-// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
 @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
--webkit-box-shadow : $shadow;
--moz-box-shadow : $shadow;
-box-shadow : $shadow; }
+  -webkit-box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  box-shadow: $shadow; 
+}
+
+/* 
+   Drop shadow
+   example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+   ========================================================================== */
 
-// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
 @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $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); }
+  -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); 
+}
+
+/* 
+   Text shadow
+   example: @include text-shadow(0 2px 3px rgba(0,0,0,.25));
+   ========================================================================== */
 
-// .text-shadow();
 @mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
-text-shadow : $shadow; }
+text-shadow: $shadow; }
 
-// .opacity(VALUE);
-@mixin opacity($opacity : .5) {
-opacity : $opacity; }
+/* 
+   Opacity
+   example: @include opacity(0.5); // 50% opacity
+   ========================================================================== */
 
-// TRANSFORMATIONS
-// --------------------------------------------------
+@mixin opacity($opacity: 0.5) {
+  opacity: $opacity; 
+}
+
+/* ==========================================================================
+   Transformations
+   ========================================================================== */
+
+/* 
+   @include rotate(VALUEdeg);
+   ========================================================================== */
 
-// .rotate(VALUEdeg);
 @mixin rotate($deg) {
--webkit-transform : rotate($deg);
--moz-transform : rotate($deg);
--ms-transform : rotate($deg);
--o-transform : rotate($deg);
-transform : rotate($deg); }
+  -webkit-transform: rotate($deg);
+  -moz-transform: rotate($deg);
+  -ms-transform: rotate($deg);
+  -o-transform: rotate($deg);
+  transform: rotate($deg); 
+}
+
+/* 
+   @include scale(VALUE);
+   ========================================================================== */
 
-// .scale(VALUE);
 @mixin scale($ratio) {
--webkit-transform : scale($ratio);
--moz-transform : scale($ratio);
--ms-transform : scale($ratio);
--o-transform : scale($ratio);
-transform : scale($ratio); }
+  -webkit-transform: scale($ratio);
+  -moz-transform: scale($ratio);
+  -ms-transform: scale($ratio);
+  -o-transform: scale($ratio);
+  transform: scale($ratio); 
+}
+
+/* 
+   @include skew(VALUE, VALUE);
+   ========================================================================== */
 
-// .skew(VALUE, VALUE);
 @mixin skew($x: 0, $y: 0) {
--webkit-transform : skew($x, $y);
--moz-transform : skew($x, $y);
--ms-transform : skew($x, $y);
--o-transform : skew($x, $y);
-transform : skew($x, $y); }
+  -webkit-transform: skew($x, $y);
+  -moz-transform: skew($x, $y);
+  -ms-transform: skew($x, $y);
+  -o-transform: skew($x, $y);
+  transform: skew($x, $y); 
+}
+
+/* 
+   @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
+   ========================================================================== */
 
-// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
 @mixin transition($transition) {
--webkit-transition : $transition;
--moz-transition : $transition;
--ms-transition : $transition;
--o-transition : $transition;
-transition : $transition; }
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -ms-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition; 
+}
+
+/* 
+   @include translate(VALUE, VALUE);
+   ========================================================================== */
 
-// .translate(VALUE, VALUE)
 @mixin translate($x: 0, $y: 0) {
--webkit-transform : translate($x, $y);
--moz-transform : translate($x, $y);
--ms-transform : translate($x, $y);
--o-transform : translate($x, $y);
-transform : translate($x, $y); }
+  -webkit-transform: translate($x, $y);
+  -moz-transform: translate($x, $y);
+  -ms-transform: translate($x, $y);
+  -o-transform: translate($x, $y);
+  transform: translate($x, $y); 
+}
 
 @mixin translate3d($x: 0, $y: 0, $z: 0) {
--webkit-transform : translate($x, $y, $z);
--moz-transform : translate($x, $y, $z);
--ms-transform : translate($x, $y, $z);
--o-transform : translate($x, $y, $z);
-transform : translate($x, $y, $z); }
+  -webkit-transform: translate($x, $y, $z);
+  -moz-transform: translate($x, $y, $z);
+  -ms-transform: translate($x, $y, $z);
+  -o-transform: translate($x, $y, $z);
+  transform: translate($x, $y, $z); 
+}
 
 @mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
   -webkit-animation: $name $duration $delay $ease;
@@ -204,68 +288,89 @@ transform : translate($x, $y, $z); }
   -ms-animation:     $name $duration $delay $ease;
 }
 
-// BACKGROUND
-// --------------------------------------------------
+/* ==========================================================================
+   Background
+   ========================================================================== */
+
+/* 
+   @include background-alpha(VALUE VALUE);
+   ========================================================================== */
 
-// .background-alpha(VALUE VALUE);
 @mixin background-alpha($color: $white, $alpha: 1) {
-background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); }
+  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); 
+}
+
+/* 
+   @include background-size(VALUE VALUE);
+   ========================================================================== */
 
-// .background-size(VALUE VALUE);
 @mixin background-size($size){
--webkit-background-size : $size;
--moz-background-size : $size;
--o-background-size : $size;
-background-size : $size; }
+  -webkit-background-size: $size;
+  -moz-background-size: $size;
+  -o-background-size: $size;
+  background-size: $size; 
+}
 
-// .background-clip(VALUE); (border-box, padding-box, content-box)
-@mixin background-clip($clip) {
--webkit-background-clip : $clip;
--moz-background-clip : $clip;
-background-clip : $clip; }
+/* 
+   Box-sizing
+   example: @include box-sizing(VALUE); //(border-box, padding-box, content-box)
+   ========================================================================== */
 
-// .box-sizing(VALUE); (border-box, padding-box, content-box)
 @mixin box-sizing($boxsize: border-box) {
--webkit-box-sizing : $boxsize;
--moz-box-sizing : $boxsize;
--ms-box-sizing : $boxsize;
-box-sizing : $boxsize; }
+  -webkit-box-sizing: $boxsize;
+  -moz-box-sizing: $boxsize;
+  -ms-box-sizing: $boxsize;
+  box-sizing: $boxsize; 
+}
+
+/* ==========================================================================
+   Image replacement
+   ========================================================================== */
 
-// For image replacement
 @mixin hide-text() {
-text-indent : 100%;
-white-space : nowrap;
-overflow : hidden; }
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden; 
+}
+
+/* 
+   Hide from visual and speaking browsers
+   ========================================================================== */
 
-// Hide from visual and speaking browsers
 @mixin hidden {
   display: none;
   visibility: hidden;
 }
 
-// Hide but maintain layout
+/* 
+   Hide but maintain layout
+   ========================================================================== */
+
 @mixin invisible() { 
-visibility : hidden; }
+  visibility: hidden; 
+}
+
+/* 
+   Resize
+   example: @include resize(VALUE); //(none, both, horizontal, vertical, inherit)
+
+   ========================================================================== */
 
-// .resize(VALUE) (none, both, horizontal, vertical, inherit)
 @mixin resize($direction: both) {
-resize : $direction;
-overflow : auto; }
+  resize: $direction;
+  overflow: auto; 
+}
 
-// .userselect(VALUE) (all, element, none, text)
-@mixin user-select($select) {
--webkit-user-select : $select;
--moz-user-select : $select;
--o-user-select : $select;
-user-select : $select; }
+/* 
+   Hidden but available to speaking browsers
+   ========================================================================== */
 
-// Hidden but available to speaking browsers
 @mixin visuallyhidden() { 
-overflow : hidden; 
-position : absolute;
-clip : rect(0 0 0 0); 
-height : 1px; 
-width : 1px;
-margin : -1px; 
-padding : 0; 
-border : 0; }
\ No newline at end of file
+overflow: hidden; 
+position: absolute;
+clip: rect(0 0 0 0); 
+height: 1px; 
+width: 1px;
+margin: -1px; 
+padding: 0; 
+border: 0; }
\ No newline at end of file
diff --git a/_sass/pygments.scss b/_sass/pygments.scss
index 0cec2fc4..ae684f64 100644
--- a/_sass/pygments.scss
+++ b/_sass/pygments.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Pygments.rb syntax highlighting
+   ========================================================================== */
+
 .highlight {
 	background-color: #efefef;
 	font-family: $code-font;
@@ -72,4 +76,4 @@
 	.vg { color: #008080 } /* Name.Variable.Global */
 	.vi { color: #008080 } /* Name.Variable.Instance */
 	.il { color: #009999 } /* Literal.Number.Integer.Long */
-}
\ No newline at end of file
+}
diff --git a/_sass/site.scss b/_sass/site.scss
index 0ddfa3c1..7ba3eff0 100644
--- a/_sass/site.scss
+++ b/_sass/site.scss
@@ -1,4 +1,11 @@
-/* Selection ============================================= */
+/* ==========================================================================
+   Site wide styles
+   ========================================================================== */
+
+/* 
+   Selection
+   ========================================================================== */
+
 ::-moz-selection { 
 	background-color: lighten($basecolor, 65%); 
 	color: $basecolor; 
@@ -10,13 +17,21 @@
 	text-shadow: none; 
 }
 
-/* Global Classes ======================================== */
+/* 
+   Global classes
+   ========================================================================== */
+
+/* Capitalize */
 .all-caps {
 	text-transform: uppercase;
 }
+
+/* Float left */
 .pull-left {
 	float: left;
 }
+
+/* Float right */
 .pull-right {
 	float: right;
 }
@@ -24,6 +39,8 @@
 	float: right;
 	margin-top: 0;
 }
+
+/* Clearfix */
 .clearfix {
 	*zoom: 1;
 	&:before,
@@ -35,6 +52,8 @@
 		clear: both;
 	}
 }
+
+/* Remove bullets and indentation from list */
 .unstyled-list {
 	list-style: none;
 	margin-left: 0;
@@ -44,7 +63,10 @@
 	}
 }
 
-/* Global Transition ==================================== */
+/* 
+   Global transition
+   ========================================================================== */
+
 b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
 	@include transition(all .2s ease);
 }
\ No newline at end of file
diff --git a/_sass/typography.scss b/_sass/typography.scss
index 17da453d..75f863b3 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -1,5 +1,11 @@
-// Headings
-// --------------------------------------------------
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/* 
+   Headings
+   ========================================================================== */
+
 h1, h2, h3, h4, h5, h6 {
 	font-family: $heading-font;
 }
@@ -22,8 +28,10 @@ h6 {
 	@include font-size(14);
 }
 
-// Links
-// --------------------------------------------------
+/* 
+   Links
+   ========================================================================== */
+
 a { 
 	text-decoration: none;
 	color: $link-color; 
@@ -43,8 +51,10 @@ a {
 	}
 }
 
-// Figures
-// --------------------------------------------------
+/* 
+   Figure captions
+   ========================================================================== */
+
 figcaption {
 	padding-top: 10px;
 	@include font(14);
@@ -52,8 +62,10 @@ figcaption {
 	color: lighten($text-color, 10);
 }
 
-// Feature Image Caption
-// --------------------------------------------------
+/* 
+   Feature image captions
+   ========================================================================== */
+
 .image-credit {
 	@include grid(12,10);
 	@include prefix(12,1);
@@ -77,8 +89,10 @@ figcaption {
 	}
 }
 
-// Note text
-// --------------------------------------------------
+/* 
+   Notices
+   ========================================================================== */
+
 .notice {
 	margin-top: 1.5em;
 	padding: .5em 1em;
@@ -89,8 +103,10 @@ figcaption {
 	@include rounded(3px);
 }
 
-// Blockquotes
-// --------------------------------------------------
+/* 
+   Blockquotes
+   ========================================================================== */
+
 blockquote {
 	margin-left: -28px;
 	padding-left: 20px;
@@ -99,8 +115,10 @@ blockquote {
 	font-style: italic;
 }
 
-// Footnotes
-// --------------------------------------------------
+/* 
+   Footnotes
+   ========================================================================== */
+
 .footnotes {
 	ol, li, p {
 		margin-bottom: 0;
@@ -108,8 +126,10 @@ blockquote {
 	}
 }
 
-// Paragraphs
-// --------------------------------------------------
+/* 
+   Paragraphs
+   ========================================================================== */
+
 p {
 	margin: 0 0 $indent-var;
 	// sibling indentation
@@ -121,8 +141,10 @@ p {
 	}
 }
 
-// Code
-// --------------------------------------------------
+/* 
+   Code snippets
+   ========================================================================== */
+
 tt, code, kbd, samp, pre {
 	font-family: $code-font;
 }
diff --git a/_sass/variables.scss b/_sass/variables.scss
index 440ad8f0..a0d832c9 100644
--- a/_sass/variables.scss
+++ b/_sass/variables.scss
@@ -1,4 +1,11 @@
-// TYPOGRAPHY ================================================
+/* ==========================================================================
+   Sass variables
+   ========================================================================== */
+
+/* 
+   Typography
+   ========================================================================== */
+
 $doc-font-size: 16;
 $doc-line-height: 26;
 $paragraph-indent: true !default;
@@ -7,7 +14,10 @@ $heading-font: 'PT Sans Narrow', sans-serif;
 $code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
 $alt-font: $base-font;
 
-// COLOR ======================================================
+/* 
+   Colors
+   ========================================================================== */
+
 $bodycolor      : #fff;
 $body-color     : $bodycolor;
 $textcolor      : #333332;
@@ -20,21 +30,24 @@ $white          : #fff;
 $black          : #111;
 $accentcolor    : $black;
 
-// Buttons
+/* buttons */
 $primary			: $black;
 $success			: #5cb85c;
 $warning			: #dd8338;
 $danger				: #C64537;
 $info				  : #308cbc;
 
-// Links
+/* links */
 $linkcolor 		    : #343434;
 $link-color       : $linkcolor;
 $linkcolorhover 	: darken($linkcolor, 10);
 $linkcolorvisited : lighten($linkcolorhover, 20);
 $linkcolorfocus 	: darken($linkcolorvisited, 10);
 
-// Media Queries
+/* 
+   Breakpoints
+   ========================================================================== */
+   
 $micro            : "only screen and (min-width: 30em)";
 $small            : "only screen and (min-width: 37.5em)";
 $medium           : "only screen and (min-width: 48em)";