Mobile first grid system

[JazzBrotha]

I changed the grid system to a mobile-first approach by changing the queries to min-width to avoid display issues on larger screens. I provided Bootstrap 4 breakpoints to fit accordingly. Tested and working.

[picturepan2]

@JazzBrotha What issues do you get on larger screens?

[JazzBrotha]

Since the col-xl breakpoint is at max-width:1280px the grid structure doesn't keep at larger screens.

[picturepan2]

@JazzBrotha You can still use col-[1-12].

[JazzBrotha]

Yes, but what if I want to have different grid structures of different devices? I can't switch col-[1-12] for different devices, right?

[picturepan2]

@JazzBrotha Have you tried something like this col-xs-12 col-sm-6 col-3?

[JazzBrotha]

Yes, I did. After 1200px it doesn't apply the width of the column span, thus breaking the grid structure.

[picturepan2]

@JazzBrotha Can you show me your code?

[JazzBrotha]

@picturepan2 Sure man.

<div class="columns">
   <div class="column col-xs-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 col-2">
   </div>
 </div>

[picturepan2]

@JazzBrotha The column width becomes 25% when the window width is larger than 960px and less than or equal to 1280px. And it becomes 16.66666667% when the window is larger than 1280px. Is it what you need?

[JazzBrotha]

@picturepan2 No. What if I want the width to become 50% at screens larger than 1280px? I can't just change col-2 to col-6 since I am using the responsive grid system.

[picturepan2]

@JazzBrotha I think you can just change col-2 to col-6. In your case, you have already defined every situation width <= 1280px, and col-2 only work when width > 1280px.

[JazzBrotha]

@picturepan2 Ok. It doesn't work like that for me. The width of the column is stuck at 16.66666667% on all screen resolutions >1280px for col-[1-12], but maybe I am doing something wrong. However, I had a few friends who experienced the same issue hence why I opened the pull request.

[picturepan2]

@JazzBrotha No. Maybe it is Spectre's bug. Can you show me more code? Or online example?
I don't merge the Pull Request, because this change is so big that many projects will be impacted.
Thank you.

[JazzBrotha]

@picturepan2 Of course man. I understand completely. Unfortunately I don't have a live example of the non-working grid, as I changed it for my application to work better on larger screens.

[picturepan2]

@JazzBrotha Can you try your app with the Responsive Resizer tool?

[alexandremjacques]

I can see that @picturepan2 is concerned about the impact of changing the way grids are created. My suggestion is: take @JazzBrotha solution (which solve every problem related to responsiveness) and use it with other class names (instead of col-xx-xx), keeping both solutions at the same time. That way users can keep their site working and, meanwhile, people who needs responsiveness can use the new solution. Eventually, you can deprecate the old solution.

[kosciak9]

I have similar problem with Grid System and want to +1 the Pull Request. Is the solution proposed by @alexandremjacques considered by you, @picturepan2? :)

[Geczy]

Need this as well

[jsmsalt]

Most grid systems are mobile first, +1 to this.

For example, if I need a column to have 100% of the size in mobile phones and from a medium size only have 50% of size.

In Spectre:
. col-sm-12. col-6

In other frameworks it would be:
. col-sm-12. col-md-6

No need to use. col-6 as a fallback. Because you clearly can't use .col-xl-6, it wouldn't apply to screens that exceed 1280px.

Visibility classes also need to be mobile first. They are currently "visible to this size" or "hidden to this size", unlike most frameworks that specify "visible from this size" and "hidden from this size".

It is a change of perspective that at first is difficult to understand if you are accustomed to modern practices that focus on "mobile first".

[picturepan2]

@jsmsalt The idea behind Spectre grid is targeting the specific size range "breakpoint between", not the "breakpoint up". It covers all situations, for example .col-6 applies to all window sizes.