Twig templates are based on the new User Interface.

A new configuration option has been added in order to activate the new UI:

'usenewui' => true,

When this option is activated the index file redirects to the login page where the a list of authentication sources (excluded admin) is displayed. If no sources are found, you need to login as admin and check configuration.

It is mandatory to use a package manager (npm, yarn, bower…) in order to have dependencies organised at all times. Steps to follow:

1. Install node.js
2. Install npm (or your favourite pm)
3. Run command npm install (or equivalent for your pm) which will install all modules listed as dependencies in package.json.

New dependencies will also have to be installed via package manager.

The “resources” folder will be replaced by “assets”. In assets further distinctions are made for css, js, and rsc. Each of which may contain symbolic links to the libraries in use (lib) or the external customized files/scripts in the folder “src”. Images are handled mostly with font-awesome, but additional resources can be stored in rsc.

Purecss is the css framework in use. Follow documentation for forms, tables, grids and so on.

Adaptations and extensions of the framework are made in the new default.css (path: assets/css/src/default.css) to create the final look and feel. Focus for the layout is to be responsive for large, medium and small screens.

Examples of customised reusable classes are:

• code-box, code-box-title, code-box-content, as found in the metadata-converter twig template.
• message-box, is a grey message area, which combined with error or success can be used in different contexts.
• Adding pure-button-red to pure-button, gives a red button.

If necessary new classes should also be adapted for rtl-languages in rtl-default.css (path: assets/css/src/rtl-default.css).

At the moment contains most of the modules twigified, but not all respond to the new-ui.