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 [2017/08/02 16:07] – [Backup PHP Command Line Compiler] demiankatz | development:architecture:less [2023/04/20 15:50] (current) – [Backup PHP Command Line Compiler (OBSOLETE/NOT RECOMMENDED)] 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. | ||
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.1501690051.txt.gz · Last modified: 2017/08/02 16:07 by demiankatz