should all breakpoints be +1px? about reflex HOT 5 CLOSED

@leejordan ping

from reflex.

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

from reflex.

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?

from reflex.

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

from reflex.

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

from reflex.