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:53] 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 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://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 146: Line 155:
 ====== Using LESS ====== ====== Using LESS ======
  
-Full page here: [[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 159: Line 168:
  
 ---- struct data ---- ---- struct data ----
 +properties.Page Owner : 
 ---- ----
  
installation/migration_notes/bootstrap_migration.1408982035.txt.gz · Last modified: 2014/08/25 15:53 by crhallberg