I’m getting up to speed on Bootstrap 4. I’ve used Bootstrap here and there since it came out, a little over 7 years ago. It succeeds in having aesthetics that are not distractingly bad or opinionated. (When Bootstrap first came out, I remember saying I could tell when a site used it. “There’s Bootstrap again! Eye-roll.” But now, perhaps due to its ubiquity, improvements, using native fonts, and diffusion between Bootstrap and web design in general, it doesn’t stand out to me.)
For starters, I'm getting up to speed on the global styles one needs to buy into to use Bootstrap.
I consider myself a bit of a “purist” in that I’ve generally preferred to write my own HTML and CSS from scratch, including hacks and resets, rather than bringing in someone else’s collection of global rules, which then become part of the stack that I have to contend with. However, having done it many times, I’ve sort of had enough thinking about hacks and resets (e.g. different treatment of input and button tags between browsers) just to get to a base starting point.
Bootstrap 4 has a "reset to reasonable defaults" part called Reboot, which is based on a previous reset called Normalize. It's well-documented here: https://getbootstrap.com/docs/4.0/content/reboot/
It doesn't set all margins, paddings, etc. to 0 like a basic reset, it tries to create a plain-and-sane default that's consistent across browsers. This applies, for example, to list indentation, input elements, and tables.
Then there are some more opinionated aspects of Reboot, which I can get on board with:
- box-sizing: border-box
- native fonts
- removing built-in margin-top! this actually seems like not a bad idea