About Features Downloads Getting Started Documentation Events Support GitHub

Love VuFind®? Consider becoming a financial supporter. Your support helps build a better VuFind®!

Site Tools


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.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
bootstrap_migration [2014/08/25 15:45] – [Obsolete CSS classes] crhallberginstallation: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 "bootstrap" theme was replaced with the stable "bootstrap3" theme, we moved to a newer version of the Bootstrap CSS framework, which introduced substantial changes. This page is designed to help users who built local customizations on top of "bootstrap" to migrate over to "bootstrap3."
  
 ===== Column System Update ===== ===== Column System Update =====
 The most sweeping update was the change in the column system. There was a move from "spanx" columns to a "col-size-x", allowing different layouts at different widths. VuFind uses 'col-sm-x" because it maintains the layout down to and including the tablet size, before resizing for mobile. The most sweeping update was the change in the column system. There was a move from "spanx" columns to a "col-size-x", allowing different layouts at different widths. VuFind uses 'col-sm-x" because it maintains the layout down to and including the tablet size, before resizing for mobile.
  
-First step towards BS3 is a regex to switch all the columns from "spanx" to "col-sm-x". There are a few places where the span value was set programmatically, such as TopFacets and Combined search, that will need to be fixed by hand.+First step towards BS3 is a regex to switch all the columns from "spanx" to "col-sm-x". There are a few places where the span value was set programmatically, such as TopFacets and Combined search, that will need to be fixed by hand. (The below worked for me (Anna); your mileage may vary) 
 + 
 +  $ cd themes/<mytheme>/templates 
 +  $ find . -type f -print0 | xargs -0 sed -i -r 's/span([0-9]+)/col-sm-\1/g'
  
 There are a few "offsetx" classes in Bootstrap, but these were/will get replaced with the form overhaul. There are a few "offsetx" classes in Bootstrap, but these were/will get replaced with the form overhaul.
Line 10: Line 14:
 In addition, the "visible-" and "hidden-" helper classes were changed to their xs/sm/md/lg equivalents. In addition, the "visible-" and "hidden-" helper classes were changed to their xs/sm/md/lg equivalents.
  
 +  <span class="visible-xs">This message is only visible on phones</span>
 +  <span class="visible-sm visible-xs">You're carrying your computer right now, aren't you?</span>
 +  <div class="hidden-lg">We don't need this on very large monitors.</div>  
 +  
 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 73: Line 81:
     </div>     </div>
   </ul>   </ul>
- 
-I need to make sure this is consistent everywhere. 
  
 ===== New Forms ===== ===== New Forms =====
 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://getbootstrap.com/css/#forms-horizontal), are forms where the labels are to the left of the input, a bunch of these pairs in a list. 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://getbootstrap.com/css/#forms-horizontal), are forms where the labels are to the left of the input, a bunch of these pairs in a list.
  
-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) is thus:
  
   <form class="form-horizontal">   <form class="form-horizontal">
Line 86: Line 92:
     ...     ...
     <div class="form-group">     <div class="form-group">
-      <label class="col-sm-2 control-label"></label>+      <label class="col-sm-2 control-label">Your Label Here</label>
       <div class="col-sm-10">       <div class="col-sm-10">
-        <input/> or <select> or <p class="form-control-static">Set value</p>+        <input/> or <select> or <p class="form-control-static">static value</p>
       </div>       </div>
     </div>     </div>
Line 104: 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 "icon-thing" to "fa fa-thing". Regex for class="icon- to class="fa fa- does 95% of the work. There are also a few icons that were renamed and I'll add them here as I find them.+This update was a bit annoying, but a regex solved it. Font Awesome (which provides Bootstraps icons) switched from classes of "icon-thing" to "fa fa-thing". Regex for class="icon- to class="fa fa- does 95% of the work. If your custom JS or CSS uses classes, make sure you update your icons there too. did something like:
  
-  * -remove to -delete+  grep -rl 'class="icon-' themes/yourtheme/templates | xargs sed -i 's/class="icon-/class="fa fa-/g' 
 +   
 +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. 
 + 
 +  * -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://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4]] A full list of icon changes can be found here: [[https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4]]
Line 142: Line 155:
 ====== Using LESS ====== ====== Using LESS ======
  
 +See [[development:architecture:less|Using LESS]] for background information.
 ===== Setup ===== ===== Setup =====
 Write permission needs to be given to a new folder for LESS to work: [theme]/css/less/ Write permission needs to be given to a new folder for LESS to work: [theme]/css/less/
Line 152: Line 166:
  
 For now, every LESS theme needs a compiled.less which "@import"s a custom theme.less or a parent.less. For now, every LESS theme needs a compiled.less which "@import"s a custom theme.less or a parent.less.
- 
-===== LESS Theme Inheritance ==== 
-This is a bit tricky and is still a problem for VuFind we are especially open to for help/suggestions. 
- 
-CSS inheritance is pretty straight forward in VuFind: name your CSS file the same if you want to override the parents', different if you want to extend. In LESS, you can import other files into your stylings, which is INSANELY useful for things like the Bootstrap library because of all the variables. Being able to use those variables to color and size things correctly is crucial. 
- 
-In order to utilize the power of imports and the power of inheritance, here's what's going on in the Bootstrap 3 and Bootprint 3 themes. 
- 
-** Bootstrap3 ** 
-  'less' => array( 
-    'active' => false, 
-    'compiled.less' 
-  ), 
-   
-  - compiled.less (only imports bootstrap.less, included in theme.config.php) 
-    - @import "bootstrap"; 
-  - bootstrap.less (contains all customizations, ala bootstrap-custom in Bootstrap2) 
-    - @import "bootstrap/bootstrap"; 
-    - @import "a11y"; 
-  - a11y.less (Accessibility theme, changes variables for color/padding, high contrast hovers, .sr-only class) 
- 
-** Bootprint3 ** 
-  // No custom theme.config.php 
-   
-  - compiled.less (pulled in instead of bootstrap3/compiled.less, due to inheritance) 
-    - @import "bootprint"; 
-  - bootprint.less (contains all custom stylings for Bootprint 3, ala bootprint-custom in Bootprint2) 
-    - @import "bootstrap"; <- parent theme.less 
-    - @import "variables"; 
-    - @import "icons"; 
-  - 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/cssBuilder.php 
- 
-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, these will be used as fall-back in case of a LESS parser error. So compile regularly! 
- 
-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" in theme.config.php. 
  
 ---- struct data ---- ---- struct data ----
 +properties.Page Owner : 
 ---- ----
  
installation/migration_notes/bootstrap_migration.1408981529.txt.gz · Last modified: 2014/08/25 15:45 by crhallberg