orange-opensource / orange-boosted-bootstrap

Orange Boosted is an accessible, ergonomic and Orange branded framework based on Bootstrap

Boosted

Boosted is a fork of Bootstrap. Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.
Visit Boosted

Report bug · Request feature

Table of contents

• Quick start
• Status
• What's included
• Bugs and feature requests
• Documentation
• Contributing
• Versioning
• Creators
• Thanks
• Copyright and license

Quick start

Several quick start options are available:

• Download the latest release
• Clone the repo: git clone https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap.git
• Install with npm: npm install [email protected]
• Install with yarn: yarn add [email protected]
• Install with Composer: composer require Orange-OpenSource/Orange-Boosted-Bootstrap:5.3.3
• Install with NuGet: CSS: Install-Package boosted Sass: Install-Package boosted.sass

Read the Getting started page for information on the framework contents, templates, examples, and more.

Status

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

Download contents

boosted/
├── css/
│   ├── boosted-grid.css
│   ├── boosted-grid.css.map
│   ├── boosted-grid.min.css
│   ├── boosted-grid.min.css.map
│   ├── boosted-grid.rtl.css
│   ├── boosted-grid.rtl.css.map
│   ├── boosted-grid.rtl.min.css
│   ├── boosted-grid.rtl.min.css.map
│   ├── boosted-reboot.css
│   ├── boosted-reboot.css.map
│   ├── boosted-reboot.min.css
│   ├── boosted-reboot.min.css.map
│   ├── boosted-reboot.rtl.css
│   ├── boosted-reboot.rtl.css.map
│   ├── boosted-reboot.rtl.min.css
│   ├── boosted-reboot.rtl.min.css.map
│   ├── boosted-utilities.css
│   ├── boosted-utilities.css.map
│   ├── boosted-utilities.min.css
│   ├── boosted-utilities.min.css.map
│   ├── boosted-utilities.rtl.css
│   ├── boosted-utilities.rtl.css.map
│   ├── boosted-utilities.rtl.min.css
│   ├── boosted-utilities.rtl.min.css.map
│   ├── boosted.css
│   ├── boosted.css.map
│   ├── boosted.min.css
│   ├── boosted.min.css.map
│   ├── boosted.rtl.css
│   ├── boosted.rtl.css.map
│   ├── boosted.rtl.min.css
│   └── boosted.rtl.min.css.map
└── js/
    ├── boosted.bundle.js
    ├── boosted.bundle.js.map
    ├── boosted.bundle.min.js
    ├── boosted.bundle.min.js.map
    ├── boosted.esm.js
    ├── boosted.esm.js.map
    ├── boosted.esm.min.js
    ├── boosted.esm.min.js.map
    ├── boosted.js
    ├── boosted.js.map
    ├── boosted.min.js
    └── boosted.min.js.map

We provide compiled CSS and JS (boosted.*), as well as compiled and minified CSS and JS (boosted.min.*). Source maps (boosted.*.map) are available for use with certain browsers' developer tools. Bundled JS files (boosted.bundle.js and minified boosted.bundle.min.js) include Popper.

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

Boosted's documentation, included in this repo in the root directory, is built with Hugo and publicly hosted on GitHub Pages at https://boosted.orange.com/. The docs may also be run locally.

Documentation search is powered by Algolia's DocSearch.

Running documentation locally

