Add in pixel to rem, fix some minor requirements issues

compass/stylesheets/_toolkit-no-css.scss

@@ -51,4 +51,9 @@
 //////////////////////////////
 // Import Equal Height Columns
 //////////////////////////////
-@import "toolkit/equal-height-columns";
+@import "toolkit/equal-height-columns";
+
+//////////////////////////////
+// Import Pixel to Rem
+//////////////////////////////
+@import "toolkit/pixel-to-rem";

compass/stylesheets/_toolkit.scss

@@ -56,4 +56,9 @@
 //////////////////////////////
 // Import Equal Height Columns
 //////////////////////////////
-@import "toolkit/equal-height-columns";
+@import "toolkit/equal-height-columns";
+
+//////////////////////////////
+// Import Pixel to Rem
+//////////////////////////////
+@import "toolkit/pixel-to-rem";

compass/stylesheets/toolkit/_border-box.scss

@@ -1,5 +1,5 @@
 //////////////////////////////
-// Box Sizing anda wesome Border Box!
+// Box Sizing and awesome Border Box!
 //////////////////////////////
 @import "box-sizing";
 

compass/stylesheets/toolkit/_pixel-to-rem.scss

@@ -0,0 +1,46 @@
+//////////////////////////////
+// Pixel to rem functions.
+//////////////////////////////
+
+$legacy-support-for-ie8 : true   !default;
+$base-font-size         : 16px   !default;
+
+
+@mixin pixel-to-rem($item: 'font-size', $value: 16px, $base-size: $base-font-size) {
+  @if $legacy-support-for-ie8 {
+    #{$item}: $value;
+  }
+
+  @if (type-of($value) == 'number') {
+    #{$item}: pixel-to-rem-calc($value, $base-size);
+  }
+  @else if (type-of($value) == 'list') {
+    $values: null;
+
+    @each $num in $value {
+      $new: pixel-to-rem-calc($num, $base-size);
+      @if $values == null {
+        $values: $new;
+      }
+      @else {
+        $values: append($values, $new);
+      }
+    }
+    #{$item}: $values;
+  }
+}
+
+@function pixel-to-rem-calc($value, $base-size: $base-font-size) {
+  @if $value == 0 {
+    @return 0;
+  }
+
+  $rem-value: ($value / $base-size);
+
+  @if unit($rem-value) == "px" {
+    @return ($rem-value / (1px)) + rem;
+  }
+  @else {
+    @return $rem-value + rem;
+  }
+}

config.rb

@@ -1,6 +1,7 @@
-require 'susy'
-require 'breakpoint'
-require 'respond-to'
+require 'compass'
+require 'singularitygs'
+require 'sassy-strings'
+require 'color-schemer'
 # Require any additional compass plugins here.
 
 

sass/screen.scss

@@ -132,4 +132,9 @@
   $colors: red, white, blue;
 
   @include equal-height-columns($widths, $colors);
-}
+}
+
+#pixel-to-rem {
+  @include pixel-to-rem(font-size, 18px);
+}
+

stylesheets/screen.css

@@ -1,9 +1,8 @@
-*,
-*:after,
-*:before {
+*, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+  *behavior: url('/stylesheets/../behaviors/box-sizing/boxsizing.php');
 }
 
 img, video {
@@ -47,5 +46,11 @@ img, video {
   background-image: -webkit-linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%);
   background-image: -moz-linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%);
   background-image: -o-linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%);
+  background-image: -ms-linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%);
   background-image: linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%);
 }
+
+#pixel-to-rem {
+  font-size: 18px;
+  font-size: 1.125rem;
+}