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:
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.