| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| development:architecture:user_interface [2023/11/09 19:32] – [Icon Libraries] demiankatz | development:architecture:user_interface [2024/04/24 18:14] (current) – [Technical Background] emaijala |
|---|
| ===== Technical Background ===== | ===== Technical Background ===== |
| |
| VuFind® is developed using PHP templates for HTML and [[development:architecture:less|LESS]] / CSS for design. Templates and CSS are bundled into themes, which are found in the themes folder under VuFind®'s home directory. | VuFind® is developed using PHP templates for HTML and [[development:architecture:less|LESS / SASS]] / CSS for design. Templates and CSS are bundled into themes, which are found in the themes folder under VuFind®'s home directory. |
| |
| Starting with release 2.4, VuFind®'s default theme (bootprint3) uses the [[http://getbootstrap.com/|Bootstrap]] library (version 3) for layout. Earlier versions had a different default theme (blueprint) using the [[http://www.blueprintcss.org/|Blueprint CSS]] library. The default mobile theme (jquerymobile) was built with the [[http://jquerymobile.com/|jquerymobile]] library, but it was discontinued starting with VuFind® 4.0. Many basic design elements (such as colors and font sizes) can be customized through small CSS modifications, even if you do not have a detailed understanding of these frameworks. | Starting with release 2.4, VuFind®'s default theme (bootprint3) uses the [[http://getbootstrap.com/|Bootstrap]] library (version 3) for layout. Earlier versions had a different default theme (blueprint) using the [[http://www.blueprintcss.org/|Blueprint CSS]] library. The default mobile theme (jquerymobile) was built with the [[http://jquerymobile.com/|jquerymobile]] library, but it was discontinued starting with VuFind® 4.0. Many basic design elements (such as colors and font sizes) can be customized through small CSS modifications, even if you do not have a detailed understanding of these frameworks. |
| * js - This directory contains Javascript files. All files within this directory can be accessed through the web server thanks to a rewrite rule in VuFind®'s Apache configuration. | * js - This directory contains Javascript files. All files within this directory can be accessed through the web server thanks to a rewrite rule in VuFind®'s Apache configuration. |
| * languages - This optional directory (supported starting in VuFind® 2.5) can contain custom [[development:architecture:localization|language files]] to override strings on a per-theme basis. | * languages - This optional directory (supported starting in VuFind® 2.5) can contain custom [[development:architecture:localization|language files]] to override strings on a per-theme basis. |
| * less - This directory contains [[development:architecture:less|LESS]] files, often used to generate a compiled.css file in the css file. | * less - This directory contains [[development:architecture:less|LESS]] files, often used to generate a compiled.css file in the css directory (unless the theme only supports SASS; see below). |
| * scss - This directory contains SASS files, made available as an alternative to [[development:architecture:less|LESS]] files for developers who prefer the SASS technology. | * scss - This directory contains SASS files, made available as an alternative to [[development:architecture:less|LESS]] files for developers who prefer the SASS technology. |
| * templates - This directory contains PHP templates for rendering all of VuFind®'s pages. Most of these templates are named to correspond with controller actions within the VuFind® application, though there are also some plugin-specific directories (i.e. Recommend, RecordDriver) and top-level layout pieces (layout/layout.phtml, header.phtml, footer.phtml). | * templates - This directory contains PHP templates for rendering all of VuFind®'s pages. Most of these templates are named to correspond with controller actions within the VuFind® application, though there are also some plugin-specific directories (i.e. Recommend, RecordDriver) and top-level layout pieces (layout/layout.phtml, header.phtml, footer.phtml). |
