diff --git a/README.md b/README.md index 91928662d..84808740f 100644 --- a/README.md +++ b/README.md @@ -1,377 +1,50 @@ -# README +MopaBootstrapBundle +=================== -

Warning

- -> Make sure you update your namespaces, we changed the Bundles namespace from -> Mopa\BootstrapBundle -> to -> Mopa\Bundle\BootstrapBundle -> -> You must change the namespace references in: -> -> * app/AppKernel.php -> * Your code making use of any MopaBootstrapBundle classes (e.g. Navbar, MenuBuilder, etc.) -> * Configuration referencing any classes (e.g. service definitions for menu, navbar, etc.) -> -> For info about the branches read https://github.com/phiamo/MopaBootstrapBundle/wiki/Branches-&-Versions -> -> If you dont want to care about the twitter/bootstrap dependency, please make sure your [composer.json](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/including_bootstrap.md) is correct +MopaBootstrapBundle is a collection of code to integrate twitter's bootstrap +(http://twitter.github.com/bootstrap/) as easy as possible into your symfony2 +(http://www.symfony.com) Project. -

Live Show

+Live Show +--------- To see the bundle and its capabilities online just have a look on + [MopaBootstrapBundle Live](http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap) -* [MopaBootstrapBundle](http://github.com/phiamo/MopaBootstrapBundle) - Easy integration of twitters bootstrap into symfony2 +Additional Resources: + * [MopaBootstrapSandboxBundle](http://github.com/phiamo/MopaBootstrapSandboxBundle) - Seperate live docs from code * [symfony-bootstrap-sandbox](https://github.com/phiamo/symfony-bootstrap-sandbox) is also available -

Introduction

- -MopaBootstrapBundle is a collection of code to integrate twitter's bootstrap -(http://twitter.github.com/bootstrap/) as easy as possible into your symfony2 -(http://www.symfony.com) Project. - -It includes: +Included +-------- -* twig templates for use with symfony2 Form component +* Twig Extensions and templates for use with symfony2 Form component * control your form either via the form builder or the template engine * control nearly every bootstrap2 form feature * javascript and twig blocks for dynamic collections * A generic Navbar class to generate your Navbar outside the template * helpers for dropdowns, seperators, etc. * twig templates for KnpPaginatorBundle (https://github.com/knplabs/KnpPaginatorBundle) -* twig templates for CraueFormFlowBundle (https://github.com/craue/CraueFormFlowBundle) - -

Documentation

- -Besides this file, there is a growing collection of documentation: - -* in the [docs folder](https://github.com/phiamo/MopaBootstrapBundle/tree/master/Resources/doc) -* in the various examples: - * [twig templates](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Resources/views/Examples) - * [Form Types](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Form/Type) - * [Navbar](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Resources/config/examples) - * [MenuBuilder](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Navbar/Example) - -

Outline

- -* [Prerequisites](#Prerequisites) -* [Installation](#Installation) -* [Include Bootstrap](#Including) -* [Using bootstrap in the layout](#Using) -* [Using bootstrap for Theming](#Theming) -* [Field Collections](#Field_Collections) -* [Generation of CRUD controllers based on a Doctrine 2 schema](#Generation_CRUD) -* [Generating a Navbar](#NAVBAR) -* [TODO](#TODO) -* [Known Issues](#Known_Issues) - -

Prerequisites

- - - -Less is not required, but is extremely helpful when using bootstrap2 variables, or mixins, -If you want to have a easier life, have a look into: - -[Less Documentation](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/less_installation.md) - -

Installation

- -1. Add this bundle to your project in composer.json: - - symfony 2.1 uses composer (http://www.getcomposer.org) to organize dependencies: - - To have composer managing twitters bootstrap too, you can either run it with - --install-suggests or add the following to your composer.json: - - ```json - { - "require": { - "mopa/bootstrap-bundle": "dev-master", - "twitter/bootstrap": "master" - }, - "repositories": [ - { - "type": "package", - "package": { - "version": "master", /* whatever version you want */ - "name": "twitter/bootstrap", - "source": { - "url": "https://github.com/twitter/bootstrap.git", - "type": "git", - "reference": "master" - }, - "dist": { - "url": "https://github.com/twitter/bootstrap/zipball/master", - "type": "zip" - } - } - } - ] - } - ``` - -

Warning

- > Composer doesn't install suggests from mopa/boostrap-bundle! - > If you need e.g knplabs menues or paginator, craue/formflow, - > please add them to YOUR composer.json too! - - ```json - { - "require": { - "mopa/bootstrap-bundle": "dev-master", - "twitter/bootstrap": "master", - "knplabs/knp-paginator-bundle": "dev-master", - "knplabs/knp-menu-bundle": "dev-master", - "craue/formflow-bundle": "dev-master" - }, - "repositories": [ - { - "type": "package", - "package": { - "version": "master", /* whatever version you want */ - "name": "twitter/bootstrap", - "source": { - "url": "https://github.com/twitter/bootstrap.git", - "type": "git", - "reference": "master" - }, - "dist": { - "url": "https://github.com/twitter/bootstrap/zipball/master", - "type": "zip" - } - } - } - ] - } - ``` - - To activate auto symlinking and checking after composer update/install add also to your existing scripts: - (recommended!) - - ```json - { - "scripts": { - "post-install-cmd": [ - "Mopa\\Bundle\\BootstrapBundle\\Composer\\ScriptHandler::postInstallSymlinkTwitterBootstrap" - ], - "post-update-cmd": [ - "Mopa\\Bundle\\BootstrapBundle\\Composer\\ScriptHandler::postInstallSymlinkTwitterBootstrap" - ] - } - } - ``` - - There is also a console command to check and / or install this symlink: - - ```bash - php app/console mopa:bootstrap:install - ``` - - With these steps taken, bootstrap should be install into vendor/twitter/bootstrap/ and a symlink - been created into vendor/mopa/bootstrap-bundle/Mopa/BootstrapBundle/Resources/bootstrap. - - 1.1. Include bootstrap manually or in another way: - - For including bootstrap there are different solutions, why using this one? - have a look into [Including Bootstrap](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/including_bootstrap.md) - -2. Add this bundle to your app/AppKernel.php: - - ``` php - // application/ApplicationKernel.php - public function registerBundles() - { - return array( - // ... - new Mopa\Bundle\BootstrapBundle\MopaBootstrapBundle(), - // ... - ); - } - ``` - -3. Configure routing for bundle if your default is other than annotation: - - ``` yaml - #app/config/routing.yml - mopa_bootstrap: - resource: "@MopaBootstrapBundle/Controller/ExamplesController.php" - type: annotation - ``` - -4. If you like configure your config.yml (not mandatory) - - ``` yaml - mopa_bootstrap: - form: - show_legend: false # default is true - show_child_legend: false # default is true - error_type: block # or inline which is default - ``` - -

Using bootstrap in the layout

- -Have a look at the provided [base.html.twig](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/views/layout.html.twig) - its a fully working bootstrap layout and might explain howto use it by itself. - -To make use of the supplied base.html.twig template just use it, or -defining a new template: - -app/Resources/MopaBootstrapBundle/views/layout.html.twig - -```jinja -{% extends 'MopaBootstrapBundle::base.html.twig' %} - -{% block title %}Yourapp{% endblock %} - -{# and define more blocks ... #} - -``` - -You are free to overwrite any defined blocks. -Have a look into the sandbox too: - - * http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/layout - * https://github.com/phiamo/symfony-bootstrap-sandbox/blob/master/app/Resources/MopaBootstrapBundle/views/layout.html.twig - -If you are using less just include the mopabootstrap.less as described in layout.html.twig - -``` jinja -{% stylesheets filter='less,cssrewrite,?yui_css' - '@MopaBootstrapBundle/Resources/public/less/mopabootstrapbundle.less' - '@YourNiceBundle/Resources/public/less/*' -%} - -{% endstylesheets %} -``` - -If you would like to use the css try this: - -```bash -cd vendor/mopa/bootstrap-bundle/Mopa/BootstrapBundle/Resources/bootstrap -make -``` -if it doesnt work, why not use the less way? - -``` jinja -{% block head_style %} -{% stylesheets filter='cssrewrite,?yui_css' - '@MopaBootstrapBundle/Resources/bootstrap/bootstrap.css' - '@YourNiceBundle/Resources/public/css/*' -%} - -{% endstylesheets %} -``` - -

Using bootstrap for Theming

- - -Forms can either be activated for you whole project (app/config.yml): - -``` yaml -twig: - form: - resources: - - 'MopaBootstrapBundle:Form:fields.html.twig' -``` - -Or include the fields.html.twig in your template for a special form: - -``` jinja -{% form_theme myform 'MopaBootstrapBundle:Form:fields.html.twig' %} -``` - -For FormFlow you can just use MopaBootstrap's templates instead of the ones given by the Bundles: - -``` jinja -{% include 'CraueFormFlowBundle:FormFlow:stepField.html.twig' with {'formident': '#myform}%} -``` - -For KnpPaginatorBundle use the following to override template: - -```yaml -# File: app/configs/parameters.yml - -parameters: - knp_paginator.template.pagination: MopaBootstrapBundle:Pagination:sliding.html.twig -``` - -where formident is used by jquery to bind the submit form handler to the "next" or "finish" button, instead of the first defined like in html it is -This is mainly necessary if you have more than one form. -It need to be the id or class of the form itself -e.g. - -
- - {'formident': '.myformclass'} - or - {'formident': '#myform'} - - -And to use the Paginator templates copy them to - -```bash -mkdir -p app/Resources/Knp/Bundle/PaginatorBundle/views/Pagination/ -cp vendor/bundles/Mopa/BootstrapBundle/Resources/views/Pagination/* app/Resources/Knp/Bundle/PaginatorBundle/views/Pagination/ -``` - -More in detail doc for Forms: - -* [form extenstion details](https://github.com/phiamo/MopaBootstrapBundle/tree/master/Resources/doc/form_extensions.md) -* [twig templates](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Resources/views/Examples) -* [Form Types](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Form/Type) - -

Field Collections

- -Since collections often tend to make probs, we added some code to ease the use: - -http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/forms/collections -https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Form/Type/ExampleCollectionsFormType.php -https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Resources/views/Examples/collections.html.twig - -Make sure you included the mopabootstrap-collections.js to have the javascript code loaded and available - -Some things are currently missing : - - * examples on howto extend the functionality with check functions for adding and removing - * in depth example on howto use Custom FormTypes easily - * and maybe more - -

Generation of CRUD controllers based on a Doctrine 2 schema

- -The Bundle provides a new console command: -```bash -./app/console mopa:generate:crud - -It extends the base doctrine CRUD generator and modifies the theme to support the bootstrap layout. - -Hope you have fun with it. - - - -for the example navbars add the following to your config.yml: +* twig templates for CraueFormFlowBundle (https://github.com/craue/CraueFormFlowBundle) -```yaml -imports: - - { resource: @MopaBootstrapBundle/Resources/config/examples/example_menu.yml } - - { resource: @MopaBootstrapBundle/Resources/config/examples/example_navbar.yml } -``` +Documentation +------------- -For in depth doc into Navbars have a look into -https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/navbar_configuration.md +The bulk of the documentation is stored in the `Resources/doc/index.md` +file in this bundle: +[Read the Documentation for master](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/index.md) -

TODO

+Installation +------------ - - Probably make a command to deal with bootstrap library submodule for init and update - - Probably add more form components - - Add more useful bootstrap stuff +All the installation instructions are located in the [documentation](https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Resources/doc/1-installation.md). +License +------- -

Known Issues

+This bundle is under the MIT license. See the complete license in the bundle: - - Nothing what could not be done in another way, probably some will arise as soon as its published - So make issues! - - There are probably things missing, so make PR's + [LICENCE](LICENCE). diff --git a/Resources/doc/1-installation.md b/Resources/doc/1-installation.md new file mode 100644 index 000000000..4c0da28f4 --- /dev/null +++ b/Resources/doc/1-installation.md @@ -0,0 +1,167 @@ +Installation +============ + +Prerequisites +------------- + +### Less (recommended) + +Less is not required, but is extremely helpful when using bootstrap2 variables, or mixins, +If you want to have a easier life, have a look into: +If you do not have less installed, currently you have several option, but please do NOT ask for help. + +[Less Documentation](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/less-installation.md) + +Installation +------------ + +1. Add this bundle to your project in composer.json: + + 1.2. Plain BootstrapBundle + symfony 2.1 uses composer (http://www.getcomposer.org) to organize dependencies: + + ```json + { + "require": { + "mopa/bootstrap-bundle": "dev-master", + } + } + ``` + 1.2. BootstrapBundle and twitters bootstrap + + To have composer managing twitters bootstrap too, you can either run it with + --install-suggests or add the following to your composer.json: + + ```json + { + "require": { + "mopa/bootstrap-bundle": "dev-master", + "twitter/bootstrap": "master" + }, + "repositories": [ + { + "type": "package", + "package": { + "version": "master", /* whatever version you want */ + "name": "twitter/bootstrap", + "source": { + "url": "https://github.com/twitter/bootstrap.git", + "type": "git", + "reference": "master" + }, + "dist": { + "url": "https://github.com/twitter/bootstrap/zipball/master", + "type": "zip" + } + } + } + ] + } + ``` + + 1.3. BootstrapBundle, twitters bootstrap and further suggests + + ```json + { + "require": { + "mopa/bootstrap-bundle": "dev-master", + "twitter/bootstrap": "master", + "knplabs/knp-paginator-bundle": "dev-master", + "knplabs/knp-menu-bundle": "dev-master", + "craue/formflow-bundle": "dev-master" + }, + "repositories": [ + { + "type": "package", + "package": { + "version": "master", /* whatever version you want */ + "name": "twitter/bootstrap", + "source": { + "url": "https://github.com/twitter/bootstrap.git", + "type": "git", + "reference": "master" + }, + "dist": { + "url": "https://github.com/twitter/bootstrap/zipball/master", + "type": "zip" + } + } + } + ] + } + ``` + + 1.4. BootstrapBundle, twitters bootstrap and automatic symlinking + + If you decided to let composer install twitters bootstrap, you might want to activate auto symlinking and checking, after composer update/install. + So add this to your existing scripts section in your composer json: + (recommended!) + + ```json + { + "scripts": { + "post-install-cmd": [ + "Mopa\\Bundle\\BootstrapBundle\\Composer\\ScriptHandler::postInstallSymlinkTwitterBootstrap" + ], + "post-update-cmd": [ + "Mopa\\Bundle\\BootstrapBundle\\Composer\\ScriptHandler::postInstallSymlinkTwitterBootstrap" + ] + } + } + ``` + + There is also a console command to check and / or install this symlink: + + ```bash + php app/console mopa:bootstrap:install + ``` + + With these steps taken, bootstrap should be install into vendor/twitter/bootstrap/ and a symlink + been created into vendor/mopa/bootstrap-bundle/Mopa/BootstrapBundle/Resources/bootstrap. + + 1.5. Include bootstrap manually or in another way: + + For including bootstrap there are different solutions, why using this one? + have a look into [Including Bootstrap](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/including-bootstrap.md) + +2. Add this bundle to your app/AppKernel.php: + + ``` php + // application/ApplicationKernel.php + public function registerBundles() + { + return array( + // ... + new Mopa\Bundle\BootstrapBundle\MopaBootstrapBundle(), + // ... + ); + } + ``` + + 2.1. If you decided to add knp-menu-bundle, knp-paginator-bundle, or craue-formflow-bundle add them too: + + ``` php + // application/ApplicationKernel.php + public function registerBundles() + { + return array( + // ... + new Mopa\Bundle\BootstrapBundle\MopaBootstrapBundle(), + new Knp\Bundle\MenuBundle\KnpMenuBundle(), + new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(), + new Craue\FormFlowBundle\CraueFormFlowBundle(), + // ... + ); + } + ``` + +3. If you like configure your config.yml (not mandatory) + + ``` yaml + mopa_bootstrap: + form: + show_legend: false # default is true + show_child_legend: false # default is true + error_type: block # or inline which is default + ``` + diff --git a/Resources/doc/2-base-templates.md b/Resources/doc/2-base-templates.md new file mode 100644 index 000000000..84767a4c2 --- /dev/null +++ b/Resources/doc/2-base-templates.md @@ -0,0 +1,75 @@ +Using bootstrap in the layout +============================= + +Prerequisites +------------- + +### Less (recommended) + +Less is not required, but is extremely helpful when using bootstrap2 variables, or mixins, +If you want to have a easier life, have a look into: + +[Less Documentation](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/less-installation.md) + +Templates +--------- + +Have a look at the provided [base.html.twig](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/views/layout.html.twig) its a fully working bootstrap layout and might explain howto use it by itself. + +There is also a [base_lessjs.html.twig](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/views/base_lessjs.html.twig) with clientside less.js. This is currently not recommended, because you need to setup bootstrap and the less files to use it yourself. + +There is also a [base_css.html.twig](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/views/base_css.html.twig) for usage without less. +Have a look into https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/css-vs-less.md + + +Usage +----- + +To make use of the supplied base.html.twig template just use it, or +defining a new template: + +app/Resources/MopaBootstrapBundle/views/layout.html.twig + +```jinja +{% extends 'MopaBootstrapBundle::base.html.twig' %} + +{% block title %}Yourapp{% endblock %} + +{# and define more blocks ... #} + +``` + +You are free to overwrite any defined blocks. +Have a look into the sandbox too: + + * http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/layout + * https://github.com/phiamo/symfony-bootstrap-sandbox/blob/master/app/Resources/MopaBootstrapBundle/views/layout.html.twig + +If you are using less just include the mopabootstrap.less as described in layout.html.twig + +``` jinja +{% stylesheets filter='less,cssrewrite,?yui_css' + '@MopaBootstrapBundle/Resources/public/less/mopabootstrapbundle.less' + '@YourNiceBundle/Resources/public/less/*' +%} + +{% endstylesheets %} +``` + +If you would like to use the css try this: + +```bash +cd vendor/mopa/bootstrap-bundle/Mopa/BootstrapBundle/Resources/bootstrap +make +``` +if it doesnt work, why not use the less way? + +``` jinja +{% block head_style %} +{% stylesheets filter='cssrewrite,?yui_css' + '@MopaBootstrapBundle/Resources/bootstrap/bootstrap.css' + '@YourNiceBundle/Resources/public/css/*' +%} + +{% endstylesheets %} diff --git a/Resources/doc/form_extensions.md b/Resources/doc/3-form-extension-templates.md similarity index 76% rename from Resources/doc/form_extensions.md rename to Resources/doc/3-form-extension-templates.md index 6ce87f47d..50d9e4066 100644 --- a/Resources/doc/form_extensions.md +++ b/Resources/doc/3-form-extension-templates.md @@ -1,26 +1,38 @@ -

Form Extensions

+Form Extensions +=============== - * [Make use of FormExtensions](#FormExtensions) - * [FormLegends](#Form_Legends) - * [Child Form_Legends](#Child_Form_Legends) - * [Field Labels](#Field_Labels) - * [Form Field Help](#Form_Field_Help) - * [Widget Addons](#Widget_Addons) - * [Form Field Prefix / Suffix](#Form_Field_presuf) - * [Form Errors](#Form_Errors) - * [Widget Attrs](#Widget_Attrs) +Make use of FormExtensions +-------------------------- - -

Make use of FormExtensions

- -This bundle extends the Form Component via its native way to achieve having several more attributes on several form components. +This bundle extends the Symfony Form Component via its native way to achieve having several more attributes on several form components. Have a look into the examples in the sandbox: * http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/forms/examples * https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Form/Type -

Form Legends

+ +### Using bootstrap for Theming + + +Forms can either be activated for you whole project (app/config.yml): + +``` yaml +twig: + form: + resources: + - 'MopaBootstrapBundle:Form:fields.html.twig' +``` + +Or include the fields.html.twig in your template for a certain form: + +``` jinja +{% form_theme myform 'MopaBootstrapBundle:Form:fields.html.twig' %} +``` + + +Form Legends +------------ Every Form component representing a Form not a Field (e.g. subforms, widgets of type date beeing expanded, etc) has now a attribute called show_legend which controls wether the "form legend" is shown or not. @@ -43,8 +55,8 @@ public function buildForm(FormBuilder $builder, array $options) ``` -

Child Form Legends

- +Child Form Legends +------------------ In symfony2 you can easily glue different forms together and build a nice tree. Normally there is for every sub form (including special widgets like date expanded, radio button expanded, etc) @@ -71,7 +83,8 @@ public function buildForm(FormBuilder $builder, array $options) // ... ``` -

Field Labels

+Field Labels +------------ You have the option to remove a specific field label by setting label_render to false @@ -82,7 +95,10 @@ You have the option to remove a specific field label by setting label_render to )) ``` -

Form Field Help

+Since symfony 2.1 the label_attr is included in the base, to add special attr to the labels + +Form Field Help +--------------- Every Form Field component representing a Field not a Form (e.g. inputs, textarea, radiobuttons beeing not expanded etc) has several new attributes: @@ -112,11 +128,12 @@ public function buildForm(FormBuilder $builder, array $options) //... ``` -

Widget Addons

+Widget Addons +------------- To get the addons working, i had to increase max nesting level of xdebug to 200. -

Form Field Prefix / Suffix

+### Form Field Prefix / Suffix There are also suffix and prefix attributes for the widgets: @@ -136,7 +153,8 @@ public function buildForm(FormBuilder $builder, array $options) ``` -

Form Errors

+Form Errors +----------- Generally you may want to define your errors to be displayed inline OR block (see bootstrap) you may define it globally in your conf: @@ -158,6 +176,7 @@ public function buildForm(FormBuilder $builder, array $options) ; //... ``` + Or on a special field: ``` php @@ -169,6 +188,7 @@ public function buildForm(FormBuilder $builder, array $options) ; //... ``` + In some special cases you may also want to not have a form error but an field error so you can use error delay, which will delay the error to the first next field rendered in a child form: @@ -185,7 +205,8 @@ public function buildForm(FormBuilder $builder, array $options) //... ``` -

Widget Attrs

+Widget Attrs +------------ // Thanks to JohanLopes and PR #105: There are a bunch of other form extenstions, so you can explicitly set the classes of the control tags, @@ -208,5 +229,21 @@ will result in
... -... ``` + + +Field Collections +----------------- + +Since collections often tend to make probs, we added some code to ease the use: + + * http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/forms/collections + * https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Form/Type/ExampleCollectionsFormType.php + * https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Resources/views/Examples/collections.html.twig + +Make sure you included the mopabootstrap-collections.js to have the javascript code loaded and available + +Some things are currently missing : + + * examples on howto extend the functionality with check functions for adding and removing + * in depth example on howto use Custom FormTypes easily diff --git a/Resources/doc/navbar_configuration.md b/Resources/doc/4-navbar-generation.md similarity index 84% rename from Resources/doc/navbar_configuration.md rename to Resources/doc/4-navbar-generation.md index 84b22a9d4..e956618c2 100644 --- a/Resources/doc/navbar_configuration.md +++ b/Resources/doc/4-navbar-generation.md @@ -1,3 +1,17 @@ +Generating a Navbars +==================== + +for the example navbars add the following to your config.yml: + +```yaml +imports: + - { resource: @MopaBootstrapBundle/Resources/config/examples/example_menu.yml } + - { resource: @MopaBootstrapBundle/Resources/config/examples/example_navbar.yml } +``` +A detailed Navbar configuration example can also be found in + +https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/navbar-configuration-advanced.md + # Navbar extension Generating a bootstrap navbar should be straight forward. diff --git a/Resources/doc/98-crud-generation.md b/Resources/doc/98-crud-generation.md new file mode 100644 index 000000000..56b5cca66 --- /dev/null +++ b/Resources/doc/98-crud-generation.md @@ -0,0 +1,12 @@ +CRUD Generation +--------------- + +The Bundle provides a new console command: +```bash +./app/console mopa:generate:crud + +It extends the base doctrine CRUD generator and modifies the theme to support the bootstrap layout. + +This feature is more ore less experimental. There are several PR's about this, also in the SensioGeneratorBundle, because it ties this Bundle to others. + +I hope we can have this in a adavanced version, but it could also be removed. diff --git a/Resources/doc/99-support-for-other-bundles.md b/Resources/doc/99-support-for-other-bundles.md new file mode 100644 index 000000000..ee132bccd --- /dev/null +++ b/Resources/doc/99-support-for-other-bundles.md @@ -0,0 +1,38 @@ +Support for other Bundles +========================= + +For FormFlow you can just use MopaBootstrap's templates instead of the ones given by the Bundles: + +``` jinja +{% include 'CraueFormFlowBundle:FormFlow:stepField.html.twig' with {'formident': '#myform}%} +``` + +where formident is used by jquery to bind the submit form handler to the "next" or "finish" button, instead of the first defined like in html it is +This is mainly necessary if you have more than one form. +It need to be the id or class of the form itself +e.g. + + + + {'formident': '.myformclass'} + or + {'formident': '#myform'} + +For KnpPaginatorBundle use the following to override template: + +```yaml +# File: app/configs/parameters.yml + +parameters: + knp_paginator.template.pagination: MopaBootstrapBundle:Pagination:sliding.html.twig +``` + + + +And to use the Paginator templates copy them to + +```bash +mkdir -p app/Resources/Knp/Bundle/PaginatorBundle/views/Pagination/ +cp vendor/bundles/Mopa/BootstrapBundle/Resources/views/Pagination/* app/Resources/Knp/Bundle/PaginatorBundle/views/Pagination/ +``` + diff --git a/Resources/doc/additional_info.md b/Resources/doc/additional_info.md deleted file mode 100644 index a101a7439..000000000 --- a/Resources/doc/additional_info.md +++ /dev/null @@ -1,14 +0,0 @@ - -if your are e.g. using cssembed, you might notice problems when embedding bootrap via less: - -[RuntimeException] - [ERROR] /path/to/your/bundle/Resources/public/less/../img/glyphicons-halflings.png (No such file or directory) - - -this is due to cssembed and bootstrap not working so nicely with relative paths. - -The most easies ways is to copy the glyphicons-halflings.png from - -your/path/to/bootstrap/img/glyphicons-halflings.png to /path/to/your/bundle/Resources/public/img/ - -so cssembed finds the file in the corresponding position diff --git a/Resources/doc/assetic-configuration.md b/Resources/doc/assetic-configuration.md new file mode 100644 index 000000000..491afd064 --- /dev/null +++ b/Resources/doc/assetic-configuration.md @@ -0,0 +1,45 @@ +Assetic Configuration +===================== + +If you are not using [http://github.com/phiamo/symfony-bootstrap](symfony-bootstrap) you must configure assetic to use less + +Yui CSS and CSS Embed are very nice and recommended. +To make full use of bootstraps capabilites they are not needed, neither is less but its up to you + +Here is an example configuration for your config.yml: +Make sure you have java installed + +``` yaml +assetic: + filters: + less: + node: /usr/bin/node + node_paths: [/opt/lessc/lib, /usr/lib/node_modules] + apply_to: "\.less$" + cssrewrite: ~ + cssembed: + jar: %kernel.root_dir%/Resources/java/cssembed-0.3.6.jar + apply_to: "\.css$|\.less$" + yui_css: + jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar + apply_to: "\.css$" + yui_js: + jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar +``` + +Do not forget to add the jars to your app. + +If your are using cssembed, you might notice problems when embedding bootrap via less: + +[RuntimeException] + [ERROR] /path/to/your/bundle/Resources/public/less/../img/glyphicons-halflings.png (No such file or directory) + +this is due to cssembed and bootstrap not working so nicely with relative paths. + +The most easies ways is to copy the glyphicons-halflings.png to your public img folder + +``` bash +cp /your/path/to/bootstrap/img/glyphicons-halflings.png to /path/to/your/bundle/Resources/public/img/ +``` + +so cssembed finds the file in the corresponding position diff --git a/Resources/doc/css-vs-less.md b/Resources/doc/css-vs-less.md index 1af9c78a5..3be51b177 100644 --- a/Resources/doc/css-vs-less.md +++ b/Resources/doc/css-vs-less.md @@ -1,15 +1,27 @@ Css vs. Less ============ -Which is faster to kickstart? +Bootstrap is written in [http://lesscss.org](less) and compiled to css. +You can download a pure css distribution from http://twitter.github.com/bootstrap/ -Depends on what you want to achieve, and what your knowledge is. +But then you must manage it yourself. e.g. + - Install it in Ressources/public/ + - use the pure css template -The recommended way would be this: -If you feel goot hacking your system, installing newer programs and maintaining your dev environment. -You probably should invest the time to get a working setup, and after that relax, and see less beeing integrated well, and providing what it should. +If you want to make use e.g. of mixins, variables etc. you must use less see http://twitter.github.com/bootstrap/less.html +There are several ways of including it -If you dont feel comfortable to install adittional software and maintain them, and you are not experienced in less, probabaly you could start with css version. +- either you let assetic manage the compilation of your less files +- you use the less js +### Which is faster to kickstart? + +Depends on what you want to achieve, and what your knowledge is: + +- If you feel good hacking your system, installing newer programs and maintaining your dev environment, +the recommended way would be to install less. + You probably should invest the time to get a working setup, and after that relax, and see less beeing integrated well, and providing what it should. + +- If you dont feel comfortable to install adittional software and maintain them, and you are not experienced in less, probabaly you could start with css version. But be warned: @@ -30,7 +42,7 @@ make ``` If you get any error have a look into -https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/less_installation.md +https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/less-installation.md If there is still an error like @@ -43,7 +55,7 @@ lessc 1.2.1 (LESS Compiler) [JavaScript] So you need to use a newer lessc version: lessc 1.3.0 (LESS Compiler) [JavaScript] -so you need to tell your shell which version to use, if you already installed a newer lessc as suposed in https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/less_installation.md +so you need to tell your shell which version to use, if you already installed a newer lessc as suposed in https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/less-installation.md Try: diff --git a/Resources/doc/including_bootstrap.md b/Resources/doc/including-bootstrap.md similarity index 100% rename from Resources/doc/including_bootstrap.md rename to Resources/doc/including-bootstrap.md diff --git a/Resources/doc/index.md b/Resources/doc/index.md new file mode 100644 index 000000000..23073dfbc --- /dev/null +++ b/Resources/doc/index.md @@ -0,0 +1,51 @@ +Getting Started With MopaBootstrapBundle +======================================= + +## Installation + +1. [installation](1-installation.md) + +## Bundle usage + +MopaBootstrapBundle provides several features to assist you quickly building applications: + +2. [Base Templates](2-base-templates.md) +3. [Form Extension and Template](3-form-extension-templates.md) +4. [Generating Navbars](4-navbar-generation.md) + + +98. [CRUD Generation](98-crud-generation.md) +99. [Support for other Bundles](99-support-for-other-bundles.md) + + + +### Further documentation: + +There is a bunch of documentation for this bundle, have a look: + +* in the [docs folder](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/) +* in the various examples: + * [twig templates](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Resources/views/Examples) + * [Form Types](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Form/Type) + * [Navbar](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Resources/config/examples) + * [MenuBuilder](https://github.com/phiamo/MopaBootstrapSandboxBundle/tree/master/Navbar/Example) +* [MopaBootstrapSandboxBundle](http://github.com/phiamo/MopaBootstrapSandboxBundle) - Seperate live docs from code +* [symfony-bootstrap-sandbox](https://github.com/phiamo/symfony-bootstrap-sandbox) is also available + +### Config reference + +Check out the [configuration reference](configuration-reference.md) for a reference on the available configuration options. + + +### Example application(s) + +The following bundles/applications use the MopaBootstrapBundle and can be used as a +guideline: + +- The MopaBootstrapSandboxBundle provides several examples for the MopaBootstrapBundle: + https://github.com/phiamo/MopaBootstrapSandboxBundle + +- There is also a fork of the Symfony2 Standard Edition that is configured to + show the MopaBootstrapSandbox examples: + https://github.com/phiamo/symfony-bootstrap + diff --git a/Resources/doc/less_installation.md b/Resources/doc/less-installation.md similarity index 80% rename from Resources/doc/less_installation.md rename to Resources/doc/less-installation.md index e13198cbf..ef68656ad 100644 --- a/Resources/doc/less_installation.md +++ b/Resources/doc/less-installation.md @@ -1,14 +1,14 @@ MopaBootstrapBundle Less installation ===================================== -To effectively use all features of bootstrap you might want to use less together with bootstrap. -Have a look into the following docs what it is and then maybe install it on your systems. +To effectively use all features of bootstrap you want to use less together with bootstrap. +Have a look into the following docs what it is and then install it on your system. * [Twitters Less Doc](http://twitter.github.com/bootstrap/less.html) * [Lesscss](http://lesscss.org/) -Install nodejs and less css manually +Installing nodejs and less css manually ------------------------------------ - node.js: https://github.com/joyent/node/wiki/Installation @@ -32,30 +32,12 @@ assetic: less: node: /usr/bin/node node_paths: [/usr/lib/node_modules] + apply_to: "\.less$" ``` - Yui CSS and CSS Embed are very nice and recommended. to make full use of bootstraps capabilites they are not needed, neither is less but its up to you -here is an example config: - - -``` yaml -assetic: - debug: %kernel.debug% - use_controller: false - filters: - less: - node: /usr/bin/node - node_paths: [/usr/lib/node_modules] - cssembed: - jar: %kernel.root_dir%/Resources/java/cssembed-0.3.6.jar - yui_css: - jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar - yui_js: - jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar -``` - -Do not forget to add the jars to your app. + see [Assetic configuration](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/assetic-configuration.md) Known Problems: diff --git a/Resources/doc/navbar_configuration_advanced.md b/Resources/doc/navbar-configuration-advanced.md similarity index 100% rename from Resources/doc/navbar_configuration_advanced.md rename to Resources/doc/navbar-configuration-advanced.md diff --git a/Resources/views/base.html.twig b/Resources/views/base.html.twig index 66756b59c..39f68053e 100644 --- a/Resources/views/base.html.twig +++ b/Resources/views/base.html.twig @@ -14,17 +14,10 @@ %} {% endstylesheets %} - -{# This is how it could be done without using less features: +{# To use this without less use the base_css.html.twig template as your base # Be sure you understand whats going on: have a look into # https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/css-vs-less.md -{% stylesheets filter='?yui_css' - '@MopaBootstrapBundle/Resources/bootstrap/docs/assets/css/bootstrap.css' - '@YourNiceBundle/Resources/public/css/*' -%} - -{% endstylesheets %} -#} + #} {% endblock head_style %} diff --git a/Resources/views/base_css.html.twig b/Resources/views/base_css.html.twig new file mode 100644 index 000000000..81bb62d4c --- /dev/null +++ b/Resources/views/base_css.html.twig @@ -0,0 +1,31 @@ +{% extends 'MopaBootstrapBundle::base.html.twig' %} + + +{% block head_style %} +{% stylesheets + '/Resources/public/css/bootstrap.css' +%} + +{% endstylesheets %} +{% endblock head_style %} + +{% block foot_script %} +{%- javascripts + 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' + '/Resources/public/js/bootstrap-transition.js' + '/Resources/public/js/bootstrap-modal.js' + '/Resources/public/js/bootstrap-dropdown.js' + '/Resources/public/js/bootstrap-scrollspy.js' + '/Resources/public/js/bootstrap-tab.js' + '/Resources/public/js/bootstrap-tooltip.js' + '/Resources/public/js/bootstrap-popover.js' + '/Resources/public/js/bootstrap-alert.js' + '/Resources/public/js/bootstrap-button.js' + '/Resources/public/js/bootstrap-collapse.js' + '/Resources/public/js/bootstrap-carousel.js' + '/Resources/public/js/bootstrap-typeahead.js' + '@MopaBootstrapBundle/Resources/public/js/mopabootstrap-collection.js' +%} + +{% endjavascripts %} +{% endblock foot_script %} \ No newline at end of file diff --git a/Resources/views/base_lessjs.html.twig b/Resources/views/base_lessjs.html.twig new file mode 100644 index 000000000..ea2efa45b --- /dev/null +++ b/Resources/views/base_lessjs.html.twig @@ -0,0 +1,10 @@ +{% extends 'MopaBootstrapBundle::base.html.twig' %} + + +{% block head_style %} + +{% endblock head_style %} + +{% block head_script %} + +{% endblock head_script %} diff --git a/UPGRADE-2.1.md b/UPGRADE-2.1.md new file mode 100644 index 000000000..cd5b1c163 --- /dev/null +++ b/UPGRADE-2.1.md @@ -0,0 +1,18 @@ +UPGRADE FROM 2.0 to 2.1 +======================= + +### General + + Make sure you update your namespaces, we changed the Bundles namespace from + Mopa\BootstrapBundle + to + Mopa\Bundle\BootstrapBundle + + You must change the namespace references in: + * app/AppKernel.php + * Your code making use of any MopaBootstrapBundle classes (e.g. Navbar, MenuBuilder, etc.) + * Configuration referencing any classes (e.g. service definitions for menu, navbar, etc.) + For info about the branches read https://github.com/phiamo/MopaBootstrapBundle/wiki/Branches-&-Versions + If you dont want to care about the twitter/bootstrap dependency, please make sure your [composer.json](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/including_bootstrap.md) is correct + +