Recently, I had to backtrack on a project when a client needed IE8 compatability for their site. The site in question was built on wordpress and uses the Foundation 4 grid framework.
Respond.js is a great script, but unfortunately it didn't cut it for this project and I needed to be using Foundation 3 if I hoped to make my site properly compatible with IE8.
I found this article on Zurb which inspired me to do the same in my project. I use Compas and SASS for my stylesheets so, with a poke from my comrade Matthew, I put some time into figuring out how I could use Grunt to make sure all my SASS files stay well organised. I found a solution that means two separate stylesheets can be compiled with separate version dependencies for the same zurb-foundation gem. If you need to do this too, hopefully this gist might help save you some time.
First setup a seperate clean compass project that requires foundation 3. Take a look at the F3 docs for the setup process. You can specify which foundation version to use by adding this line to your config.rb, right at the very top - above require "zurb-foundation".
gem "zurb-foundation". "3.2.5"
require "zurb-foundation"Normally I use bundler to manage version dependencies as recommended here by Foundation. But in this case you cannot use bundler. It will not let you install 2 gem versions alongside each other. Later on you'll setup 2 separate ruby config files which grunt will use to compile your stylesheets.
So, now you've got a clean set of foundation3 files. All my foundation4 files were already in my project, so I just reorganised the structure a bit like this...
theme/
└── config/
├── foundation3.rb
└── foundation4.rb
└── css/
└── img/
└── foundation/
└── orbit/
└── js/
├── foundation3/
└── foundation4/
└── vendor/
└── sass/
└── foundation3/
├── _settings.scss
├── _my-theme.scss
└── foundation3.scss
└── foundation4/
├── _settings.scss
├── _my-theme.scss
├── foundation4.scss
└── _common-variables.scss
└── _normalize.scss
If you're in less of a pickle and have made this descision at the start of your project (congratulations), then just repeat step 1 with the version changed in config.rb to get your starting point for Foundation4.
Instead of having one config.rb for this compass project, You're going to use 2 (see examples included in gist). Each one will require a different version of the foundation gem when compiling the css, and specify the folder structure you have organised above. Put both foundation3.rb and foundation4.rb inside config.
Your Gruntfile will then setup a compass task that knows which config file to use.
All your stylesheets (foundation3.css and foundation4.css) will compile here.
Foundation3 requires a bunch of orbit images to compile unless you customise the import settings.
I haven't separated these out into Foundation 3 folders as there were no Foundation 4 images in my project.
Just copy in all your foundation js files to their respective folders.
Common variables and settings (ie: colours or fonts) will be required by both stylesheets. Any sass files in the root folder can be imported into either stylsheet for compiling. For example: Either foundation3.scss or foundation4.scss could contain @import "commom-variables". The setting importPath in your Gruntfile makes this possible.
If you've never used Grunt before, take a look here at how to get started.
Basically you need Node.js to install Grunt with the
npmcommand. I use homebrew so I installed it via that. Here's a how to.
You'll also need Node.js to install your projects package dependencies.
This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.
Copy the example I've included into the root of your project (ie: theme/). Note the devDependencies specified are grunt, grunt-contrib-compass and grunt-contrib-watch.
This file is used to configure or define tasks and load Grunt plugins.
Again, copy the example I've included into the root of your project. Read through the comments and checkout the plugin pages for more details on all the options.
Go to the root of your project (ie: theme/) in Terminal and run the following command to install all packages required in your package.json file.
$ npm install
If you've been successful, you should see a new folder in your project called node_modules.
If you've made it this far, you should have everything in place to test it out. In the root of your project, run...
$ grunt foundation3
I was going to include a bunch of wordpress specific things, but looking back at the length of this, I think I might make that a separate gist. Please feel free to contribute ideas - I Hope this has been of use.