Provide a light CSS bundle without some Bootstrap features
julien-deramond opened this issue · 0 comments
Description
Our current CSS bundle (boosted.css + boosted.min.css) contains everything that a developer needs to develop an Orange website.
The approach so far is that if you use a Bootstrap-based library or tool and apply boosted.css, it should work perfectly. This is possible because everything in Bootstrap also has a style in Boosted.
As you can see in https://deploy-preview-2223--boosted.netlify.app/docs/5.3/components/buttons/, we have for instance buttons that can be used and buttons coming from Bootstrap that can't be used because incompatible with the rules defined by ODS:
But if you're not using them because you know the context, one could lighten the project's CSS bundle.
This issue aims to study if it would be possible and smart to provide something like a boosted.light.css file generated when a global Sass variable such as $enable-bootstrap-specificities: false (or built directly by the project with this same Sass variable).
In our code, we could extract some Bootstrap-specific code with code like @if enable-bootstrap-specificities.
In our documentation, we could refer to this optional embedding in the <details><summary> section we already have by saying with a tag or anything else: this is a Bootstrap-specific component or variant, you can avoid embedding it by using $enable-bootstrap-specificities: false, etc.