1. Run npm install to install the Node.js dependencies, including Hugo (the site builder).
2. Run npm run test (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. From the root /boosted directory, run npm run docs-serve in the command line.
4. Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Documentation for previous releases

You can find all our previous releases docs on https://boosted.orange.com/docs/versions/.

Previous releases and their documentation are also available for download.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the Code Guide, maintained by Mark Otto.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Boosted is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we adhere to those rules whenever possible.

See the Releases section of our GitHub project for changelogs for each release version of Boosted.

Our default branch is for development of our Boosted 5 release. Head to the v4-dev branch to view the readme, documentation, and source code for Boosted 4.

Creators

Bootstrap

Mark Otto

• https://twitter.com/mdo
• https://github.com/mdo

Jacob Thornton

• https://twitter.com/fat
• https://github.com/fat

Thanks

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!

Thanks to Netlify for providing us with Deploy Previews!

Copyright and license

Code and documentation copyright 2011-2024 the Bootstrap Authors. Code released under the MIT License. Docs released under Creative Commons.

Boosted code and documentation copyright 2015-2024 the Boosted Authors and Orange SA. Code released under the MIT License. Docs released under Creative Commons.

orange-boosted-bootstrap's Issues

[SCSS][IE8] IE8_font-size2015 contains non SASS/SCSS code and does not compile

Hello,

When compiling the SCSS IE8 part of Boosted, this file (app/scss/bootstrap/_IE8_font-size2015.scss) does not compile correctly. Here is the stack trace:

Error: Invalid CSS after "...lement-height) ": expected "{", was "when not(ispixe..."
        on line 184 of C:/myproject/target/generated-sources/scss/bootstrap/_IE8_font-size2015.scss
        from line 56 of C:/myproject/target/generated-sources/scss/bootstrap/_bootstrap-orangeIE82015.scss

179: 
180: 
181: @mixin navbar-vertical-align($element-height) {
182:     margin-top: (($navbar-height - ($navbar-padding-vertical + $element-height)));
183: }
184: @mixin navbar-toggle-vertical-align($element-height) when not(ispixel($element-height)) {
185:     margin-top: (($navbar-height - (((unit($element-height))*10))));
186:     margin-bottom: 10px;
187: }

This seems to be caused by less specific code being in SASS/SCSS file (ispixel, when not).

A temporary workaround is to replace the mixin by this:

@mixin navbar-toggle-vertical-align($element-height) {
    $currentUnit: str-slice(inspect($element-height), str-length(inspect($element-height)) - 2, str-length(inspect($element-height)));
    @if $currentUnit == em {
        margin-top: (($navbar-height - (((unit($element-height))*10))));
        margin-bottom: 10px;
    }
}

Thank you.

CustomSCSS

Variable in _custom.scss must be suffix by !default.
Because we need to override all variable in _custom.scss

[BUG][V3.3.2][IE] Font-face HelvNeueOrange always bold

The order of declaration bold and normal must be inversed for IE.

Focus is invisible in navbar with white background

Either you assume black background as a default (meaning no need for .navbar-inverse) or you only apply a white outline when navbar is inverse.

But for now I need to override the outline by myself, using:

.navbar-brand:focus,
.navbar-nav .nav-link:focus {
  outline-color: $black;
}

Contextual background lost color

http://boosted.orange.com/css/#helper-classes-backgrounds

Contextual background are missing color

[SCSS] icon-font-path variable in boostedIcons

Hello,

In https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/master/app/scss/bootstrap/_boostedIcons.scss#L5 the $icon-font-path variable is not set correctly for the 'boosted' font, and it is not correctly compiled.

The cause in my opinion is that it is inside a string, and thus, it should have brackets as follows:

@at-root {
  @font-face {
  	font-family: 'boosted';
  	src:url('#{$icon-font-path}boosted.eot');
  	src:url('#{$icon-font-path}boosted.eot?#iefix') format('embedded-opentype'),
  		url('#{$icon-font-path}boosted.ttf') format('truetype'),
  		url('#{$icon-font-path}boosted.woff') format('woff'),
  		url('#{$icon-font-path}boosted.svg?#boosted') format('svg');
  	font-weight: normal;
  	font-style: normal;
  }
}

Thank you.

Dropdown closes when I click on the scrollbar (IE8/11)

Two bugs are detected with boost 3.0.2 and boosted 3.3.0 for dropdowns.

We use a dropdown with many items. We defined a height for the "ul" tag. Thus, a scrollbar is used.

Issues :

• The focus is still set on the first element and hover element instead of only being set on the hover element. (Usual behavior Bootstrap dropdowns and traditional select boxes) (IE, Chrome - not tested on Firefox)
  
• The dropdown is closed when a click is done on a scollbar (IE only)
  No issue when we use the mouse wheel. I guess there is a loss focus problem for this bug when we click on the scrollbar on IE as shawn on the image below
  

Could you please quickly provide us a solution for these two bugs?

Thank you.

dropdown - autofocus first element incompatible with mouse over

http://boosted.orange.com/components/#btn-dropdowns

Auto-focus first list element for keyboard user is good, but this selected element need to be update when user is browsing with mouse.

2 way for fixing : best way is to have hover/focus state (use the same color as buttons), low cost solution is to manage selected element both with mouse over and keyboard selection

role="tab" should be direct children of role="tablist"

At least that's what aXe says :)

I'm using Boosted V4 alpha 5 but the same markup is used in alpha 6.

I can't see in any specification telling it should be direct child but they say it should whether be children or aria-owned by tablist.

Not quite sure of what to do with this… Maybe programmatically populate an aria-owns attribute on tablist?

orange supra-bar disapear on mobile display

http://boosted.orange.com/v4-alpha/components/navbar-orange/#supra-bar

Supra-bar need to be visible onto mobile devices

boosted-rtl add a section into the getting started section

Add a section how to use boosted-rtl like http://boosted.orange.com/v4-alpha/getting-started/boosted-rtl

Linked to issue #10

Helvetica ttf fonts don't seem valid

When trying to open:
HelvNeue55_W1G.ttf and HelvNeue75_W1G.ttf in windows preview an error message: "Not a valid font file".
This does not happen with others *.ttf of the project.

Base-level rules connot contains the parent-selector the parent-selector-referencing character '&'

Hello,

I am using boosted v4-alpha.6.
I'm trying to use boosted theme including the boosted.scss into my main scss file.

On compiling i got an issue in the file node_modules/boosted/scss/_o-buttons.scss:272.

It seems that there is a '&' without parent at the end of this file.
Not sure if it's an issue or if i do something wrong

Add meta name="theme-color"

Like GitHub make for Chrome on Android, add a meta

To provide a better experience on Orange Themes
https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/

[SCSS] Tooltip styles not present when compile SASS files

When compiling the sass files present at https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/tree/master/app/scss, the tooltip styles are not present in the resulting CSS.

This is because these styles are not present in the following file: https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/master/app/scss/bootstrap/_tooltip.scss

Example of missing styles:

• .tooltip-arrow
• .top
• .top-left
• ..

Thank you.

Fail to install by Composer

[RuntimeException]
Could not load package orange-opensource/orange-boosted-bootstrap in http://packagist.org: [Un
expectedValueException] Could not parse version constraint v4.0.0-alpha.3.1: Invalid version s
tring "v4.0.0-alpha.3.1"

