compass/zurb-foundation via gem with yeoman/Gruntfile.js

Starting a frontend project (e.g. an AngularJS project) with yeoman helps us generate a bunch of default directory layout and a pre-set Gruntfile.js configuration file. This configuration file contains most of the necessary settings that controls our project requirements and behaviour.

In this post, I will explain how I get compass and zurb-foundation running seamlessly as scss imports in my yeoman-generated project.


grunt.initConfig({
 yeoman: yeomanConfig,
 watch: {
 coffee: {
 files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
 tasks: ['coffee:dist']
 },
 coffeeTest: {
 files: ['test/spec/{,*/}*.coffee'],
 tasks: ['coffee:test']
 },
 compass: {
 files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
 tasks: ['compass']
 },
 livereload: {
 files: [
 '<%= yeoman.app %>/{,*/}*.html',
 '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
 '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
 '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
 ],
 tasks: ['livereload']
 }
 },

Update our configuration for compass

compass: {
 options: {
 config: '.compass.rb',
 force: true
 },
 dist: {},
 server: {
 options: {
 debugInfo: true
 }
 }
 },

.compass.rb is references in a new file we create with the following:

require 'zurb-foundation'

http_path = "/"
sass_dir = 'app/styles'
css_dir = '.tmp/styles'
images_dir = 'app/images'
javascript_dir = 'app/scripts'
fonts_dir = 'app/styles/fonts'
import_path = 'app/components'

Since this is a ruby file, it loads up zurb-foundation in its first line.

We install zurb-foundation with gem as follows (if you do not have rvm or gem correctly configured, check out my previous post guiding you to set up rvm step-by-step).

$ rvm use 1.9.3   # if we have not done this yet
$ gem install zurb-foundation

Once we have zurb-foundation installed, it is trivial to import the zurb-foundation framework into our scss file.

@import "foundation"

Quite a bit of hassle to get to this point but now we can mess with zurb-foundation framework in our project!

Zurb foundation includes a whole range of scss and we are interested in its location so that we can specify the appropriate @import statement to use the appropriate components to style our application.  Here’s how we find the location of our recently installed zurb-foundation library.

$ irb
1.9.3-p448 :001 > spec = Gem::Specification.find_by_name("zurb-foundation")
=> #<Gem::Specification:0x3fe2b185bb40 zurb-foundation-4.2.3>
1.9.3-p448 :002 > gem_root = spec.gem_dir
=> "/Users/calvin/.rvm/gems/ruby-1.9.3-p448/gems/zurb-foundation-4.2.3"
1.9.3-p448 :003 >

So, if we change into this directory,

$ cd /Users/calvin/.rvm/gems/ruby-1.9.3-p448/gems/zurb-foundation-4.2.3
$ tree scss

scss
├── foundation
│ ├── _variables.scss
│ └── components
│      ├── _alert-boxes.scss
│      ├── _block-grid.scss
│      ├── _breadcrumbs.scss
│      ├── _button-groups.scss
│      ├── _buttons.scss
│      ├── _clearing.scss
│      ├── _custom-forms.scss
│      ├── _dropdown-buttons.scss
│      ├── _dropdown.scss
│      ├── _flex-video.scss
│      ├── _forms.scss
│      ├── _global.scss
│      ├── _grid.scss
│      ├── _inline-lists.scss
│      ├── _joyride.scss
│      ├── _keystrokes.scss
│      ├── _labels.scss
│      ├── _magellan.scss
│      ├── _orbit.scss
│      ├── _pagination.scss
│      ├── _panels.scss
│      ├── _pricing-tables.scss
│      ├── _progress-bars.scss
│      ├── _reveal.scss
│      ├── _section.scss
│      ├── _side-nav.scss
│      ├── _split-buttons.scss
│      ├── _sub-nav.scss
│      ├── _switch.scss
│      ├── _tables.scss
│      ├── _thumbs.scss
│      ├── _tooltips.scss
│      ├── _top-bar.scss
│      ├── _type.scss
│      └── _visibility.scss
├── foundation.scss
└── normalize.scss

which gives us the list of zurb foundation scss components we can import into our “main.scss” file!