Adds breakpoints to sizing utility classes#24015
Adds breakpoints to sizing utility classes#24015andresgalante wants to merge 1 commit intotwbs:v4-devfrom
Conversation
|
While at it wouldn't printing-specific versions also be useful? |
|
@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. |
|
@andresgalante See for example: https://stackoverflow.com/a/32253969 |
|
@Herst yeah, I see what you mean, thanks for the clarification. Should we include it on this PR or track it in another one? |
|
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). |
|
Closes #24062 too |
|
@Johann-S: looks good to you? |
|
Not against it but @mdo have concerns about our CSS file size, so I'll leave the end word to Mark here |
|
@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. |
|
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 :). |
|
@mdo Same concerning the idea with the printing classes I guess? |
|
Print-specific classes are probably fine? Depends on the situation. Open an issue to discuss? |
|
|
||
| @each $prop, $abbrev in (width: w, height: h) { | ||
| @each $size, $length in $sizes { | ||
| .#{$abbrev}-#{$size} { #{$prop}: $length !important; } |
There was a problem hiding this comment.
@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; }There was a problem hiding this comment.
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; }
}
}
}
}
}There was a problem hiding this comment.
@iamandrewluca: please make a PR; commenting in older PRs/issues will probably be ignored.
There was a problem hiding this comment.
@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?
There was a problem hiding this comment.
@iamandrewluca you are right, thanks a lot for reviewing it. 😄
|
I'd still like to have this merged. It seriously improves usage. @mdo: are you still opposed to this? |
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