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 Leafo.net.
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!
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?