Installing Zurb’s Foundation with compass might be bit trick you you are new to terminal coding (like me). After various attempts I have figured to install foundation compass on my mac (yay!). These steps to help you out
You need the following to install foundation on your mac
- Ruby on rails
The tricky part is to install compass, the instructions can be found on compass website. If you face file permissions error such as
ERROR: While executing gem … (Gem::FilePermissionError)
You don’t have write permissions into the /Library/Ruby/Gems/1.8 directory.
You will need to be root user on terminal to install compass. I have written a detailed instruction on how to over come Installing compass on mac using terminal. Once you finished the steps, you can jump to foundation compass installation, which includes
gem install zurb-foundation
gem install zurb-foundation –pre
You need to set up folder for foundation. This is my folder
You can verify folder name by typing the following code into terminal. Enter your folder names one by one it should tell you if its a directory or now
-sh: /Users/shovan.sargunam/: is a directory
Once you figure out your directory ( mine is /Users/shovan.sargunam/Framework-Wireframes/Foundation/ ) you can continue with installing foundation
compass create -r zurb-foundation –using foundation
Enter your project folder
Replace <project-name> with your project name (project-rex)
compass create project-rex -r zurb-foundation –using foundation
If you succeed you should get the following message
Congratulations! Your compass project has been created.
You may now add and edit sass stylesheets in the sass subdirectory of your project.
Sass files beginning with an underscore are called partials and won’t be
compiled to CSS, but they can be imported into other sass stylesheets.
You can configure your project by editing the config.rb configuration file.
You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
1. To compile on demand:
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:
compass watch [path/to/project]
* Website: http://compass-style.org/
* Sass: http://sass-lang.com
* Community: http://groups.google.com/group/compass-users/
w00t! You’re using ZURB Foundation, now go forth and rock ‘n roll!
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
Now Foundation with Compass should be installed on your computer. Ready to be used
Next step, I need to figure out how to use it with Dreamweaver cs6