should all breakpoints be +1px?

[leeoniya]

Hey @leejordan ,

I added an -sx breakpoint at 640px in my build and discovered something unexpected. What i wanted to do was target <= 640px screens via .grid__col-sx-6. I figured that widths of 640px or less, would result in 6/12 cols (50%). However, the switchover only occurs at 639px due to the generated min-width media rule.

This behavior is counter-intuitive to me, with the fix being simply to add 1px to all breakpoints for the declared column count to match the <= breakpoint rather than < breakpoint.

Or is this simply an inversion of assumptions for mobile->desktop vs desktop->mobile structuring?

thanks!
Leon

[leeoniya]

@leejordan ping

[leejordan]

I'm going investigate all open issues when I have a day clear to look at them. Bear with me!

[leejordan]

I've given this some thought and I think that because it's easy to change the breakpoints (when compiling via LESS or SCSS) I won't be changing the defaults as it's my personal preference to use the breakpoints in this way.

How much of a problem is this for you? When you say it's counter-intuitive is that relative to your expectations or to your experience of using other layout grids?

[leeoniya]

@leejordan

From [1]:

We occasionally use media queries that go in the other direction (the given screen size or smaller):

This is basically what i expect, though it seems not to be the default in most grids. My reasoning is that when you serve a page, you serve all the content because you don't have another chance to get it (especially if js is disabled). The layout for all the content is desktop, so you design the desktop layout first (for all screens larger than some value). Then you progressivly work downwards the common tablet/mobile screen sizes using the logic "if screen is <= 768"...else if "screen <= 640"...else if "screen <= 480". This works out to max-width rules rather than min-width rules. It's more intuitive to me because you never "fetch additional" content for bigger screens, you instead "collapse" existing content for smaller breakpoints (presumably commons screen sizes) that can no longer fit it.

Also, I expect that grid__col-xs-6 would apply a 50% width to "xs" devices which is "<=480px". Currently xs actually excludes 480px, which is unexpected.

EDIT: with the inversion the breakpoint names don't hold their original meanings, and < 480 would need to become something like xxs.

I don't really understand the "mobile-first" terminology (if this is it), it seems backwards. Mobile-conscientious perhaps.

[1] http://v4-alpha.getbootstrap.com/layout/overview/

[dmoojunk]

@leeoniya The mobile first approach is really just so you think about presenting information on small screens first, as they are the most difficult to design. If you can get a good layout on mobile the desktop should easily follow. The inverse is much harder.