| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| development:architecture:user_interface [2023/11/09 19:30] – 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). |
| ===== Icon Libraries ===== | ===== Icon Libraries ===== |
| |
| Some of the graphics provided with VuFind®'s themes come from the Fugue, Silk and Tango icon libraries. For more information on licensing terms and to find additional icons for use in your local customizations, see these links: | See the [[development:architecture:user_interface:icon_set|Icon Set]] page for icon-related discussion/notes. |
| | |
| * [[https://fontawesome.com/|Font Awesome]] (Font: SIL OFL 1.1 License, Icons: CC BY 4.0 License) | |
| * [[https://remixicon.com/|Remix Icons]] (Apache License, Version 2.0) | |
| * [[http://p.yusukekamiyamane.com/|Fugue]] (Copyright © Yusuke Kamiyamane) | |
| * [[https://github.com/legacy-icons/famfamfam-silk|Silk]] | |
| * [[http://damieng.com/creative/icons/silk-companion-1-icons|Silk Companion Icons]] | |
| * [[http://tango.freedesktop.org/|Tango]] | |
| | |
| See also the [[development:architecture:user_interface:icon_set|Icon Set]] page for more icon-related discussion/notes. | |
| |
| ===== Related Video ===== | ===== Related Video ===== |
