CSS Pre-processor for Evance Themes

This documentation has been written for using Evance's CSS Pre-processor and is not intended as a guide to CSS. 

Evance's CSS Pre-processor works in conjunction with CSS Crush and the config/style.json configuration file. Properties within the style.json file are fed into the CSS Pre-processor as Variables

Loading CSS

Loading CSS files into your templates is done via one of the following methods, or any combination depending on the complexity of your theme. 

Automatic CSS loading

Automatically

Evance automatically loads CSS files into the head of your document at render time when following the naming conventions for theme File Structure. You should not need to manually declare the CSS files for your theme within the <head> of your layouts unless you wish to load an external resource. 

Learn about File Structure.

Manual CSS loading

Manually

It is possible to share CSS files across multiple templates or to load CSS files into your page manually (e.g. if a page setting is met you may wish to load an applicable CSS file). You can do this using the <ev:css> tag, which may be added anywhere within your template files, or before the layout.header declaration in your layout files. 

Read about the <ev:css> tag.

CSS inventory files

Inventory Files

If you have a set of CSS files that you commonly use in your websites, such as a reset.css file, then you can include these into your site in their raw form. CSS Inventory Files are JSON files that allow you to combine multiple files into a single minified source file. 

Learn about inventory files.