From cc5ba71131eec3668d90af30462f428eca8df712 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 7 Jul 2013 18:07:39 +0100
Subject: [PATCH] Big mixing upgrade, many from
 https://github.com/thoughtbot/bourbon/tree/5bdaa07c0fcfa6f1e3507185fa805741eeb33952
 before they deprecated the old webkit gradients syntax (Kickoff still needs
 it)

---
 scss/_colour-palette.scss                     |   2 +-
 scss/_components.scss                         |   1 +
 scss/_forms.scss                              |   2 +-
 scss/_functions.scss                          |   3 +-
 scss/_helpers.scss                            |   8 ++
 scss/_mixins.scss                             |   5 +-
 scss/_typography.scss                         |   2 +-
 scss/_utilities.scss                          |  12 +-
 scss/functions/_compact.scss                  |   0
 .../_deprecated-webkit-gradient.scss          |  44 -------
 scss/functions/_golden-ratio.scss             |   3 +
 scss/functions/_linear-gradient.scss          |  15 ++-
 scss/functions/_modular-scale.scss            |  82 +++++++-----
 scss/functions/_px-to-em.scss                 |   2 +-
 scss/functions/_radial-gradient.scss          |  56 ++-------
 scss/functions/_render-gradients.scss         |  14 ---
 scss/functions/_tint-shade.scss               |   4 +-
 scss/functions/_transition-property-name.scss |   0
 scss/helpers/_deprecated-webkit-gradient.scss |  39 ++++++
 scss/helpers/_gradient-positions-parser.scss  |  13 ++
 scss/helpers/_linear-positions-parser.scss    |  61 +++++++++
 scss/helpers/_radial-arg-parser.scss          |  69 ++++++++++
 scss/helpers/_radial-positions-parser.scss    |  18 +++
 scss/helpers/_render-gradients.scss           |  26 ++++
 scss/helpers/_shape-size-stripper.scss        |  10 ++
 scss/kickoff-old-ie.scss                      |   5 +-
 scss/kickoff.scss                             |   5 +-
 scss/mixins/_css3.scss                        |  27 ++--
 scss/mixins/_hidpi.scss                       |  10 ++
 scss/mixins/_keyframes.scss                   |   8 --
 scss/mixins/_linear-gradient.scss             |  65 +++++-----
 scss/mixins/_position.scss                    |  42 +++++++
 scss/mixins/_radial-gradient.scss             | 118 +++++++-----------
 scss/mixins/_utility.scss                     |  18 +--
 34 files changed, 491 insertions(+), 298 deletions(-)
 create mode 100644 scss/_helpers.scss
 mode change 100644 => 100755 scss/functions/_compact.scss
 delete mode 100644 scss/functions/_deprecated-webkit-gradient.scss
 create mode 100755 scss/functions/_golden-ratio.scss
 mode change 100644 => 100755 scss/functions/_linear-gradient.scss
 mode change 100644 => 100755 scss/functions/_modular-scale.scss
 mode change 100644 => 100755 scss/functions/_px-to-em.scss
 mode change 100644 => 100755 scss/functions/_radial-gradient.scss
 delete mode 100644 scss/functions/_render-gradients.scss
 mode change 100644 => 100755 scss/functions/_tint-shade.scss
 mode change 100644 => 100755 scss/functions/_transition-property-name.scss
 create mode 100755 scss/helpers/_deprecated-webkit-gradient.scss
 create mode 100755 scss/helpers/_gradient-positions-parser.scss
 create mode 100755 scss/helpers/_linear-positions-parser.scss
 create mode 100755 scss/helpers/_radial-arg-parser.scss
 create mode 100755 scss/helpers/_radial-positions-parser.scss
 create mode 100755 scss/helpers/_render-gradients.scss
 create mode 100755 scss/helpers/_shape-size-stripper.scss
 create mode 100644 scss/mixins/_hidpi.scss
 create mode 100644 scss/mixins/_position.scss

diff --git a/scss/_colour-palette.scss b/scss/_colour-palette.scss
index f34cc935..6aecf605 100644
--- a/scss/_colour-palette.scss
+++ b/scss/_colour-palette.scss
@@ -115,4 +115,4 @@ $info-background               : #d9edf7;
 $info-border                   : darken(adjust-hue($info-background, -10), 7%);
 
 // <hr> border colour
