Support for mobile grids?

[palominoz]

Hello there, congratulations and thank you for the nice grids. Sometimes it would be useful to build grids on mobile devices too, do you plan to integrate something?

[cobyism]

I don’t usually find myself needing a general solution for mobile grids. If I need to lay out content in a grid on a small screen, it’s usually pretty custom to the content at hand rather than a regular grid-like arrangement. Are you meaning just being able to disable the stacking on mobiles and continue to use the .half and .third classes and so forth? If that’s your goal, then you should be able to easily customise your site’s gridism CSS file to do exactly that by just commenting out these lines here (or just the specific lines that affect your content in the way you don’t want). If your goal is something else, I’d love to hear more about what exactly it is you’re after :smile:

[palominoz]

Exactly. For example, let's say that we want a full-width one row 3 columns navigation menu. The grids would model nicely the layout, except that it would stack on small screens. In my use case I have managed the styles bypassing gridism because it was easy, but a no-stack class to be added on the parent grid maybe helps in more complex situations

[cobyism]

a no-stack class to be added on the parent grid maybe helps in more complex situations

The more I think about it, adding support for a .no-stacking-on-mobiles class that would stop things stacking like you suggest seems like a good idea. I think my hesitation before might have been because I wasn’t immediately sure how to implement that, but I realised today that it might be doable with something nifty negation, like qualifying this rule with a :not(.no-stacking-on-mobiles) condition on the .grid class or something similar.

@palominoz Would you like to take a stab at that yourself and send a pull request given you’ve clearly got use-cases for it to play with and see how it works? I’m happy to have a play too, but it might be quicker and more practical if you’re already working on a project that would use it. :grin:

[palominoz]

The :not selector was an elegant idea! It works correctly for this HTML

<div class="grid no-stacking-on-mobiles">
    <div class="unit half">box1</div>
    <div class="unit half">box2</div>
</div>

in my project I didn't find other issues

[palominoz]

I have noticed that the no-stacking-on-mobiles feature is not working on nested grids. This happens because this selector:

.grid:not(.no-stacking-on-mobiles) .unit 

is applying on nested unit elements. My solution was to apply stacking only on direct children of the grid element. It comes natural for me to have units that are only direct children of the grid element:

.grid:not(.no-stacking-on-mobiles) > .unit 

The drawback is that it could make more difficult wrapping layouts like in this case:

<div class="grid">
    <div class="wrapper">
        <div class="unit half" />
        <div class="unit half" />
    </div>
</div>

Here stacking fails silently and it could be difficult to understand without digging the CSS library.

[cobyism]

The drawback is that it could make more difficult wrapping layouts like in this case

So what I would suggest is that any .wrapper classes should be used outside the .grid classes you use, since wrapping to a non-standard max-width would be easier that way, no?

My solution was to apply stacking only on direct children of the grid element.

Yeah, if that change doesn’t negatively affect regular nested grids (it shouldn’t change anything as long as people remember to start a new inner .grid each time they go to nest), that solution should be :sparkles: :+1:

[cobyism]

I’ve merged in #15, so I’m going to close this out. :grin: