zurb-foundation - Using Zurb Foundation in Kentico CMS Portal Engine

Question

I need to use Zurb Foundation front-end framework and Kentico CMS v7's portal engine development model. When I import the framework CSS into the CMS and apply the Foundation style sheet to a Page Template, the CMS styles and Foundation styles step on each other making the Design tab pretty much useless for the user:

No style applied:

Style applied:

I am wondering if I need to prefix styles in the Foundation CSS classes to try to prevent conflict, however my initial quick attempts didn't seem to have much affect.

Is there a way to include the Foundation CSS in a way that doesn't prevent portal engine development?

Answer 1

Only thing i can think of now is to add the CSS conditionally.

Put

<%= CMS.CMSHelper.CMSContext.ViewMode != CMS.PortalEngine.ViewModeEnum.Design ? @"<link rel=""stylesheet"" href=""http://www.zurb.com/assets/foundation.top-bar.css"">" : "" %>

into a page layout. I tried to add this to layout of master page (Root document -> Master page -> Edit template properties -> Layout) and it works fine. But it will add the CSS to the . Unfortunately this code does not get resolved in head section of master page.