-$hrBorder                      : lighten(#000, 70%)er;
+$hr-border                     : lighten(#000, 70%);
diff --git a/scss/_components.scss b/scss/_components.scss
index eb4c5735..1f44460c 100644
--- a/scss/_components.scss
+++ b/scss/_components.scss
@@ -21,6 +21,7 @@ img {
 	&.left {
 		margin:0 20px 0 0;
 	}
+
 	&.right {
 		margin:0 0 0 20px;
 	}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 79667eb9..7bc8bb2d 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -591,7 +591,7 @@ textarea {
 		text-align: center;
 		text-shadow: 0 1px 0 #fff;
 		vertical-align: middle;
-		background-color: lighten(#000, 70%)er;
+		background-color: lighten(#000, 70%);
 		border: 1px solid #ccc;
 	}
 	& .add-on,
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 46633543..fc5b8b0c 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -1,9 +1,8 @@
 @import "functions/compact";
-@import "functions/deprecated-webkit-gradient";
+@import "functions/golden-ratio";
 @import "functions/linear-gradient";
 @import "functions/modular-scale";
 @import "functions/px-to-em";
 @import "functions/radial-gradient";
-@import "functions/render-gradients";
 @import "functions/tint-shade";
 @import "functions/transition-property-name";
diff --git a/scss/_helpers.scss b/scss/_helpers.scss
new file mode 100644
index 00000000..f76f4c30
--- /dev/null
+++ b/scss/_helpers.scss
@@ -0,0 +1,8 @@
+// Custom Helpers
+@import "helpers/deprecated-webkit-gradient";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 9c50667b..9564b504 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -5,6 +5,7 @@
 // * RESPONSIVE
 // * CSS3
 // * UTILITY MIXINS
+// * HiDPI
 // * FORMS
 
 // === Vendor prefix ===
@@ -23,10 +24,12 @@
 // === COMPONENTS ===
 @import "mixins/buttons";
 
-
 // === UTILITY MIXINS ===
 @import "mixins/utility";
 
+// === HiDPI ===
+@import "mixins/hidpi";
+
 // === FORMS ===
 @import "mixins/forms";
 
diff --git a/scss/_typography.scss b/scss/_typography.scss
index 5cad29b4..7fe34d03 100644
--- a/scss/_typography.scss
+++ b/scss/_typography.scss
@@ -240,7 +240,7 @@ dd {
 hr {
 	margin: ($base-line-height + px) 0;
 	border: 0;
-	border-top: 1px solid $hrBorder;
+	border-top: 1px solid $hr-border;
 	border-bottom: 1px solid #fff;
 }
 
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index a564b822..07ea8b58 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -59,11 +59,11 @@
 .clear	{ clear:both; float:none; }
 
 .mb0 { margin-bottom: 0 !important;}
-.mb1 { margin-bottom: $base-font-size !important;}
-.mb2 { margin-bottom: $base-font-size * 1.5 !important;}
-.mb3 { margin-bottom: $base-font-size * 1.875 !important;}
+.mb1 { margin-bottom: ($base-font-size) + px !important;}
+.mb2 { margin-bottom: ($base-font-size * 1.5) + px !important;}
+.mb3 { margin-bottom: ($base-font-size * 1.875) + px !important;}
 
 .mt0 { margin-top:    0 !important;}
-.mt1 { margin-top:    $base-font-size !important;}
-.mt2 { margin-top:    $base-font-size * 1.5 !important;}
-.mt3 { margin-top:    $base-font-size * 1.875 !important;}
+.mt1 { margin-top:    ($base-font-size) + px !important;}
+.mt2 { margin-top:    ($base-font-size * 1.5) + px !important;}
+.mt3 { margin-top:    ($base-font-size * 1.875) + px !important;}
diff --git a/scss/functions/_compact.scss b/scss/functions/_compact.scss
old mode 100644
new mode 100755
diff --git a/scss/functions/_deprecated-webkit-gradient.scss b/scss/functions/_deprecated-webkit-gradient.scss
deleted file mode 100644
index c048c18a..00000000
--- a/scss/functions/_deprecated-webkit-gradient.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-// Render Deprecated Webkit Gradient - Linear || Radial
-//************************************************************************//
-@function deprecated-webkit-gradient($type,
-									 $deprecated-pos1, $deprecated-pos2,
-									 $full,
-									 $deprecated-radius1: false, $deprecated-radius2: false) {
-	$gradient-list: ();
-	$gradient: false;
-	$full-length: length($full);
-	$percentage: false;
-	$gradient-type: $type;
-
-	@for $i from 1 through $full-length {
-		$gradient: nth($full, $i);
-
-		@if length($gradient) == 2 {
-			$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
-			$gradient-list: join($gradient-list, $color-stop, comma);
-		}
-
-		@else if $gradient != null {
-			@if $i == $full-length {
-				$percentage: 100%;
-			}
-
-			@else {
-				$percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
-			}
-
-			$color-stop: color-stop(unquote($percentage), $gradient);
-			$gradient-list: join($gradient-list, $color-stop, comma);
-		}
-	}
-
-	@if $type == radial {
-		$gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
-	}
-
-	@else if $type == linear {
-		$gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
-	}
-
-	@return $gradient;
-}
diff --git a/scss/functions/_golden-ratio.scss b/scss/functions/_golden-ratio.scss
new file mode 100755
index 00000000..463d14a0
--- /dev/null
+++ b/scss/functions/_golden-ratio.scss
@@ -0,0 +1,3 @@
+@function golden-ratio($value, $increment) {
+  @return modular-scale($value, $increment, $golden)
+}
diff --git a/scss/functions/_linear-gradient.scss b/scss/functions/_linear-gradient.scss
old mode 100644
new mode 100755
index 550c0140..c8454d83
--- a/scss/functions/_linear-gradient.scss
+++ b/scss/functions/_linear-gradient.scss
@@ -1,6 +1,13 @@
-@function linear-gradient($gradients...) {
-	$type: linear;
-	$type-gradient: append($type, $gradients, comma);
+@function linear-gradient($pos, $gradients...) {
+  $type: linear;
+  $pos-type: type-of(nth($pos, 1));
 
-	@return $type-gradient;
+  // if $pos doesn't exist, fix $gradient
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $gradients: zip($pos $gradients);
+    $pos: false;
+  }
+
+  $type-gradient: $type, $pos, $gradients;
+  @return $type-gradient;
 }
diff --git a/scss/functions/_modular-scale.scss b/scss/functions/_modular-scale.scss
old mode 100644
new mode 100755
index dddccb52..0a718591
--- a/scss/functions/_modular-scale.scss
+++ b/scss/functions/_modular-scale.scss
@@ -1,40 +1,66 @@
+// Scaling Varaibles
+$golden:           1.618;
+$minor-second:     1.067;
+$major-second:     1.125;
+$minor-third:      1.2;
+$major-third:      1.25;
+$perfect-fourth:   1.333;
+$augmented-fourth: 1.414;
+$perfect-fifth:    1.5;
+$minor-sixth:      1.6;
+$major-sixth:      1.667;
+$minor-seventh:    1.778;
+$major-seventh:    1.875;
+$octave:           2;
+$major-tenth:      2.5;
+$major-eleventh:   2.667;
+$major-twelfth:    3;
+$double-octave:    4;
+
 @function modular-scale($value, $increment, $ratio) {
+  $v1: nth($value, 1);
+  $v2: nth($value, length($value));
+  $value: $v1;
+
+  // scale $v2 to just above $v1
+  @while $v2 > $v1 {
+    $v2: ($v2 / $ratio); // will be off-by-1
+  }
+  @while $v2 < $v1 {
+    $v2: ($v2 * $ratio); // will fix off-by-1
+  }
+
+  // check AFTER scaling $v2 to prevent double-counting corner-case
+  $double-stranded: $v2 > $v1;
+
   @if $increment > 0 {
     @for $i from 1 through $increment {
-      $value: ($value * $ratio);
+      @if $double-stranded and ($v1 * $ratio) > $v2 {
+        $value: $v2;
+        $v2: ($v2 * $ratio);
+      } @else {
+        $v1: ($v1 * $ratio);
+        $value: $v1;
+      }
     }
   }
 
   @if $increment < 0 {
-    $increment: abs($increment);
-    @for $i from 1 through $increment {
-      $value: ($value / $ratio);
+    // adjust $v2 to just below $v1
+    @if $double-stranded {
+      $v2: ($v2 / $ratio);
+    }
+
+    @for $i from $increment through -1 {
+      @if $double-stranded and ($v1 / $ratio) < $v2 {
+        $value: $v2;
+        $v2: ($v2 / $ratio);
+      } @else {
+        $v1: ($v1 / $ratio);
+        $value: $v1;
+      }
     }
   }
 
   @return $value;
 }
-
-//  div {
-//                     Increment Up GR with positive value
-//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
-//
-//                     Increment Down GR with negative value
-//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
-//
-//                     Can be used with ceil(round up) or floor(round down)
-//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
-//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
-//  }
-//
-// modularscale.com
-
-@function golden-ratio($value, $increment) {
-  @return modular-scale($value, $increment, 1.618)
-}
-
-//  div {
-//    font-size: golden-ratio(14px, 1); // returns: 22.652px
-//  }
-//
-// goldenratiocalculator.com
diff --git a/scss/functions/_px-to-em.scss b/scss/functions/_px-to-em.scss
old mode 100644
new mode 100755
index 52e41fb6..2eb1031c
--- a/scss/functions/_px-to-em.scss
+++ b/scss/functions/_px-to-em.scss
@@ -3,6 +3,6 @@
 // if the parent is another value say 24px write em(12, 24)
 
 @function em($pxval, $base: 16) {
-	@return ($pxval / $base) * 1em;
+  @return ($pxval / $base) * 1em;
 }
 
diff --git a/scss/functions/_radial-gradient.scss b/scss/functions/_radial-gradient.scss
old mode 100644
new mode 100755
index 13b8e7af..75584060
--- a/scss/functions/_radial-gradient.scss
+++ b/scss/functions/_radial-gradient.scss
@@ -4,54 +4,20 @@
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
-                       $pos: 50% 50%,
-                       $shape-size: ellipse cover) {
+                       $pos: null,
+                       $shape-size: null) {
 
-  @each $value in $G1, $G2 {
-    $first-val: nth($value, 1);
-    $pos-type:  type-of($first-val);
-
-    @if ($pos-type != color) or ($first-val != "transparent") {
-      @if ($pos-type == number)
-      or ($first-val == "center")
-      or ($first-val == "top")
-      or ($first-val == "right")
-      or ($first-val == "bottom")
-      or ($first-val == "left") {
-
-        $pos: $value;
-
-        @if $pos == $G1 {
-          $G1: false;
-        }
-      }
-
-      @else if
-         ($first-val == "ellipse")
-      or ($first-val == "circle")
-      or ($first-val == "closest-side")
-      or ($first-val == "closest-corner")
-      or ($first-val == "farthest-side")
-      or ($first-val == "farthest-corner")
-      or ($first-val == "contain")
-      or ($first-val == "cover") {
-
-        $shape-size: $value;
-
-        @if $value == $G1 {
-          $G1: false;
-        }
-
-        @else if $value == $G2 {
-          $G2: false;
-        }
-      }
-    }
-  }
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
 
   $type: radial;
-  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
+  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
+  $type-gradient: $type, $shape-size $pos, $gradient;
   @return $type-gradient;
 }
+
+
diff --git a/scss/functions/_render-gradients.scss b/scss/functions/_render-gradients.scss
deleted file mode 100644
index fe7c799e..00000000
--- a/scss/functions/_render-gradients.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// User for linear and radial gradients within background-image or border-image properties
-
-@function render-gradients($gradients, $gradient-type, $vendor: false) {
-  $vendor-gradients: false;
-  @if $vendor {
-    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
-  }
-
-  @else if $vendor == false {
-    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
-    $vendor-gradients: unquote($vendor-gradients);
-  }
-  @return $vendor-gradients;
-}
diff --git a/scss/functions/_tint-shade.scss b/scss/functions/_tint-shade.scss
old mode 100644
new mode 100755
index f77e6ea9..f7172004
--- a/scss/functions/_tint-shade.scss
+++ b/scss/functions/_tint-shade.scss
@@ -1,9 +1,9 @@
 // Add percentage of white to a color
 @function tint($color, $percent){
-	@return mix(white, $color, $percent);
+  @return mix(white, $color, $percent);
 }
 
 // Add percentage of black to a color
 @function shade($color, $percent){
-	@return mix(black, $color, $percent);
+  @return mix(black, $color, $percent);
 }
diff --git a/scss/functions/_transition-property-name.scss b/scss/functions/_transition-property-name.scss
old mode 100644
new mode 100755
diff --git a/scss/helpers/_deprecated-webkit-gradient.scss b/scss/helpers/_deprecated-webkit-gradient.scss
new file mode 100755
index 00000000..cd17e283
--- /dev/null
+++ b/scss/helpers/_deprecated-webkit-gradient.scss
@@ -0,0 +1,39 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function _deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+    @else if $gradient != null {
+      @if $i == $full-length {
+        $percentage: 100%;
+      }
+      @else {
+        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+      }
+      $color-stop: color-stop(unquote($percentage), $gradient);
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+  }
+
+  @if $type == radial {
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
+  }
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
+  }
+  @return $gradient;
+}
diff --git a/scss/helpers/_gradient-positions-parser.scss b/scss/helpers/_gradient-positions-parser.scss
new file mode 100755
index 00000000..07d30b6c
--- /dev/null
+++ b/scss/helpers/_gradient-positions-parser.scss
@@ -0,0 +1,13 @@
+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+  @if $gradient-positions
+  and ($gradient-type == linear)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _linear-positions-parser($gradient-positions);
+  }
+  @else if $gradient-positions
+  and ($gradient-type == radial)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _radial-positions-parser($gradient-positions);
+  }
+  @return $gradient-positions;
+}
diff --git a/scss/helpers/_linear-positions-parser.scss b/scss/helpers/_linear-positions-parser.scss
new file mode 100755
index 00000000..d26383ed
--- /dev/null
+++ b/scss/helpers/_linear-positions-parser.scss
@@ -0,0 +1,61 @@
+@function _linear-positions-parser($pos) {
+  $type: type-of(nth($pos, 1));
+  $spec: null;
+  $degree: null;
+  $side: null;
+  $corner: null;
+  $length: length($pos);
+  // Parse Side and corner positions
+  @if ($length > 1) {
+    @if nth($pos, 1) == "to" { // Newer syntax
+      $side: nth($pos, 2);
+
+      @if $length == 2 { // eg. to top
+        // Swap for backwards compatability
+        $degree: _position-flipper(nth($pos, 2));
+      }
+      @else if $length == 3 { // eg. to top left
+        $corner: nth($pos, 3);
+      }
+    }
+    @else if $length == 2 { // Older syntax ("top left")
+      $side: _position-flipper(nth($pos, 1));
+      $corner: _position-flipper(nth($pos, 2));
+    }
+
+    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    $spec: to $side $corner;
+  }
+  @else if $length == 1 {
+    // Swap for backwards compatability
+    @if $type == string {
+      $degree: $pos;
+      $spec: to _position-flipper($pos);
+    }
+    @else {
+      $degree: -270 - $pos; //rotate the gradient opposite from spec
+      $spec: $pos;
+    }
+  }
+  $degree: unquote($degree + ",");
+  $spec:   unquote($spec + ",");
+  @return $degree $spec;
+}
+
+@function _position-flipper($pos) {
+ @return if($pos == left, right, null)
+         if($pos == right, left, null)
+         if($pos == top, bottom, null)
+         if($pos == bottom, top, null);
+}
diff --git a/scss/helpers/_radial-arg-parser.scss b/scss/helpers/_radial-arg-parser.scss
new file mode 100755
index 00000000..a3a3704a
--- /dev/null
+++ b/scss/helpers/_radial-arg-parser.scss
@@ -0,0 +1,69 @@
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+    $spec-at-index: null;
+
+    // Determine if spec was passed to mixin
+    @if type-of($value) == list {
+      $spec-at-index: if(index($value, at), index($value, at), false);
+    }
+    @if $spec-at-index {
+      @if $spec-at-index > 1 {
+        @for $i from 1 through ($spec-at-index - 1) {
+          $shape-size: $shape-size nth($value, $i);
+        }
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      @else if $spec-at-index == 1 {
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      $G1: null;
+    }
+
+    // If not spec calculate correct values
+    @else {
+      @if ($pos-type != color) or ($first-val != "transparent") {
+        @if ($pos-type == number)
+        or ($first-val == "center")
+        or ($first-val == "top")
+        or ($first-val == "right")
+        or ($first-val == "bottom")
+        or ($first-val == "left") {
+
+          $pos: $value;
+
+          @if $pos == $G1 {
+            $G1: null;
+          }
+        }
+
+        @else if
+           ($first-val == "ellipse")
+        or ($first-val == "circle")
+        or ($first-val == "closest-side")
+        or ($first-val == "closest-corner")
+        or ($first-val == "farthest-side")
+        or ($first-val == "farthest-corner")
+        or ($first-val == "contain")
+        or ($first-val == "cover") {
+
+          $shape-size: $value;
+
+          @if $value == $G1 {
+            $G1: null;
+          }
+
+          @else if $value == $G2 {
+            $G2: null;
+          }
+        }
+      }
+    }
+  }
+  @return $G1, $G2, $pos, $shape-size;
+}
diff --git a/scss/helpers/_radial-positions-parser.scss b/scss/helpers/_radial-positions-parser.scss
new file mode 100755
index 00000000..6a5b4777
--- /dev/null
+++ b/scss/helpers/_radial-positions-parser.scss
@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+  $shape-size: nth($gradient-pos, 1);
+  $pos:        nth($gradient-pos, 2);
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+             unquote(if($shape-size, "#{$shape-size},", null));
+  $pos-spec: if($pos, "at #{$pos}", null);
+
+  $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+  // Add comma
+  @if ($spec != '  ') {
+    $spec: "#{$spec},"
+  }
+
+  @return $pre-spec $spec;
+}
diff --git a/scss/helpers/_render-gradients.scss b/scss/helpers/_render-gradients.scss
new file mode 100755
index 00000000..57656768
--- /dev/null
+++ b/scss/helpers/_render-gradients.scss
@@ -0,0 +1,26 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+  $pre-spec: null;
+  $spec: null;
+  $vendor-gradients: null;
+  @if $gradient-type == linear {
+    @if $gradient-positions {
+      $pre-spec: nth($gradient-positions, 1);
+      $spec:     nth($gradient-positions, 2);
+    }
+  }
+  @else if $gradient-type == radial {
+    $pre-spec: nth($gradient-positions, 1);
+    $spec:     nth($gradient-positions, 2);
+  }
+
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+  }
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}
diff --git a/scss/helpers/_shape-size-stripper.scss b/scss/helpers/_shape-size-stripper.scss
new file mode 100755
index 00000000..ee5eda42
--- /dev/null
+++ b/scss/helpers/_shape-size-stripper.scss
@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+  $shape-size-spec: null;
+  @each $value in $shape-size {
+    @if ($value == "cover") or ($value == "contain") {
+      $value: null;
+    }
+    $shape-size-spec: "#{$shape-size-spec} #{$value}";
+  }
+  @return $shape-size-spec;
+}
diff --git a/scss/kickoff-old-ie.scss b/scss/kickoff-old-ie.scss
index 98573ee3..5874a303 100644
--- a/scss/kickoff-old-ie.scss
+++ b/scss/kickoff-old-ie.scss
@@ -14,9 +14,12 @@
 $old-ie: true;
 $fix-mqs: 1024px; //could use ems too
 
