WIP: Added grunt worker for sass compiling

Gruntfile.js

@@ -0,0 +1,23 @@
+module.exports = function(grunt) {
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+		compass: {
+			dist: {
+				options: {
+					config: 'scss/config.rb',
+					sassDir: 'scss',
+					cssDir: 'public/css'
+				}
+			}
+		},
+		watch: {
+			css: {
+				files: '**/*.scss',
+				tasks: ['compass']
+			}
+		}
+	});
+	grunt.loadNpmTasks('grunt-contrib-compass');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.registerTask('default',['watch']);
+}

README.md

@@ -19,9 +19,15 @@ Once you have them installed, go ahead and clone the repository.
     git clone [email protected]:martindale/soundtrack.io.git
     cd soundtrack.io
 
+Ruby and ruby-dev are required as part of the scss compilation.
+
+    gem install sass
+    gem install compass
+
 You will need to fetch the dependencies and then you can start up the server.
 
     npm install
+    npm install -g grunt-cli
     node soundtrack.js
 
 ## API

package.json

@@ -40,6 +40,10 @@
   },
   "devDependencies": {
     "coveralls": "^2.11.2",
+    "grunt": "^0.4.5",
+    "grunt-contrib-compass": "^1.0.3",
+    "grunt-contrib-sass": "^0.9.2",
+    "grunt-contrib-watch": "^0.6.1",
     "istanbul": "^0.3.5",
     "mocha": "^2.1.0"
   }

scss/config.rb

@@ -0,0 +1,24 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "../"
+css_dir = "public/css"
+sass_dir = "scss"
+images_dir = "public/img"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

scss/foundation/_grid.scss

@@ -0,0 +1,58 @@
+$number-of-columns: 12;
+$fixed-width: 960px;
+$gutter-width: 40px;
+$max-width: none;
+
+$number-of-rows: 10;
+$height-per-row: 40px;
+
+$gutter-width-half: $gutter-width / 2;
+$flex-widths: ();
+$fix-widths: ();
+
+@for $i from 1 through $number-of-columns {
+  $flex-widths: append($flex-widths, $i / $number-of-columns * 100%);
+  $fix-widths: append($fix-widths, $i / $number-of-columns * $fixed-width);
+}
+
+body { min-width: $fixed-width; }
+.container { max-width: $max-width; margin-right: auto; margin-left: auto; padding-left: $gutter-width-half; padding-right: $gutter-width-half; @include box-sizing(border-box); @extend %clearfix; }
+.row { margin-left: -$gutter-width-half; margin-right: -$gutter-width-half; @extend %clearfix; }
+[class*="col-"] { padding-left: $gutter-width / 2; padding-right: $gutter-width / 2; float: left; @include box-sizing(border-box); @extend %clearfix; }
+
+%clearfix {
+  & { zoom: 1; }
+  &:before, &:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; }
+  &:after { clear: both; }
+}
+
+@for $i from 1 through length($flex-widths) {
+  .col-#{$i} {
+    & { width: nth($flex-widths, $i); }
+    &.fixed-width { width: nth($fix-widths, $i); }
+
+    @if $number-of-columns - $i > 0 {
+      @for $ii from 1 through $number-of-columns - $i {
+        &.with-fixed-#{$ii} { @include calc(width, #{nth($flex-widths, $i + $ii)} - #{nth($fix-widths, $ii)}); }
+      }
+    }
+  }
+}
+
+.row- {
+  @for $i from 1 through $number-of-rows {
+    &#{$i} { height: ($height-per-row * $i); }
+  }
+}
+.row-full {
+  & { height: 100%; }
+
+  @for $i from 1 through $number-of-rows {
+    &.with-height-#{$i} { @include calc(height, 100% - #{($height-per-row * $i)}); }
+  }
+}
+
+.no- {
+  &left-gutter { padding-left: 0; }
+  &right-gutter { padding-right: 0; }
+}

scss/foundation/_layout.scss

@@ -0,0 +1,3 @@
+* {
+  @include box-sizing(border-box);
+}

scss/mixins/_utility.scss

@@ -0,0 +1,4 @@
+@mixin calc($property, $expression) { 
+  #{$property}: -webkit-calc(#{$expression}); 
+  #{$property}: calc(#{$expression}); 
+} 

scss/style.scss

@@ -0,0 +1,4 @@
+@import 'compass';
+@import 'mixins/utility';
+@import 'foundation/layout';
+@import 'foundation/grid';