Saturday, 05 December 2015 19:36

Using LESS on Gantry Framework

Written by 
Rate this item
(0 votes)

 Less Framework

Gantry Framework supports development using LESS css preprocess. This is great feature, speeds up development, saves time ans somewhat works better then pure css when dealing with overides.

 

Gantry provides own LESS compiler whitch has to be enabled in template controll panel and agter saving our LESS file we should clear cache. Overwise changes will not be visible. Less compiler is located at the very bottom of Advanced tab in template manager.

Less cache panel

Working with LESS files gives you more power over web development using gantry framework. Power of LESS lays in variables and mixins. Variables are declared usually at the top of document, then we can assign value, or other variable. Variables are then assigned inside less styling which is basically "nested css". Detailed information about using less can be found on LESS website. Mixins are like functions, especially usefull when dealing with browser prefixes -o-, -webkit- etc, It really does save you typing. Another important thing to consider is making template configurable/styled by end user.

This is easier using LESS than CSS. You can modify styles without touching less files by overiding styles in styledeclaration.php. This although makes this file huge. In Gantry Framework less files are located in LESS folder:

Ok let start. First thing you should know, that all less files should be "registered" in global.less.

By "register" I ment @importing them. Any extra mixins libraries should be included in global.less and placed inside mixins folderto keep everything clear. On image above you can see that I included elements.less to have some more useful mixins. Also I created separate less file for every Joomla component I style. Sample list of my files on the left side of image below.

It requires a bit more importing but make any further changes easier in the future. Especially if somebody else wants to re-develope template. After we created our LESS files is time to have a look at styledeclaration.php. This file basically manages our styles and in this file we add variables and less files.

We can see gantry adds global and master, also adds $lessVariables variable which is an array. In this array we can place our custom less variables.

These variables came from template-options.xml.

Later you use it in less files

After all less files look much better than css. Below how to use vars in less file.

Thats it. Using LESS in gantry is not complicated and you really missing out if you don't! Have fun with Gantry Framework and Less

Read 917 times Last modified on Saturday, 05 December 2015 19:44