The Joomla! Community Magazine™

Do LESS in Joomla!

Written by | Friday, 01 March 2013 00:00 | Published in 2013 March
One of the many new features found in Joomla! 3 is the implementation of LESS. Many have heard of LESS, what it is, and how it can be used, but for those interested in learning (or refreshing) below is a walk-through of a few of the benefits and how to do LESS in Joomla!.

LESS is a dynamic stylesheet. It may be helpful in understanding LESS by thinking of LESS as similar to PHP. In much the same way that PHP is interpreted by the server and then outputs the corresponding evaluated HTML, LESS is interpreted by the server and outputs the corresponding CSS. It's that simple.

To be more specific, LESS extends CSS with a variety of additional features. The three features this article will focus on are: variables, mixins, and functions.

Variables

With LESS you can specify a set of variables that can then be reused throughout your stylesheet. Below we will define three variables and then demonstrate how they are used throughout the template.

@primary : #336699;
@secondary : #444444;
@bordercolor : #d5d4d4;

Once these variables have been defined you can then use them anywhere later.

a.readon 
{
color: @secondary;
}

h1
{
color: @primary;
border: 1px solid @bordercolor;
}

When the code is read by the server it will write out CSS code similar to how you would be used to seeing it.

It's that simple. It may not appear from this example that this is very beneficial or very time-saving, but in the scope of a full template with hundreds of lines of code it becomes incredibly easy to change a style by simply changing a single variable at the top of the file.

Mixins

This is a fancy way of saying you can add full sets of styles inside another style. In some ways its very similar to variables, only instead of a single value we are now including entire styles. Below is an example of this technique.

.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px) 
{
border: @width solid @color;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

This could then be used in the following way:

.moduletable {
.thinborder(2px,#336699);
}

As you'll notice, you can modify any or none of the parameters. Any parameter not defined will use the default value (in the above example the width defaults to 1px). Again, this provides a fantastic way to have a well-managed stylesheet without enormous amounts of extra lines of styles. Again, simply changing the default style will update every corresponding line throughout the entire stylesheet.

Functions

The last item to look at is the functions feature of LESS. LESS functions are a way for you to perform simple operations on variables. We can use multiplication, division, addition, and subtraction. It's an extremely powerful way to create a single style and then reuse that style easily throughout the stylesheet while still being able to manipulate the styles for unique situations. See the following example:

//Define variables
@borderwidth : 2px;
@background : #222222;

.moduletable {
background-color: (@background / 4);
border: (@borderwidth + 1) solid (@background * 2);
}

By creating this style and adding LESS functionality to specific cases we can quickly create styles that are standardized across the entire stylesheet while still maintaining unique cases when needed.

The above code demonstrates a case where we set a default background color and then use that background color to create variations as necessary. In this specific example we take advantage of the background color to use for both a border color and background color as variations.

There are other ways in which LESS is used, however for the sake of the length of this article we’ll not look at other examples but rather turn to how LESS can be used within a Joomla! template. If you have additional questions about LESS you can view more information on the official website, http://lesscss.org.

How LESS is implemented with Joomla! templates

Joomla! 3 includes a JUI library in the root media folder. This folder holds all the core LESS files available for use. Joomla! templates can then use those files by importing them into the template specific LESS files. Below is an example of importing these:

// CSS Reset
@import "../../../media/jui/less/reset.less";

// Grid system and page structure
@import "../../../media/jui/less/scaffolding.less";
@import "../../../media/jui/less/grid.less";
@import "../../../media/jui/less/layouts.less";

// Base CSS
@import "../../../media/jui/less/type.less";
@import "../../../media/jui/less/code.less";
@import "../../../media/jui/less/forms.less";
@import "../../../media/jui/less/tables.less";

The full list of available file imports can be found here:
http://jui.kyleledbetter.com/

Once you’ve imported the base LESS classes you want in your template and have added your own LESS styles you can then compile a single template.css file to control your entire site with one unified style. To compile your LESS styles you will need to run a compiler to generate the CSS file. Don’t let the idea of compiling scare you. It’s merely a fancy term used to define the process of writing out CSS files from the LESS files ($emember all those variables, mixins and functions have to be parsed out and written as normal CSS). Joomla! default templates use a tiny Joomla! platform application to generate their CSS and the code is available to copy and use for personal template styles from the GitHub directory for the Joomla! CMS.

https://github.com/joomla/joomla-cms/blob/master/build/generatecss.php

This file contains a singular doExecute function which when run will write the CSS files out based on a standard Joomla! class (JLess). Run it and generate your CSS and your brand new template stylesheet is ready to go.

In conclusion

Don’t think this process to be too technical to actually use. It is quite easy to understand and you will be surprised with how simple it is to implement. Get started today writing LESS files. Take advantage of the formatting available in the root JUI / LESS folder and write your next template with the power of LESS.

Read 184337 times
Tagged under Designers, English
David Hurley

David Hurley

David Hurley is an open source advocate and travels most weeks of the year to speak around the world on topics of tech, PHP and open source software. He is the Community Manager for Joomla - the second largest content management system in the world. He is also a member of the Production Leadership Team and the Framework maintainers. David writes semi-obsessively at http://dbhurley.com and is an active partner in several businesses.