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
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.
file imports the _settings.scss
file and the complete foundation
module as shown below
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
So, all that is pending is to learn how to write SCSS
and make use of Foundation and Compass modules/features.