-// Core variables and mixins
+// Core variables
 @import "colour-palette";
 @import "variables";
+
+// Mixins
+@import "helpers";
 @import "functions";
 @import "mixins";
 
diff --git a/scss/kickoff.scss b/scss/kickoff.scss
index f9cb6ff4..782bc2f5 100644
--- a/scss/kickoff.scss
+++ b/scss/kickoff.scss
@@ -6,9 +6,12 @@
 
 // By Zander Martineau & Ashley Nolan for TMW - http://tmw.co.uk
 
-// Core variables and mixins
+// Core variables
 @import "colour-palette";
 @import "variables";
+
+// Mixins
+@import "helpers";
 @import "functions";
 @import "mixins";
 
diff --git a/scss/mixins/_css3.scss b/scss/mixins/_css3.scss
index 86650b00..7e1e06d8 100644
--- a/scss/mixins/_css3.scss
+++ b/scss/mixins/_css3.scss
@@ -99,20 +99,23 @@
 
 // @include transform-origin(center, center);
 @mixin transform-origin($args...) {
-		@include prefixer(transform-origin, $args, webkit moz o ms spec);
+	@include prefixer(transform-origin, $args, webkit moz o ms spec);
 }
 
 // ANIMATION
 @mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
--webkit-animation: $name $duration $delay $ease;
-   -moz-animation: $name $duration $delay $ease;
-	-ms-animation: $name $duration $delay $ease;
-		animation: $name $duration $delay $ease;
+	@include prefixer(animation, $name $duration $delay $ease, webkit moz o ms spec);
 }
 
