responsive sizing classes docs #24062
Description
Hi,
if there is no plan to add responsive sizing classes what do you think about adding something similar as code below to sizing docs for easy use?
What happens is that I don't think there is many cases where developer can use same width class for every screen. For ex. .w-25 or .w-50 class mostly doesn't look good on small screen size.
$size-breakpoints: (
//xs: 0, already exists
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
@each $breakpoint in (map-keys($size-breakpoints)) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
//@each $prop, $abbrev in (width: w, height: h) {
@each $prop, $abbrev in (width: w) {
@each $size, $length in $sizes {
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
}
}
}
}