Responsive Bootstrap Designing in Cakephp 3X

Responsive bootstrap designing in CakePHP 3x

CakePHP 3 uses the Zurb Foundation front-end framework 'out-of-the-box'. Which means that the classes you want to use will be listed in their documentation.

Specifically the page about the grids.

You can customise, remove or replace the provided default css if you want to. It is only provided so that you can 'hit the ground running' and so that new users are presented with a more organised front-end look when they first start using the framework.

If you'd like to review the history of this change, you can check the PR on Github.

CakePHP 3 responsive design, there is any notation?

CakePHP 3 uses the Zurb Foundation front-end framework. Which means that the classes you want to use will be listed in their documentation.

For responsive design you will want to look into the grid.

Good luck!

CakePHP 3 responsive design, there is any notation?

CakePHP 3 uses the Zurb Foundation front-end framework. Which means that the classes you want to use will be listed in their documentation.

For responsive design you will want to look into the grid.

Good luck!

What version of Foundation is used in cakePHP3?

The CakPHP application templates base.css file was last updated with foundation on September the 1st of 2015

https://github.com/cakephp/app/commit/3bf179e04d48c859b4ba411d81607ae25d275b3b

As far as I can tell, this is version 5.5.2. If you need a newer version, then simply don't use the templates default CSS, there is absolutely no need to stick with what ships with the template.

Also you can file an issue on GitHub and suggest an update, or even create pull request and update it yourself.

how can i link a bootstrap js file and css file to Cakephp 3x

You can include js like this

  <?= $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js') ?>

Or if your js file exist in your project then it must be in webroot/js folder then you can include file like this

 <?= $this->Html->script('custom.js') ?>

CakePHP 2.0 with Twitter Bootstrap

Assuming that the css file is included in your layout in your view for forms you can use the follwoing:

<?php echo $this->Form->create('User', array(
'inputDefaults' => array(
    'div' => 'control-group',
    'label' => array('class' => 'control-label'),
    'between' => '<div class="controls">',
    'after' => '</div>',
    'class' => 'span3',
    'error' => array('attributes' => array('wrap' => 'div', 'class' => 'alert alert-error'))
) ));

echo $this->Form->input('password',array(
                'after' => '<span class = \'help-inline\'>Minimum of 5 characters.</span></div>'));
            ?>

I found this method to work perfectly with cake2.0 and bootstrap 2.0

This will produce the following

<div class="control-group required error">
<label for="UserPassword">Password</label>
<div class="controls">
<input name="data[User][password]" class="span3 form-error" type="password" value="" id="UserPassword">
<span class="help-inline">Minimum of 5 characters.</span></div>
<div class="alert alert-error">You must provide a password.</div>
</div>

The html above is after the form has been submitted and an error has been returned.

How to identify button selected in cakephp 3.x?

okey, most simple way is in modal to have hidden field, which contains a subject. I think this has not much to do with cakephp.
Example should look like this:

  function modalopen(subject) {

    $('#modal #subject').val(subject);

    $('#modal').modal('toggle');

  }

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

  </head>

  <body>

    <button type="button" class="btn btn-info" onclick="modalopen('english')">+</button>

<button type="button" class="btn btn-info" onclick="modalopen('math')">+</button>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h4 class="modal-title" id=""></h4>

      </div>

      <div class="modal-body">

        sub (will be hidden):<br>

        <input type="text" name="subject"  id ="subject" value="" placeholder="will be hidden"><br>

        Mark:<br>

        <input type="text" name="mark"  id ="mark" value="" placeholder="mark">

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save</button>

      </div>

    </div>

  </div>

</div>

  </body>

</html>

Using Foundation Zurb with CakePHP

The official app skeleton uses only a subset of Zurb Foundation. So instead of the default css files you need to download and use Foundation's full (custom version which includes the elements you want) css.

Responsive Bootstrap Designing in Cakephp 3X