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.
- Imports templates/system/css/system.css
- Bootstrap CSS is an optional setting (and is off by default)
- 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'));