Grid media queries

[rjurado01]

I like this framework but I don't understand why grid class like .col-md-4 uses this media query:

@media screen and (max-width: @size-md )

and not the inverse like other frameworks like bootstrap?:

@media screen and (min-width: @size-md )

I think second options is more logic.

[picturepan2]

@rjurado01 Thanks. Why do you think the second option is more logic? The classes col-xs-[1-12] only apply to window width xs which is 0 < size <= 480px.

[rjurado01]

@picturepan2 I suppose that I think it is more logic because I come from bootstrap that uses this rule:

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present. reference

and I only need to set class "col-md-6" to get one column for small devices and two columns for greather sizes while with Spectre I need to set "col-6 col-xs-12".

Maybe I only need to adapt to Spectre.

[alexandremjacques]

Must agree with @rjurado01.

Still having problems with resolutions greater than 1280px.The layout goes bananas after this breakpoint.

[farhd]

it makes more sense if one comes from mobile-first frameworks like bootstrap and foundation. and as many developers already used media-queries in this way, I think it would be developer-friendlier to stick to this convention.

@picturepan2 , BTW, it used to be min-width (dfa89c0). what was the reason for change?

[alexboffey]

I have to agree with @rjurado01 too.

I get the logic behind it after reading this thread, but Its unconventional to use two classes to have columns break into single rows. I've noticed this isn't really mentioned in the docs, maybe covering it will help devs avoid confusion?

[kschio]

The only thing preventing me from using Spectre right now.

Min width makes it easier to cover a lot of different scenarios or devices and also mobile first is easier to handle this way. Another plus is that many developers are used to it from other libs/frameworks and therefore it will be easier to adapt to Spectre.

I understand your approach but I think using max width is somewhat more restrictive and some people seem to struggle with it.

[Minimemat]

I agree with using min-width, using multiple classes then it's really achievable with 1 and on top of that is the larger screens.

[JazzBrotha]

I have been having issues with larger screens as well. Submitted a pull request with a mobile-first grid system using min-width and Bootstrap 4 breakpoints: https://github.com/picturepan2/spectre/pull/182