Website Building Made Simple

With the introduction of Foundation 5 with Sass, Zurb made the install process for Foundation significantly more complicated, annoying, and involved. But they had (kind of) good reasons for it. 

It’s easy to install Zurb Foundation with CSS…

1. Download zip from Zurb
2. Extract Foundation files
3. Start customizing and building

Simple, right? So you expect the Sass version to work in similar way: download some files, and start customizing the Sass. You wish.

It’s hard to install Zurb Foundation with Sass…

1. Install Git
2. Install Ruby
3. Install NodeJS
4. Install Bower with Grunt
5. Install Foundation gem
6. Navigate to the directory you want to put your project in
7. New foundation project command
8. Start customizing and building

...and that’s if everything goes smoothly. On my first install of Foundation Sass, some of the default include paths were incorrect for my system, so none of the styles were being applied on the example pages after first “install.” That was a fun 30 minutes.

Why is it this complicated just to run some Sass files?

There are a few good reasons why Zurb makes you jump through so many hoops to use foundation with Sass.

1. Updating to new versions of Foundation is slightly easier. Foundation’s Sass version does a better job of separating core functionality from the files that you customize, so updating existing projects is less scary. And with Bower, it’s a single command to grab and extract the latest version.

2. Creating new Foundation projects is slightly easier. Instead of downloading and extracting the latest Foundation zip from Zurb.com for every new project, you can use 1 command (via the Ruby command prompt) to create the project folder, pull down the latest Foundation files, and extract them locally.

Overall, I still think it’s more complicated than download & extracting a zip, even to the point of seriously frustrating your workflow. But whatevs; Zurb is awesome, so they’re entitled to an awkward teenage phase with their install process.

Foundation Sass depends on seven (sheesh!) new apps that you might not be used to…

1. Git - Foundation needs you to install Git because Bower runs off Git. You don’t have to use Git to use Foundation if you don’t want to. You can install it and forget it (or leave it alone if you already have it installed).
2. Scss/Sass - You know this one. Sass is the CSS preprocessor that will change your life. The only difference between Scss and Sass is syntax. Scss uses curly braces and looks like CSS. Sass uses smart white space (indents and tabs, no braces). Otherwise they both do the same thing.
3. Ruby - Sass was originally developed to run on Ruby apps. Ruby has the ability to download and install “gems” which are like standard programming apps that can be requested by name (e.g., “gem install foundation” or “gem install sass”).
   
   Foundation uses Ruby to install the “foundation” gem, which you will use via the command line to create new foundation projects, and set the options for those projects.
   
   Example of using the foundation gem…
   
   Note: You can get Ruby for any OS, including as a Windows .exe file.
4. Libsass - Sass normally runs through Ruby, and many new Sass developers use Ruby’s “watch” command to compile their Sass into CSS. But Ruby watch can be slow. Libsass is a standalone version of Sass built with C++ that is faster than compiling through Ruby. Foundation’s gem makes using Libsass easy.
5. Node.js - Node.js is like a server for javascript, and it can install javascript-based packages kind of like Ruby installs gems. Foundation uses the Node command prompt to install Bower and Grunt, which updates to new versions of Foundation (Bower) and can compile Sass, minify your code, and other cool things (Grunt).
6. Bower - Foundation uses Bower to update itself. Bower installs and updates packages of web code. Not just js packages (like Node), but also packages that include HTML, CSS, and JS (like Foundation).
7. Grunt - Foundation doesn’t use Grunt directly, but it’s recommended for compiling your Sass (you use it instead of Ruby watch). Grunt can do lots of other cool things, like minify your JS, compile your javascript and CSS, and even optimize your images.

In summary...

1. Use Ruby to install the Foundation gem.
2. Use the Foundation gem to install the Foundation files.
3. Use Node to install Bower, which runs on Git, to update Foundation's files when a new version comes out.

Shameless plug: Remember, Soholaunch Website Builder includes built-in support for Zurb Foundation, meaning that it’s easy to use Zurb Foundation with Sass to build custom sites that your client can manage with Soholaunch Website Builder.