Discussion Forum

Farnsworth

Member

Registered: March 30, 2012

Posts: 13

Processing and Caching CSS and JS

Caching
BigTree provides the ability to combine, minify, and cache frequently-requested js and css assets.Setup of caching is handled in the templates/config.php file. The cache is controlled on a per-output-file basis. For example, to combine normalize.css, functions.css, and widget.css into site.css, you would set the following in config.php:

$config["css"]["files"]["site"] = array(
    "normalize.css",
    "functions.css",
    "widget.css"
);
The first parameter passed to $config tells BigTree what type of files you're caching, and to look in the appropriate directory. The second says we're outputting a file, and the third parameter specifies the filename, without the file extension. Inside the array, simply list the files you wish to combine, in the same order they should be included. The cached file can be included in your site by linking to site.css in your css directory.

LESS
To include a LESS css file, just include it in the array, with the extension .less.

$config["css"]["files"]["site"] = array(
    "styles.less"
);
BigTree determines when to update the cache files based on the source files' file-time attribute, only re-writing the cache if a source file has been modified.

Variables
Since caching is handled through PHP, an added benefit of this feature is that BigTree can evaluate php variables within the source documents. By default all cached Javascript files will have www_root replaced by the url of your website root.

Additional variables can also be evaluated in the cached files. To assign colors globally, for example, an array of colors could be created:

$config["css"]["vars"] = array(
    "colorBlack  => "000000",
    "colorWhite"  => "FFFFFF"       
);
To access them in your javascript, set the javascript vars as well.

$config["js"]["vars"] = $config["css"]["vars"];
And accessed in the CSS as JS as:

// CSS:
.black  { color: #$colorBlack; }

// jQuery
$.("#element").css( "color" , $colorWhite );
Minification
Setting $config["js"]["minify"] or $config["css"]["minify"] to true will minify the concatenated files before they are saved.

benplum

Administrator

Registered: March 30, 2012

Posts: 54

Re: Processing and Caching CSS and JS

Remember that the $config variable has be deprecated. Please use $bigtree["config"] instead.