Utility classes: Multiple property for one class

I would like to have more css property linked to one generated utility class. For example I would like to add a .padding-horizontal-* class which would need a padding-left and a padding-right property. But now I can only add one property per utility class generator. See my proposed screenshot for the desired solution:

Thanks!

Btw, for this case you can use padding-inline and padding-block properties

1 Like

Thank you! I learn everyday :slight_smile:

(But having multiple properties would be a necessary, as there are cases that need more property values.)

Can you give us some examples?

Like for example if I want to create an asimmetric padding utility class where the class would be padding-top-left-* I would like to ad padding-top and padding-left property to the utility class. This is just a made up class but I made a few screenshots in Core Framework to illustrate the need:

(I know the first is not a utility lass, but the logic is the same.)

Thanks!

Okay, I see.

Let’s wait and see how much traction the suggestion gets. The -padding-top-left-* scenario will probably apply to very few users, especially since you can simply assign two classes to the element instead of this very specific one. Alternatively, you can of course create these classes manually (such as .columns-3 from your CF screenshot), or you can create them in core framework and import them.

The padding-vertical-* example from core framework is rather suboptimal because, as Illarion already said, you really only need one value for this: padding-block. The same applies to the horizontal: padding-inline.

But as I said, let’s see if there is actually a need for it :v:

Yes, the -padding-top-left was just a made up example but I think there should be a valid use case because Core Framework use this method also. Thanks!