Utilities/helpers split & utilities API

[MartijnCuppens]

Fixes #28367

Split up helpers/utilities and utilities API for extending or getting more control over the generated utilities.

Features

• Split between helpers & utilities
• Utility API which allows changing & extending utility classes
• Documentation about the API
• Documentation split between helpers & utilities.
• New map-get-multiple() function to get multiple keys from a map

Notes

• I left some utilities because their naming required to create a utility group per class, which beats the purpose of the API. Not sure what to do with them, but for me, it fine leaving them in the utility folder for now.
• I had to increase the bundle sizes because the vertical & horizontal spacing utilities are generated differently

New documentation about the utility API:
https://deploy-preview-28445--twbs-bootstrap.netlify.com/docs/4.3/utilities/api/

[mdo]

For viewport utilities, I'm thinking .vw-100 and .vh-100 for their classes as the names are implicit to their unit of measurement and their intended use (100vw and viewport width 100%).

[mdo]

So here's a baseline version of what I'm thinking about—one giant Sass map for all $utilities and nested @each loops for generating them. No additional map of map-gets. I've punted on all the more complex stuff though (any spacing utils, anything with a map-merge, etc) though for demo purposes. Will need help with that if we go this route.

https://www.sassmeister.com/gist/efa2593de91ddcc60808c44fe1ea9301

Thoughts?

[MartijnCuppens]

I guess you're talking about the map-gets in the scss/bootstrap-grid.scss? I did that to prevent the repetition of properties here, but maybe I should tackle this in a function where you can send the keys of the utilities you need to?

Or am I missing something here?

[mdo]

I guess you're talking about the map-gets in the scss/bootstrap-grid.scss?

Oh! Damn, yes I am! I was completely off base, apologies!

[XhmikosR]

@MartijnCuppens: something isn't right with this branch. You are removing files you are not supposed to touch here.

[MartijnCuppens]

@XhmikosR, fixed it. @mdo, I simplified the bootstrap-grid.scss with a new map-get-multiple function which prevents repetition of the map-get function.

This is still a work in progress, I'm personally going to give this PR more priority to avoid the situations like th Hugo branch where we needed to rebase it every so often.

[mdo]

@MartijnCuppens Thoughts on ditching the map-merge aspect of this? Had some thoughts on this in another thread where if memory serves, we can perhaps ditch it? #27927 (comment)

[MartijnCuppens]

I've opened #28506 to track this, that's a decision we can make independent from this, but I think it's a good idea. This will make it possible to ditsh this part here and simplify the map-gets you mentioned before:

bootstrap/scss/_utilities.scss

Lines 50 to 53 in a41ab9d

	// Utilities can also be removed, for example if you want to remove the `float` utilities:
	// $utilities: (
	// "float" :false,
	// );

[MartijnCuppens]

Ping @twbs/css-review for review

[MartijnCuppens]

FYI: the diff between classes: https://www.diffchecker.com/noUio3fe. Only some responsive .text-justify classes were added.

[mdo]

Let's do this!