Using Less, the Dynamic Stylesheet Language, in Concrete5

2nd September 2011 | Tags:
Less, the dynamic styesheet language

Hav­ing played around with Less for a while, I’m quite taken with it. Espe­cially with use­ful tools such as Twitter’s newly released Boot­strap being opti­mised to work with it. Less works with CSS to pro­vide all sorts of neat fea­tures such as vari­ables, nested rules, func­tions and “mix­ins”, which means less code, and eas­ier to main­tain code. So, for exam­ple, instead of doing this each time you want a rounded corner:

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

You can cre­ate a mixin (a lot like a func­tion) once, like so:

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

Then apply­ing rounded cor­ners takes one line:

.classname { .roundedCorners; }

Or, using vari­ables (which would oth­er­wise default to 10px in the exam­ple above), you can spec­ify the size of the radius, like so:

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

Where Less can really come into its own is when build­ing seman­tic respon­sive lay­outs — but that’s a whole sep­a­rate post. Besides this post isn’t about Less, so much, as how to go about using it with Concrete5 (though some of the prin­ci­pals I’m cov­er­ing apply to other frame­works and CMS’s). Concrete5 — prob­a­bly my favourite CMS at the moment — has no sup­port out-​of-​the-​box, and nor did there seem to be a third party exten­sion offer­ing this func­tion­al­ity; so I decided to build it. Before Less is any use it must be com­piled to CSS. There are three pos­si­ble ways of doing this; using the Less JavaScript library, using Node.js or using a server-​side com­piler. I picked out the third option as in some ways it’s safest; if you’re run­ning in a PHP envi­ron­ment then han­dling the com­pi­la­tion server-​side means you don’t have to worry about the client side — such as the user hav­ing turned off Javascript. So, I took the excel­lent LessPHP library from Leaf Cor­co­ran, and cre­ated 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 pack­age in Concrete5; from the admin­is­tra­tion sec­tion go dash­board, select *Add Func­tion­al­ity* and it will be avail­able to activate.

The pack­age con­tains the nec­es­sary PHP com­piler 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 sec­tion, thus:

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

In the exam­ple 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 pack­age by pass­ing in the pack­age han­dler. So what does this do? Well, it matches the Less file spec­i­fied to a cor­re­spond­ing CSS file and if that doesn’t exist, it gen­er­ates it by com­pil­ing the Less file. If the CSS file exists and is more recent than the lat­est update to the Less file, it uses that — no need for it to recom­pile, which would sev­erly impact per­for­mance. How­ever if you have made a change to your Less file then the resul­tant CSS will be recom­piled for you. One caveat; there is some over­lap with Concrete5’s CSS han­dling, whereby you can, for exam­ple, cre­ate a theme with a con­fig­urable colour scheme by “expos­ing” the rel­e­vant CSS rules to make them editable in the CMS. Less offers some­thing dif­fer­ent, how­ever, and because of this, and the fact that it would be dif­fi­cult to run both fea­tures side-​by-​side I’ve made no effort for the two to play nicely together. There is noth­ing to stop you link­ing to a set of base styles in Less for­mat and then adding a con­fig­urable CSS style, though. If you want to try it out, you can find the source on Github. It will hope­fully be avail­able through the Mar­ket­place 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 avail­able 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 White
    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

Links and images are allowed, but please note that rel="nofollow" will be automactically appended to any links.