<Component> is transitioning

Hello,

We are waiting for this fix to be merged on Bootstrap, so i'm opening a ticket on Boosted to know if it can be merged after and to know the version of Boosted with the correction.

Have a good day,
Corentin

Stepbar svg z-index higher than dropdown

[email protected]

It seems to be fixable by setting a lower z-index on the after selector.

input-sm font size is too big

On inputs and selects, the font exceed the field height: (screenshots from the docs)

doc - toggle : add a warning on toggles to explain how to customize sizes

http://boosted.orange.com/components/#toggles

For rounded toggles, add a warning to explain that user need to create a dedicated classe to customize the width depending onto the content

stepbar : error on the last element if the current

stepbar : there is an error on the last element if the current and the screen size is less than 980px .
The arrow appears and the background is too small.

to easily solve :

.o-stepbar .stepbar-item.current:last-child::after {
    display: none;
}

@media (min-width: 768px) and (max-width: 980px) {
    .o-stepbar .stepbar-item.current:last-child {
        width: inherit;
        padding: 1.2rem 1rem 1.2rem 2.6rem;
    }
}

![capture2](https://cloud.githubusercontent.com/assets/4937742/18556613/3097d9a2-7b6c-11e6-95de-66d091c6f26a.PNG)
![capture1](https://cloud.githubusercontent.com/assets/4937742/18556614/309a9426-7b6c-11e6-9d88-b009a5ae240f.PNG)

pull back link with arrow from V3

Following the feature onto v3, adding a class for link with arrow
7dcc589

Need to implement it onto V4

figcaption do not provide sufficient contrast

See V4 figures page.

figcaption are currently colored with #ccc on a white background. Very hard to read :)

Font bold on safari

Set font weigth to bold in safari is not enough.
it should add -webkit-font-smoothing: antialiased; on b and strong tag

cards are messed up

Some card variants are broken in Boosted whereas Bootstrap's ones are good.

This component would be very helpful for content centric websites using Boosted.

custom radio - if none is selected, none is displayed

http://boosted.orange.com/v4-alpha/components/forms/#radios

If radio status is indeterminate, border is remove => need to look like it's unchecked

accordions - text overflow under arrow if card header link content is too long

Text overflow if link content is too long

Focus in Orange Megamenu and Orange footer is not visible

Simply due to outline being defined for every link with a black color, except for .navbar .nav-item .nav-link as far as I can see.

May I suggest to remove #000 in a:focus { outline: 1px dotted #000; } (which would fallback to currentColor) and stop overriding any outline?

This way the single a:focus { outline: 1px dotted; } would apply a correct outline to every link (assuming that links have sufficient contrast ratio, obviously) and we would save a few declaration block.

What's your opinion?

[Megamenu] Allow to open menu without moving focus

For now we can't open megamenu specifying an active element without placing focus on it.

This is perfect in a normal tabulation flow.

But in our case, we're opening megamenu on the active item on page load, which should not place focus in active item, obviously.

I think the simplest way to go is to add a boolean parameter on the init method, to tell whether the script should place focus or not.

What do you think about it? Is there another way to go?

Ping @danygit

Angular version or webpack loader ?

Hi,
There is an Angular version from boosted or a webpack loader ?

Thx.

input group segmented buttons double border

http://boosted.orange.com/v4-alpha/components/input-group/#segmented-buttons

Double border between action button and dropdown button

Boosted-flex not using flexbox…

Current boosted-flex' grid in V4-dev isn't using flexbox (still floating).

I had a look to scss files and I don't get it, $enable-flex is set to true, _variables.scss has a !defautl flag so it should work :/

Any idea?

Missing Fonts

HelvNeue55 and HelvNeue75 are available but HelvNeue65, HelvNeue45 and HelvNeue35 are missing.
Could you add it ?

JS Checkbox / Radio broken

Firefox 40.0.1 on Ubuntu
[email protected]

Is Orange-Boosted-Bootstrap RTL compatible ?

Hello, we use bootstrap-rtl library for arabic site version and we want to know if your components like the stepBar and others are compatible.

block-level label need to be in bold

http://boosted.orange.com/v4-alpha/components/forms/#block-level

Like other labels in form group

Checkbox checked not well displayed

Hello,
It seems that the Checkbox set to checked has a display bug.
The background of checkbox has the Orange Brand Color but the color exceed the bottom border like shown in the following pic and for the idChk3 in showcase page:

KO with Chrome 48 & 53 and Samsung Browser 4.0 (Android)
Ok with IE 11 and Firefox 38

Boosted skin for AdminLTE2

Hi,
Is it possible to have an AdminLTE2 skin based on Orange Boosted ?

What we are doing now for one of our projects is to include admin-lte npm package and copy manually the dist files from boosted ( potential version and fixes gap ).

I think i would be helpful for many projects to have just one optimized package available on NPM registery ( let's say : boosted-adminlte ) that combines both.

SideBar menu ?

Hi all,
I work on a project with few main functionality for the main functionality (~7) for connected user to the service

Is there any design where website on "mobile view" have the same style than an Orange mobile App .
Any design inspired by "dashboard" : https://v4-alpha.getbootstrap.com/examples/dashboard/
In the last "Orange et moi" android app doesn't contain ay orange logo on the top left :

• left side bar menu (permanent on non "small" device, hidden on "small" width device
• Hamburger menu (top left in place of Orange Logo) : visible only on "small" width device

Is there any convergence coming between App Guidelines and Browsing guidelines ?

[SCSS][IE8] Addition of two different units (rem+px) results in compilation failure

Hello,

When compiling the IE8 part of Boosted, more specifically, this file (app/scss/bootstrap/_step_bar.scss)

Error: Incompatible units: 'rem' and 'px'.
        on line 102 of C:/myproject/target/generated-sources/scss/bootstrap/_step_bar.scss
        from line 2 of C:/myproject/target/generated-sources/scss/bootstrap/_boostedIE82015.scss

This seems to be because of this part: ( $padding-base-horizontal + $o-stepbar-mobile-arrow-width).

• $padding-base-horizontal is defined first in rem in _variables-orange2015.scss but is overridden by the second definition in _IE8_font-size2015.scss which this time is in px :
  • Unit of $padding-base-horizontal is px
• $o-stepbar-mobile-arrow-width is defined one time only in _variables-orange2015.scss and is in `rem'
  • Unit of $o-stepbar-mobile-arrow-width is rem

Thank you.

[BUG][V3.3.2][IE] Font-face HelvNeueOrange doesn't work

The font-face declaration doesn't work in some IE configuration.
It seems one case is missing for example the following code

@font-face {
  font-family: 'HelvNeueOrange';
  font-style: normal;
  font-weight: 700;

  src: url('../fonts/HelvNeue75_W1G.eot?#iefix') format('eot'), url('../fonts/HelvNeue75_W1G.woff2') format('woff2'), url('../fonts/HelvNeue75_W1G.woff') format('woff'), url('../fonts/HelvNeue75_W1G.ttf') format('truetype'), url('../fonts/HelvNeue75_W1G.svg') format('svg');
}

should be declared like that

@font-face {
  font-family: 'HelvNeueOrange';
  font-style: normal;
  font-weight: 700;

  src: url('../fonts/HelvNeue75_W1G.eot');
  src: url('../fonts/HelvNeue75_W1G.eot?#iefix') format('eot'), url('../fonts/HelvNeue75_W1G.woff2') format('woff2'), url('../fonts/HelvNeue75_W1G.woff') format('woff'), url('../fonts/HelvNeue75_W1G.ttf') format('truetype'), url('../fonts/HelvNeue75_W1G.svg') format('svg');
}

Thx :)

Modals doesn't render properly on IE8

1. close button (align left : right in rem + SVG doesn't work on IE8)
2. border bottom on modal-header
3. radios are not aligned

I fix it like that :

.fe_ie8 .modal .modal-header .btn {
    position: absolute;
    right: 10px;
    background-color: #FFF;
}
.fe_ie8 .modal-header {
    border-bottom: none;
}

.fe_ie8 .modal .modal-header .btn .close {
    background-image: url("/woopic/img/common/croix.png");
    height: 22px;
    width: 22px;
}

.fe_ie8 .o-radio {
    margin-top: -5px;
    margin-right: 5px;
}

Step process bar doesn't work on IE8

http://boosted.orange.com/boostwatch/#stepbar
Stepbar doesn't display arrow on Internet explorer 8, need to replace svg by pictures in IE8 stylesheet

V3.3.1 SCSS has compilation issues

Hello,
I'm using V3.3.1 of Boosted.

When trying to compiles the files present at "app/scss", i have the following error:

Error: Invalid CSS after "      .clearfix": expected "{", was ";"
        on line 476 of <...>/target/generated-sources/scss/bootstrap/_orange-css.scss
        from line 21 of<...>/target/generated-sources/scss/boosted2015.scss

This seems to be related to this line, shouldn't it use @extend or @include ?
https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/v3.3.1/app/scss/bootstrap/_orange-css.scss#L476

Anyway, this issue seems to be still present in master (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/master/app/scss/bootstrap/_orange-css.scss#L522)

Thank you.

Less sources are stuck with Bower

While trying to compile sources directly with Less just after downloading the zip file, I couldn't because of the way Bootstrap files are called in bootstrap-orange2015.less.

This file imports Bootstrap sources from bower_components folder, which doesn't exist in the case we don't install Boosted from Bower. I saw the same issue (if this is one) in the gruntfile.

I see you're working on a Sass version of Boosted, and files aren't imported from bower_components.

Sadly I downloaded sources three weeks ago and wanted to only use the Less source files to avoid overriding some configurable Bootstrap things. It wasn't possible at that time without spending time to manually download Bootstrap and modify imports.

I think it could be great to fix this while working on the Sass version. Or is this acceptable? This is not a real issue since installing from bower does work, but this doesn't allow any other way of installing Boosted.

Dropdown in nav-item: arrow placement

When using dropdown in navbar and if any HTML tag is inside the .dropdown-toggle, the caret absolute position goes to the left… Only on blink based browsers (Chromium, Brave, Vivaldi…).

Eg:

<a class="dropdown-toggle mt-0 py-2 pl-2" href="#" data-toggle="dropdown">
    Mon compte
    <span class="tag tag-pill tag-danger text-white">3</span>
</a>

I'm working with v4 alpha 5, BTW.

I'll fix this locally but that may be a dropdown bug (adding right: .625rem; to the .dropdown-toggle::after seems to do the job).

@font-face improvement

As Boosted v4 officially only supports IE10+, we should remove .eot, .ttf and .svg from @font-face stack (both for Helvetica Neue and Orange Icons) — and delete associated files, of course. Please note that it'll also work with IE9.

It would result as a smaller package and a performance improvement since .woff is lighter and smarter than other formats.

Also maintaining files would be easier since there would be only two of them :)

Strange url of fonts ?

Hi,

Can you explain the parameter ?aaqub7 in font src ?
This strange parameter cause my webpack build failed.
I'll try to fix the build but I'm insterested in an explanation of this parameter.

Regards

Multiple megamenus

Hi,

When using Orange Megamenu with multiple instances, opening a second megamenu does not hide the first opened megamenu. Quite annoying.

Could you please help with this, at least providing a simple way to close a megamenu?

Using this I do know if there's already an opened megamenu:

jQuery(document).ready(function ($) {
    $('.nav-link[data-toggle="collapse"]').on('click', function(e) {
        $open = $('.mega-menu > [aria-expanded="true"]');        
    });
});

But that may not be the better approach. Thanks :)

Insufficient contrasts

While working with Boosted v4 alpha 5, aXe (through gulp-axe-webdriver) warns me about (at least) three components with insufficient contrast ratios:

• active item in breadcrumb
• primary button
• disabled custom checkboxes' label

In fact those 3 components would pass if we accepted a 3:1 ratio, so to me that's not really an issue; but the fact is Orange a11y-guidelines requires 4.5:1 and 7:1.

So I'm wondering:

• should I try to configure aXe to accept 3:1 ratio?
• should we fix Boosted to pass 4.5:1 ratio?
• should a11y-guidelines be less restrictive?

FWIW, the primary orange color just pass 3.01:1 on a white :/ Seems a bit odd to require 4.5:1 when working on internal project…

For now I exclude those components from aXe testing:

exclude: '.breadcrumb,.btn-primary,[disabled] ~ .custom-control-description'

but I feel kinda dirty ><