Responsive push and pull classes about inuit.css HOT 13 CLOSED

My opinion is to build a code generator on the inuit.css site to output specifically that code snippets you want as a .zip file.
Everyone could decide if he needs feature A or B or both or none :).

from inuit.css.

Hi,

would it be a big problem there was another var which would let us decide if we want to have responsive push and pull? Currently in my project I use only one push class and I just make it left: 0; on everything different from desktop. It's not even close to a perfect solution, but it’s still better that having a lot of unused responsive push and pull classes in the code.

Piotrek

from inuit.css.

I agree with Piotrek. I'd prefer to set a var in my config or comment out a line to enable the responsive push/pull classes. BTW thanks for sharing your work with us! You are great!

from inuit.css.

Okay yeah, we would probably have $responsive, $responsive-push and $responsive-pull vars so that you can be sure to include as little as possible :)

from inuit.css.

I'd really like to leave grid classes out of the markup, because any intermediate responsive design results in a lot of class garbage and that makes me a sad 🐼. I like how Susy solves the issue by leaving the markup alone.

This kind of approach would fix the problem, but I didn't really think it through, maybe there's an obvious unacceptable downside :P

from inuit.css.

silvenon: If you want to avoid having the grid classes in your markup, you can probably @extend the grid classes in your Sass.

.featured {
  @extend .one-whole;
  @extend .lap-one-half;
  @extend .desk-one-quarter;
}

I believe this would work? (Untested)

from inuit.css.

Yes, you're right 😀 I forgot about @extend.

from inuit.css.

It would still be nice to be able to write a fraction number in a mixin, though:

.grid {
  @include grid-fraction(2 2 1, desk lap palm);
}

Rather than having to do:

.grid {
  @extend .desk-one-half;
  @extend .lap-one-half;
  @extend .palm-one-whole;
}

What do you guys think?

from inuit.css.

@silvenon, I understand you want this so called "semantic" grid, but it defeats the purpose of the framework. It's supposed to be an object oriented framework. By introducing a mixin that leads to repeated code everywhere you aren't being object oriented at all. It's nothing wrong with using grid classes in your markup. And they're reusable which is super nice.

If you really hate dealing with classes in your markup you can still use Susy and skip including the _widths.scss from inuit.

from inuit.css.

@kevva I see your point but @extend is fundamentally different from @mixin. I'd argue @extending keeps your CSS a lot more DRY than including 3 grid related classes in every grid container element in your site. And it doesn't break the OOCSS principle either. Semantic or no doesn't matter, this eases development, and that's all that matters, isn't it?

from inuit.css.

@schjetne, well @silvenon did bring up using a mixin so that's what I responded to. I've no problem with people using extend directives, although it can can create very very long selectors. I, personally, prefer to use classes in my markup instead.

I didn't claim that any solution was "semantic". I was just referring to this and this. lolz.

from inuit.css.

I suggest a mixin for the responsive push & pull classes as a compromise b/w bloat and functionality.

from inuit.css.

Added this: 32119b0

from inuit.css.