use susy instead of 960gs

Gemfile

@@ -4,9 +4,9 @@ gem "compass",  ">= 0.13.alpha.0"
 gem "middleman", ">= 3.0.0rc4"
 gem "middleman-smusher"
 
-gem 'compass-960-plugin'
 gem "compass-holmes"
 gem 'oily_png'
 gem "sass"
 gem "slim"
 gem "rake"
+gem "susy"

Gemfile.lock

@@ -13,8 +13,6 @@ GEM
       chunky_png (~> 1.2)
       fssm (>= 0.2.7)
       sass (~> 3.2.0.alpha.93)
-    compass-960-plugin (0.10.4)
-      compass (>= 0.10.0)
     compass-holmes (0.1.1)
       compass (>= 0.11)
     execjs (1.4.0)
@@ -108,6 +106,9 @@ GEM
     sprockets-sass (0.8.0)
       sprockets (~> 2.0)
       tilt (~> 1.1)
+    susy (1.0.rc.1)
+      compass (>= 0.12.2.rc.0)
+      sass (>= 3.2.0.alpha.237)
     syntax (1.0.0)
     temple (0.4.0)
     thor (0.15.4)
@@ -123,7 +124,6 @@ PLATFORMS
 
 DEPENDENCIES
   compass (>= 0.13.alpha.0)
-  compass-960-plugin
   compass-holmes
   middleman (>= 3.0.0rc4)
   middleman-smusher
@@ -131,3 +131,4 @@ DEPENDENCIES
   rake
   sass
   slim
+  susy

config.rb

@@ -7,7 +7,6 @@ page "/albert/", :layout => false
 
 # Change Compass configuration
 compass_config do |config|
-  require 'ninesixty'
   config.output_style = :compact
 end
 

source/layout.slim

@@ -31,9 +31,9 @@ html.no-js.light lang="en"
     / for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/
     script src="js/libs/modernizr.custom.01860.min.js"
   body
+      .container
         header
           == partial "navbar"
-      .container
         #main
           == yield
         footer

source/stylesheets/960.css

