In a previous post on Responsive Web Design (RWD), I outlined the use of Bootstrap in Joomla 3.x to implement RWD. In this post, we will take a more detailed look at Bootstrap, how it fits into the Joomla! CMS ecosystem, and how you can best take advantage of the new integration between the two.
So, to begin, we need to ask ourselves this fundamental question: What is Bootstrap? Simply stated, Bootstrap is an open-source HTML, CSS and (somewhat optionally) JavaScript UI framework created by Twitter (and incidentally, hosted on GitHub, in the same way that Joomla itself is). As the Twitter team explains in that initial introductory post, they created Bootstrap to provide internal web application developers a toolkit with which to build consistent interfaces. Bootstrap has since become one of the most popular Web UI frameworks in use today. What makes Bootstrap especially relevant for Joomla is that in v2, Bootstrap began supporting RWD.
Bootstrap and Joomla!
Because of Joomla’s commitment to RWD, when it came to building Joomla 3.x, its developers looked for the path of least resistance; a UI framework that already worked well with Joomla and provided a way to make UI consistent across all of Joomla, while allowing the developers to customise it to fit Joomla’s specific needs. That framework is Bootstrap, and the decision was a no-brainer (this does not mean that Joomla’s developers aren’t already planning for the next great thing in UI).
One of the good things about using such a popular UI framework, with backing from an organisation like Twitter, is that Bootstrap is relatively well-documented and worked on by many people, who have shared their experiences online – not to mention Bootstrap’s own official documentation. Joomla, too, has a healthy and active user forum, so resources on getting Bootstrap and Joomla working together are readily available online (as my research indicates, simply searching for Joomla and Bootstrap together already gives you thousands of search results on Joomla’s official site alone).
Help me, Bootstrap; you’re my only hope
Of course, some of those thousands of results are frustrated cries of help from people whose attempts to migrate their websites into using Joomla 3.x and Bootstrap have run into roadblocks. This is by no means a walk in the park, and has to be approached on a case-by-case basis. However, there are some very broad rules of thumb I can share, which can hopefully narrow down your options (although you should still investigate your own situation thoroughly).
The easiest migration path is for the person who started out by already using Joomla! 3.x (or who is migrating websites off another CMS/static design tool such as Dreamweaver). All you need to do is use a Joomla 3.x responsive template based on Bootstrap, ensure the rest of your extensions are Bootstrap-ready (and I take the opportunity to note that all of our extensions GCalendar, GCalendar Action Pack and DPCalendar have recently been refactored to take advantage of Bootstrap, so they’re RWD-capable), and you’re done!
What about the person who’s using an older version of Joomla with older extensions that have no (and will never have any) interactions with Bootstrap whatsoever? What should you do about making your current Joomla installation work with Bootstrap? Well, you should forget about it.
No, seriously. Just forget about it.
It would be far, far easier to create a new Joomla 3.x installation, start with a new responsive template, add responsive extensions that provide the desired existing functionality to your website (and in the process, perhaps look very hard at your existing web design) and port your site content across. You may even find that Joomla 3.x out-of-the-box can provide you all you need to deploy your site!
The true heart-breaking work is reserved for the poor Joomla website developer who’s using Joomla 2.x with Bootstrap, and (some of) whose templates and extensions also use Bootstrap. After all, it is so tempting to try and do an in-place upgrade – you’re already using Bootstrap, so how hard can it be? As it turns out, if you’re also using Joomla’s older MooTools framework (and chances are you have been), it’snotsoverysimple. This is where the case-by-case basis really applies, and you should consider whether the ‘nuke-n-pave’ solution as outlined above might not after all prove to be the less painful option.
Regardless of your decisions, Joomla 3.x has already deployed Bootstrap everywhere, and especially in its administrative backend UI, so this might be the right time for you to poke around and learn the Bootstrap ropes.