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

Need Help
1

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

Thanks for All in advance!

2

Dear All,

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

image

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!

3

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>
1 Like