The Manos Blog


Doing more with LESS in Motif

February 01, 2012

Two-and-a-half years ago, I built a template toolkit for Joomla called Motif to aid in the development of custom templates for our clients. With Motif, we can build custom templates in a fraction of the time it took us to build templates before Motif, because it takes care of many of the repetitive tasks, and it comes with a set of shortcut functions that make a template developer's life much easier.

Fast forward two-and-a-half years, and we still use Motif on all of our clients' custom templates, and we love it. It's become quite painful to work on a template that isn't built with Motif because it is so easy to work with. I recently updated Motif to work with Joomla 1.6/1.7/2.5. During that process, I removed a few features that we never really used, and I added some features to make our job even easier. One of those features is an automatic LESS CSS compiler based on the php LESS compiler from

LESS CSS is a relatively new stylesheet language from Cloudhead. It's based on CSS, but it adds loads of functionality like variables that can be reused throughout your stylesheet, functions, nested selector rules, and much more. It does all the things I have always wished CSS could do. It's a front-end developer's dream!

One setback to LESS is that it has to be compiled to CSS. There are essentially three ways to go about that. You could compile it on your local machine before uploading it to the server, but this process adds another step to your development process that we didn't think was ideal. Second, you could include the LESS javascript (less.js) in your markup, but that adds overhead to the amount of data that must be downloaded to the browser before the site can be displayed. Third, you can compile it on the server side. We found this to be the most ideal solution, because it can be programmed to happen automatically so you never have to worry about it.

When we discovered Leafo's php LESS compiler, we knew we had found a winner, so I immediately began work on incorporating it into Motif. The compiler checks your LESS file and compares its last modified date to the last modified date of the resulting CSS file, and only runs if the LESS file has been modified more recently than the CSS file. That saves computing overhead on the server because it doesn't have to run every time.

We have taken that one step further with Motif and added production and development modes as a parameter. If the template is in production mode, the LESS compiler will not run. If the template is in development mode, the compiler will run every time, but only if the LESS file has been modified more recently than the CSS file. With these safeguards in place, we have made sure that your template does not take a performance hit due to the LESS compiler.

All you have to do to use the compiler is load your .less file in your theme's CSS directory. Motif handles the rest for you automatically. What could be easier?

If you want to check out Motif, you can follow the development on GitHub. There is also a Motif sample template on GitHub if you need help getting started. Check it out!