Installing Sass, Compass, nanoc 3.x and Foundation 5

This entry is part 2 of 2 in the series Creating a static website

As described in the previous article, I have settled to create my static website for git-flow with nanoc, Foundation by Zurb and Compass. That shouldn’t be to be difficult, just a matter of installing the tools and start creating. I already have Ruby installed through rbenv, and I won’t go in details on how to set this up, but to clarify I’m running Ruby 2.x at the moment.


I usually work with the latest version of tools and hardly rely on installing development tools through the official Ubuntu repositories, they are usually outdated. I either use 3rd party repositories or install from source.
All version information I refer to in these articles are the versions as I write these articles.

Tools installation


I have used Compass/Sass for some other projects and have the beta versions of these tools as they give some options I needed for the other projects, to install the latest versions, open a terminal and type the following commands:

gem install sass --pre
gem install compass --pre


We will install nanoc 3, and as this also is a Ruby gem installation is fairly straightforward:

gem install nanoc

Zurb’s Foundation

On November 22, 2013, Zurb released Foundation 5 and that’s the one we will be using. I follow the installation instructions as found on the Zurb site.

Foundation started to use bower to manage the updating process of Foundation. I like to keep up to date with software so we’ll install bower. In order to install bower we need to install NodeJS. When I check the official Ubuntu repository they have Node.js version 0.6.19, and that’s way to old as the Node.js homepage talks about version 0.10.23. Luckily the wiki page of Node.js tells me there is a PPA that will give me the latest version.

Chris Lea maintains a PPA with the latest version, all we need to do is use his PPA and install Node.js.

sudo apt-add-repository ppa:chris-lea/node.js
sudo aptitude update
sudo aptitude install nodejs

With all the requirements installed we continue with the installation of Foundation 5

sudo npm install -g bower grunt-cli
gem install foundation

This actually doesn’t install Foundation 5 itself, it install a their CLI which we will use to create a Foundation 5 based framework.

What’s next

In the next article we will start with the setup of the static website.

Other articles in the series Creating a static website

  1. Creating a static website for git-flow
  2. Installing Sass, Compass, nanoc 3.x and Foundation 5

This article is filed under the category Static website and has no tags associated with it.
  • Muhammad

    Ive been looking for a straight forward foundation5 sass files installation since yesterday. This was by far the most comprehensive tutorial. Thanks a ton.

    Theres one thing i dont understand though. In the app.scss file that i got , imports many foundation scss files, but they dont exist in the installed folder?

    Do i need to get those files from somewhere ?

    And after i create my app.css, how do i add it in my foundations project?