The Foundation5 theme is an unofficial VuFind theme currently maintained in a separate branch of the main VuFind Git repository (see Git Branches for details). It uses version 5 of the Foundation framework.

The most obvious difference between Foundation5 and the current LESS-driven Bootstrap3 theme is the reorganization of the SCSS inheritance resulting in the need to (ideally) have the theme-specific css files compiled with grunt-sass. All necessary code is included, all dependencies are already defined in package.json – you only have to install grunt-cli globally on your host and run 'npm install' from inside the vufind2 installation folder to install all dependencies from packages.json. Finally run 'grunt' in the root of the feature branch.

The easiest way to customize the Foundation5 theme is to create a new theme which extends the Foundation5 theme. This is done by adding

 'extends' => 'foundation5',

in your theme's theme.config.php.

The next step is to import the foundation5 theme's scss/default.scss into newly created theme's scss/default.scss file. This can be done inserting the line:

 @import "../../foundation5/scss/default"; into your theme's scss/default.scss.

Any style adjustments should then be made in your theme's scss/default.scss only.

Finally run grunt to have the css/default.css compiled for your newly created theme and reload the page.

For your convenience we have added the theme 'example' which inherits from the foundation5 theme and provides a basic scss/default.scss including some comments to get you started.