Adds breakpoints to sizing utility classes

[andresgalante]

This PR closes #24003 and it adds breakpoints to sizing utility classes.

It also updates the docs to surface this change.

@Johann-S you know my feelings about utility classes 💩 but I think that since we are doing this for spacers, adding it for sizing is valid.

Closes #24062 too

[Herst]

While at it wouldn't printing-specific versions also be useful?

[andresgalante]

@Herst yeap, it would make sense. Help me out a bit, what do you have in mind for printing?

A question I keep asking myself when doing utility classes is how far do we want to take them, and when to stop.

[Herst]

@andresgalante See for example: https://stackoverflow.com/a/32253969

[andresgalante]

@Herst yeah, I see what you mean, thanks for the clarification. Should we include it on this PR or track it in another one?

[Herst]

I separate PR makes much more sense, especially now that this one here has been reviewed. Sorry for hijacking it (I was sort-of thinking aloud).

[andresgalante]

Closes #24062 too

[XhmikosR]

@Johann-S: looks good to you?

[Johann-S]

Not against it but @mdo have concerns about our CSS file size, so I'll leave the end word to Mark here

[andresgalante]

@XhmikosR thanks for reviewing it. I agree with @Johann-S, this is a "nice to have" to follow other utility classes, but I wouldn't mind if it doesn't get merged. it's not fixing any bug, just adding more options. So, it's more a matter of if we want this on Bootstrap or not.

On the other hand I have other open PRs that are fixing issues that we should merge.

[mdo]

I'd rather hold off on this one—I want to verify these utilities get used much in the first place before we 5x the number of them by making them responsive :).

[Herst]

@mdo Same concerning the idea with the printing classes I guess?

[mdo]

Print-specific classes are probably fine? Depends on the situation. Open an issue to discuss?

[iamandrewluca]

@andresgalante it seems this line is not needed
when $breakpoint is xs, $infix is an empty string
This line wil catch the case

.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }

[iamandrewluca]

Adding sizing for remaining breakpoints.

// Create sizing classes for all screen sizes
@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  @if $infix != '' {
    @include media-breakpoint-up($breakpoint) {
      @each $prop, $abbrev in (width: w, height: h) {
        @each $size, $length in $sizes {
          .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        }
      }
    }
  }
}

[XhmikosR]

@iamandrewluca: please make a PR; commenting in older PRs/issues will probably be ignored.

[iamandrewluca]

@XhmikosR I just wanted to mention this to @andresgalante . As I see this is not being merged. Should I create a PR in any case?

[andresgalante]

@iamandrewluca you are right, thanks a lot for reviewing it. 😄

[XhmikosR]

I'd still like to have this merged.

It seriously improves usage.

@mdo: are you still opposed to this?