# \[solved\] CakePHP and foundation (CSS & JS) integration help

**URL:** <https://discourse.cakephp.org/t/solved-cakephp-and-foundation-css-js-integration-help/5218>\
**Category:** Need Help\
**Created:** [November 6, 2018, 8:00pm UTC](https://discourse.cakephp.org/t/solved-cakephp-and-foundation-css-js-integration-help/5218 "2018-11-06T20:00:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![zsolt.trenyik](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zsolt.trenyik/32/1214_2.png) [@zsolt.trenyik](https://discourse.cakephp.org/u/zsolt.trenyik)\
**Post date:** [November 6, 2018, 8:00pm UTC](https://discourse.cakephp.org/t/solved-cakephp-and-foundation-css-js-integration-help/5218/1 "2018-11-06T20:00:14Z")

</div>

Dear All,

I have installed CakePHP and read the CMS tutorial succesfully. However, using foundation css settings works only partly. This means that until I have teh original settings in the layout -\> default.ctp:

```
<?= $this->Html->css('base.css') ?>
<?= $this->Html->css('style.css') ?>

<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>

```

I can change button’s look, but when I try e.g. to create a menu with favicons (and copy the sample html code from the foundation’s tutorial as is to any of my ctp showing a page), it doesn’t show it as excepted.

I tried this: downloaded the full package of foundation, including css and js. Then, copied to the appr. location (webroot -\> css folder), and tried to include it:

 \<?= $this-\>Html-\>css('base.css') ?\> \<?= $this-\>Html-\>css('style.css') ?\> \<?= $this-\>Html-\>css('foundation.css') ?\> \<?= $this-\>Html-\>css('app.css') ?\> \<?= $this-\>Html-\>css('home.css') ?\> \<?= $this-\>Html-\>script('vendor/jquery.js') ?\> \<?= $this-\>Html-\>script('vendor/foundation.js') ?\> \<?= $this-\>Html-\>script('app.js') ?\>

```
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>

```

Then, the total chaos comes. My submit button disappears, but also the iconed menu doesn’t look correctly (it appears in a “transient state”). What should I include to be able to use all the features of foundation?

I tried this menu to show:

[https://foundation.zurb.com/sites/docs/menu.html#icons](https://foundation.zurb.com/sites/docs/menu.html#icons)

Thanks for All in advance!

---

<div class="post-metadata">

**Author:** ![zsolt.trenyik](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zsolt.trenyik/32/1214_2.png) [@zsolt.trenyik](https://discourse.cakephp.org/u/zsolt.trenyik)\
**Post date:** [November 7, 2018, 8:25am UTC](https://discourse.cakephp.org/t/solved-cakephp-and-foundation-css-js-integration-help/5218/2 "2018-11-07T08:25:00Z")

</div>

Dear All,

I have read many resources of the foundation docs, and changed my header in the ctp view this way:

![image](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/d/d05d954ecb22dcb8930f42690793ebe06c086157.png)

According to the foundation’s documentation, if the css and the js file are in their place (they are), this should work without any issue. But still, buttons are okay, dropdown stuff doesn’t work.

Since button styling is pure css, but dropdown needs js, too, I would think that loading of js file is the cause.

Thanks for the help!

---

<div class="post-metadata">

**Author:** ![zsolt.trenyik](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zsolt.trenyik/32/1214_2.png) [@zsolt.trenyik](https://discourse.cakephp.org/u/zsolt.trenyik)\
**Post date:** [November 13, 2018, 1:37pm UTC](https://discourse.cakephp.org/t/solved-cakephp-and-foundation-css-js-integration-help/5218/3 "2018-11-13T13:37:15Z")

</div>

Hi All,

I have found it. In the head of my frontend.ctp are:

```
  <!-- Script includes -->  
  <?= $this->Html->script('jquery') ?>
  <?= $this->Html->script('jquery_ui/jquery-ui') ?>
  <?= $this->Html->script('foundation.js') ?>

  <!-- CakePHP includes -->
  <?= $this->Html->css('base.css') ?>
  <?= $this->Html->css('style.css') ?>

  <!-- Zurb Foundation & jQuery includes -->
  <?= $this->Html->css('foundation') ?>
  <?= $this->Html->css('jquery-ui') ?>
  <?= $this->Html->css('jquery-ui.structure') ?>

```

And in my footer.ctp:

```
<script>
  $(document).foundation();
</script>
```