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:45] – [Sidebars] 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 77: | Line 85: | ||
The largest amount of work for the update (before new features) is the port to the new forms layout. Horizontal forms, as BS calls them (http:// | The largest amount of work for the update (before new features) is the port to the new forms layout. Horizontal forms, as BS calls them (http:// | ||
- | The old system used custom CSS, while the new system relies of the column system directly. The proper format for horizontal forms in our theme is thus: | + | The old system used custom CSS, while the new system relies of the column system directly. The proper format for horizontal forms (forms where the labels are next to and inline with their inputs) |
<form class=" | <form class=" | ||
Line 84: | Line 92: | ||
... | ... | ||
<div class=" | <div class=" | ||
- | <label class=" | + | <label class=" |
<div class=" | <div class=" | ||
- | < | + | < |
</ | </ | ||
</ | </ | ||
Line 102: | Line 110: | ||
===== Font Awesome Update ===== | ===== Font Awesome Update ===== | ||
- | This update was a bit annoying, but a regex solved it. Font Awesome (which provides Bootstraps icons) switched from classes of " | + | This update was a bit annoying, but a regex solved it. Font Awesome (which provides Bootstraps icons) switched from classes of " |
- | * -remove to -delete | + | |
+ | |||
+ | Run just the grep part first to make sure you don't catch anything you don't mean to. | ||
+ | |||
+ | There are also a few icons that were renamed and I'll add them here as I find them. | ||
+ | |||
+ | | ||
* -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 140: | 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 150: | 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.txt · Last modified: 2015/12/14 18:25 by demiankatz