As site creators you have to choose between a large mix of available frontend templates and their frameworks for Joomla. And even extensions often bring their own CSS Framework with them.
So which one is the right for you? This follows the style of a conversation, where a new Joomla! user has a chat with his experienced friend. Inspired by "It's the future" from Circle CI.
Hey, I am looking to built a new Joomla website and want to create a nice frontend template. So which CSS framework should I use?
That's a tough question and depending on whom you ask you are going to get different answers. It's the same as with opinions, everyone has one.. Basically you can use any CSS Framework in Joomla all with ups and downs.
I heard Joomla! itself brings Bootstrap 2 out of the box, is that the right one?
Bootstrap is the most used CSS Framework powering billions of sites. Using Bootstrap 2 has the advantage that all core extensions look well and you don't need to create overrides or check if your extensions work fine with your template.
What are these overrides?
With overrides you can adjust the output of any component, module or jlayout in Joomla to your own needs. For example porting them from a Bootstrap 2 one to another framework. There is also a dedicated site for that: j-over.de
Hmph, interesting, but why do I need that if there is Bootstrap 2 in the Joomla itself?
Bootstrap 2 is more than 5 years old and the newer version 3 offers far more flexibility in styling for mobile devices and making your website even more responsive.
So should i use Bootstrap 3?
Than you are using the current stable version of Bootstrap, bringing the advantages i just told you. And Bootstrap is by far the most used framework of all. But for Joomla you need to do overrides than and you need to prevent loading the old Bootstrap version within your template (by replacing it with an override with the new version in the template folder). And you can run into serious JavaScript issues, so proabbly it's easier to keep the Bootstrap 2 JavaScript file.. But that also brings issues.
Is it much work to do overrides for Bootstrap 3?
That depends on the extension, for core it's mostly replacing the Grid elements like span6 through the size you want on the devices for example col-sm-12 col-md-6 etc. and on adjusting buttons from btn to btn btn-default. By the way Bootstrap 4 is in coming probably soon with an available alpha version, bringing a lot of new cool features.
Looks like it would be better to go with Bootstrap 4 than?
Don't forget it's still not stable and it's more work to get everything working as with Bootstrap 3. But you also have the advantage that you are prepared for the feature, as Joomla! 4 is going to use with it. Also Bootstrap 4 uses flex which is is a really awesome.
Oh, what is Flex?
Flex is a technology, which allows you to control how your items are aligned next to each other and for example you can set them to have the height, even if the content in one container is smaller.
Hey that sounds neat, why aren't the other frameworks using it?
It's not supported by older browsers. It requires at least Internet Explorer 10 or newer. For Firefox, Chrome or any other modern browsers that shouldn't be a big issue as they are not really used anymore and users update faster. And a lot of other frameworks are using it too nowadays.
Ah that's fine for me, i don't want visitors with old crappy browsers. What else?
There is also a new column size. Ah and tooltips are a mess with Joomla, Bootstrap 4 requires an additional JavaScript library just for Tooltips! Bootstrap in general is really huge, loading 10,000s of lines of CSS and JavaScript code and it requires jQuery. They bring so much functionality and a lot of pages don't even use most of it. You can of course minimalize it to what you use, but most people don't do that as it requires some work and testing.
Wow, that's a lot, i just want to built a small and fast website. Are there any alternatives?
Sure you can go without a framework, e.g. style everything yourself, maybe load Bootstrap JavaScript part and jQuery so that not every extension is breaking. Ah and you need to make sure to also include or implement the Joomla System CSS classes, else a lot of things, like Tabs won't be styled.
Hey sounds good, why are people not doing that?
Because it's a lot of work and you would need to reinvent the square wheel, that's what CSS Frameworks are for.. You need to write Template Overrides and write CSS, which is jumping in instead of Bootstrap 2. And that for every extension, module and JLayout.
Dimitris Gramatiko is working on an alternative to Bootstrap, minimalist Bootstrap 4 custom elements following the new W3C standard. Maybe this is going to become an alternative in Joomla 4. Aim is that the total weight is less than 20Kb minified.
So when does Joomla 4 come out?
Hopefully end of 2017, but as always in open source it could take a bit longer. As i already told you by default it will be shipped with Bootstrap 4, so still not really minimalistic. There are also some more minimalistic CSS Frameworks out there, one of the most common in Joomla is UIkit. All Yootheme templates are built on that.
Minimalistic sounds good, less to learn. So should i use UIkit?
UIKit has become a quite popular CSS Framework, also outside the Joomla world. But it's still miles away from the popularity of Bootstrap. So most extension developers are focusing on Bootstrap, so you probably have to do overrides. But there are also a lot available for download.
And besides that?
There are 100s of other Frameworks out there, the web is fastly changing. Some things you should look at are for example Materialize, Foundation, Pure CSS from Yahoo or Flex Grid.