BackendPro User Guide Version 0.6.1

CSS Compression

The Asset Library comes with the ability to compress and optimise your CSS code. The plugin called CSSTidy is used to perform the actual optimisation.

That big advantage of running css compression on your asset files is it means they will be smaller thus meaning quicker to download for your users.

Note: CSS compression and optimisation does not alter your asset files on the server, it only effects the cached copies.

Requirements

  1. Turn on Asset Optimisation:

    You must turn on asset optimisation for the asset library, more details can be found on the Asset Optimisation page.

  2. Setup CSSTidy:
    1. Download the latest version of the CSSTidy plugin from the downloads page.
    2. Extract the zip contents to modules/site/plugins/csstidy/.
    3. Open the modules/site/config/bep_assets.php config file, find and set the following key (it is located near the bottom): $config['csstidy']['path'] = BASEPATH . "../modules/site/plugins/csstidy/class.csstidy.php";

Now when a user visits the website the css files will be compressed and stored.

Configuration

There are several configuration options for the CSSTidy plugin, these can be set in modules/site/config/bep_assets.php.

Preference Default Value Options Description
template highest_compression highest_compression
high_compression
low_compression
default		 The template sets what level of compression to perform on CSS files.
discard_invalid_properties FALSE bool Setting this to true will remove any invalid CSS expressions from the output.
compress_colors TRUE bool Whether to compress CSS colours to their shortest format, e.g. white goes to #fff
compress_font-weight TRUE bool Whether to compress CSS font-weights to their shortest format, e.g. bold goes to 600
lowercase_s FALSE bool Lowercase element names needed for XHTML
optimise_shorthands 1 0 - Don't
1 - Safe Optimisations
2 - All		 Compresses shorthand values. Example: margin:1px 1px 1px 1px -> margin:1px
remove_bslash TRUE bool Remove unnecessary backslashes
remove_last_; TRUE bool Removes last semi-colon. Example: a{color:red;} -> a{color:red}
case_properties 1 0 - None
1 - Lowercase
2 - Uppercase		 Case for properties
sort_properties FALSE bool Sort your CSS properties.
sort_selectors FALSE bool Sort your CSS selectors, Attention: This may change the behaviour of your CSS Code!
merge_selectors 2 0 - Do Not
1 - Only separate selectors (split at ,)
2 - Merge selectors with the same properties		 Merges selectors with same properties. Example: a{color:red} b{color:red} -> a,b{color:red}
css_level CSS2.1 CSS1.0
CSS2.0
CSS2.1		 Discard invalid properties if they do not match the selected version.
preserve_css FALSE bool Save comments, hacks, etc. Most optimisations can not be applied if this is enabled.
timestamp FALSE bool Add a timestamp to the output.