VuFind's bootstrap3 and bootprint3 themes use LESS to compile CSS styles. LESS offers some advantages over pure CSS, since it offers some advanced time-saving features. However, because it has to be compiled to be used, it also adds some extra steps for the developer. This page offers some useful background information and notes on VuFind's use of LESS.

Write permission needs to be given to a new folder for LESS to work: [theme]/css/less/

Configure in theme.config.php:

"less" => array(
  "active" => true/false,
  "compiled.less"
),

For now, every LESS theme needs a compiled.less which “@import”s a custom theme.less or a parent.less.

This is a bit tricky and is still a problem for VuFind we are especially open to for help/suggestions.

CSS inheritance is pretty straight forward in VuFind: name your CSS file the same if you want to override the parents', different if you want to extend. In LESS, you can import other files into your stylings, which is INSANELY useful for things like the Bootstrap library because of all the variables. Being able to use those variables to color and size things correctly is crucial.

In order to utilize the power of imports and the power of inheritance, here's what's going on in the Bootstrap 3 and Bootprint 3 themes.

Bootstrap3

'less' => array(
  'active' => false,
  'compiled.less'
),

- compiled.less (only imports bootstrap.less, included in theme.config.php)
  - @import "bootstrap";
- bootstrap.less (contains all customizations, ala bootstrap-custom in Bootstrap2)
  - @import "bootstrap/bootstrap";
  - @import "a11y";
- a11y.less (Accessibility theme, changes variables for color/padding, high contrast hovers, .sr-only class)

Bootprint3

// No custom theme.config.php

- compiled.less (pulled in instead of bootstrap3/compiled.less, due to inheritance)
  - @import "bootprint";
- bootprint.less (contains all custom stylings for Bootprint 3, ala bootprint-custom in Bootprint2)
  - @import "bootstrap"; <- parent theme.less
  - @import "variables";
  - @import "icons";
- variables.less (tweaking of Bootstrap variables, imported into bootprint.less)
- icons.less (FA icon overwrites, included in theme.config.php)

Make sure you have a compiled.less in your theme, as the LESS compiler was not keen on pulling from parent themes. Also, doing so will prevent mulitple Bootstrap instances from being compiled into your final CSS.

php util/cssBuilder.php

This will use the Less Parser to compile your LESS into CSS files in the regular CSS folder. These can then be used as regular CSS files, but more importantly, these will be used as fall-back in case of a LESS parser error. So compile regularly!

LESS does not have to be set to active for this to work, as long as the files you want to compile are listed under “less” in theme.config.php.