Warning: This page has not been updated in over over a year and may be outdated or deprecated.
development:architecture:less
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
development:architecture:less [2015/12/14 18:20] – ↷ Page moved and renamed from using_less to development:architecture:less demiankatz | development:architecture:less [2023/04/20 15:50] (current) – [Backup PHP Command Line Compiler (OBSOLETE/NOT RECOMMENDED)] demiankatz | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== LESS / SASS ====== |
- | VuFind' | + | [[http:// |
- | ===== Setup ===== | + | |
- | Write permission needs to be given to a new folder for LESS to work: [theme]/ | + | |
- | Configure in theme.config.php: | + | ===== LESS vs. SASS ===== |
- | " | + | |
- | " | + | |
- | " | + | |
- | ), | + | |
- | For now, every LESS theme needs a compiled.less which " | + | As of this writing, all VuFind® style development is done using LESS; SASS files are programmatically derived from the LESS files using the lessToSass [[development: |
+ | |||
+ | ===== Command Line Compilation ===== | ||
+ | |||
+ | Both Less and Sass use [[development: | ||
===== LESS Theme Inheritance ==== | ===== LESS Theme Inheritance ==== | ||
- | This is a bit tricky and is still a problem for VuFind we are especially open to for help/ | ||
- | CSS inheritance is pretty straight forward in VuFind: name your CSS file the same if you want to override the parents', | + | This is a bit tricky and is still a problem for VuFind®; we are especially open to help/ |
+ | |||
+ | CSS inheritance is pretty straight forward in VuFind®: name your CSS file the same if you want to override the parents', | ||
In order to utilize the power of imports and the power of inheritance, | In order to utilize the power of imports and the power of inheritance, | ||
** Bootstrap3 ** | ** Bootstrap3 ** | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ), | ||
- | | ||
- compiled.less (only imports bootstrap.less, | - compiled.less (only imports bootstrap.less, | ||
- @import " | - @import " | ||
Line 34: | Line 28: | ||
** Bootprint3 ** | ** Bootprint3 ** | ||
- | // No custom theme.config.php | ||
- | | ||
- compiled.less (pulled in instead of bootstrap3/ | - compiled.less (pulled in instead of bootstrap3/ | ||
- @import " | - @import " | ||
Line 45: | Line 37: | ||
- icons.less (FA icon overwrites, included in theme.config.php) | - icons.less (FA icon overwrites, included in theme.config.php) | ||
- | Make sure you have a compiled.less in your theme, as the LESS compiler | + | Make sure you have a compiled.less in your theme, as the LESS compiler |
+ | |||
+ | ===== Active Compilation (OBSOLETE/ | ||
+ | |||
+ | :!: This feature was removed in VuFind® 9.0, and its use is strongly discouraged -- the built-in PHP-based LESS compiler did not generate output consistent with the Node.js LESS compiler, and this had a high potential for causing problems. | ||
+ | |||
+ | Active compilation can be used to automatically compile from Less to CSS when a page loads. This is very useful for development. | ||
+ | |||
+ | Write permission needs to be given to a new folder for LESS to work: [theme]/ | ||
+ | |||
+ | Configure in theme.config.php: | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ), | ||
+ | |||
+ | For now, every LESS theme needs a compiled.less which " | ||
+ | |||
+ | ===== Backup PHP Command Line Compiler (OBSOLETE/ | ||
+ | |||
+ | :!: Note that the [[development: | ||
- | ===== LESS Command Line Compiler ===== | ||
php util/ | php util/ | ||
Line 55: | Line 66: | ||
---- struct data ---- | ---- struct data ---- | ||
+ | properties.Page Owner : | ||
---- | ---- | ||
development/architecture/less.txt · Last modified: 2023/04/20 15:50 by demiankatz