Giter VIP home page Giter VIP logo

twbs-cake-plugin's Introduction

Bootstrap plugin for CakePHP 3.X

License Latest Stable Version Total Downloads

This plugin includes both less.js and less.php parsers and allows you to easilly deploy CakePHP applications with (Twitter) Bootstrap.

Since version 3.0.2 this plugin dropped its own helpers and components and added friendsofcake/bootstrap-ui as a composer requirement, so you will use all their classes instead.

It also contains bake templates that will help you starting twitter-bootstraped CakePHP webapps.

General Features

  • Parses less files using less.js and/or less.php.
  • LessHelper to easily parse files.
  • Bake templates.
  • Generic Bootstrap layout.
  • All the included utilities from BootstrapUI plugin.

Installation

Adding the plugin

You can easily install this plugin using composer as follows:

composer require elboletaire/twbs-cake-plugin

After doing it, composer will ask you for a version. Checkout the package on packagist to know every available version.

Enabling the plugin

After adding the plugin remember to load it in your config/bootstrap.php file:

Plugin::load('Bootstrap', ['bootstrap' => true]);

This will load the Less and BootstrapUI plugins for you.

If you preffer to do this manually, you can load them one by one:

Plugin::load('Bootstrap');
Plugin::load('Less');
Plugin::load('BootstrapUI');

Configuration

After adding the plugin you can add the desired utilities:

// AppController.php
public $helpers = [
    'Less.Less', // required for parsing less files
    'BootstrapUI.Form',
    'BootstrapUI.Html',
    'BootstrapUI.Flash',
    'BootstrapUI.Paginator'
];

Or, if loading them in the AppView:

// AppView.php
public function initialize()
{
    $this->loadHelper('Less', ['className' => 'Less.Less']);
    $this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
    $this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
    $this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
    $this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
}

Usage

There are two common usage ways when using twitter bootstrap and less:

  • Directly using twitter bootstrap classes on your views.
  • Using custom classes on your views and then extending that classes to twitter bootstrap components.

For the first case you can directly load the layout included with this plugin and bake your views with the also included bake templates.

For the second case you'll need to create your own layout and create a stylesheet like the included one webroot/less/cakephp/styles.less.

This file extends the default baked views' styles so they have a CakePHP-Bootstrapped look and feel.

Themes

