Why is the screen-xs breakpoint deprecated?

[ericfreese]

Hi all,

First off, thanks for all your hard work on this project. It kicks ass.

This is my first time using bootstrap more extensively on a larger project, and I'm confused as to why the screen-xs breakpoint has been deprecated, and the xs breakpoint has been defined as everything less than 768px.

I was taking a look at #12913, and I don't know the history here, but at first glance it looks like the underlying problem was that there wasn't a way to specify default "mobile-first" behavior, since the xs breakpoint was between 480px and 767px. There was nothing for < 480px, so the xs breakpoint was changed to be just < 768px.

But I have run into several cases where I'd love to use the xs breakpoint. Basically, I'd like to say .make-xs-column(6), and have it wrap the columns when < 480 but go side by side at 480 and up.

Again, I don't know the history here, but it seems to me a better solution would be to add another set of mixins and helper classes to specify the default "mobile-first" behavior. Something like:

.my-row {
  .make-row;
}

.my-row-item {
  .make-column(6);    // Default is 6 cols
  .make-xs-column(3); // 3 cols at >= 480px
  .make-md-column(2); // 2 cols at >= 768px
}

Would it be crazy to make the xs breakpoint act like the sm, md, and lg breakpoints (i.e. xs >= 480px) and add another set of helpers (e.g. .col-6, .visible-block, .make-column(8)) to handle the >= 0px default behavior?

Thanks

[cvrebert]

Sounds like you really just want an "XXS" 480px grid breakpoint; that's already currently planned for Bootstrap v4. We can't add it in v3 due to backward compatibility concerns.
Approximate duplicate of #10203.
See also f9e98a1.

[ericfreese]

Thanks. #10203 is exactly what I was thinking. I'll wait for v4.