6 minutes reading time (1231 words)

20 Suggestions for Better Style and Script Designing in Joomla! Extensions (Part 2)

20 Suggestions for Better Style and Script Designing in Joomla! Extensions (Part 2)

Extension developers provide a large number of extensions for Joomla!. But as you may know, some of them are not compatible with many templates. Also, in many cases Joomla extensions do not have standard style and script designs, and because of this many users are forced to hack their extensions. In this article I am going to provide and explain 20 suggestions for better style and script design of Joomla extensions and maybe these simple techniques and patterns will help you! Read the second part of this article now.

This article's content was extracted from many experiments that Joomla! developers have encountered, but also it could be better solutions, there are lot of ways to reach the goals. If you have other solutions, please feel free to write them in the comments.

Style and script designing are the main parts of User Interface design, but they are not the same thing. I will explain some solutions for better UI design in Joomla! extensions in future articles.

Note that the meaning of script in this article is the client-side scripting like JavaScript. Also in codes {component name} is referring to the Joomla! Component name and {module name} is refer to the Joomla! Module name.

In the first part of this article I discussed these suggestions:

  1. Root selector
  2. Joomla! parameters for style and script controlling
  3. Class suffixes
  4. Additional unique selectors in item lists
  5. Percentage sizes
  6. Size of images
  7. External files
  8. Compatibility with right-to-left (RTL) languages
  9. Compressing static files
  10. External libraries

Now I am going to explain the next 10 suggestions:

  1. Pay attention to multi-usage cases
  2. Validate style and script parameters
  3. Use less columns
  4. Don't use public selectors
  5.  Don't use css reset codes
  6. Use Joomla! Framework libraries and JUI as much as possible
  7. Use related path rather than absolute path as much as possible
  8. Use language files in scripts
  9. Load JavaScript files at the end
  10. Separate colors in style and script files

11) Pay attention to multi-usage cases

When you are developing an extension it is very important to pay attention to multi-usage cases, because extensions can be used twice or more per page. Let me give an example to better explain:

Suppose you are developing a plugin for rating content, and you are using Javascript functionality for Ajax rating. If don't pay attention to multi-usage cases, the extension will work fine in single article view, but it will not work the right way in categories view!

12) Validate style and script parameters

It is very simple and takes only a few minutes, but it prevents your extension from unwanted user faults. Yes, I'm talking about validating parameters. For instance, the color is frequently used in style parameters, lets talk about that. It begins with '#' sign and has 6 digits after that, including alphabet from 'a' to 'f' and all numbers (0-9). It can be validate simply by this regular expression:

preg_match('/^#[a-f0-9]{6}$/i', $color);

If the result of phrase is TRUE, it means that the color is in a valid format and it can be used in your extension and also it can be stored. 

13) Use less columns


As an extension developer, you can't access or know what template will be used to show your component. It may have 2 or more columns. So it is better to use no columns or fewer columns in your UI designing, as much as possible. In this way your style designing have universality to most templates. Also in some cases, you can build additional modules beside your main component, and that could be used instead of adding columns to the main design.

14) Don't use public selectors

When you are designing your style and script in Joomla! extensions, it is important not to use public selectors like: li.ul,table etc. If you don't take this advice, your extension will fully destroy your user template! The reason is simple, when you are using public selectors, you are affecting all elements on the page, not just your extension only. Also you shouldn't use Joomla! default classes that have been used for layout of components and modules.

15) Don't use CSS reset codes

As you may know, the goal of resetting the stylesheet is to reduce browser inconsistencies in things like default line heights, paddings and font sizes of headings, and so on. So CSS reset codes are used to enhance cross-browser compatibility. But many experiences and reports show that it is better to leave these styles out of your extensions. It will break the main user templates in some cases. The reason is same as the previous item (14: don't use public selectors), because reset codes have impact on public selectors. Instead of CSS reset code, you can use a particular section of that accompanied by your extension root selector. for instance:

.mycomponent table {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
.mycomponent table {
border-collapse: collapse;
border-spacing: 0;


16) Use Joomla! Framework libraries and JUI as much as possible

In your design, you can use many different CSS and Javascript libraries. If you use the Joomla! Framework libraries and JUI in this case, you will get more compatibility and it will be easier and faster to implement your design. For example to add Bootstrap library to your extension, you can easily use this:


17) Use relative path rather than absolute path as much possible

You can use the relative path or absolute path in some area of your extension, like defining stylesheet or script files or defining the path of images and so on. Although there is no major difference between these 2 types of declaration, experiments have shown that utilizing the relative path is a little better choice in some cases. There are some reasons for this claim, but one of the main reasons is that it improves the modularity of your extension and in the other hand it reduces unnecessary code rewriting.

18) Use language files in scripts

When I reviewed and analyzed some good extensions of Joomla!, I found that many extension providers didn't use language string in their script files. It is very easy and usefull. See the example that I provided below:

$document = JFactory::getDocument();
var myextension_text=Array('".
alert(myextension_text[3]+' '+myextension_text[1]+' '+myextension_text[2]);

 19) Load JavaScript files at the end

Occasionally we define the external Stylesheets and Javascript files at the head of the page (usually inside <head> tag). For stylesheets it is better to put it in the head, but with Javascript files the situation is different. If you put the script files at the end of the HTML document, the page will load faster. There are many reasons for this position change, but the main one is that browsers follow progressive rendering.

20) Separate colors in style and script files

After you finished your extension design, I suggest you separate color declarations in style and script files. It will take no more than a maximum of one hour, but it has at least 2 advantages for your extension: One advantage is that it improves your extension's modularity, and another advantage is that it reduces your extension's need to be hacked by users, because your extension UI colors must be adaptable with your template colors and have harmony.

I hope your extension have better style and script designing in the future. ;)



Already Registered? Login Here
No comments made yet. Be the first to submit a comment

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/