Are there alternatives to overwriting Bootstrap's _variables.scss file and e.g. _alert.scss?

[Mic1]

First of all thank you so much for open-sourcing this. I have been searching for a month for code examples of how to brand Bootstrap efficiently and this is the answer. If my question is not specific enough to your product - not "orange enough" :-) I apologize in advance - veuillez m'excuser!

I understand that in branding Bootstrap to Orange, overwriting the Bootstrap files makes total sense. If one wanted to keep the source Boostrap or source Boosted files intact, would the approach be to simply clone everything and make the customization on the clones? We have started to do this and it seems to work - cloning _variables to _overrides, cloning _alert.scss, _tables.scss etc. But this is a lot of cloning. In your experience is there a more efficient way. Thanks in advance.

[julien-deramond]

Hey @Mic1 :)

I'll try to answer by explaining what we are doing at Orange.

In Boosted, we cherry-pick Bootstrap's commits and modify them in order to be compliant with our design guidelines. We act like a fork.
I wasn't there at the beginning of the project to have a lot of details to share with you regarding this decision but what I can observe right now is that it allows us more freedom to tweak some components and styles, and to keep the contact with Bootstrap by contributing a lot because of our common code base.
There are some cons with this way of doing things. The project must be maintained very actively because you can have hundreds of commits coming from Bootstrap in a month on top on what you currently develop but in the meantime it allows you to know in depth the framework. Some of the commits can contain temporary bugs (that will be fixed after). When you do that, in terms of compatibility, you also very linked to their release system with no accurate dates of delivery; since your main branch is almost synchronized to their main branch, it can contains some temporary bugs and that means you can't release your own library by taking the risk of having this bug in the products developed by your users.

The other way would be to Customize Bootstrap (JS and/or CSS). We have another design system dedicated to one country at Orange which uses Boosted and customize it so I have some information about that that could help you as well.
When you do that everything's not fully customizable. Since it is CSS you always find a way but sometimes you need to add extra CSS rules on top of what's defined in Boostrap. Tools like Clean CSS become mandatory to remove unused or duplicate stuff. If the buttons are very different for example, you could have some issues with the mixins proposed by Botostrap and would need to rewrite them or duplicate them and tweak them.
One other con is when there are Bootstrap's updates. It is sometimes difficult to find what really changed in Bootstrap (even with the migration guide or the release note) and the impact that could be observed with the new version (when you are a fork you can know in real time what's been changed and why). Another drawback is that you have to wait for official releases to begin your work on the new version. For example, with a fork, we will be able to release the 5.2.0 of Boosted almost at the same time than Bootstrap. With the customized version, you would need to wait for the official release (or a beta at least) to begin the big integration while continuing to develop your components.

@vprothais If you have more details to share regarding the customization don't hesitate.

[Mic1]

Thank you! Am reading and inwardly digesting :-)