Switching from compass to node-sass and Bourbon

.ruby-gemset

@@ -1 +0,0 @@
-regexper

.ruby-version

@@ -1 +0,0 @@
-2.1.5

Gemfile

@@ -1,3 +0,0 @@
-source 'https://rubygems.org'
-
-gem 'compass'

Gemfile.lock

@@ -1,28 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    chunky_png (1.3.3)
-    compass (1.0.1)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.1)
-      compass-import-once (~> 1.0.5)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      sass (>= 3.3.13, < 3.5)
-    compass-core (1.0.1)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
-    compass-import-once (1.0.5)
-      sass (>= 3.2, < 3.5)
-    ffi (1.9.6)
-    multi_json (1.10.1)
-    rb-fsevent (0.9.4)
-    rb-inotify (0.9.5)
-      ffi (>= 0.5.0)
-    sass (3.4.8)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  compass

README.md

@@ -10,11 +10,10 @@ When sending pull requests, please keep them focused on a single issue. I would
 
 ### Working with the code
 
-Node and Ruby are required for working with this site. It is recommended to use rbenv or rvm to manage your Ruby installation, and configuration files are included to set the Ruby version and gemset.
+Node is required for working with this site.
 
-To start with, install the necessary dependencies for Node and Ruby:
+To start with, install the necessary dependencies:
 
-    $ bundle install
     $ npm install
 
 There are several gulp tasks available to build various parts of the site, but to get started you only need:

config.js

@@ -17,13 +17,6 @@ module.exports = {
     js: ['./src/**/*.js', './src/**/*.peg'],
     spec: './spec/**/*_spec.js'
   },
