Add sizing to the utility classes

[antoine4livre]

It can very useful on projects when you need to force a 100% height. Exemple: sizing-h100 -> height: 100% Can be used for other cases for 50% or width in percent or em etc.

[perruche]

This could be a feature we add. While i'm also not sure the toolkit is made to handle all of this.

In order to work we need to find a nice naming convention. Your exemple sizing-h100 can be missleading, is it height in %, in px, in em ?

I also think that sizing- does not fit the other utility prefix we currently have (eg: space, layer, grid, ...). size- will probably be better to staty consistant.

Same remark for h100 in your exemple. We currently use name-target-value--breakpoint as naming like space-x-4--s. So we should probably write size-h-100

What's the opinion of @studiometa/studiometa-scss-toolkit team regarding this issue ?

[titouanmathis]

Seems like something useful! 👍

How about following the emmet.io CSS abbreviations for the class names:

.w100p {
  width: 100%;
}

@media #{md("xs")} {
  .w100p--xs {
    width: 100%;
  }
}

.h100p {
  height: 100%
}

Or maybe if we want to be more verbose, we could use the property name as the class name:

.width-100p { /* ... */  }
.height-100p { /* ... */  }

[antoine4livre]

I prefer the second way because it looks like our current rules.

[perruche]

Is it something we really need in the toolkit ? What will be the usecase ?

I almost only use height: 100% for pseudo elements, when i use it for something else it is usally for something complex, that need css anyway. Should this remain something we write in css ?

We should probably have a toolkit guideline for what type of content can be added to the project.

I'm not saying i don't want to add the feature, but we probably need to think about if we are gonna really use it

[titouanmathis]

I often use sizing utility classes for flex layouts, to specify a width or height to fix the size of some elements.

Maybe we could only add a small set of percentage sizes by default: 0, 25, 50, 75, 100.

About the toolkit guideline, I think that the sizing utility classes would be more useful than the background ones proposed in #34 for example. Maybe we could vote for features somewhere?