Comment installer Bootstrap LESS dans un projet Symfony

Symfony Bootstrap Less

Comment installer Bootstrap LESS dans un projet Symfony

Introduction

Bootstrap est un framework front-end bien connu et largement utilisé pour ses outils de base notamment orientés mobiles et plus largement responsive.

Vous retrouverez toute la documentation en suivant : http://getbootstrap.com/

Ce framework peut être facilement intégré dans votre application Symfony grâce à assetic, un manager d’assets.

Dans cet article nous verrons comment :

– Installer Bootstrap dans votre application Symfony

– Le compiler grâce à lessphp

– Le charger grâce à assetic

 

Installer Bootstrap dans votre application Symfony

Pour cela nous allons utiliser Braincrafted dont vous retrouverez la documentation en suivant ce lien : http://bootstrap.braincrafted.com


Installation de Braincrafted

composer require braincrafted/bootstrap-bundle


Activation dans le Kernel

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            // ...
            new BraincraftedBundleBootstrapBundleBraincraftedBootstrapBundle(),
        );
        // ...
    }
}

Au moment de la rédaction de cet article nous utilisons la version v2.1.2

 

 Installation de bootstrap

Ajout des dépendances dans le composer.json

{
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "jquery/jquery",
                "version": "1.12.0",
                "dist": {
                    "url": "http://code.jquery.com/jquery-1.12.0.js",
                    "type": "file"
                }
            }
        }
    ],
    "require": {
        ...
        "twbs/bootstrap": "3.3.*",
        "jquery/jquery":  "1.12.*"
    }
}

Compiler Bootstrap grâce à lessphp

Nous utilisons Oyejorge/less.php car nous sommes sur la version 2.7 de Symfony et la version de leafo nous a posé quelques problèmes de compatibilité. La documentation est dicponible au lien suivant : https://github.com/oyejorge/less.php

composer require oyejorge/less.php

Utilisation de la version v1.7.0.10 à la date de rédaction de cet article.

 

Instalation des Glyphicons

Soit en ligne de commande avec

php app/console braincrafted:bootstrap:install

Soit avec un ScriptHandler

    ...
    "scripts": {
        "post-install-cmd": [
            ...
            "Braincrafted\Bundle\BootstrapBundle\Composer\ScriptHandler::install"
        ],
        "post-update-cmd": [
            ...
            "Braincrafted\Bundle\BootstrapBundle\Composer\ScriptHandler::install"
        ]
    }
    ...
}

Configuration

 braincrafted_bootstrap:
    auto_configure:
        assetic: false

assetic:
    filters:
        lessphp:
            file: %kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php
            apply_to: ".less$"
            # Les deux lignes dci-dessous permettent de minifier le CSS compilé
            formatter: "compressed"
            preserve_comments: false
        cssrewrite: ~
    assets:
        bootstrap_css:
            inputs:
                - @YourBundle/Resources/public/less/styles.less
                - @YourBundle/Resources/public/less/responsive.less
            filters:
                - lessphp
                - cssrewrite
            output: css/bootstrap.css
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/transition.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/alert.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/button.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/carousel.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/collapse.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/dropdown.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/modal.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/tooltip.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/popover.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/scrollspy.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/tab.js
                - %kernel.root_dir%/../vendor/twbs/bootstrap/js/affix.js
                - %kernel.root_dir%/../vendor/braincrafted/bootstrap-bundle/Braincrafted/Bundle/BootstrapBundle/Resources/js/bc-bootstrap-collection.js
            output: js/bootstrap.js
        jquery:
            inputs:
                - %kernel.root_dir%/../vendor/jquery/jquery/jquery-1.12.0.js
            output: js/jquery.js

On applique le filtre lessphp.

On récupère nos feuilles de styles.

Dans styles.less

@import ‘../../../../../../../vendor/twbs/bootstrap/less/bootstrap.less’;
@import ‘../../../../../../../vendor/braincrafted/bootstrap-bundle/Braincrafted/Bundle/BootstrapBundle/Resources/less/form.less’;
# tous vos fichiers less
@import ‘variables.less’;
@import ‘main.less’;

On importe nos fichiers de styles plus le bootstrap de twbs.

L’ordre d’import est important car il permet d’utiliser dans nos feuilles de styles les variables de bases de Bootstrap.


Dans variables.less


@icon-font-path: « /fonts/ »;
@icon-font-name: « glyphicons-halflings-regular »;

On surcharge la déclaration du chemin d’accès aux polices du variables.less du bootstrap de twbs par notre chemin.


Utilisation dans une vue twig

<img src= »{{ asset(‘bundles/yourBundle/img/slider/slider-1.jpg’) }} » alt= »Slider 1″>

On déclare l’accès aux ressources avec le chemin du dossier web/

 

Utilisation de Bootstrap grâce à Assetic

Publication des assets

php app/console assetic:dump

Pour la publication automatique des assets au changement dans vos fichiers utiliser :

php app/console assetic:watch

ou

assetic:dump --watch 

Pour assetic antérieur à 2.4

Copie des fichiers statiques

Par lien virtuel :

php app/console assets:install --symlink

Si le lien virtuel est impossible, faites une copie :

php app/console assets:install

Conclusion

Votre projet est maintenant prêt à accueillir toute la puissance de Bootstrap. Vous êtes libres de créer vos classes et d’utiliser, d’étendre ou de surcharger les classes ou variables de Bootstrap.

Si vous avez opté pour la publication automatique des assets, vous n’avez plus rien à faire à la modification de vos fichiers.

Auteur : Matthieu Cutin

1 commentaire

  1. Symfony et boostrap | Pearltrees 7 juillet 2016 at 15 h 13 min - Reply

    […] Comment installer Bootstrap LESS dans un projet Symfony – ACSEO. Bootstrap est un framework front-end bien connu et largement utilisé pour ses outils de base notamment orientés mobiles et plus largement responsive. Vous retrouverez toute la documentation en suivant : Ce framework peut être facilement intégré dans votre application Symfony grâce à assetic, un manager d’assets. Dans cet article nous verrons comment : – Installer Bootstrap dans votre application Symfony – Le compiler grâce à lessphp – Le charger grâce à assetic Installer Bootstrap dans votre application Symfony Pour cela nous allons utiliser Braincrafted dont vous retrouverez la documentation en suivant ce lien : Installation de Braincrafted composer require braincrafted/bootstrap-bundle Activation dans le Kernel class AppKernel extends Kernel { public function registerBundles() { $bundles = array( // … new BraincraftedBundleBootstrapBundleBraincraftedBootstrapBundle(), ); // … } } Installation de bootstrap Instalation des Glyphicons ou. […]

Laissez un commentaire

Votre adresse email ne sera pas publiée.