Bootstrap: Combine docs CSS and bootstrap CSS into one file

[MartijnCuppens]

We should have a look at combining the CSS of the docs and Bootstrap into one file. We'll be able to extend the theme-color map and extend the utility API for utilities we only use in the docs.

Related PR: https://github.com/twbs/bootstrap/pull/28500 (this one was closed since our build setup has changed)

[voltaek]

I think you should consider leaving the Bootstrap CSS separated from your docs CSS in order to preserve the ability to reference it, even though it's not 'optimal'. I often will inspect the docs for reference of the default styling of Bootstrap classes, and it's always been nice to be able to differentiate the source of the styling as from Bootstrap itself vs the custom CSS created just for the docs, so I can just ignore the custom CSS and get the info I need on Bootstrap's default styling.

This is assuming that the Bootstrap CSS used by the docs is unmodified from how Bootstrap ships by default, which has always been my assumption (now that I think about it I hope that is correct :stuck_out_tongue:).

[MartijnCuppens]

I think you should consider leaving the Bootstrap CSS separated from your docs CSS in order to preserve the ability to reference it

People shouldn't reference to it directly since it's not an CDN file. But this can indeed be useful when we need to reference to the file in Codepens for demo purposes for PRs. I would therefor generate the file so that it can be linked to if needed. Maybe we could add it in a metatag on our Netlify previews so it can be copy/pasted easily?

This is assuming that the Bootstrap CSS used by the docs is unmodified from how Bootstrap ships by default, which has always been my assumption

That's correct 😉

[SpiritMark]

nice!

[voltaek]

@MartijnCuppens

People shouldn't reference to it directly since it's not an CDN file.

That's not what I meant by "reference". I meant reference as in using the Bootstrap CSS file loaded to display the docs as additional reference documentation itself. For example, looking up the default padding on an element with .alert on it by inspecting the examples in the Alerts section of the docs.

[mdo]

@voltaek You could still do that—only the name of the stylesheet shown in the inspector would be slightly different (e.g., it could be something like bootstrap-docs-built.min.css).

[voltaek]

@mdo My point is if you customize the Bootstrap SCSS used to build the docs styling, then it wouldn't be clear which styling rules were from base Bootstrap and which were from custom styling done specifically for the docs. Basically I like that currently an unmodified version of Bootstrap is used alongside custom CSS in order to style the docs, because then when they are inspected it's immediately clear what rules are produced by an unmodified build of Bootstrap's SCSS, which is great to have as quick reference material.

[MartijnCuppens]

it wouldn't be clear which styling rules were from base Bootstrap

Good point. However, most of our custom classes contain bd- and I think that's clear enough to make the distinction. We should make sure every custom class has this though, just to be sure.

[voltaek]

@MartijnCuppens That could be a decent compromise.

[XhmikosR]

@MartijnCuppens shouldn't we close this? I personally prefer keeping the docs CSS as a separate file and I was under the impression we can already extend core anyway?

[MartijnCuppens]

I'm ok leaving it as is