To expand on my previous post a bit.
Bootstrap has a
variables.scss file where everything gets defined. Those variables are referenced throughout their CSS.
In order to create a solid theme solution, we should create our own
variables.scss where we only define the variables wanted for that theme. So if a theme wants a different background color for alternating table rows but leave everything else vanilla bootstrap, that file would only define 1 variable.
Then the developer would run a Gulp task which compiles the SCSS down to CSS (could also minify here as well). Then, the final CSS for the theme would have all the bootstrap stuff, with the theme changes baked right in.
This would allow us to only include the theme CSS and never import the vanilla bootstrap file (it’s already inside the theme CSS).
I use this workflow all the time. I’ll be spending some time on theming MedEx soon and can easily add this into my stuff, it’s just a matter of getting to it.
The biggest takeaway is to not add non-bootstrap classes unless absolutely required. And when doing so, defer to bootstrap to figure out how to best integrate any custom classes.
I’ll write up some documentation