UX Design and Development course

Getting libsass set up

Install libsass with Grunt Sass and add Bourbon. Node-Sass is installed as a dependency of Grunt-Sass

$ npm install grunt-sass --save
$ npm install node-bourbon --save

Add bower.json file

  "name": "class-demo",

Add some Bower packages

$ bower install color-scale --save
$ bower install type-rhythm-scale --save
$ bower install rwd-toolkit --save

Install Grunt

npm install grunt --save

Install Grunt Watch

npm install grunt-contrib-watch --save-dev

Add gruntfile.js

module.exports = function(grunt) {
    sass: {
      dist: {
        files: {
          'public/stylesheets/application.css': 'sass/application.scss'
        options: {
          sourceMap: true,
          includePaths: [
    watch: {
      source: {
        files: ['sass/**/*.scss', 'views/**/*.jade'],
        tasks: ['sass'],
        options: {
          livereload: true, // needed to run LiveReload

  grunt.registerTask('default', ['sass']);

Create new Sass file

Create the following directory and file, then add some sass to the file.

$ mkdir sass
$ touch sass/application.scss

Install library dependencies

Add these to the application.scss manifest to make Sass aware of these dependencies.

@import "bourbon";
@import "type-rhythm-scale";
@import "rwd-toolkit";

Get grunt started

$ grunt
$ grunt watch