Symfony2, Assetic, Twitter Bootstrap + Bootswatch

This is a quick’n’dirty guide for newcomers to symfony’s assetic and twitter bootstrap in conjunction with bootswatch. This is not a complete guide and reflects my own opinion only.

Quick terms:

  • Assetic is automated asset management and compilation, in this example it’s used to compile less files
  • less is used to compile a templateish CSS language into real CSS files your browser understands
  • Your advantages:
    • Easy color changes
    • One command to update your css
  • First, install nodejs. 
  • Configure bootstrap and jquery packages:

 

  • Add the following block to your config.yml and change the paths as explained in the comments.

 

  • Create a new build.less file and add the following stuff:

  •  Choose your favourite theme at bootswatch.com and download both .less files per theme. Place them alongside in the same directory where you placed your build.less file.

Now you can run app/console assetic:dump to compile the less file into a css file, which you then can include using the usual twig fragment:

That’s it. If you’re getting any errors, I’m sorry: You need to find out yourself what’s going on. I’ve spend 3 hours to get the initial setup running. Guides I’ve followed or files I’ve looked at:

  • http://bootstrap.braincrafted.com/getting-started (I’m not using the bootstrap bundle, as I don’t currently see the need for it. This might change as soon as I’m using KnpPaginator, KnpMenu and symfony forms. I just left the bundle out because I had trouble getting it to work, the reason was that my nodejs setup was forked up).
  • The build scripts for bootswatch
  • The source for the Assetic Less filter (no, you can’t inject different less imports, hence the build.less encapsulation script above)

 

  1. Thanks for putting this tutorial together. It certainly helped, although installing NodeJS on a CentOS system was a total PITA.

Add Comment Register



Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">