responsive grid classes

[oksana-khristenko]

Having responsive grid classes like lap-grid--center, palm-grid--rev etc. may be useful to add more flexibility to grids at different breakpoints.

Have a look at https://github.com/oksana-khristenko/csswizardry-grids/tree/responsive-grid-classes - what do you think?

[emzo]

@csswizardry I think this is a nice pattern for all kinds of object modifiers, not just the grid modifiers. Maybe you could make more use of this within inuit.css? A typical use-case would be changing how nav objects appear at different viewport sizes, like so:

<ul class="nav  portable-nav--stacked  desk-nav--fit">
    <li><a href=#>Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Portfolio</a></li>
    <li><a href=#>Contact</a></li>
</ul>

There's a danger of bloating the CSS by doing this for every object, but you would only need this for certain kinds of objects. You could also make use of placeholder (silent) classes, just as you do for grids.

[Anderson-Juhasc]

Seems like a good option :).

[csswizardry]

I quite like the idea of this; anyone fancy doing the work for a v2.1.0 release? ;)

[fuzenco]

I'd definitely love to see this.

[andykirk]

Does it need to be restricted to nav, though? Couldn't it be abstracted out more to cover other use cases? Just pondering...

Cheers

[BPScott]

I like it, though I am concerned with the potential for bloat caused by wrapping everything in breakpoint classes. Users should be able to define if they want these extensions on a per-breakpoint basis - in the same manner as how the push and pull classes can be conditionally included currently.

---

EDIT The following was me waxing lyrical over @emzo's use-case, but since typing it up I have realised that it is not possible due to how @extend works, and the only way to implement this is by swapping almost everything out with mixins but I've left it here in case anybody gets inspired

I've been half-pondering something similar relating to emzo's use-case but have been put off by the potential for css bloat that can occur should this get blindly applied for every non-silent class (many of which wouldn't be needed for a given design).

As such, I think this is the tipping point where I would go from having many per-breakpoint classes and writing <ul class="nav portable-nav--stacked desk-nav--fit"> to keeping the existing classes with html like <ul class="main-navigation"> and writing my own chunk of scss like:

.main-navigation {
  @extend '.nav';
  @include media-query('portable') { @extend '.nav--stacked'; }
  @include media-query('desk') { @extend '.nav--fit'; }
}

Replacing 'main-navigation' with 'nav--stacked-then-fit' or something if you like hyper-descriptive class names.

I'm pretty sure this is already possible with Inuit 5.0. and would reduce the need for @csswizardry to have to include the mixin-with-namespaces pattern on every object, which I think increases code maintenance cost and has the potential to hurt code readability for newcomers who want to read the source to see how things are put together.

[oksana-khristenko]

I am working on it (for v2.1.0), need to do some tests first so hopefully send a link soon!

[csswizardry]

Awesome! It will be v2.2.0 now, your grid alignment was v2.1.0 :)

[oksana-khristenko]

Awesome, thanks :)

[oksana-khristenko]

Some thoughts (and link to a working version - please help with testing).

To take full advantage of responsive grid modifiers, there is a need for modifier 'pairs'. For example, to align centered grid on lap view to the left and on palm view to the right, you would use something like this:

<div class="grid--center lap--grid--left palm--grid--right">...</div>

Here are suggestions for all current modifiers:

1. grid--center, grid--left, grid--right to align entire grid
2. grid--full, grid--spaced
3. for grid--rev I couldn't think of a good pair name (can you?), so I suggest using grid--ltr and grid--rtr

Sample HTML (add markup fix, github doesn't seem to like it in comments):

    <div class="grid--full  grid--rtr  grid--right  lap--grid--spaced  lap--grid--center"> 

       <div class="grid__item one-quarter">
            <p class="demo-block">Grid 1.2</p>
        </div>

       <div class="grid__item one-quarter">
            <p class="demo-block">Grid 1.3</p>
        </div>

    </div>

    <div class="grid--full  grid--rtr  grid--right  lap--grid--spaced  lap--grid--left "> 

        <div class="grid__item one-quarter">
            <p class="demo-block">Grid 1.1</p>
        </div>

        <div class="grid__item one-quarter">
            <p class="demo-block">Grid 1.2</p>
        </div>

       <div class="grid__item one-quarter">
            <p class="demo-block">Grid 1.3</p>
        </div>

       <div class="grid__item one-quarter">
            <p class="demo-block">Grid 1.4</p>
        </div>

    </div> 

Link: https://github.com/oksana-khristenko/csswizardry-grids/tree/feature/responsive-grid-classes

[jakob-e]

Hi,

First - I don't like the idea of class dependent gridsystems.... classes are just there because CSS selecting sucks!

Turning this a little less negative I've made an attempt to "workaround" the "missing" @media extends here:

https://github.com/nex3/sass/issues/640#issuecomment-16505364

Best to you all Jakob E