Zurb Foundation Installing with Compass on Mac – Detailed instruction

Home / Blog / Zurb Foundation Installing with Compass on Mac – Detailed instruction

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
  • Compass

Ruby on rails will be installed if you have xcode instelled on your computer (get it here) If not you can get it from ruby on rails. (I recommend using the xcode).

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

</pre>
/Users/shovan.sargunam/Framework-Wireframes/Foundation/

 

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


/Users/shovan.sargunam/
-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

which is


cd path/to/where-you-want-your-project
compass create -r zurb-foundation --using foundation

Enter your project folder

Replace <project-name> with your project name (project-rex)


cd /Users/shovan.sargunam/Framework-Wireframes/Foundation/

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]

More Resources:
 * Website: http://compass-style.org/
 * Sass: http://sass-lang.com
 * Community: http://groups.google.com/group/compass-users/

&nbsp;

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:
<head>
 stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
</head>

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

Recommended Posts

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.