Using LESS, Sticker and 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.
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 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 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.
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
- includeData() and
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!
- 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!