-
-// GRADIENTS
-
+// HYPHENS
+// @include hyphens(auto);
+@mixin hyphens($hyphenation: none) {
+// none | manual | auto
+  @include prefixer(hyphens, $hyphenation, webkit moz ms spec);
+}
+// =================
+// === GRADIENTS ===
+// =================
 
 // Linear gradients
 // ================
@@ -154,11 +157,3 @@
 	@include radial-gradient($inner-color 0%, $outer-color 100%, $fallback: $outer-color);
 	background-repeat: no-repeat;
 }
-
-// TODO: Is this needed?
-// Gradient Bar Colors for buttons and alerts
-@mixin gradientBar($primaryColor, $secondaryColor) {
-	@include gradient-vertical($primaryColor, $secondaryColor);
-	border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
-	border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
-}
diff --git a/scss/mixins/_hidpi.scss b/scss/mixins/_hidpi.scss
new file mode 100644
index 00000000..111e4009
--- /dev/null
+++ b/scss/mixins/_hidpi.scss
@@ -0,0 +1,10 @@
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+@mixin hidpi($ratio: 1.3) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}
diff --git a/scss/mixins/_keyframes.scss b/scss/mixins/_keyframes.scss
index 1585fe20..dca61f2a 100644
--- a/scss/mixins/_keyframes.scss
+++ b/scss/mixins/_keyframes.scss
@@ -20,13 +20,6 @@
       @content;
     }
   }
