Standard CSS classes / id naming conventions

Question

When building a custom component, and while designing the layout file to render the view, I'm having difficulty determining what CSS classes / id's to use in my HTML elements to ensure it takes advantage of Joomla built-in CSS and other Templates.

I understand that Joomla uses Bootstrap which provides a level of consistency and can be referenced here: http://getbootstrap.com/2.3.2/base-css.html

However, besides the Bootstrap implementation, are there any standard CSS classes/id's that I can use to ensure consistency across the many templates that are available? And if so, are there any references to these CSS classes/id's?

I guess I'm asking if you were to design the look and feel of the component, what steps would you take to ensure that the look and feel works in synergy with Joomla and other templates?

Answer 1

what steps would you take to ensure that the look and feel works in synergy with Joomla and other templates?

There's no way of knowing what will, and what will not, be supported in a template so my advice would be to not rely on a template to style your component at all. It is impossible to ensure the look and feel, that it ultimately decided by the template.

There's three possible approaches; 1) Do nothing, 2) Hope that the template will support BS2 or BS3 syntax and pick one of those, or 3) include your own css.

Using the correct html elements for the job will mean that the template handles most of your styling anyway (option 1). For anything else use a logical class naming approach for your component elements, following the Joomla coding standards for html and css and include your own css with your component. If you do this please provide a switch to disable it.

As I template developer I do the styling for any component I use, I neither need nor want component styles though I appreciate that some might. The best way is to provide simple options in your extension configuration; Load css? yes/no, Load js? yes/no. Failing that, please ensure that they are at least loaded from the view file so that they can be overridden without hacking your extension.

Answer 2

Currently, there is no such standard. The closest thing is indeed the Bootstrap classes.

What I usually do is making sure it works in Protostar and hope for the best.

There was once sort of a standard but support for it was low and the documentation was bad. It was basically just a list of ids and classes used by core.

Answer 3

I wish there was a solution to this but unfortunately there isn't. It would be great if we could all develop extensions that would integrate with all templates out there.

You would simply be best making use of the Bootstrap classes and if the style doesn't integrate well, then the user can simply create a Template Override for your component.

Just be sure to make everything as dynamic as possible.

You may have noticed if you ever look into 3rd party module code, that many of them put the HTML markup in mod_modulename.php, meaning that the user cannot override the view, and thus has to perform a core hack to style the module according to their needs.

This is why all markup should always be put in the view file.

Hope this helps