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 revisionNext revisionBoth sides next revision | ||
development:architecture:less [2016/12/21 20:41] – [Command Line Compilation] crhallberg | development:architecture:less [2022/10/21 15:37] – demiankatz | ||
---|---|---|---|
Line 2: | Line 2: | ||
[[http:// | [[http:// | ||
+ | |||
+ | ===== LESS vs. SASS ===== | ||
+ | |||
+ | 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 ===== | ===== Command Line Compilation ===== | ||
Line 8: | Line 12: | ||
===== Active Compilation ===== | ===== Active Compilation ===== | ||
+ | |||
+ | :!: 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 command-line Grunt-driven 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. | Active compilation can be used to automatically compile from Less to CSS when a page loads. This is very useful for development. | ||
Line 21: | Line 28: | ||
===== 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 41: | Line 44: | ||
** Bootprint3 ** | ** Bootprint3 ** | ||
- | // No custom theme.config.php | ||
- | | ||
- compiled.less (pulled in instead of bootstrap3/ | - compiled.less (pulled in instead of bootstrap3/ | ||
- @import " | - @import " | ||
Line 52: | Line 53: | ||
- 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 |
===== Backup PHP Command Line Compiler ===== | ===== Backup PHP Command Line Compiler ===== | ||
+ | |||
+ | :!: 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 was removed in VuFind® 9.0. | ||
+ | |||
php util/ | php util/ | ||
Line 62: | Line 66: | ||
---- struct data ---- | ---- struct data ---- | ||
+ | properties.Page Owner : | ||
---- | ---- | ||
development/architecture/less.txt · Last modified: 2023/04/20 15:50 by demiankatz