-  @if $original-prefix-for-microsoft {
-    @include disable-prefix-for-all();
-    $prefix-for-microsoft: true;
-    @-ms-keyframes #{$name} {
-      @content;
-    }
-  }
   @if $original-prefix-for-opera {
     @include disable-prefix-for-all();
     $prefix-for-opera: true;
@@ -35,7 +28,6 @@
     }
   }
   @if $original-prefix-for-spec {
-    $prefix-for-spec:     true !default;
     @include disable-prefix-for-all();
     $prefix-for-spec: true;
     @keyframes #{$name} {
diff --git a/scss/mixins/_linear-gradient.scss b/scss/mixins/_linear-gradient.scss
index e6abcd85..d5b687b0 100644
--- a/scss/mixins/_linear-gradient.scss
+++ b/scss/mixins/_linear-gradient.scss
@@ -1,38 +1,41 @@
-@mixin linear-gradient( $pos, $G1, $G2: false,
-						$G3: false, $G4: false,
-						$G5: false, $G6: false,
-						$G7: false, $G8: false,
-						$G9: false, $G10: false,
-						$deprecated-pos1: left top,
-						$deprecated-pos2: left bottom,
-						$fallback: false) {
+@mixin linear-gradient($pos, $G1, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
+                       $fallback: false) {
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+  $pos-spec: null;
+  $pos-degree: null;
 
-	// Detect what type of value exists in $pos
-	$pos-type: type-of(nth($pos, 1));
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+     $pos: null;
+  }
 
-	// If $pos is missing from mixin, reassign vars and add default position
-	@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
-		$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
-		 $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
-		$pos: top; // Default position
-	}
+  @if $pos {
+    $positions: _linear-positions-parser($pos);
+    $pos-degree: nth($positions, 1);
+    $pos-spec:   nth($positions, 2);
+  }
 
-	$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
-	// Set $G1 as the default fallback color
-	$fallback-color: nth($G1, 1);
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
 
-	// If $fallback is a color use that color as the fallback color
-	@if (type-of($fallback) == color) or ($fallback == "transparent") {
-		$fallback-color: $fallback;
-	}
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
 
-	background-color: $fallback-color;
-	background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
-	background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
-	background-image:     -moz-linear-gradient($pos, $full);
-	background-image:      -ms-linear-gradient($pos, $full);
-	background-image:       -o-linear-gradient($pos, $full);
-	background-image:          linear-gradient(#{$pos}, #{$full});
-	background-repeat: repeat-x;
+  background-color: $fallback-color;
+  background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
 }
diff --git a/scss/mixins/_position.scss b/scss/mixins/_position.scss
new file mode 100644
index 00000000..05efa6e8
--- /dev/null
+++ b/scss/mixins/_position.scss
@@ -0,0 +1,42 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+	@if type-of($position) == list {
+		$coordinates: $position;
+		$position: relative;
+	}
+
+	$top: nth($coordinates, 1);
+	$right: nth($coordinates, 2);
+	$bottom: nth($coordinates, 3);
+	$left: nth($coordinates, 4);
+
+	position: $position;
+
+	@if $top == auto {
+		top: $top;
+	}
+	@else if not(unitless($top)) {
+		top: $top;
+	}
+
+	@if $right == auto {
+		right: $right;
+	}
+	@else if not(unitless($right)) {
+		right: $right;
+	}
+
+	@if $bottom == auto {
+		bottom: $bottom;
+	}
+	@else if not(unitless($bottom)) {
+		bottom: $bottom;
+	}
+
+	@if $left == auto {
+		left: $left;
+	}
+	@else if not(unitless($left)) {
+		left: $left;
+	}
+}
diff --git a/scss/mixins/_radial-gradient.scss b/scss/mixins/_radial-gradient.scss
index 58f2c2a1..e87b45a5 100644
--- a/scss/mixins/_radial-gradient.scss
+++ b/scss/mixins/_radial-gradient.scss
@@ -1,78 +1,44 @@
 // Requires Sass 3.1+