-  compass: {
-    sass: './src/sass',
-    css: buildPath('css'),
-    javascript: buildPath('js'),
-    font: buildPath('font'),
-    sourcemap: true
-  },
   browserify: {
     debug: true,
     fullPaths: false,

gulpfile.js

@@ -80,11 +80,21 @@ gulp.task('markup', ['styles'], function() {
 });
 
 gulp.task('styles', function() {
-  var compass = require('gulp-compass');
+  var sourcemaps = require('gulp-sourcemaps'),
+      sass = require('gulp-sass'),
+      rename = require('gulp-rename');
 
   return gulp.src(config.globs.sass)
     .pipe(errorHandler())
-    .pipe(compass(config.compass));
+    .pipe(sourcemaps.init())
+    .pipe(sass({
+      includePaths: require('node-bourbon').includePaths
+    }))
+    .pipe(rename(function(path) {
+      path.dirname = '';
+    }))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest(config.buildPath('css')));
 });
 
 gulp.task('scripts', function() {

lib/data/svg_styles.js

@@ -2,6 +2,6 @@ var fs = require('fs'),
     path = require('path'),
     config = require('../../config');
 
-module.exports = fs.readFileSync(path.join(config.compass.css, 'svg.css'), {
+module.exports = fs.readFileSync(config.buildPath('css/svg.css'), {
   encoding: 'utf-8'
-})
+});

package.json

@@ -15,7 +15,6 @@
     "es6ify": "^1.5.1",
     "folder-toc": "^0.1.0",
     "gulp": "^3.8.10",
-    "gulp-compass": "^2.0.4",
     "gulp-connect": "^2.2.0",
     "gulp-docco": "0.0.4",
     "gulp-front-matter": "^1.3.0",
@@ -23,6 +22,8 @@
     "gulp-notify": "^2.0.1",
     "gulp-plumber": "^1.0.0",
     "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.1.0",
+    "gulp-sourcemaps": "^1.6.0",
     "gulp-tap": "^0.1.3",
     "handlebars-layouts": "^3.1.2",
     "jasmine-core": "^2.3.4",
@@ -32,6 +33,7 @@
     "karma-jasmine": "^0.3.1",
     "karma-notify-reporter": "^0.1.1",
     "lodash": "^3.10.1",
+    "node-bourbon": "^4.2.3",
     "snapsvg": "^0.4.0",
     "through": "^2.3.8"
   }

src/humans.txt

@@ -13,4 +13,4 @@
 
 # TECHNOLOGY COLOPHON
 
-    HTML5, CSS3, SVG, Compass, Open Iconic
+    HTML5, CSS3, SVG, Sass, Open Iconic

src/sass/_base.scss

@@ -1,3 +1,5 @@
+@import 'bourbon';
+
 $green: #bada55;
 $dark-green: shade($green, 25%);
 $light-green: tint($green, 25%);
@@ -13,5 +15,36 @@ $white: #fff;
 $base-font-size: 16px;
 $base-line-height: 24px;
 
-$default-box-shadow-color: $black;
+@mixin box-shadow {
-$default-box-shadow-blur: 10px;
+  @include prefixer(box-shadow, 0 0 10px $black, webkit moz spec);
+}
+
+@mixin input-placeholder {
+  &:-moz-placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+
+  &::-webkit-input-placeholder {
+    @content;
+  }
+}
+
+@function rhythm($scale, $font-size: $base-font-size) {
+  @return ($scale * $base-line-height / $font-size) * 1em;
+}
+
+@mixin adjust-font-size-to($to-size, $lines: auto) {
+  font-size: ($to-size / $base-font-size) * 1em;
+  @if $lines == auto {
+    $lines: ceil($to-size / $base-font-size);
+  }
+  line-height: rhythm($lines, $to-size);
+}

src/sass/main.scss

@@ -1,21 +1,11 @@
 @import 'base';
 @import 'open-iconic';
-@import 'compass/reset';
+@import 'reset';
-@import 'compass/typography/lists/inline-block-list';
-@import 'compass/typography/vertical_rhythm';
-@import 'compass/css3/box-shadow';
-@import 'compass/css3/border-radius';
-@import 'compass/css3/user-interface';
-@import 'compass/css3/animation';
-@import 'compass/css3/transform';
-@import 'compass/css3/images';
-@import 'compass/typography/links/unstyled-link';
-@import 'compass/utilities/general/clearfix';
-
-@include establish-baseline;
 
 body {
   font-family: sans-serif;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
   background: $gray;
   margin-bottom: rhythm(1);
 }
@@ -34,9 +24,13 @@ h1 {
 
 ul.inline-list {
   @include adjust-font-size-to(14px, 2/3);
-  @include inline-block-list;
+  @include clearfix;
 
   li {
+    list-style-type: none;
+    display: inline-block;
+    white-space: nowrap;
+
     &::after {
       content: '//';
       padding: 0 rhythm(1/4);
@@ -58,11 +52,9 @@ ul.inline-list {
 }
 
 #deprecation-notice {
-  @include background(linear-gradient(top, $green, $dark-green));
+  @include linear-gradient(top, $green, $dark-green);
-  background-color: $green;
   padding: rhythm(1);
   margin: rhythm(1);
-  @include border-radius(20px);
   @include box-shadow;
   @include clearfix;
 
@@ -76,8 +68,7 @@ ul.inline-list {
 }
 
 header {
-  @include background(linear-gradient(top, $green, $dark-green));
+  @include linear-gradient(top, $green, $dark-green);
-  background-color: $green;
   padding: rhythm(1);
   @include box-shadow;
   @include clearfix;
@@ -264,8 +255,7 @@ header {
       @include adjust-font-size-to($base-font-size);
       width: 100px;
       border: 0 none;
-      @include background(linear-gradient(top, $green, $dark-green));
+      @include linear-gradient(top, $green, $dark-green);
-      background-color: $green;
       float: left;
       cursor: pointer;
     }
@@ -304,17 +294,7 @@ header {
   margin: rhythm(1) auto;
 
   div {
-    background: $green;
+    @include linear-gradient(-45deg, $green 25%, $light-green 25%, $light-green 50%, $green 50%, $green 75%, $light-green 75%, $light-green 100%);
-    @include background-image(linear-gradient(
-      -45deg,
-      $green 25%,
-      $light-green 25%,
-      $light-green 50%,
-      $green 50%,
-      $green 75%,
-      $light-green 75%,
-      $light-green 100%
-    ));
     background-size: rhythm(2) rhythm(2);
     background-repeat: repeat-x;
     height: 100%;

src/sass/reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}