@@ -1,374 +0,0 @@
-/*
-	Variable Grid System.
-	Learn more ~ http://www.spry-soft.com/grids/
-	Based on 960 Grid System - http://960.gs/
-
-	Licensed under GPL and MIT.
-*/
-
-/*
-  Forces backgrounds to span full width,
-  even if there is horizontal scrolling.
-  Increase this if your layout is wider.
-
-  Note: IE6 works fine without this fix.
-*/
-
-body {
-  min-width: 960px;
-}
-
-/* Containers
-----------------------------------------------------------------------------------------------------*/
-.container_12 {
-	margin-left: auto;
-	margin-right: auto;
-	width: 960px;
-}
-
-/* Grid >> Global
-----------------------------------------------------------------------------------------------------*/
-
-
-.grid_1,
-.grid_2,
-.grid_3,
-.grid_4,
-.grid_5,
-.grid_6,
-.grid_7,
-.grid_8,
-.grid_9,
-.grid_10,
-.grid_11,
-.grid_12 {
-	display:inline;
-	float: left;
-	position: relative;
-	margin-left: 10px;
-	margin-right: 10px;
-}
-
-
-
-.push_1, .pull_1,
-.push_2, .pull_2,
-.push_3, .pull_3,
-.push_4, .pull_4,
-.push_5, .pull_5,
-.push_6, .pull_6,
-.push_7, .pull_7,
-.push_8, .pull_8,
-.push_9, .pull_9,
-.push_10, .pull_10,
-.push_11, .pull_11,
-.push_12, .pull_12 {
-	position:relative;
-}
-
-
-/* Grid >> Children (Alpha ~ First, Omega ~ Last)
-----------------------------------------------------------------------------------------------------*/
-
-.alpha {
-	margin-left: 0;
-}
-
-.omega {
-	margin-right: 0;
-}
-
-/* Grid >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .grid_1 {
-	width:60px;
-}
-
-.container_12 .grid_2 {
-	width:140px;
-}
-
-.container_12 .grid_3 {
-	width:220px;
-}
-
-.container_12 .grid_4 {
-	width:300px;
-}
-
-.container_12 .grid_5 {
-	width:380px;
-}
-
-.container_12 .grid_6 {
-	width:460px;
-}
-
-.container_12 .grid_7 {
-	width:540px;
-}
-
-.container_12 .grid_8 {
-	width:620px;
-}
-
-.container_12 .grid_9 {
-	width:700px;
-}
-
-.container_12 .grid_10 {
-	width:780px;
-}
-
-.container_12 .grid_11 {
-	width:860px;
-}
-
-.container_12 .grid_12 {
-	width:940px;
-}
-
-
-
-
-/* Prefix Extra Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .prefix_1 {
-	padding-left:80px;
-}
-
-.container_12 .prefix_2 {
-	padding-left:160px;
-}
-
-.container_12 .prefix_3 {
-	padding-left:240px;
-}
-
-.container_12 .prefix_4 {
-	padding-left:320px;
-}
-
-.container_12 .prefix_5 {
-	padding-left:400px;
-}
-
-.container_12 .prefix_6 {
-	padding-left:480px;
-}
-
-.container_12 .prefix_7 {
-	padding-left:560px;
-}
-
-.container_12 .prefix_8 {
-	padding-left:640px;
-}
-
-.container_12 .prefix_9 {
-	padding-left:720px;
-}
-
-.container_12 .prefix_10 {
-	padding-left:800px;
-}
-
-.container_12 .prefix_11 {
-	padding-left:880px;
-}
-
-
-
-/* Suffix Extra Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .suffix_1 {
-	padding-right:80px;
-}
-
-.container_12 .suffix_2 {
-	padding-right:160px;
-}
-
-.container_12 .suffix_3 {
-	padding-right:240px;
-}
-
-.container_12 .suffix_4 {
-	padding-right:320px;
-}
-
-.container_12 .suffix_5 {
-	padding-right:400px;
-}
-
-.container_12 .suffix_6 {
-	padding-right:480px;
-}
-
-.container_12 .suffix_7 {
-	padding-right:560px;
-}
-
-.container_12 .suffix_8 {
-	padding-right:640px;
-}
-
-.container_12 .suffix_9 {
-	padding-right:720px;
-}
-
-.container_12 .suffix_10 {
-	padding-right:800px;
-}
-
-.container_12 .suffix_11 {
-	padding-right:880px;
-}
-
-
-
-/* Push Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .push_1 {
-	left:80px;
-}
-
-.container_12 .push_2 {
-	left:160px;
-}
-
-.container_12 .push_3 {
-	left:240px;
-}
-
-.container_12 .push_4 {
-	left:320px;
-}
-
-.container_12 .push_5 {
-	left:400px;
-}
-
-.container_12 .push_6 {
-	left:480px;
-}
-
-.container_12 .push_7 {
-	left:560px;
-}
-
-.container_12 .push_8 {
-	left:640px;
-}
-
-.container_12 .push_9 {
-	left:720px;
-}
-
-.container_12 .push_10 {
-	left:800px;
-}
-
-.container_12 .push_11 {
-	left:880px;
-}
-
-
-
-/* Pull Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .pull_1 {
-	left:-80px;
-}
-
-.container_12 .pull_2 {
-	left:-160px;
-}
-
-.container_12 .pull_3 {
-	left:-240px;
-}
-
-.container_12 .pull_4 {
-	left:-320px;
-}
-
-.container_12 .pull_5 {
-	left:-400px;
-}
-
-.container_12 .pull_6 {
-	left:-480px;
-}
-
-.container_12 .pull_7 {
-	left:-560px;
-}
-
-.container_12 .pull_8 {
-	left:-640px;
-}
-
-.container_12 .pull_9 {
-	left:-720px;
-}
-
-.container_12 .pull_10 {
-	left:-800px;
-}
-
-.container_12 .pull_11 {
-	left:-880px;
-}
-
-
-
-
-/* `Clear Floated Elements
-----------------------------------------------------------------------------------------------------*/
-
-/* http://sonspring.com/journal/clearing-floats */
-
-.clear {
-  clear: both;
-  display: block;
-  overflow: hidden;
-  visibility: hidden;
-  width: 0;
-  height: 0;
-}
-
-/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
-
-.clearfix:before,
-.clearfix:after {
-  content: '\0020';
-  display: block;
-  overflow: hidden;
-  visibility: hidden;
-  width: 0;
-  height: 0;
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-/*
-  The following zoom:1 rule is specifically for IE6 + IE7.
-  Move to separate stylesheet if invalid CSS is a problem.
-*/
-
-.clearfix {
-  zoom: 1;
-}

source/stylesheets/site.css.scss

@@ -1,12 +1,9 @@
 @import "compass";
-@import "960/grid";
 @import "solarized";
 @import "normalize";
-@import "960";
 @import "font-awesome";
 //@import "compass-holmes"; // css-based debugging
-
+@import "susy";
-$ninesixty_columns: 12;
 
 h1 {
   font-family: 'Lobster', Georgia, Times, serif;
@@ -18,9 +15,7 @@ body {
   line-height: 1.3em;
 }
 
-a {
+a { text-decoration:none; }
-  text-decoration:none;
-}
 
 header {
   position: fixed;
@@ -46,22 +41,17 @@ header {
 }
 
 footer {
-  @include grid(12);
   padding-left: 15px;
   box-shadow: 0 2px 3px #b8b8b8;
 }
 
 .container {
-  @include grid_container;
-  @include clearfix;
   @include accentize($yellow);
-
+  @include container;
 
   /* Grid layout */
   #main {
     margin-top: 50px;
-    @include grid(12);
-    @include clearfix;
   }
   a:hover {
     color: darken($yellow, 10%);
@@ -98,4 +88,3 @@ footer {
     line-height: 0.8em;
   }
 }
-