Monday, November 25, 2013

How to Install Zurb Foundation 5

Think most of the people having difficulties to install Zurb Foundation 5. Ruby Error messages, "compass watch" not working etc. etc. I had the same issue last night but solved it myself.

This is a small guide, how to Install Zurb Foundation 5 properly in Windows 7.

1. Install Git

As per Zurb Foundation docs, the 1st thing is you have to install Git.
https://msysgit.googlecode.com/files/Git-1.8.4-preview20130916.exe

When installing, choose the  2nd option. (Run Git from Windows command prompt)

Then, manually set configure the Windows Path as follows. (System->Advanced System Settings->Environment Variables)

C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

This will not harm anything in your system, so no need to worry.

2. Install Ruby

2nd thing as per the Zurb Foundation Docs.
http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-1.9.3-p484.exe?direct
Choose this version rather than the 2.00 or 2.00 64bit version. And if you installed any other Ruby version, uninstall it. (But remember the gems you have installed before)

Next Next Finish :)

3. NodeJs

Pretty straightforward.
http://nodejs.org/dist/v0.10.22/x64/node-v0.10.22-x64.msi


4. Restart PC

Path to npm will set when you install NodeJs.

5. Install Bower

Go to the command prompt and type "npm install -g bower"

6. Uninstall/ Install Foundation

If you uninstall ruby, the foundation gem also gone. But to make sure, try below.

gem uninstall foundation
gem uninstall zurb-foundation

If it said 0 gem uninstalled, then your foundation gem gone. What we have to do here is to install the new foundation as per the docs.

gem install foundation

7. Install Compass

Dont forget to Install Compass too. :)

gem install compass

8. Create Foundation 5 Project

YOUR_PATH> foundation new MY_PROJECT

9. Watch Sass Changes

YOUR_PATH> compass watch

10. Finish

Enjoy Foundation 5. :)

No comments:

Post a Comment