What css do core and third party extensions expect a template to have?

Question

I usually build Joomla templates in which I do not expect the admin to add their own modules and components. As such, my CSS styles just need to work on the components and modules I have built or included, and can be kept fairly minimal.

However, I'm currently building a template for someone who does like to play around with third party components.

As such, I was wondering if there is any sort of default Joomla CSS that means these will usually render okay.

Importing Bootstrap's CSS improves the look-and-feel of the core modules, and seems at first the obvious one, but I've looked at the core templates to see how they do it and they don't seem to include this.

Beez

• Imports templates/system/css/system.css
• Bootstrap CSS is an optional setting (and is off by default)

Protostar

• Imports a dozen or so scripts from ../../../media/jui/less/
• Contains JHtml::_('bootstrap.loadCss', false, $this->direction); - which I believe only loads the RTL CSS, and this is optional and off by default.

Extending the system template would seem another logical approach, but the core templates do not appear to do this beyond the single import on Beez. That said, I suspect the system template may contain what I want, but I can't find much information of what it is actually for.

Adding the system.css file (as per the Beez template) does not make, say, the core login module look tidy in the way the Bootstrap CSS does.

I know I can style the obvious elements - headings, tables, fieldsets, fields etc... - but that feels easy to miss things.

What CSS files should I be importing?

edit: I've found the following are all useful in terms of core Joomla modules. These, plus a small bit of bespoke CSS seems to get everything looking fine without bootstrap.

JHtml::_('stylesheet', 'media/jui/css/icomoon.css', array('version' => 'auto'));
JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto'));
JHtml::_('stylesheet', 'templates/system/css/general.css', array('version' => 'auto'));

Answer 1

This is one of those things where there are pros and cons.

Remember that it is not up to you (as the extension developer) to dictate the design of a site. The design should be dictated by the template, and the template alone.

This is one of the pros of using Bootstrap classes in your extension, which the template developer can then override as they wish and your extension will fit in with the rest of the template.

The down side however is that Joomla is then coupled to Bootstrap and performance nuts, myself included, hate Bootstrap.

So, to sum it up, use the Bootstrap classes and let the template take care of the rest. If the web master wishes to change the styling of your extension, they can create a template override or add their own CSS to user.css.

Hope this helps