Grid breakpoint for 480px

[luaz]

The smallest grid column supported at the moment is .col-xs- (<768px), which seems like a big range.

Would it be advisable to have:
.col-xs- (>480px and <768px)
.col-tn- (<480px)

Reason being it still seems reasonable to have a 2 column grid on 768px (240px - 384px per column), while 480px have a stacked column.

Using the current .col-xs- (<768px) option, putting one stacked column on 768px seems too wide on some cases, and 2 columns on 480px seems ridiculous at times.

[andyl]

1000 times - please add .col-tn with breakpoint @ 480 - important to have more control for small-screen layouts.

[ggam]

You can always add your own breakpoint by customizing grid.less. The core can't provide solutions for every possible situation IMO.

[puzrin]

+1. With great mobile support in 3.0, it would be nice to have one more breakpoint, to separate vertial mobile & horisontal mobile. 768px is too big for such split.

[andyl]

@ggam - the col-tn breakpoint is important for the use-case of rotating your phone from portrait to landscape. Everyone who targets phone devices with BS3 will encounter this problem. Its a core issue.

Yes I can add my own breakpoint. But my project involves 3rd party developers who write web components that rely on BS3 as the common UI framework. So now I gotta ask each of them to implement this col-tn hack, to take time to learn the workaround. Not good, especially for the framework that bills itself as 'mobile first'.

[andyl]

Here is a gist that adds a breakpoint between 480 and 768px. Instead of 'col-tn' as the smallest breakpoint, I added 'col-ms' ('ms' stands for 'mid-small') between col-xs and col-sm.

col-sm - (small) works at 768 +
col-ms - (mid-small) between 480 and 768
col-xs - (extra-small) less than 480px - same old class

I strongly believe this should be part of BS3. And col-ms is very simple and safe to add. If the maintainers give a thumbs up, I'll submit pull requests to update the Less files and the related docco.

[luaz]

@andyl +1 for simple and safe

[heldchen]

+1

[ggam]

@andyl your use-case seems like a valid one. The problem is we already have 4 grid classes. Adding another one for 480px makes 5. It's a matter of time and people will start asking for a 1800px (or wathever else) breakpoint to support TV and extra-large devices.

If we are going to add more breakpoints, we will have to find a better way for that other than creating new modifiers. Otherwise we will end up with dozens of grids. Once #9970 or #10055 get merged, it will be really easy to add custom grids when needed.

[puzrin]

@ggam since breakpoints have no conflicts, i don't see problems in increasing their count, when reason is significant.

PS. also, visibility classes should be extented

[andyl]

@ggam - dozens of grids? Nobody is asking for that. I don't want custom grids. I use BS3 because it provides sensible defaults that independent developers can use as a standard with no training or hand-holding from me.

I'm asking to add a single grid that addresses a critical use case for mobile development - rotating your phone from landscape to portrait. The CSS code is done, it is simple and has no conflicts with any other aspect of BS.

One-hundred percent of your mobile developers will encounter this use case. It would be a shame to force all of them to re-invent a custom grid. For the good of bootstrap, the 'mobile first' framework, I hope you will add this breakpoint.

[ggam]

@andyl Well, so convert your gist to LESS and find a better name for the breakpoint (maybe xxs?), cause using "medium-small" for a breakpoint that is smaller than "extra-small" doesn't make sense. Also, until push/pulls/offsets are added back to xs, I wouldn't expect them to be added to an even smaller breakpoint.
Also, would be nice if you can create the visible/hidden utilities and documentation to reflect the changes.

Then, create a pull request and wait for @mdo comments. I don't take decissions here, I only share my opinion.

[heldchen]

@ggam you missed that the proposal is .col-xs << .col-ms << .col-sm << .col-lg << .col-xl

with the new col-ms having the current break-width of the current col-xs, and the new col-xs having a new breakpoint of 480px

[ggam]

@heldchen But that proposal cannot be accepted as it would break BC. Also, I'd prefer to see the new .col-ms as .col-sm, and col-sm renamed to col-md. I think it makes more sense.

[andyl]

@ggam & @heldchen - note that I propose no change to any existing grids - .col-sm and .col-xs would continue as-is. The new grid .col-ms imposes no change for existing applications, and nothing would break. Try it! :-)