View on GitHub

Migrating from Boosted

Track and review changes to the OUDS Web source files, documentation, and components to help you migrate from Boosted to OUDS Web.

On this page

This guide provides information on how to migrate from Boosted (latest release) to OUDS Web.

Let’s start with the most obvious change you’ll notice: the name. Boosted is now OUDS Web.

  • The NPM package is now @ouds/web.
  • The CSS and JS files have been renamed:
    • boosted-grid.css → ouds-web-grid.css
    • boosted-grid.min.css → ouds-web-grid.min.css
    • boosted-reboot.css → ouds-web-reboot.css
    • boosted-reboot.min.css → ouds-web-reboot.min.css
    • boosted-utilities.css → ouds-web-utilities.css
    • boosted-utilities.min.css → ouds-web-utilities.min.css
    • boosted.css → ouds-web.css
    • boosted.min.css → ouds-web.min.css
    • boosted.bundle.js → ouds-web.bundle.js
    • boosted.bundle.min.js → ouds-web.bundle.min.js
    • boosted.esm.js → ouds-web.esm.js
    • boosted.esm.min.js → ouds-web.esm.min.js
    • boosted.js → ouds-web.js
    • boosted.min.js → ouds-web.min.js

From now on, OUDS Web won’t embed Bootstrap elements that are not part of Orange Unified Design System. However, you can still use our Bootstrap compatibility mode by using ouds-web-bootstrap.css and ouds-web-bootstrap.min.css.

Fonts

OUDS Web doesn’t use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be different depending on the operating system and browser being used.

Technically, it means that you can get rid of the following things:

  • Helvetica Neue woff2 files: fonts/HelvNeue55_W1G.woff2, fonts/HelvNeue75_W1G.woff2, fonts/HelveticaNeueW20-55Roman.woff2, and fonts/HelveticaNeueW20-75Bold.woff2.
  • orange-helvetica.*.css file (default, RTL, or minified version).
  • If you were customizing your Sass compilation, you can remove the @import "orange-helvetica"; line from your Sass files if it was there.

Components

Close button

  • Warning .btn-close-white class has been removed as it was deprecated in Boosted v5.3.3.

Forms

Checks & radios

  • Warning form-star-rating() mixin has been removed as it was deprecated in Boosted v5.3.2.

Utilities

Opacity

  • Breaking .opacity-0, .opacity-25, .opacity-50, .opacity-75 and .opacity-100 have been removed from the default build. Please check the new opacity values directly in the documentation and adapt your websites to them. You can still have them using $enable-bootstrap-compatibility.
  • New Opacity utilities: .opacity-transparent, .opacity-weaker, .opacity-weak, .opacity-medium, .opacity-emphasis and .opacity-opaque.

CSS and Sass variables

  • New $enable-bootstrap-compatibility option set to false by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode.

    • For instance, without the Bootstrap compatibility mode, you won’t have the opacity Bootstrap utilities such as opacity-0, opacity-1, opacity-50, etc. You will only have the semantic OUDS Web utilities such as opacity-transparent, opacity-weaker, opacity-weak, etc.

  • New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.

    See the new import stack 
      @import "functions";
+ @import "tokens/raw";
+ @import "tokens/semantic";
+ @import "tokens/component";
  @import "variables";
  @import "variables-dark";
  // etc
  • Warning Dropped deprecated Sass variables:
    • $boosted-prefix
    • $boosted-variable-prefix
    • $btn-close-white-active-border-color
    • $btn-close-white-active-color
    • $btn-close-white-bg
    • $btn-close-white-border-color
    • $btn-close-white-color
    • $btn-close-white-disabled-color
    • $btn-close-white-hover-color
    • $footer-nav-link-font-weight
    • $form-star-focus-box-shadow
    • $form-star-focus-color
    • $form-star-focus-color-dark
    • $form-star-focus-outline
    • $form-star-focus-outline-dark
    • $orange-filter
    • $outline-offset
    • $outline-width
    • $step-item-padding-end
    • $title-bar-border-color-dark
  • Warning Dropped deprecated CSS variables:
    • --bs-btn-close-active-border-color
    • --bs-btn-close-active-color
    • --bs-btn-close-bg
    • --bs-btn-close-border-color
    • --bs-btn-close-color
    • --bs-btn-close-disabled-color
    • --bs-btn-close-hover-color
  • New Sass variables:
    • $ouds-opacity-0
    • $ouds-opacity-100
    • $ouds-opacity-300
    • $ouds-opacity-500
    • $ouds-opacity-700
    • $ouds-opacity-900
  • New Sass maps:
    • $ouds-opacities