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 revisionLast revisionBoth sides next revision | ||
development:architecture:less [2021/04/27 13:49] – [Backup PHP Command Line Compiler] demiankatz | development:architecture:less [2023/03/22 18:27] – demiankatz | ||
---|---|---|---|
Line 5: | Line 5: | ||
===== LESS vs. SASS ===== | ===== LESS vs. SASS ===== | ||
- | As of this writing, all VuFind | + | As of this writing, all VuFind® |
===== Command Line Compilation ===== | ===== Command Line Compilation ===== | ||
- | Both Less and Sass use [[development: | + | Both Less and Sass use [[development: |
- | + | ||
- | ===== Active Compilation ===== | + | |
- | 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 " | + | |
===== 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 45: | 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 56: | 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: | ||
- | ===== Backup PHP Command Line Compiler ===== | ||
php util/ | php util/ | ||
This will use the Less Parser to compile your LESS into CSS files in the regular CSS folder. These can then be used as regular CSS files, but more importantly, | This will use the Less Parser to compile your LESS into CSS files in the regular CSS folder. These can then be used as regular CSS files, but more importantly, | ||
- | |||
- | :!: Note that the "grunt less" task is the preferred means of compiling LESS files for VuFind, and the older PHP compiler may produce inconsistent results in some situations. The PHP compiler is deprecated as of VuFind 8.0 and will be removed in VuFind 9.0. | ||
LESS does not have to be set to active for this to work, as long as the files you want to compile are listed under " | LESS does not have to be set to active for this to work, as long as the files you want to compile are listed under " | ||
---- struct data ---- | ---- struct data ---- | ||
+ | properties.Page Owner : | ||
---- | ---- | ||
development/architecture/less.txt · Last modified: 2023/04/20 15:50 by demiankatz