Joomla LESS

Latest revision as of 19:16, 19 December 2012

Most of the Joomla 3.0 default template stylesheets are written using LESS and then compiled to generate the CSS files.

[edit] Where can you find the .less stylesheets and compiler?

The .less building blocks are located in media/jui/less/. The template specific .lessfiles are located in templates/<templates>/less/.

The CSS generation wrapper script, LESS compiler, and other similar build tools are located in the build/ directory of the Joomla source located on GitHub. Refer to Git_for_Coders for more information on using GitHub. The build directory is only available from the Joomla source, it is not included in an official Joomla release.

[edit] How to re-generate the CSS stylesheets

To re-generate all the CSS files from a Joomla core distribution, you will need to execute the generation scripts as a CLI application.

For example:

cd joomla-cms/build
c:\xampp\php\php.exe generatecss.php

[edit] Compiling your own LESS files for your template

To compile less files for your own template, you will need to take a copy of the generatecss.php script and adjust it to suite your template.

[edit] Not all LESS compilers are equal

The LESS compiler used for the Joomla core for code style consistency is obtained from leafo.net/lessphp.

If you're working on your own template you can use any compiler you like.

[edit] References

• kyleledbetter.com/jui/less - Example of building your own template.less