AN UPDATE!

I received a PM from mnakalay advising me of an update to Zurb. Zurb Foundation 4 now makes it possible to mitigate these issues properly. Take a read of what mnakalay had to say:

Did you check the new Foundation 4? Among all the cool features, they made it possible to use semantic classes of your choice thanks to SASS and LESS; so no more col4 and the like.

When I get time, I'll update my how-to, but for now, disregard the below and try master version 4.

THIS IS ONLY RELEVENT FOR VERSION 3 VV

Let me share with you my own horror story ....

I came across Zurb's Foundation Framework, browsed a few of the demo sites and thought it was simply amazing. I'd never touched Responsive web design before, but now was the time. I spent hours working on it, days even. When my HTML design was complete, I quickly imported it into C5 and to my horror... not much worked correctly.

The Issues

When you enter edit mode, the C5 UI has it's own CSS files. These contain classes named (you guessed it) .container and .row - the exact same as Foundation Framework does.

A little spoiler alert here, but further down the line you'll experience another problem too. When you page is in edit mode and you hover over one of your areas, the black-background will appear 49px further down the page than it should be. This is specific to Foundation Framework themes too, but we can fix that with a swift CSS hack.

The Resolutions

First up the CSS conflicts - unless in the future we can get either C5 or Zurb to make their class names a little more specific, then I doubt we'll be avoiding doing this any time soon.

The easiest way is to modify the Foundation Framework files. Ultimately, the aim is the rename .container and .row to something unique.

1. Open stylesheets/framework.css
2. Do a CTRL-F for ".row", and then replace all occurences with ".c5row" or something equally as unique
3. Do a CTRL-F for ".container". In the current version this should not match anything, however for future version of FF, do this anyway. Replace any occurences with ".c5container" or something equally as unique.
4. Open your theme file. Where you have used either class="row" or class="container", replace it with your new class name.

That will get your site functionality working.

However, when you enter edit mode, you'll have yet more problems. For this, you'll need to add the following code to your CSS when you're in edit mode:

#ccm-highlighter {
        margin-top:-49px;
}

And that should be that! Hopefully this will solve somebodies problems down the line. I ended up PM'ing people about it so a huge shout out to Growthcurve who pointed me in the right direction!