Warning: This page has not been updated in over over a year and may be outdated or deprecated.
installation:migration_notes:bootstrap_migration
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
bootstrap_migration [2014/08/25 15:51] – [Font Awesome Update] crhallberg | installation:migration_notes:bootstrap_migration [2015/12/14 18:25] (current) – [Using LESS] demiankatz | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Bootstrap 2.x to 3.x Migration ====== | ====== Bootstrap 2.x to 3.x Migration ====== | ||
+ | When the experimental " | ||
===== Column System Update ===== | ===== Column System Update ===== | ||
The most sweeping update was the change in the column system. There was a move from " | The most sweeping update was the change in the column system. There was a move from " | ||
- | First step towards BS3 is a regex to switch all the columns from " | + | First step towards BS3 is a regex to switch all the columns from " |
+ | |||
+ | $ cd themes/< | ||
+ | $ find . -type f -print0 | xargs -0 sed -i -r ' | ||
There are a few " | There are a few " | ||
Line 10: | Line 14: | ||
In addition, the " | In addition, the " | ||
+ | <span class=" | ||
+ | <span class=" | ||
+ | <div class=" | ||
+ | | ||
Each size takes effect at a certain screen width, and we strongly encourage leveraging these classes, and using these sizes in your templates. | Each size takes effect at a certain screen width, and we strongly encourage leveraging these classes, and using these sizes in your templates. | ||
Line 110: | Line 118: | ||
There are also a few icons that were renamed and I'll add them here as I find them. | There are also a few icons that were renamed and I'll add them here as I find them. | ||
- | * -remove to -delete | + | * -remove to -times (though it appears -remove was kept as an alias) |
* -trash to -trash-o | * -trash to -trash-o | ||
* -signin to -sign-in | * -signin to -sign-in | ||
* -signout to -sign-out | * -signout to -sign-out | ||
+ | * -ok to -check | ||
A full list of icon changes can be found here: [[https:// | A full list of icon changes can be found here: [[https:// | ||
Line 146: | Line 155: | ||
====== Using LESS ====== | ====== Using LESS ====== | ||
+ | See [[development: | ||
===== Setup ===== | ===== Setup ===== | ||
Write permission needs to be given to a new folder for LESS to work: [theme]/ | Write permission needs to be given to a new folder for LESS to work: [theme]/ | ||
Line 156: | Line 166: | ||
For now, every LESS theme needs a compiled.less which " | For now, every LESS theme needs a compiled.less which " | ||
- | |||
- | ===== 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', | ||
- | |||
- | In order to utilize the power of imports and the power of inheritance, | ||
- | |||
- | ** Bootstrap3 ** | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ), | ||
- | | ||
- | - compiled.less (only imports bootstrap.less, | ||
- | - @import " | ||
- | - bootstrap.less (contains all customizations, | ||
- | - @import " | ||
- | - @import " | ||
- | - a11y.less (Accessibility theme, changes variables for color/ | ||
- | |||
- | ** Bootprint3 ** | ||
- | // No custom theme.config.php | ||
- | | ||
- | - compiled.less (pulled in instead of bootstrap3/ | ||
- | - @import " | ||
- | - bootprint.less (contains all custom stylings for Bootprint 3, ala bootprint-custom in Bootprint2) | ||
- | - @import " | ||
- | - @import " | ||
- | - @import " | ||
- | - variables.less (tweaking of Bootstrap variables, imported into bootprint.less) | ||
- | - icons.less (FA icon overwrites, included in theme.config.php) | ||
- | |||
- | Make sure you have a compiled.less in your theme, as the LESS compiler was not keen on pulling from parent themes. Also, doing so will prevent mulitple Bootstrap instances from being compiled into your final CSS. | ||
- | |||
- | ===== LESS Command Line Compiler ===== | ||
- | 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, | ||
- | |||
- | 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 : | ||
---- | ---- | ||
installation/migration_notes/bootstrap_migration.1408981903.txt.gz · Last modified: 2014/08/25 15:51 by crhallberg