Bootstrap is one of the most popular front-end development frameworks available today; it speeds-up the development process offers several useful components like navigation, drop-downs, icons and much more. It is essentially a complete solution for creating responsive websites – you don’t need to be a CSS or HTML ninja to achieve a fluid layout with a 12-column grid.
At first glance, it seems like there aren’t any negatives; Bootstrap looks great, it’s easy to use, supports CSS preprocessors like SASS and LESS, provides cross-browser solutions and it’s free; released under the MIT license. But if you take a moment to look closer, you might notice something interesting; no popular CMS uses this kind of frontend development framework in their core, because ultimately it seems that it causes more problems that it fixes.
Bootstrap’s weight
Bootstrap’s minified CSS weighs around 130 KB, which is quite a lot for what is essentially just base elements and grid structure. If you’re actually going to start using Bootstrap in a template, then you’ll need to customize it. By customize, we mean that you’ll need to override styles since it is not possible to modify everything using on LESS variables, which justs adds even more lines to the final CSS code. Then, if you want to be fully compatible with Joomla! you should load the Bootstrap library from the media/jui directory, which means that you will use the full-fat Bootstrap styles even when you don’t need most of them. To add insult to injury, they are loaded on every single page reload, and you’re not even using them!
Bootstrap isn’t just CSS, it’s JavaScript too, which adds an extra 29KB to the overall weight. All in all, you’re looking at a bare minimum of 160 KB to create a template using the default Joomla! Bootstrap library. Now add in your custom styles and override rules, and your CSS may be too heavy to lift, as it were.
Code structure
<div> <div> <div> <div> Twitter Bootstrap </div> </div> </div> </div>
— Ian Devlin (@iandevlin) July 4, 2014
We all know that Bootstrap is not the most semantic framework out there; when you try to build your template, component or module interface using Bootstrap’s fluid layout you will inevitably end-up with a whole bunch of unnecessary DIV elements and classes.
Using Bootstrap makes your code difficult to maintain and harder to read, particularly when trying to identify specific blocks. What’s more, it is nearly impossible to use other methodologies like BEM with the naming conventions of BS classes.
Compatibility
The Bootstrap library has been part of the JUI since Joomla 3.0, which means that the Bootstrap version that you can use with J!3 is 2.3.2. Bootstrap v.3 was release almost a year ago, but no update is available in Joomla! 3.3 to make it compatible. What does this mean? It means that if you are expecting to be able to use the latest version of Bootstrap with Joomla, you’ll be disappointed. There is also one more bit of bad news:
Bootstrap 3 is not backwards compatible with v2.x. — getbootstrap.com
The information above means that there are two options for future development:
One of the upcoming Joomla updates will be recoded totally to support Bootstrap v.3 (hard to believe even for the biggest J! fans) or Joomla will stick with Bootstrap v.2.3.2 for years.
Conflicts
Incompatibility between Bootstrap v.2.3.2 and v.3 is not the only conflict that can cause issues. When a template provider is logical and tries to keep their code clean by avoiding the loading of unnecessary CSS, the only viable solution with Bootstrap is to include their own Bootstrap build with the template. However, this in itself can also cause its own problems. First of all, third-party extension developers don’t often check whether Bootstrap is already loaded, which that there code will load the library from the JUI too, resulting in Bootstrap being loaded twice which creates a huge amount of CSS conflicts.
This kind of confusion is prevalent; since Bootstrap isn’t a requirement of Joomla, responsible developers that wish to use it must second-guess every other template or extension developer; “Will they use Bootstrap too?”, “Can I trust them to include it?”, “If not, can I trust them to check it’s not loaded before loading it?”. It becomes a guessing game.
Since Joomla doesn’t force Bootstrap (and they shouldn’t), then the potential for these issues arising increases. But would forcing Bootstrap help at all? A CMS needs to be flexible, and users should be able to choose from the many frameworks available to find one that works for them; taking away that choice limits Joomla and its users.
Similarity
No matter what kind of layout you choose, whether fluid or static, it will always have 12 columns as a base; despite any amazing design concept your website exhibits it will still bear a lot of similarities to other projects. Take a look at some of the examples below from the lovebootstrap.com website; with the limitations that come with Bootstrap it’s really hard to build a unique responsive layout without overrides. In fact, most users who have a bit of familiarity with Bootstrap who see the large hero image with 3 columns below it with equal width will be put off — even a beginner can create this kind of layout using Bootstrap in half an hour.
Summary
If Joomla! wants to retain its favorable position as one of the more popular CMSs out there it should strongly consider droping the idea of including Bootstrap. Of course it’s a great solution for hard-code developers who aren’t experienced with creating a pleasant, accessible user interface — when they add just few BS classes it will certainly look better than their own designs! But this is the only real advantage of Bootstrap; for template providers it causes more issues than benefits, and it’s hard to maintain too. With Bootstrap in the core Joomla code having not been updated since it was introduced we may never see Bootstrap v.3 or later versions in J!.
After the huge buzz around Bootstrap support in Joomla 3.0 many customers have assumed that every Joomla extension will use Bootstrap too, but that’s simply not true. Bootstrap is an effective solution for the back-end because it provides a responsive and intuitive interface, but in the front-end there’s no point in forcing anyone to use this framework. If you are a great developer but you don’t have any knowledge about CSS and UI design you are the person who should use Bootstrap — it gives you responsive layout and some base styling which make your extension more user-friendly.
That’s our opinion of the matter anyway. If you can think of a reason to use Bootstrap from a developer’s point of view post it in the comments and let’s have a good old-fashioned debate!