README

Twitter Bootstrap-ready frontend and layout bundle for Symfony2.

Twig Layouts

The bundle provides two Twig templates for layouts (you can extend either or both):

1. EhannFrontendBundle::base.html.twig
2. EhannFrontendBundle:layouts:bootstrap.html.twig

The EhannFrontendBundle::base.html.twig template contains a boilerplate set of Twig blocks and the Modernizr library (version set in composer.json).

The EhannFrontendBundle:layouts:bootstrap.html.twig template extends the EhannFrontendBundle::base.html.twig template and adds jQuery, Twitter Bootstrap, Font-Awesome, Bootbox, and Bootstrap DateTime Picker. With the exception of Font-Awesome, the versions of all of these libraries are controlled by the EhannFrontendBundle's composer.json file. Font-Awesome is not installed via composer because of limitations with Assetic - there does not appear to be a way to rewrite fonts using Assetic. This means that Font-Awesome cannot locate its font files if it is installed outside of a bundle without a filesystem/symlink hack.

Bootstrap Forms

Twitter Bootstrap expects the HTML in forms to be structured in a specific way. When you include the EhannFrontendBundle:forms:bootstrap_form_layout.html.twig template, the HTML in Twig's default form blocks are restructured to be Twitter Bootstrap-compatible.

Assetic Filters

This EhannFrontendBundle also has a tricked-out Assetic configuration with various configured filters for your use. The tools associated with these filters are downloaded when you install the module. The filters are:

1. phpcssembed
2. yui_css
3. yui_js
4. lessphp
5. scssphp

Related Bundles

EhannNotificationBundle - Utilizes the Symfony2 flash message feature to add Twitter Bootstrap-ready notifications to your application.

Installation

Add EhannFrontEndBundle in your composer.json:

// composer.json
{
    "require": {
        "ehann/frontend-bundle": "0.*"
    }
}

Download bundle:

$ php composer.phar update ehann/frontend-bundle

Add the EhannFrontendBundle to your AppKernel.php

public function registerBundles()
{
    $bundles = array(
        ...
        new Ehann\FrontendBundle\EhannFrontendBundle(),
        ...
    );
    ...
}

Add the EhannFrontendBundle assetic.yml file into your application config file.

# app/config/config.yml
imports:
    - { resource: "@EhannFrontendBundle/Resources/config/assetic.yml" }

Composer Repositories

Composer repositories can only be defined in the root application's composer.json file. Add these respoistories to your application's composer.json file:

// composer.json
"repositories": [
    {
        "type": "package",
        "package": {
            "name": "yui/yui-compressor",
            "version": "2.4.7",
            "dist": {
                "url": "https://github.com/downloads/yui/yuicompressor/yuicompressor-2.4.7.zip",
                "type": "zip"
            }
        }
    },
    {
        "type": "package",
        "package": {
            "version": "v3.2.0",
            "name": "makeusabrew/bootbox",
            "source": {
                "url": "https://github.com/makeusabrew/bootbox.git",
                "type": "git",
                "reference": "master"
            },
            "dist": {
                "url": "https://github.com/makeusabrew/bootbox/zipball/v3.2.0",
                "type": "zip"
            }
        }
    },
    {
        "type": "package",
        "package": {
            "version": "v0.0.11",
            "name": "tarruda/bootstrap-datetimepicker",
            "source": {
                "url": "https://github.com/tarruda/bootstrap-datetimepicker.git",
                "type": "git",
                "reference": "master"
            },
            "dist": {
                "url": "https://github.com/tarruda/bootstrap-datetimepicker/zipball/v0.0.11",
                "type": "zip"
            }
        }
    }
]

Config

Specify the global default layout template, making it accessible to all bundles in your application.

# app/config/config.yml
ehann_frontend:
    default_layout: "EhannFrontendBundle:layouts:bootstrap.html.twig"

Extend your own templates by extending the default layout.

{% extends ehann_frontend_default_layout  %}