Joomla! and LESS

Templates for Joomla! have a specific feature – they are quite extended, especially when it comes to CSS code; while creating a template it is essential to style standard subpages, additional modules, components. The more we want to care about the details, the more the amount of code rises where some parts multiply. Therefore, I have been using CSS pre-compilers for some time to create templates. One of such tools is LESS. I will show you how to use LESS in a template which is based on the latest version of T3 Framework used in our templates and I will show how to use its possibilities.

At the beginning, was created in Ruby language but it is not a problem because there are some implementations in other languages, e.g. PHP (lessphp) and JavaScript (LESS.js). JavaScript version is less demanding in the case of attaching to a template whereas when we disable JavaScript in the browser, we have a problem, unfortunately. Therefore, it is safer to use LESS version which works on server-side.

Small remark – I personally advise you to use LESS while creating a template and its modifications only. Why? There is no sense to process our *.less files in every site’s request of for some time specified. (with cache use). Therefore, after finishing, it is worth changing a code presented to references to *.css files generated with LESS use.

What does give us LESS ?

LESS extends CSS syntax about much more new possibilities. Let’s start from the variables. The majority of layouts are based on more than one color. In LESS, we create variables by using code below:

 @variable_name: VALUE; 

Example:

 
@color1: #000; 
@color2: #fff;  
#navigation{         
    color: @color1;         
    background: @color2; 
}  

.code{         
    color: @color2;         
    background: @color1; 
} 

In the above situation, if we want to rollback colors in #navigation element and in elements with code class, it is enough to change the values of variables. It is very useful when we have a huge CSS file with many multiple colors.

The second very important functionality – nesting of elements. Instead of writing:

 
#navigation {} 
    #navigation a {} 
    #navigationa:hover {} 

We are writing:

 
#navigation {        
    /* styles for #navigation element */         
    color: #000;         
    margin: 10px;          
    a {                 
        /* styles for links in #navigation */                 
        color:#aaa;                 
        display:block;                                  
        /* styles for pseudoclasses */                 
        :hover {                         
            text-decoration:none;                 
        }         
    } 
} 

This code is much clear because some people often try to format a code in this way:

 
#navigation {}        
    #navigation a {}         
    #navigation a:hover {} 

To highlight that selectors are connected with elements nested in other element.

It is also worth mentioning, that there is a possibility of reuse the created code:

 
.test{        
    color:#000;         
    background:#fff; 
} 

Now, we can embed color and background properties in other element by writing:

 
.test2{        
    .test; 
} 

We can also refer directly to elements nested or even to values, properties or variables specified or even create classes with parameters. LESS possibilities are really enormous – for those who are interested, go to lessphp documentation.

Coming back to our entry, namely LESS use in our templates.

How to use LESS in a template?

In order to use LESS, I recommend you to create from directory with template CSS files copy of selected files in less/ directory, which will contain source *.less files to process. Of course in less/ directory we have to change *.css file extensions to *.less.

Obviously, we have to remember about setting appropriate chmods to save in less/ folder.

In order to use LESS posibilities in head section of our template, we need to place such a line:

<?php $this->lessCSS('template'); ?>

Above code will check whether template.less file exists and will generate from less/template.less file, less/template.css and will place a link in the place of call. If this file does not exist, a standard css/template.css file will be loaded.

Comments

One of LESS disadvantages is poor support for syntax in editors. Personally, I use Coda editor and this solution.

Another LESS.js drawback is that all styles generated by it are embedded directly in page’s code. Therefore, if we have links to background images in *.less files, we have to define it according to main document of a page, not the location of *.less file.