Using zurb foundation with concrete5


I'm trying to integrate zurb foundation 3 into my concrete5 theme. Unfortunately foundation and concrete5 share some of the same css style names that makes it unusable. I found a good help article about this here: , however this must be for an older version of foundation, the newer versions don't use a container class.

Has anyone integrated foundation 3 into concrete5? Any pointers on what has to happen to make it work correctly?

View Replies:
vernb replied on at Permalink Reply

I too would like to use Foundation with concrete5. Any help or suggestions as how to merge the two plus pitfalls, patches etc. will also be appreciated.

PineCreativeLabs replied on at Permalink Reply
I have a theme in the marketplace that is a hybrid between Foundation 2 and 3. See it here:

I am currently working on a new version of this theme for the marketplace ("Foundation PRO") that will use Foundation 3.2, and will include a number of easy-to-use blocks.
studio108 replied on at Permalink Reply
I am also just playing with the Foundation Framework. I made the changes suggested in the 'how to section' and couldn't get the edit bar to show. If however you remove the JS link at the footer <script src="javascripts/foundation.min.js"></script>
The C5 edit mode comes alive. It appears there must be some java clashing with the core.

Still work in progress as some of the CSS interferes and also need to load the JS files individually to see which ones are clashing with the core. I suspect it's <script src="javascripts/jquery.js"></script> .
bentaswan replied on at Permalink Reply
I'm in the process of concretizing a Foundation Framework template, and it's been a bit of a challenge, mainly because it's my first time using concrete5 but also because I'm just plain new to web development in general. However, I've managed to get a basic default.php page working. This is how I've structured it (correct me if I'm wrong):

<!DOCTYPE html>

<!-------------------- Head ----------------------->


<link href="<?php echo $this->getThemePath()?>/stylesheets/foundation.css" rel="stylesheet" type="text/css" />

<link href="<?php echo $this->getThemePath()?>/stylesheets/app.css" rel="stylesheet" type="text/css" />

<script src="<?php echo $this->getThemePath() >/javascripts/"></script>

<?php Loader::element('header_required'); ?>


<!-------------------- Body ----------------------->


<div class="c5row">
<div class=twelve columns>

<?php $a = new Area('Main'); $a->display($c); ?>


<?php $page = Page::getCurrentPage(); ?>
<?php if(!$page->isEditMode()): ?>

<script src="<?php echo $this->getThemePath()?>/javascripts/foundation.min.js" type="text/javascript">
$(function() {alert('Not Edit Mode');});

<?php endif; ?>

<script src="<?php echo $this->getThemePath()?>/javascripts/app.js"></script>

<?php Loader::element('footer_required'); ?>

bentaswan replied on at Permalink Reply
Regarding the javascript clashes in editing mode, credit to the solution goes to:
studio108 replied on at Permalink Reply
Hi Bentaswan,
will look into this Edit Mode fix. I got it working by not loading the jquery.js file as Jquery gets loaded in as part of the C5 core install anyway.
The only problems that continue is the Foundation CSS clashing with the C5's Core CSS.
Getting the autonav working with Topnav was good fun but got a autonav template working in the end.
For reference there is a good looking new theme called 'Wanderer' in the Market Place which is based on the Foundation Framework.