Actions

Difference between revisions of "Joomla LESS"

From Joomla! Documentation

(Created page with "''This page is intended for Joomla Bug Squad members.'' Joomla 3.0 is shipped with a LESS compiler to generate default template and bootstrap CSS files from LESS files. The ...")
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
''This page is intended for Joomla Bug Squad members.''
+
Most of the Joomla 3.0 default template stylesheets are written using [[wikipedia:LESS_(stylesheet_language)|LESS]] and then compiled to generate the [[wikipedia:CSS|CSS]] files.
  
Joomla 3.0 is shipped with a LESS compiler to generate default template and bootstrap CSS files from LESS files.
+
== Where can you find the .less stylesheets and compiler? ==
  
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 <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>.
  
To generate the CSS files you will need to execute the generation scrips as a CLI application.
+
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.
 +
 
 +
== 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 [[wikipedia:Command-line_interface|CLI application]].
 +
 
 +
For example:
 +
<pre>cd joomla-cms/build
 +
c:\xampp\php\php.exe generatecss.php
 +
</pre>
 +
 
 +
== 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 <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 for code style consistency is obtained from [http://leafo.net/lessphp leafo.net/lessphp]. 
 +
 
 +
If you're working on your own template you can use any compiler you like.
 +
 
 +
== References ==
 +
 
 +
* [http://kyleledbetter.com/jui/less kyleledbetter.com/jui/less] - Example of building your own template.less
 +
 
 +
 
 +
<noinclude>[[Category:New in Joomla! 3.0]][[Category:Bug Squad]]</noinclude>

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.

Contents

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 leafo.net/lessphp.

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

References