-@mixin radial-gradient($G1, $G2,
-					 $G3: false, $G4: false,
-					 $G5: false, $G6: false,
-					 $G7: false, $G8: false,
-					 $G9: false, $G10: false,
-					 $pos: 50% 50%,
-					 $shape-size: ellipse cover,
-					 $deprecated-pos1: center center,
-					 $deprecated-pos2: center center,
-					 $deprecated-radius1: 0,
-					 $deprecated-radius2: 460,
-					 $fallback: false) {
-
-	@each $value in $G1, $G2 {
-		$first-val: nth($value, 1);
-		$pos-type:  type-of($first-val);
-
-		@if ($pos-type != color) or ($first-val != "transparent") {
-			@if ($pos-type == number)
-			or ($first-val == "center")
-			or ($first-val == "top")
-			or ($first-val == "right")
-			or ($first-val == "bottom")
-			or ($first-val == "left") {
-
-				$pos: $value;
-
-				@if $pos == $G1 {
-					$G1: false;
-				}
-			}
-
-			@else if
-				 ($first-val == "ellipse")
-			or ($first-val == "circle")
-			or ($first-val == "closest-side")
-			or ($first-val == "closest-corner")
-			or ($first-val == "farthest-side")
-			or ($first-val == "farthest-corner")
-			or ($first-val == "contain")
-			or ($first-val == "cover") {
-
-				$shape-size: $value;
-
-				@if $value == $G1 {
-					$G1: false;
-				}
-
-				@else if $value == $G2 {
-					$G2: false;
-				}
-			}
-		}
-	}
-
-	$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-
-	// Set $G1 as the default fallback color
-	$first-color: nth($full, 1);
-	$fallback-color: nth($first-color, 1);
-
-	@if (type-of($fallback) == color) or ($fallback == "transparent") {
-		$fallback-color: $fallback;
-	}
-
-	background-color:  $fallback-color;
-	background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
-	background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
-	background-image:     -moz-radial-gradient($pos, $shape-size, $full);
-	background-image:      -ms-radial-gradient($pos, $shape-size, $full);
-	background-image:       -o-radial-gradient($pos, $shape-size, $full);
-	background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+@mixin radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 460,
+                       $fallback: false) {
+
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Strip deprecated cover/contain for spec
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  // Set $G1 as the default fallback color
+  $first-color: nth($full, 1);
+  $fallback-color: nth($first-color, 1);
+
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  // Add Commas and spaces
+  $shape-size: if($shape-size, '#{$shape-size}, ', null);
+  $pos:        if($pos, '#{$pos}, ', null);
+  $pos-spec:   if($pos, 'at #{$pos}', null);
+  $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
+
+  background-color:  $fallback-color;
+  background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
+  background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
 }
