Setting up Mac OSx for Foundation5

Foundation is an open source responsive front end framework maintained by zurb.com. It has a seemingly endless list of features that allows you to build responsive web applications within no time. In this post, we will set up our Mac OSx for developing foundation projects.

For foundation you need the following packages to be installed on your system. The following steps assumes the presence of homebrew on your system. If you do not have homebrew installed, please install it. The instructions are available on homebrew website.

Git

Git is version control system that basically commands the tools that will be used for command line in Github.

$ brew doctor
$ brew update
$ brew install git

NodeJs

NodeJs allows Javascript to run outside the Browser, and is required by Bower to package all the files in the project and link them together.

$ brew doctor
$ brew update
$ brew install node

Ruby 1.9+

The script used by Foundation to download all Sass files and scaffolding the project is written in Ruby.

$ brew doctor
$ brew update
$ brew install ruby

Installing the foundation CLI

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

g stands for global

That's it, you have got foundation installed on your system. Now let's create a new foundation project.

Creating a new Foundation project

$ foundation new myproject
Creating ./myproject
      create  myproject
Cloning into 'myproject'...
remote: Counting objects: 120, done.
remote: Total 120 (delta 0), reused 0 (delta 0), pack-reused 120
Receiving objects: 100% (120/120), 40.77 KiB | 0 bytes/s, done.
Resolving deltas: 100% (48/48), done.
Checking connectivity... done.
Installing dependencies with bower...
./myproject was created

That's all that has to be done for you to start building foundation 5 projects.

Compiling Sass into CSS

This section takes you through the steps for creating a Sass project. Sass stands for Sassy CSS. It builds on the existing CSS syntax.

$gem install compass

After this you can create a new Foundation Sass project.

Reference : Zurb Foundation Documentation