CakePHP, Zurb Foundation and LiveReload

Building this site was a good opportunity to try out Zurb Foundation for the first time. This is how I got it to play nicely with CakePHP and LiveReload.

Create the Zurb foundation files:

cd Sites/<project_name>
compass create foundation -r zurb-foundation --using foundation

This will create a directory named foundation containing the files. However, config.rb needs to be at the project root that is being monitored by LiveReload. Otherwise you’ll get an error message linking to Compass: “Nothing to compile”

Move the files to match this directory structure, which is my CakePHP configuration

.sass-cache
app
public
   css
   files
   img
   js
     foundation
     vendor
  .htaccess
   favicon.ico
   humans.txt
   index.php
   robots.txt
   test.php
sass
  _normalize.scss
  _settings.scss
  app.scss
config.rb

If Compass works fine on the command line, but LiveReload throws errors you may need this solution, which configures LiveReload to use the gems that are installed with Foundation.

Edit the config.rb file:

require '/Library/Ruby/Gems/1.8/gems/zurb-foundation-4.3.1/lib/zurb-foundation.rb'

http_path = "/"
css_dir = "public/css"
sass_dir = "sass"
images_dir = "public/img"
javascripts_dir = "public/js"

I add two new files to the sass directory: <project_name>.scss and <project_name>_settings.scss

<project_name>_settings.scss is imported at the top of app.scss

@import "settings";
@import "<project_name>_settings";

This means that variables can be written to override Foundation’s variables.

<project_name>.scss is imported after the Foundation component files at the end of app.scss and includes plain css and and scss.