Using LESS, Sticker and Preside

PresideCon 2016: Using LESS and the per-request asset inclusion framework Sticker with Preside

During our recent PresideCon event, Oct 2016, Munich, we decided to take the opportunity to share some detail about a little framework we use internally for managing the inclusion of website assets, CSS and JS, on a per-request basis. We also decided to discuss the tools we use to manage our static assets.

The framework we use is called Sticker and is small but yet very useful for controlling what assets are returned for a particular web request.

TL;DR

Sticker is a per-request static asset inclusion tool for the ColdFusion language. Its aim is to create a simple and consistent API for including JavaScript and CSS assets from multiple sources. Combined with SASS or LESS and a build system of your choice (Grunt, Gulp, Compass) you can establish an efficient workflow in your development environment.

Slides

Structure

The session had the following structure:

David Gallerizzo spoke about the SASS CSS language preprocessor and Compass, a CSS authoring tool.
I then spoke breifly about the LESS language and how we use Grunt.
The session then continued with a quick overview of the Sticker framework.

I'm going to be focusing on the methods we use at Pixl8. For more detail on David's talk about SASS and Compass please contact David or check out the resources at the end of this post.

LESS

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

Before we start integrating the front-end code into our prjects we have our team develop an entire Static version of the main site pages, controls and widgets.

In order to reduce the amount of duplication across the CSS, the team utilise LESS so they can define common CSS rules, colour codes, fonts etc.

Once the LESS files are ready, we then use the Grunt task runner to process and output the necessary files.

Grunt

Grunt is node based task runner to help automate those mundane, repetitive tasks developers have to carry out in their day-to-day workflow. At Pixl8, we use Grunt to automate the following tasks:

Process LESS into CSS
Minify CSS
Minify JS
Cache busting with revision numbers created through content hashing
Cleaning and Copying of files from the Static site into our core application assets folders
Watch task for automatically re-compiling all of the above uring front-end development

Once the task runner has been run, our assets should be ready for consumption by the application. That's where Sticker now comes in.

Sticker

In our application we bring all of our Static assets together using the Sticker Framework.

You can install the framework by including the /sticker folder in your webroot or locating it in your preferred folder outside the webroot and adding a mapping called /sticker to that folder.

Once installed all you have to do is invoke it so the code is available for every request.

The main tasks when using Sticker are:

Configure bundles
Configure bundle assets
Configure any ordering or dependencies
Configure any IE restrictions or CSS media directives

Then on your layouts / view templates / handlers simply include whichever assets / data are required for that request using

include()
includeData() and
renderIncludes()

When specifying your include assets you can

Throw an exception or choose to ignore if an asset is missing
Group assets for output on particular sections of the rendered view template
- ```
e.g. topHead, topBody, bottomBody, bottom
```

There are some code samples available in the presentation and the documentation so I would urge you to download and try it out!

Resources

SASS CSS language pre-processor
Compass CSS authoring framework
LESS CSS language pre-processor
Grunt task runner (build system)
Gulp build system (task runner)
Sticker framework documentation
Sticker GitHub repository

If you have any questions or are interested in learning more specifics about the tools / frameworks above or their implementation please feel free to contact us - we'd be glad to hear from you!

Also, if you do decided to use any of our opensource offerings for your Projects, please get in touch with the detail!

Happy Coding!!

Return to listing