View on GitHub

Migrating to Boosted v4

Boosted 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.

In addition to booststrap migration notes, here is what to keep in mind while migrating from boosted v3 to v4.

Javascript dependencies

File popper.js is an external dependency used by tooltip component. If not included, tooltip won’t work. On top of that, if the file is not included while not using any tooltip, an error will still be logged. You can either include the dependency minding you may use a tooltip later on, or rebuild boosted javascript excluding the tooltip.js file from javascript plugins.

All navbars, including local and mega menu will be collapsed. Active element used to be set on <li> tag and will be on the <a> as a general rule.

<ul> <li> pattern is longer necessary (but still recommended). Elements in navbars are now identified with classes .nav-item and .nav-link.

Class .navbar-inverse is changed to .navbar-dark and .navbar-light. Please note that .navbar-light will render exactly the same as .navbar-dark since it’s the only one allowed in orange brand guidelines at the moment.

Class .navbar-toggle is now .navbar-toggler and can be put directly inside a <button> tag. Use classes .d-none d-${BP}-block to specify wether it should be displayed or not at which breakpoint.

For more information please check the new navbar for documentation and examples.

Local nav

In addition to new navbar classes and semantic, arrows elements are now to be put inside the <a> tag.

Megamenu

Megamenu has been reworked based on the collapse and navbar components. See documentation and examples.

Forms

Dropped the .horizontal-formclass. Each row of form is now contained in a .form group section with a .row class.

Class .control-labelis now .col-form-label.

Orange switches update: add a class .o-switch to .form-group element when you want to use custom toggles

Dropped .o-checkbox and .o-radio, now using native custom form components.

For more information please check the new forms documentation and examples.

Rename the .skiplinks_section class to .skiplinks-section. Rename the .skiplinks_show class to .skiplinks-show. Replace the .axs_hide class by .sr-only native class included into Bootstrap.

Font icons

Rename all the class containing _ to -.

Step bar

Class names and semantic changed, see Orange stepbar for documentation and examples.

Badge

badge-default have been replace by badge-dark.

Accordions

Accordions are now based on card structure. Be sure to use .card-header and .card-body on the main container. To get multiple openable behaviour just add .multi class on each .card item.

Tablesorter

Tablesorter add a template on tablesorter header, need to be added separatly by each project.

$("#myTable").tablesorter({
  ....
  // manipulate the template string after is it created
  onRenderTemplate : function(i, t){
    // put a span arround the text
    return '<span>' + t + '</span>';
  }
});