Using Less, the Dynamic Stylesheet Language, in Concrete5

2ndSeptember 2011 | Tags:
Less, the dynamic styesheet language

Having played around with Less for a while, I'm quite taken with it. Especially with useful tools such as Twitter's newly released Bootstrap being optimised to work with it. Less works with CSS to provide all sorts of neat features such as variables, nested rules, functions and "mixins", which means less code, and easier to maintain code. So, for example, instead of doing this each time you want a rounded corner:

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px;

You can create a mixin (a lot like a function) once, like so:

.roundedCorners (@radius: 10px) { 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 

Then applying rounded corners takes one line:

.classname { .roundedCorners; }

Or, using variables (which would otherwise default to 10px in the example above), you can specify the size of the radius, like so:

.more-rounded { 
    .roundedCorners(15); 
} 

Where Less can really come into its own is when building semantic responsive layouts - but that's a whole separate post. Besides this post isn't about Less, so much, as how to go about using it with Concrete5 (though some of the principals I'm covering apply to other frameworks and CMS's). Concrete5 - probably my favourite CMS at the moment - has no support out-of-the-box, and nor did there seem to be a third party extension offering this functionality; so I decided to build it. Before Less is any use it must be compiled to CSS. There are three possible ways of doing this; using the Less JavaScript library, using Node.js or using a server-side compiler. I picked out the third option as in some ways it's safest; if you're running in a PHP environment then handling the compilation server-side means you don't have to worry about the client side - such as the user having turned off Javascript. So, I took the excellent LessPHP library from Leaf Corcoran, and created an add-on so that this could be installed and used within Concrete5.

Installing the Less Add-on in Concrete5
Install Less the way you would any other package in Concrete5; from the administration section go dashboard, select *Add Functionality* and it will be available to activate.

The package contains the necessary PHP compiler in its libraries folder, so all you need to do is include a Less file using the package's helper in your template's head section, thus:

$less = Loader::helper("less", "less"); ?>
print $less->link('styles.css.less'); ?>

In the example above, styles.css.less is in the theme folder (it seems most likely this is where you would be using Less), but you can also process a Less file from a package by passing in the package handler. So what does this do? Well, it matches the Less file specified to a corresponding CSS file and if that doesn't exist, it generates it by compiling the Less file. If the CSS file exists and is more recent than the latest update to the Less file, it uses that - no need for it to recompile, which would severly impact performance. However if you have made a change to your Less file then the resultant CSS will be recompiled for you. One caveat; there is some overlap with Concrete5's CSS handling, whereby you can, for example, create a theme with a configurable colour scheme by "exposing" the relevant CSS rules to make them editable in the CMS. Less offers something different, however, and because of this, and the fact that it would be difficult to run both features side-by-side I've made no effort for the two to play nicely together. There is nothing to stop you linking to a set of base styles in Less format and then adding a configurable CSS style, though. If you want to try it out, you can find the source on Github. It will hopefully be available through the Marketplace soon (free of charge), once it's gone through the approval process. Let me know if you have any questions!

UPDATE: this add-on has been approved, and is available here.

Comments

    Hi, thank you for your post and your time. Does using less have any impact on the load speed or performance of the page?

    4th October 2011
    Marz
    Marz

    Hi Marz, you’re welcome.

    I haven’t done any benchmarking, but any impact should be negligible. In this instance, the Less is only compiled on demand - i.e. when the source file(s) change - so the only overhead is a quick check of the timestamps of your Less files and the compiled CSS.

    21st October 2011
    lukas
    Lukas White

    One thing I had to do was chmod 777 the css folder at the base of the concrete5 site. I was getting a permissions error.

    Great work BTW!

    4th November 2011
    Gordon McAllister
    Gordon McAllister

    Lukas,

    Thanks for your work on this extension. You’ve mentioned there being no attempt at integration with Concrete’s CSS handling, but actually it would be incredibly powerful to be able to build entire themes with complementary colour palettes etc. using LESS variables and the LESS operations and functions.

    By exposing a few LESS variables in Concrete’s "Customize theme" page, end-users would easily be able to customise themes (with far less work) that still maintain design integrity.

    Not a project I have the knowledge to take on… is this something you have any inclination to look at?

    9th January 2012
    Phil Le C
    Phil Le C

    Concrete5 v5.5 says you need to update this add-on. :-S
    There must be a way around this, right?

    12th January 2012
    Mark
    Mark

    Thanks for the add-on! I’d love to use it but when installing I was told it was incompatible with my version of concrete5 (5.5.1). Is that really the case? If so, do you plan to support 5.5.1 in the future?

    3rd April 2012
    Sean J
    Sean J

    Hello,
    I’m using bootstrap with Less .
    I’m trying to get this package to work with concrete 5.5, with no luck. All I get is an empty file. Could you give us a hint how to adapt this package ?

    Thank you

    6th April 2012
    Anonymous
    Anonymous

    Hi, and thanks for creating this! I’ve been using procedural PHP in CSS for a while now, and I’m dying to get into LESS. I agree w/ your decision to go the PHP route w/ LESS, and want to use your c5 add on. That being said, I get the following error:
    Warning: require_once(/path/to/local/site/concrete/config/../packages/less/helpers/less.php) [function.require-once]: failed to open stream: No such file or directory in /path/to/site/concrete/libraries/loader.php on line 237
    I’m using c5.5.2.1.
    Any suggestions?
    In my theme header file, I have the following:
    $less = Loader::helper("less", "less");
    print $less->link('styles.css.less');

    In the dashboard, it added itself in properly, and told me to make a 'less' folder in my theme folder. Did that, then added in a styles.css.less file. Via the dashboard it compiled successfully. Not sure why it’s not working.
    Please help! I’m dying to use LESS and get away from procedural PHP in my CSS!
    Thanks in advance!

    11th July 2012
    Abs0lute
    Abs0lute