My friend wanted to get started with using Foundation for an upcoming Greenfield project. The trouble is Foundation comes in two flavours:

  • Foundation3 with default CSS
  • Foundation3 with SCSS (Sassy CSS, which is the syntax used by SASS – "Syntactically Awesome Style Sheets". SASS is an extension of CSS3 which brings familiar programming concepts to CSS like variables, nesting of selectors, functions aka mixins)
While "Foundation3 with default CSS" can be perfectly used to take advantage of Foundation's amazing features, using "Foundation3 with SCSS" was thought of a natural way to learn and build websites with SCSS. But, the problem is "Foundation3 with SCSS" does not come as an executable installer for Windows. It is packaged with a CSS Authoring Framework called "Compass". For a start, Compass contains re-usable cross-browse CSS mixins, which in itself is a good utility. There are other advantages in using Compass too.

The Compass framework does not have a Windows Installer. It is only available as a Ruby Gem package, which means we have to install Ruby for Windows first. After this, we follow the following steps to get Compass with Foundation:

Start Command Prompt with Ruby (Run as Administrator)

Execute the command to install the “Compass with Foundation” package

NOTE: If gem install throws an ECONNECTION related error, it would mostly to do with the command prompt unable to connect to internet and this could be because the computer may be behind http proxy. In such cases, refer to gem documentation on how to use it with –http-proxy option.

Create a new Compass website called “Peakbyte.Web”

This creates the following folder structure

The detailed structure is better revealed when we open this website using WebMatrix2

The _settings.scss file contains all the commonly used variables in Foundation. The web developer/designer can either re-use these in their own SCSS by uncommenting the bits as needed.

The app.scss file imports the _settings.scss file and the complete foundation module as shown below

The app.scss is the main SCSS file. This needs to be processed by the SASS pre-processor to produce stylesheets/app.css which is the CSS file referenced in index.html

So, how does the .scss get processed to .css files?

By running the following command, the compass SASS pre-processor will continuously watch for any changes done to the .scss files in the “Peakbyte.Web” folder. If it detects any change, it will process the .scss files and re-generate the stylesheets/app.css file.

So, all that is pending is to learn how to write SCSS and make use of Foundation and Compass modules/features.