Explore a .content class for broad margin changes and more

[mdo]

Capturing ideas from #29491 (comment).

[MartijnCuppens]

I've been playing around with this lately, I came with a solution like this:
https://codepen.io/MartijnCuppens/pen/abzeBqP?editors=1100
(see second POC here: #30177 (comment))

What do you think?
/CC @ysds @ffoodd

[MartijnCuppens]

Also related: #26716

[ffoodd]

@MartijnCuppens a few questions about this.

Specificity
Your pen will result in heavy specificity selectors (since :not() counts in specificity). Wouldn't something like the lobotomized owl selector be better for specificity?

Targets
You're also only targetting headings after non-headings, why? Consecutive paragraphs might have margin-top too since they'll collapse naturally with existing margin-bottom.

Values
Using rem for margin-top results in requiring each element to have its own delcaration block: by using really fluid values (like em or %) and assuming a fixed ratio between font-size and margin-top, a single declaration block could be sufficient.

Something like this could do the job:

.content > * + * {
  margin-top: 1.5em;
}

However I think it would be related to some kind of typographic scale, and for now it's not implemented this way in Bootstrap (since most values are kinda hardcoded in _variables.scss). There's no maths behind the typographic scale for now, but it could help a lot with this PR (it's much harder to implement though).

I'd love to see an incoming $typographic-scale-ratio in Bootstrap!

PS: please keep in mind that my three questions can be unrelated :)

[MartijnCuppens]

You're also only targetting headings after non-headings, why?

I don't know, at some point in my life, I thought that was a brilliant idea.

Wouldn't something like the lobotomized owl selector be better for specificity?

Definitely

What do you think about removing the default margins form p tags and headings (and all other typographic elements)?

Made a second POC here: https://codepen.io/MartijnCuppens/pen/dyoOGdd?editors=1100

Switching to ems instead of rems feels like a good idea for paragraphs, but all headings are defined in rems.

I'd love to see an incoming $typographic-scale-ratio in Bootstrap!

Ok, what's that?

[ffoodd]

@MartijnCuppens Back to business 🎉

When using a typographic scale, every values are tight together depending on a single abitrary value: the ratio. For example, a base font size equivalent to 16px and a ratio of 2 will give the following scale: 16, 32, 64, 128, etc.

That's conceptually pretty close to what a grid is for layout.

This requires a few maths; there's tons of tools and documentation out there (recently, utopia.fyi, but you may find modularscale.com, type-scale.com, etc.).

On the design part, this ratio gives underneath meaning to the graphic design: ratio gives type depth, increases or decreases visual hierarchy, and may echo to some kind of cultural background too. It's really meaningful.

However it's not the common pattern, since a lot of graphic designers prefer to handle font-sizes "manually".

From a Bootstrap's point of view, coupling font sizes with a type scale ratio may lead to side effects (first of those would be less configurable font sizes).

You may find an example in Tachyons' type scale — they're using a 1.25 ratio.

I'm not sure I'm clear enough: explaining this in French is really easier to me :D

I love working this way, but I'm not sure it's suitable for Bootstrap.

[MartijnCuppens]

No problem, I understand what you mean @ffoodd. We could implement the ratio, but RFS will automatically rescale font sizes ignoring the ratio but keeping readability in mind.

Anyway, my idea was to tackle spacing issues with the .content class, not font sizes (these can be adjusted in reboot if needed).

[MartijnCuppens]

@twbs/css-review, what are your thoughts on removing the margins from elements by default and use the .content class to control spacing between headings/paragraphs/tables/... ?

We use margin-bottom: 0 a lot in our code to remove these margins.

[ffoodd]

Seems reasonable, since those elements outside main content will likely to be in a custom layout (navbar, sidebar, footer…).

So it makes sense, I guess.