Difference between revisions of "Joomla LESS"

From Joomla! Documentation

Line 27: Line 27:
== References ==
== References ==
* [] - Example of building your own template.less
+ - Example of building your own template.less
<noinclude>[[Category:New in Joomla! 3.0]][[Category:Bug Squad]]</noinclude>
<noinclude>[[Category:New in Joomla! 3.0]][[Category:Bug Squad]]</noinclude>

Revision as of 14:05, 23 June 2013

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

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.

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

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.

Not all LESS compilers are equal

The LESS compiler used for the Joomla core for code style consistency is obtained from

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

References - Example of building your own template.less