-
-//  Usage: Gradient position and shape-size are required. Color stops are optional.
-//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
-//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
diff --git a/scss/mixins/_utility.scss b/scss/mixins/_utility.scss
index 04c91868..5a9e2c8b 100644
--- a/scss/mixins/_utility.scss
+++ b/scss/mixins/_utility.scss
@@ -1,5 +1,5 @@
 // Clearfix
-// Other clearfix options: https://github.com/stubbornella/oocss/blob/oocss-sass/components/utils/_clearfix-me.scss
+// Other clearfix options: https://github.com/stubbornella/oocss/blob/master/oocss/src/components/utils/_clearfix-me.scss
 @mixin clearfix {
 	*zoom: 1;
 	&:before,
@@ -59,21 +59,9 @@
 	}
 }
 
-// Optional hyphenation
-// https://developer.mozilla.org/en-US/docs/CSS/hyphens
-// @include hyphens();
-@mixin hyphens($arg: auto) {
-	word-wrap: break-word;
-	@include prefixer(hyphens, $arg, webkit moz ms o spec);
-}
-
-
-
 // Centre-align a block level element
-// @extend %center-block
-// #context a%center-block
-// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders
-%center-block {
+// @include center-block
+@mixin center-block() {
 	display: block;
 	margin: 0 auto;
 }