Grid breakpoint for 480px

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.

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

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

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

@ggam

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

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.

@andyl

@andyl +1 for simple and safe

+1

@andyl

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

@ggam

@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

@ggam

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

@andyl

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

@ggam

@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

@heldchen

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

@ggam

@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! :-)

@ggam

@ggam 3.1 has other BC-breaking stuff planned, so what's not really a good reason not to think about it, is it?

@Jakobud

@Jakobud your solution is sass ... can you provide a less solution?

@Jakobud

I forked what @Jakobud had contributed and fixed some sass to less issues. I briefly took it for a test drive, and it seemed to work as intended. I'll be doing some more robust testing today and tomorrow as part of the project I am currently working on. Will report back with any issues that are found if there are any. Thanks @Jakobud !

https://gist.github.com/wdollar/135ec3c80faaf5a821b0

How are we supposed to use these since they are not actually LESS mixins? From within other LESS files I mean.

@brgrz

@brgrz Did you see where I fixed the LESS issues?

https://gist.github.com/wdollar/135ec3c80faaf5a821b0

Everything there is LESS ready. I'll keep an eye out for your reply in case you still have questions.

@ilovett See the link above if you still need the LESS solution.

@Jakobud

@Jakobud I tried the responsive helpers you created and they were causing troubles so I hacked BS responsive_utilities and added support for hidden-ms, seems to work:

https://gist.github.com/noctivityinc/1790c6b3e48befe91ac7

Also, if you want inline support for ALL responsive helpers just change _mixins.scss to:

  @mixin responsive-visibility($parent) {
      #{$parent} {
        display: block !important;
      }
      span#{$parent} {
        display: inline-block !important;
      }
      tr#{$parent} { display: table-row !important; }
      th#{$parent},
      td#{$parent} { display: table-cell !important; }
    }

Did you figure out the problem with mine? Feel free to fork the gist and post the fixes if you can figure it out. Thought I tested it thoroughly but I guess I missed something? What was the problem exactly? Do you have a jsfiddle or something you can show?

There were a variety of issues, mostly dealing with visibility when it was not that screen size. Since you were setting a block to be visible only during that screen size, by forcing it to not be visible when dealing with a larger size we couldn’t use other classes. Basically, without diving into it too much, without resetting the hidden-ms class for the other screen sizes back to a default state it messed up the display.

Best,

Josh

Joshua Lippiner
.:t 704.323.5661
.:e jlippiner@noctivity.com (mailto:jlippiner@noctivity.com)

On Wednesday, May 28, 2014 at 3:57 PM, Jake Wilson wrote:

Did you figure out the problem with mine? Feel free to fork the gist and post the fixes if you can figure it out. Thought I tested it thoroughly but I guess I missed something? What was the problem exactly? Do you have a jsfiddle or something you can show?

—
Reply to this email directly or view it on GitHub (#10203 (comment)).

Ah okay I will look into that. Thanks

GitHub's Gist feature also allows for comments. No need to do all the discussing related to that custom implementation on this issue tracker.

True but I felt it relates to the bug/situation the same as some of the posts and anyone searching for this issue could benefit.

Joshua Lippiner
.:t 704.323.5661
.:e jlippiner@noctivity.com (mailto:jlippiner@noctivity.com)

On Thursday, May 29, 2014 at 1:05 AM, Heinrich Fenkart wrote:

GitHub's Gist feature also allows for comments. No need to do all the discussing related to that custom implementation on this issue tracker.

—
Reply to this email directly or view it on GitHub (#10203 (comment)).

Add grid breakpoint for 480px

Add grid breakpoint for 480px and set xs to 320px

Navigation Menu

Repository navigation

Grid breakpoint for 480px #10203

108 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Grid breakpoint for 480px #10203

Description

Activity

andyl commented on Aug 27, 2013

ggam commented on Aug 27, 2013

puzrin commented on Aug 27, 2013

andyl commented on Aug 27, 2013

andyl commented on Aug 28, 2013

luaz commented on Aug 28, 2013

heldchen commented on Aug 28, 2013

ggam commented on Aug 29, 2013

puzrin commented on Aug 29, 2013

andyl commented on Aug 29, 2013

ggam commented on Aug 29, 2013

heldchen commented on Aug 29, 2013

ggam commented on Aug 29, 2013

andyl commented on Aug 29, 2013

heldchen commented on Aug 29, 2013

108 remaining items

ilovett commented on May 9, 2014

wesdollar commented on May 15, 2014

brgrz commented on May 21, 2014

wesdollar commented on May 21, 2014

noctivityinc commented on May 28, 2014

Jakobud commented on May 28, 2014

noctivityinc commented on May 28, 2014

Jakobud commented on May 28, 2014

hnrch02 commented on May 29, 2014

noctivityinc commented on May 29, 2014

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions