Actions

Difference between revisions of "Joomla LESS"

From Joomla! Documentation

m (improving, adding categories, should be moved to a more appropriate title, Compling LESS for Joomla! or something similar. This title should be redirected to a Tutorial on LESS, CSS and Joomla! 3)
Line 1: Line 1:
{{notice|'''This page is intended for Joomla Bug Squad members'''.}}
+
Most of the Joomla 3.0 default template stylesheets are written using [[http://en.wikipedia.org/wiki/LESS_(stylesheet_language)|LESS]] and then compiled to generate the [[http://en.wikipedia.org/wiki/CSS|CSS]] files.
  
Joomla 3.0 is shipped with a LESS files located in <code>media/jui/less/</code> to generate default template and bootstrap CSS files from LESS files.
+
The <code>.less</code> building blocks are located in <code>media/jui/less/</code>. The template specific <code>.less</code>files are located in <code>templates/&lt;templates&gt;/less/</code>.
  
The CSS generation wrapper script, LESS compiler, and other similar build tools are located in the build directory.  The build directory is only available from a GitHub clone; it is not included in an official Joomla release.  
+
The CSS generation wrapper script, LESS compiler, and other similar build tools are located in the <code>build/</code> 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.  
 +
 
 +
To re-generate all the CSS files from a Joomla core distribution, you will need to execute the generation scripts as a [[wikipedia:Command-line_interface|CLI application]].
 +
 
 +
For example:
 +
<pre>cd joomla-cms/build
 +
c:\xampp\php\php.exe generatecss.php
 +
</pre>
 +
 
 +
To generate your own less files in your own template, you will need to take a copy of the <code>generatecss.php</code> script and adjust it to suite your template.
 +
 
 +
== Not all LESS compilers are equal ==
 +
The LESS compiler used for the Joomla core is obtained from [[http://leafo.net/lessphp]]. 
  
To generate the CSS files you will need to execute the generation scripts as a [[wikipedia:Command-line_interface|CLI application]].
 
 
<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 18:32, 19 December 2012

Most of the Joomla 3.0 default template stylesheets are written using [[1]] and then compiled to generate the [[2]] files.

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.

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

To generate your own less files in 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 is obtained from [[3]].