twbs/bootstrap

Add responsive spacing utility classes

Closed this issue · 13 comments

maryleloisa commented

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 commented

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 commented

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 commented

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

woto commented

May be?

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

@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.

  • 👍3
montoulieu commented

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

  • 👍1
mdo commented

@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 commented

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

colltoaction commented

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.

  • 👍3
mdo commented

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

mdo commented

#20934 was merged, yay!

montoulieu commented

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

  • 😄1