Add responsive spacing utility classes

[maryleloisa]

It would be nice to have responsive spacing utility classes to manage gutters easily.

like p-xs-a-2 where xs is breakpoint and 2 is a kind of multiplation factor for $spacer value.

It would be also nice to keep abbreviations like md, lg for only breakpoints to reduce the confusion.

And classes like .m-xs-auto, .m-xl-auto would be great for responsively centering block elements.

[davidjb]

The current v4 spacing utilities are very useful for laying out a page, but are ineffective in a responsive layout as they're a fixed size. For example, .m-a-3 is useful at lg or xl breakpoints (where the margin is, by default, 48px (3*1rem)). However, on smaller viewports, especially xs, the margin now uses a fair proportion of the screen (eg 30% at 320px wide or ~18% at 543px).

Introducing a breakpoint-and-up based system would make it consistent to the other utilities like text alignment and floats (eg .text-md-center centres for md and up), but would add complexity.

That said, this feels akin to the responsive typography discussion (eg #17095); perhaps at least add documentation for the best practice for making spacing utilities responsive.

[mdo]

Not going to happen. It'd multiply the number of classes we have for that stuff by five, one set for each tier. These are utilities, they're not meant to serve every use case.

[guylepage3]

Understandable @mdo, what do you recommend as a replacement?

[woto]

May be?

<div class="m-t-1 hidden-sm-up"></div>

[sergej2705]

@mdo: A lot of people are asking for responsive spacing utility classes. Shouldn't it be considered to add these classes? IMO there are a lot of use-cases for it.

If you worry about the file-size there could be a $enable-responsive-spacing-variable to switch it on if needed.

[leggomuhgreggo]

What @sergej2705 said.

[montoulieu]

Pretty big oversight here. The padding/margin classes should adjust based on viewport width.

[mdo]

@pi-mont There's no oversight, I said no to them. I'm still no to them until we at least get the rest of v4 in shipping order, too.

[montoulieu]

I understand you said no, the oversight was in thinking that only one set of padding and margin classes would suit all viewports.

[colltoaction]

This is one of the first search results for this feature, so I thought I'd share my solution here.

My designer requested:

• when on mobile, 1rem horizontal padding
• tablet, 1.5rem
• large screens, 3rem

So I created my own classes based on what I found on _spacing.scss:

@each $size, $lengths in $spacers {
    $length-x: map-get($lengths, x);
    $length-y: map-get($lengths, y);

    @each $prop, $abbrev in (margin: m, padding: p) {
        @each $breakpoint in map-keys($grid-breakpoints) {
            .#{$abbrev}-#{$breakpoint}-x-#{$size} {
                @include media-breakpoint-up($breakpoint) {
                    #{$prop}-right: $length-x !important;
                    #{$prop}-left: $length-x !important;
                }
            }
        }
    }
}

As they say, the number of classes grows considerably, but it's fine for our project.

[mdo]

This will be be revisited alongside #20934, which focuses on the display utilities.

[mdo]

#20934 was merged, yay!

[montoulieu]

Was surprised to see this had been resolved in the latest alpha,
Excellent work @tinchou!