Split utilities from property utilties and get more control over generation of property utilities
Created by: MartijnCuppens
Split utility groups
In v4
we have 2 different kind of utilities that are a bit mixed in the documentation and in the code.
The first group is what I call the normal utilities. These utilities have more than one property and don't have the !important
suffix. These utilities are:
- Clearfix
- Embeds
- Text hide
- Fixed top, fixed bottom & Sticky top
- Screen reader utilities
- Stretched link
The second group is what I call the property utilities. These utilities typically have one property (except for .mx-*
, .my-*
, .px-*
and .py-*
utilities) and always have the !important
suffix.
I think we should split these utility groups. Not sure how we should call them, but for now I'll call them the utilities and property utilities.
More control over property utilities
We got a lot of requests and PRs about the generation of more responsive properties (for example responsive border utilities https://github.com/twbs/bootstrap/issues/28191) but we can't just add utility classes for all the properties because this will increase the size of the css too much.
On the other hand there's a need for more control over the generated code (which is also mentioned in https://github.com/twbs/bootstrap/issues/25941).
On yet another hand (let's just assume there's a third hand somewhere) I sometimes have the need to extend the utilities for more properties like opacity
or other properties Bootstrap doesn't cover with utilities.
To tackle this problem I've started developing something to gain more control over property utilities, with some kind of API where you can choose whether you also want to have responsive utilities, but before I'm going to continue with it, I'm going to check for some other opinions here. It 'll probably also need some solid documentation to explain it all.
I'm working under v4-dev-mc-poc-property-utilities
, the branch will need to be renamed, because this will not land in v4
, but maybe something for v5
if I can get to something ready in time. You can see the diff here: https://github.com/twbs/bootstrap/compare/v4-dev-mc-poc-property-utilities?expand=1#diff-1500afbbcf5fcafdd95fddb9b709de83 scss/_property-utilities.scss
and scss/utilities/_property-utilities.scss
will probably be the most interesting files.
What do you think?
@ysds @gijsroge @twbs/css-review