Responsive display utilities

[mdo]

This explores adding responsive display utilities, replacing the static inline, inline-block, and block options we have currently. The twist here though is that the lowest breakpoint doesn't have a breakpoint abbreviation in the class name.

Here's an example of what I mean with just the display: none utility:

/* Same as `.d-xs-none`, but without the `-xs` part */
.d-none { display: none !important; }

@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
}

I'm exploring this since the lack of xs could make it an easier transition to v4 for those who used the v3 utilities. Plus it's a bit more accurate to what's happening in the compiled CSS since there's no media query around those styles.

Thoughts?

[fgilio]

I like this idea! +1

[andyl]

Don't like this idea - BS could really use a built-in breakpoint that will handle the transition between portrait and landscape mode on a mobile device. PLEASE add .xs with a breakpoint of 480 px.

[saviomd]

Makes total sense.
Actually, the responsive grid we built in company a few years back (and still in use), doesn't have a 'size' indicator in the lowest breakpoint.
And by saying that, I think that everything should follow this idea (grid's col, text-align, pull, push, etc).
It will be a big breaking change coming from v3, but what the hell, find and replace for the win ;)

[mdo]

@andyl This isn't about what the breakpoints are. This is about adding responsive display utility classes and perhaps negating the xs breakpoint name from that class name.

Edit: To be clear, the xs breakpoint is 0. It doesn't go away, it's just negated from the class names.

[mdo]

And by saying that, I think that everything should follow this idea (grid's col, text-align, pull, push, etc).
It will be a big breaking change coming from v3, but what the hell, find and replace for the win ;)

Yeah, that's the idea @saviomd.

[mdo]

As a comparison, here's the float utils already in v4-dev. Note that the xs class has no wrapping media query. If this PR were to merge, I'd make the same change to the float-xs-* classes and remove the -xs part.

.float-xs-left {
  float: left !important;
}

.float-xs-right {
  float: right !important;
}

.float-xs-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}

[TheBuzzer67]

Visually prefer to keep -xs

[Studio384]

For consistency in naming, I would argue that leaving -xs in would be better.

[leonardosalles]

If it starts on zero I think that no makes any sense to have the xs prefix, I agree with this idea 👍

[sharkness]

For the sake of clarity and consistency, I really like the xs-. It was a bit of an adjustment, coming from v3, but it only takes a few minutes to get used to it. In my opinion something about using xs- feels semantically nice.

[maximebeaudoin]

I think it's a good idea. No breaking point it's like the default value. So using d-none makes sense. But removing the xs qualifier can be confusing for some people, you don't really know which screen will be affected. However, BS is mobile first so all default css should affect the smallest device first.

[kris-ellery]

@mdo I've been using this approach for couple of years and its been working great. It gives a lot of flexibility as you always start with default class name (breakpoint agnostic) and then override as you go up. Go for it!

[sethwhitaker]

I fully support this. As I've been developing v4 sites. Remembering to put -xs in there for a default value to apply to every breakpoint has been hard to remember

[fgilio]

As @maximebeaudoin said "BS is mobile first so all default css should affect the smallest device first" and continue up.
This makes so much sense.

[cdelarbre]

#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides

for all sides... a or not a ?

Personally I prefer {abbrev}{sides}-{breakpoint}-{size} even for "all" but both are logical.

[bogdaniel]

keeping as a rule xs md lg etc .. would be nice but in the same time why waste time to write xs when you can just do d-none instead of d-xs-none was even a bit hard to write :-). should flip a coin guys =D because this goes as a 50 - 50% :))

[AlexanderYW]

@mdo wouldn't it be better to have "up" and "down" modifiers?

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        .float-#{$breakpoint}-left-up {
                float:left!important;
        }
        .float-#{$breakpoint}-right-up {
                float:right!important;
        }
        .float-#{$breakpoint}-none-up {
                float:none!important;
        }
    }
    @include media-breakpoint-down($breakpoint) {
        .float-#{$breakpoint}-left-down {
                float:left!important;
        }
        .float-#{$breakpoint}-right-down {
                float:right!important;
        }
        .float-#{$breakpoint}-none-down {
                float:none!important;
        }
    }
}

[mdo]

Heads up, I've updated this PR to also include the same changes to the float utilities. Responsive spacers have also already landed in v4-dev with #20926.

[j0an]

.text-xs-center will still with the -xs?