Menu

bootstrap less joomlaIn previous posts, we’v taken a look at LESS, the superset of Cascading Style Sheets (CSS) that makes it perform much more like a full-blown programming language, as well as the Twitter’s Bootstrap framework built on it, which provides web designers a standardized toolset for UI elements. This post will delve into Joomla 3’s support of Bootstrap, and the implications that this has on its support for LESS as a result.

Because Joomla 3 fully implements Bootstrap, and because Bootstrap is built using LESS, it is only reasonable to think that Joomla 3 fully supports and implements LESS as well. And in a sense, it does – you can edit the LESS files that Bootstrap is made from in Joomla and recompile them. However, there are some things you should know about how LESS works in Joomla:

You do not need to know LESS to make Bootstrap in Joomla work

Or more accurately, all the hard work’s already been done for you. Bootstrap’s source files have all been precompiled as CSS and JavaScript files, which you can simply include or import into your own template. What’s more, if you used or modified Joomla Core’s default Protostar template, Bootstrap's pretty much baked in right from the start as well. Mind you, it’s a ‘slightly modified’ version of Bootstrap, so you do have to do your due diligence and take appropriate steps when using Bootstrap in Joomla 3.

In addition, changing the various defaults in Bootstrap can be done simply by invoking the Bootstrap Customizer and replacing the necessary files in your installation with the ones generated by the Customizer. The use of LESS does not come into the picture at all. Knowing how LESS works and being able to modify Bootstrap’s source code is a bonus, but it is hardly necessary for you to get full use out of Joomla.

Joomla Core does not include a LESS compiler

To be precise, it does not provide a LESS compiler that you can run at will and on any LESS file you want. What it does have is a way for you to adapt a PHP script (generatecss.php) to compile LESS changes for your own template. You can also use a LESS Compiler Joomla plugin to do so every time you make a change. However, if you are serious about playing around with LESS, then you may have to install your own LESS compiler (many paid-for themes and templates include compilers). Given that the whole point of LESS was so that you could write so much less CSS, though, Joomla Core’s decision not to include a standalone compiler (many of which are open-source) is strange.

Override vs. Modify: Which is best?

Assuming that you really do want to delve into LESS to change the default ways in which Joomla’s implementation of Bootstrap behaves, should you really directly modify the Bootstrap LESS files and recompile, or should you maybe override the behaviors in a custom LESS file and call that in your template? In this particular case, using overrides is probably the better solution, as it means that whenever a new version of Bootstrap (or Joomla, for that matter) is released, you can drop it in without worrying that your previous customization are totally lost.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.