====== Foundation5 Theme ======

The Foundation5 theme is an unofficial VuFind theme currently maintained in a [[https://github.com/vufind-org/vufind/tree/feature/foundation5|separate branch]] of the main VuFind Git repository (see [[development:git-branches|Git Branches]] for details). It uses version 5 of the [[http://foundation.zurb.com/|Foundation]] framework.

===== SCSS =====

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 [[https://github.com/sindresorhus/grunt-sass|grunt-sass]]. All necessary code is included, all dependencies are already defined in package.json -- you only have to install [[http://gruntjs.com/getting-started|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.

===== Getting Started =====

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.