Width / Height utility percentage value names

[pricop]

LATER EDIT

I'd like to suggest changing the percentage based utility names from:

25: 25%,
50: 50%,
75: 75%,
100: 100%,

to:

25\/100: 25%,
50\/100: 50%,
75\/100: 75%,
100\/100: 100%,

So rather than writing w-50, you'd be writing w-50/100.

The scope of this change is that it frees up the $sizes, so that we can extend it as much as we need. For example it would open up the possibility of using $sizes with smaller increments, such as .25rem (similar to Tailwind), without quickly overlapping with the percentage value classes.

This also means that people can just chip-in additional percentage based values, such as w-100 by setting 10\/100: 10% for 10% without interfering with the w-10 which is set to 10rem, and also just be consistent across multiple projects that may be using Bootstrap.

This would apply to w, h, min-w, max-w, min-viewport-width, min-viewport-height.

I feel like this would be a good change for the Bootstrap framework as a whole.

However, this would be a breaking change, and I understand why you wouldn't want to do that.

[mdo]

Not opposed. I've wondered how we would do this in a good and approachable way. Would need to see a full size scale mapped out to see how our components would slot into those. I see it being similar but hopefully not the same. We don't need every utility that Tailwind has, and I'm always curious about the use cases here.

Oh, and v6 is the time to do this stuff; breaking changes are the name of the game.

[pricop]

Thank you for being so open about possible changes! Updated this topic with the code changes required to achieve this and some stats about it.

[pricop]

We don't have to add extra size properties, just to rename the properties that are currently getting in the way of expanding the $sizes scale, which in this case are the percentage ones.

I've done this in Bootstrap 6 and the CSS is almost identical 🥳.

Before: 275 KB (282,257 bytes)
After: 275 KB (282,374 bytes)

Just 117 bytes in difference.

w-25 becomes w-25/100
viewport-width-100 becomes w-100vw

We can also now have w-10 for 10rem and w-10/100 for 10%, no more naming conflicts 🚀.

Functionally, it gained two new extra classes: max-w-100vw and max-h-100vh.

The viewport-width was merged into w, min-viewport-width was merged into min-w, viewport-height was merged into h, min-viewport-height was merged into min-h. I see no reason for why these should have been separated in the first place, they both alter the same property.

And for those who need more, the map already provides hints to how it can be expanded, for example one could implement other size units, such as dvh, lvh, svh, etc., similarly to how h-100vh was implemented, same thing for percentage & rem units...

// Sizing utilities
// scss-docs-start utils-width
"width": (
  property: width,
  class: w,
  values: map.merge(
	$sizes,
	(
	  25\/25: 25%,
	  50\/50: 50%,
	  75\/75: 75%,
	  100\/100: 100%,
	  100vw: 100vw,
	  auto: auto,
	  min: min-content,
	  max: max-content,
	  fit: fit-content,
	)
  )
),
"max-width": (
  property: max-width,
  class: max-w,
  values: (
	100\/100: 100%,
	100vw: 100vw,
  )
),
"min-width": (
  property: min-width,
  class: min-w,
  values: (
	0: 0,
	100\/100: 100%,
	100vw: 100vw,
  )
),
// scss-docs-end utils-width
// scss-docs-start utils-height
"height": (
  property: height,
  class: h,
  values: (
	25\/25: 25%,
	50\/50: 50%,
	75\/75: 75%,
	100\/100: 100%,
	100vh: 100vh,
	auto: auto,
	min: min-content,
	max: max-content,
	fit: fit-content,
  )
),
"max-height": (
  property: max-height,
  class: max-h,
  values: (
	100\/100: 100%,
	100vh: 100vh,
  )
),
"min-height": (
  property: min-height,
  class: min-h,
  values: (
	0: 0,
	100\/100: 100%,
	100vh: 100vh,
  ),
),
// scss-docs-end utils-height