Update to newest stable Sass (Fixes #69), Susy (Fixes #68), Breakpoint, Compass and make appropriate CSS changes due to the changes.

Gemfile

@@ -8,15 +8,17 @@ gem "rack-rewrite"
 gem "rack-contrib"
 
 group :development do
-  gem "middleman", "~>3.1.5"
+  gem "breakpoint",            "2.4.2", :require => false
+  gem "compass",               "1.0.0.alpha.21"
+  gem "middleman",             "~>3.1.5"
   gem "middleman-livereload"
   gem "middleman-syntax"
-  gem "normalize-rails", :require => false
+  gem "normalize-rails",       :require => false
   gem "redcarpet"
-  gem "susy", "2.0.0.alpha.4"
-  gem "breakpoint"
+  gem "sass",                  "~> 3.3.11"
+  gem "susy",                  "~> 2.1.3"
   gem "typogruby"
-  gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
+  gem "wdm",                   "~> 0.1.0", :platforms => [:mswin, :mingw]
   platforms :mri_18 do
     gem "ruby18_source_location"
   end

source/assets/css/components/_alerts.scss

@@ -35,3 +35,10 @@
 .alert.stickers {
   background: $midnight-blue;
 }
+
+.browsehappy {
+  margin: 0;
+  padding: 0;
+  background: 0;
+  color: inherit;
+}

source/assets/css/dependencies/_layout.scss.erb

@@ -1,12 +1,34 @@
 // Susy Settings
-$container: 90%;
+$susy: (
+  flow: ltr,
+  math: fluid,
+  output: float,
+  gutter-position: after,
+  container: 90%,
+  container-position: center,
+  columns: <%= data.layout.susy.total_columns %>,
+  gutters: 1/3,
+  column-width: false,
+  global-box-sizing: border-box,
+  last-flow: to,
+  debug: (
+    image: hide,
+    color: rgba(#66f, .25),
+    output: background,
+    toggle: top right,
+  ),
+  use-custom: (
+    background-image: true,
+    background-options: false,
+    box-sizing: true,
+    clearfix: false,
+    rem: true,
+  )
+);
+
 $gutter-width: <%= data.layout.susy.gutter_width %>;
 $column-width: <%= data.layout.susy.column_width %>;
 
-$columns: <%= data.layout.susy.total_columns %>;
-$gutters: 1/3;
-$gutter-placement: inside;
-
 
 
 // Breakpoint Settings

source/assets/css/docs/_overrides.scss.erb

@@ -19,15 +19,15 @@ body {
 }
 
 #menu {
-  @include container(hide);
+  @include container;
   position: static;
   font-size: inherit;
   color: inherit;
 
   <% data.layout.resolutions.each do |resolution| %>
     @include breakpoint($<%= resolution.target %>) {
-      @include set-grid($<%= resolution.target %>-grid);
-      @include container(hide);
+      @include layout($<%= resolution.target %>-grid);
+      @include container;
     }
   <% end %>
 }

source/assets/css/helpers/_grid.scss.erb

@@ -1,12 +1,11 @@
 .container {
-  @include container(hide);
+  @include container;
 
   &.toolkit-grid { @include background-grid; }
 
   <% data.layout.resolutions.each do |resolution| %>
     @include breakpoint($<%= resolution.target %>) {
-      @include set-grid($<%= resolution.target %>-grid);
-      @include container(hide);
+      @include layout($<%= resolution.target %>-grid);
 
       &.toolkit-grid { @include background-grid; }
     }
@@ -15,5 +14,5 @@
 
 .row {
   @extend %clear-fix;
-  @include bleed($gutter-width);
+  @include bleed-x($gutter-width);
 }

source/assets/css/regions/_navigation.scss

@@ -1,7 +1,8 @@
 .navigation {
-  ul {
-    @include padding-leader;
-  }
+  font-weight: $font-weight-bold;
+  text-transform: uppercase;
+
+  ul { @include padding-leader; }
 
   li {
     @include trailer(.5);
@@ -14,8 +15,8 @@
     @include padding-trailer(.5);
     display: block;
     padding: {
-      right: $gutter-width * 2;
-       left: $gutter-width * 2;
+      right: $gutter-width;
+       left: $gutter-width;
     }
     background: mix($color-background, $color-background-shade);
 
@@ -24,11 +25,6 @@
   }
 
   @include breakpoint($tablet-small) {
-    margin: {
-      right: 0;
-       left: 0;
-    }
-
     ul { @extend %clear-fix-tablet-small; }
 
     li {
@@ -40,13 +36,14 @@
 
   @include breakpoint($tablet-large) {
     @include span(9 omega);
+    @include font-size-small;
     background: none;
 
     &.collapse { display: block !important; }
 
     ul {
-      white-space: nowrap;
       text-align: right;
+      white-space: nowrap;
     }
 
     li {
@@ -54,7 +51,6 @@
       display: inline-block;
       margin: {
         right: 0;
-        left: $gutter-width * 2;
         bottom: 0;
       }
       width: auto;
@@ -73,4 +69,10 @@
       &:focus { background: none; }
     }
   }
+
+  @include breakpoint($screen-small) {
+    @include font-size-regular;
+
+    li { margin-left: $gutter-width; }
+  }
 }

source/assets/css/styleguide/_guide.scss.erb

@@ -19,7 +19,7 @@
   background: $color-background-shade;
 }
 
-@for $i from 1 through $columns {
+@for $i from 1 through susy-get(columns, <%= data.layout.susy.total_columns %>) {
   .by-#{$i}  {
     @extend %split-by;