CSS Processor · BigTree CMS

BigTree comes with a built in CSS preprocessor with support for variables and automatic vendor prefixing of certain CSS3 properties. BigTree also supports the LESS preprocessor.

Creating Processed CSS Files

To create a processed CSS file you'll need to add arrays to your configuration variable. In the below example, we're going to create http://www.website.com/css/site.css by including reset.css, master.less, and ie.css

$bigtree["config"]["css"]["files"]["site"] = array(
	"reset.css",
	"master.less",
	"ie.css"
);

For this example, site.css will first include reset.css, then a LESS processed master.less, and then ie.css at the bottom of the file. If any of the files changes, the cache will be destroyed and users will be served a new copy. Variables are processed after vendor prefixing and LESS processing.

Configuration Settings

To turn on automatic CSS3 Vendor Prefixing, set $bigtree["config"]["css"]["prefix"] in your /templates/config.php file to true. This setting defaults to false.

To turn on CSS minifying, set $bigtree["config"]["css"]["minify"] in your /templates/config.php file to true. This setting defaults to false.

Variables

Variables are used in CSS just like they are used in PHP through the $ indicator. Let's take the following bit of CSS as an example:

.box1 { color: $red; width: $box_width; }

Now, to provide the values to your CSS, we will edit /templates/config.php with the following code (the array should exist in the default config, just add the keys you need).

$bigtree["config"]["css"]["vars"] = array(
	"red" => "#CC0000",
	"box_width" => "100px"
);

CSS3 Vendor Prefixing

BigTree supports automatic vendor prefixing for certain CSS3 properties:

background-gradient: — this property isn't standard CSS but rather a quick way to set a gradient background. Accepts two parameters with the first being the top color and the second being the bottom color. (supports IE, Firefox, Safari, Chrome)
border-radius, box-shadow, column-count, column-rule, column-gap, transition, user-select: All automatically are converted into -o, -ms, -moz, and -webkit prefixes along with the non-prefixed version.

LESS Processing

To process a file as LESS, simply name the file .less instead of .css and include it in a CSS processing list. LESS processing overrules the CSS3 Vendor Prefixing feature, you must use one or the other.