BLOG

One of the nice additions to Concrete5 5.7 is the native support of LESS files to help with your CSS. This quick guide shows you how to blend those two technologies together now.

less.png

Working with LESS and Concrete5 5.7

23rd September 2016

One of the nicer technologies to gain traction in recent years in the development landscape are CSS pre-processors. Genuinely, once you've started working with them you'll struggle to revert to vanilla CSS because it'll change the way you think. Not in a clumsy "Coffee to JavaScript" way (which I'm not a huge fan of), but SASS, LESS and SCSS have worked to make CSS how it should have always been.

I won't get into what I love about the technology because that's not the point of this post (though will summarise that my key points are variable use, the ability to include partials - therefore the ability to abstract areas out into separate files cleanly - and the logical way documents can now be structured).

Anyway, I've worked with SASS, LESS and more prominently SCSS in recent years but I've always needed to use a task-runner (such as Gulp or Grunt) to compile the pre-processed code into a valid CSS file. Task runners are really handy (and most modern IDE's have the ability to add file-watchers for this anyway), but native support from an application level is always handy. Concrete5 5.7 now has LESS support as standard and it's incredibly easy to implement.

Directory Structure

Simply ensure that your theme directory has a "css" directory. In this you'll want a "presets" directory with a "defaults.less" file. In here you can add global declarations (I often use them for concepts such as brand colours, fonts and other things that will be repeated over-and-over again in the file. It's useful to do here because if you later need to change fonts or colours, you won't be a slave to copy/paste.

Your LESS File

Create your main LESS file (in this instance called main.less). At the top you'll want to import your defaults file:

    
    /* Import our theme variables */
    @import "presets/defaults.less";
        

From here you can then go on to create your LESS file as you ordinarily would. Go read up on LESS if you're new to it.

Including LESS In Your Theme

You no longer need to point directly to the compiled CSS anymore, Concrete5 will compile it for you - but only if you include it correctly.

Previously you'll have been adding this as the SRC for the link:

    
    echo $view->getThemePath() . '/css/main.css';
    

Whereas now you'll want to include it specifically as a Stylesheet and point it at the LESS file:

    
    echo $view->getStylesheet('main.less');
    

Concrete5 will compile the LESS into CSS for you, no need to have your own task-runners or file-watchers.


Cache Settings

Obviously you don't want it compiling the LESS each and every time it runs, so inside the normal "Cache & Speed Settings" area of the dashboard, there's a setting for caching the output and compressing it too, which you'll want off while developing but on for production.

Hope this was helpful! Pretty basic stuff, but useful.

THINK THERE'S SOMETHING WE CAN TALK ABOUT?

Whether you want to discuss a piece of business, get advice on how to approach something in Concrete5, want my top Project Zomboid tips or just simply want to say hello, then please do. I'm not as anti-social as my status as a developer would suggest.

GET IN TOUCH

CONTACT

Image
LOCATION
Milton Keynes (near London)
Image
PHONE
Disclosed for business only
Image
E-MAIL
steven.york [at] seopher.com
Image
AVAILABILITY
Contact me to find out