On both cases you can use the layout included with this plugin as a theme (right now there's only the default layout):

// AppController or AppView
public function beforeRender(\Cake\Event\Event $event)
{
    $this->viewBuilder()->theme('Bootstrap');
}

Or as a layout:

// AppController or AppView
public $layout = 'Bootstrap.default';

You can also specify it as a layout directly from your template files:

// any .ctp Template file
$this->layout = 'Bootstrap.default';

You should use the Bootstrap layout if you wanna use less files. If you rather preffer using css files you may use the BootstrapUI layouts.

Last but not least, you can also copy that template to your Template/Layout folder and then extend the template from your view.

Read more about views on the CakePHP Cookbook.

BTW it's recommended that you copy all the required files to your src folder (specially for assets), even if you won't modify them.

Take in mind that if you're loading this plugin in a fresh CakePHP installation and you try to see the layout change in the home page, you won't see nothing. The home.ctp overwrites the layout to false, to ensure it's loaded as it has been designed.

Baking views

You can bake your views using the twitter bootstrap templates bundled with this plugin. To do so, simply specify the bootstrap template when baking your files:

cake bake.bake [subcommand] --theme Bootstrap

Remember that you can also bake your views using BootstrapUI's bake templates. Take a look to its readme for more details.

Creating your own layout

Create a styles.less file on your webroot/less folder (also create that folder if it does not exist) containing this line:

@import '../bootstrap/less/bootstrap.less';

Finally, load the less file from your view or layout:

echo $this->Less->less('less/styles.less');

If you want to extend twitter bootstrap styles I recommend you to copy the bootstrap.less file to your less folder and customize it to your needs. For the variables.less create a custom-variables.less and load it just after variables.less in bootstrap.less file. Any variable defined in that file will overwrite the value defined in variables.less and your code won't break when updating (Twitter) Bootstrap.

If you'd like to see an example of this you can check the files included in webroot/less/cakephp specially made to extend the default CakePHP baked templates.

Utilities

This plugin "includes" the following utilities (all they come from other plugins):

A note about Bootstrap's FlashComponent

The old Bootstrap FlashComponent used to have a close option that allowed you to define whether the flash alert would have a close button or not.

With BootstrapUI FlashHelper this works different. It looks for an alert-dismissible class (which is set by default) and, if defined, will show the close button.

For disabling the close button for the current Flash alert you can do:

$this->Flash->{whatever}("Hello World", ['params' => ['class' => ['alert']]]);

// where {whatever} is any of the Bootstrap alert classes (danger, info, warning...)
$this->Flash->success("Hello World", ['params' => ['class' => ['alert']]]);

Note that the class param is defined as an array.

LessHelper

Used on your template or view to parse and load the compressed CSS.

The LessHelper is part of the less cakephp plugin. Check out all its details there.

Dependencies

Included dependencies

About versioning

This project started using the same versioning as CakePHP 3.X during its development stage. For this reason, I'll continue using this but reserving the latest version number for my versions.

This means that any version of this plugin with 3.0.X version number should be compatible with any CakePHP 3.0 version.

License

The MIT License (MIT)

Copyright 2013-2015 Òscar Casajuana (a.k.a. elboletaire)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

twbs-cake-plugin's People

Contributors

elboletaire avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

twbs-cake-plugin's Issues

Flash error

Hi!
I'm using the newest version (RC1) of CakePHP. I'm getting on every view this error message:

Warning (512): Method Cake\View\Helper\SessionHelper::flash does not exist [CORE/src/View/Helper.php, line 138]

I changed this line: <?= $this->Session->flash(); ?> to <?= $this->Flash->render() ?> but it doesn't seems to be resolved:

Notice (8): Undefined variable: class [ROOT/plugins/Bootstrap/src/Template/Element/flash.ctp, line 3]" role="alert"> ×Close The user has been saved.

Move less logic to a new plugin

All the less related files (like the helper and the parsers) may be in a separated plugin so other people can use it alone, without all that twitter bootstrap related files.

Use FriendsOfCakePHP/Bootstrap-UI helpers

Instead of developing my own helpers, I'm gonna add the bootstrap-ui helpers and extend them to add the default functionalities of my current classes (like adding some classes by default).

Baking views doesn't generate Bootstrap html

I'm running CakePHP 3.0rc1, I had to modify the command to say "--theme" instead of "--template".

Example:

bin/cake bake view tasks --theme Bootstrap

The resulting files are identical to the standard bake output.

Paginator numbers location error

  • BootstrapUI Version: 0.62

I baked the index and the Paginator->Numbers was not between "First and Last".

The code for PaginatorHelper is:
public function numbers(array $options = [])
{
$class = 'pagination';
$options += [
'class' => $class,
'after' => '',
'size' => null,
];
$options['class'] = implode(' ', (array)$options['class']);
if (!empty($options['size'])) {
$options['class'] .= " {$class}-{$options['size']}";
}
$options += [
'before' => '

    ',
    ];

    To fix it I did:
    public function numbers(array $options = [])
    {
    $class = 'pagination';
    $options += [
    'class' => $class,
    //'after' => '

',
'size' => null,
];
$options['class'] = implode(' ', (array)$options['class']);
if (!empty($options['size'])) {
$options['class'] .= " {$class}-{$options['size']}";
}
$options += [
//'before' => '
    ',
    ];

question about customization

In the default template there is this code:

<?php if ($this->fetch('navbar.top')): ?>
            <nav role="navigation" class="collapse navbar-collapse" id="navbar-top">
                <ul class="nav navbar-nav">
                    <?= $this->fetch('navbar.top'); ?>
                </ul>
            </nav>
<?php endif; ?>

I've searched and searched through cakephp documentation and I'm not seeing the best way to create a default navbar.top value. I understand $this->extend(), but with my tests so far you can't seem to extend a layout with another layout. So trying to do something like $this->extend('/Layout/default'); doesn't work. If there was like if element exists type of code in your default layout, that would seem to be idea, but since that's not what it is... I'm just wondering what do you consider the best practice for creating a default navbar using your default layout?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.