Transparently use Twitter Bootstrap 3 with CakePHP 3.
- CakePHP 3.x
- Twitter Bootstrap 3.x
- FlashComponent + elements (types: error, info, success, warning)
- FormHelper (align: default, inline, horizontal)
- HtmlHelper (components: breadcrumbs, badge, label, icon)
- PaginatorHelper
- Widgets (basic, checkbox, radio, button)
- Sample layouts (cover, signin, dashboard)
- Bake templates incomplete
Using Composer:
composer require friendsofcake/bootstrap-ui
Then load the plugin by adding the following to your app's config/boostrap.php:
\Cake\Core\Plugin::load('BootstrapUI');or using CakePHP's console:
./bin/cake plugin load BootstrapUI
Then for a complete setup, just make your AppView class extends BootstrapUI\View\UIView.
The src\View\AppView.php then will be as the following:
namespace App\View;
use BootstrapUI\View\UIView;
class AppView extends UIView
{
/**
* Initialization hook method.
*/
public function initialize()
{
//Don't forget to call the parent::initialize()
parent::initialize();
}
}namespace App\View;
use Cake\View\View;
class AppView extends View
{
use UIViewTrait;
/**
* Initialization hook method.
*/
public function initialize()
{
//render the initializeUI method from the UIViewTrait
$this->initializeUI();
}
}If you wish to use your own layout template, just make sure to include:
// in the <head>
echo $this->Html->css('path/to/bootstrap.css');
echo $this->Html->script(['path/to/jquery.js', 'path/to/bootstrap.js']);When using the included layout (or a copy of), extra layout types (directly taken from the Bootstrap examples). You just need to copy them to your application's layouts directory:
cp -R vendor/friendsofcake/bootstrap-ui/src/Template/Layout/examples src/Template/Layout/TwitterBootstrap
You can then simply extend them in your views like so:
$this->extend('../Layout/TwitterBootstrap/dashboard');
Available types are:
- cover
- signin
- dashboard
- blog coming soon
NOTE: Remember to set the stylesheets in the layouts you copy.
A quick way of getting the Bootstrap assets installed is using bower. Assuming you are in ROOT:
bower install bootstrap
mkdir -p webroot/css/bootstrap webroot/js/bootstrap webroot/js/jquery webroot/css/fonts
cp bower_components/bootstrap/dist/css/* webroot/css/bootstrap/.
cp bower_components/bootstrap/dist/js/* webroot/js/bootstrap/.
cp bower_components/jquery/dist/* webroot/js/jquery/.
cp bower_components/bootstrap/dist/fonts/* webroot/css/fonts/.
echo /bower_components >> .gitignore
git add .gitignore \
bower.json \
webroot/css/bootstrap \
webroot/js/bootstrap \
webroot/js/jquery
Finally, for those of you who want even more automation, some bake templates have been included. Use them like so:
$ bin/cake bake.bake [subcommand] -t BootstrapUI
echo $this->Form->create($article);
echo $this->Form->input('title');
echo $this->Form->input('published');will render this HTML:
<form method="post" accept-charset="utf-8" role="form" action="/articles/add">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<div class="form-group">
<label class="control-label" for="title">Title</label>
<input type="text" name="title" required="required" id="title" class="form-control">
</div>
<div class="form-group">
<input type="hidden" name="published" value="0">
<label for="published">
<input type="checkbox" name="published" value="1" id="published" class="form-control">
Published
</label>
</div>echo $this->Form->create($article, ['align' => [
'sm' => [
'left' => 6,
'middle' => 6,
'right' => 12
],
'md' => [
'left' => 4,
'middle' => 4,
'right' => 4
]
]]);
echo $this->Form->input('title');
echo $this->Form->input('published');will render this HTML:
<form method="post" accept-charset="utf-8" role="form" class="form-horizontal" action="/articles/add">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<div class="form-group">
<label class="control-label col-sm-6 col-md-4" for="title">Title</label>
<div class="col-sm-6 col-md-4">
<input type="text" name="title" required="required" id="title" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-6 col-md-offset-4 col-md-4">
<input type="hidden" name="published" value="0">
<label for="published">
<input type="checkbox" name="published" value="1" id="published" class="form-control">
Published
</label>
</div>
</div>You can configure each of the helpers by passing in extra parameters through the AppView.php.
Here is an example of changing the prev and next labels for the PaginatorHelper.
$this->loadHelper(
'Paginator',
[
'className' => 'BootstrapUI.Paginator',
'labels' => [
'prev' => 'previous',
'next' => 'next',
]
]
);To style Auth flash messages overwrite the default flash element key.
$this->loadComponent('Auth', [
'flash' => ['element' => 'default'],
...
NOTE: Check tests for more examples.
- Fork
- Mod, fix
- Test - this is important, so it's not unintentionally broken
- Commit - do not mess with license, todo, version, etc. (if you do change any, bump them into commits of their own that I can ignore when I pull)
- Pull request - bonus point for topic branches
To ensure your PRs are considered for upstream, you MUST follow the CakePHP coding standards. A pre-commit
hook has been included to automatically run the code sniffs for you. From your project's root directory:
cp vendor/friendsofcake/bootstrap-ui/contrib/pre-commit .git/hooks/
chmod 755 .git/hooks/pre-commit
http://github.com/friendsofcake/bootstrap-ui/issues
Copyright (c) 2015, Jad Bitar and licensed under The MIT License.