Improved responsive visibility helpers

[wfendler]

Right now the show/hide stuff is kind of confusing. I think this is an improvement to those. We've been using it on a current project and it's been working great.

The advantages to this is that you're only thinking about one thing: when it is hidden. This allows the element to inherit its natural display value when it should be visible. It's also much easier to think about and understand.

[athaeryn]

William added these to another project, and they've been wonderful. I don't know if they've been fully put through their paces yet, though. As long as we test them a little to make sure they're solid, you have my +1.

[cstoobes]

Love this approach! Can we rename 'hide' to 'hidden', so the classes fit better with our naming conventions? Also, I feel like these could be misinterpreted. 'hide-above-hand' sounds like it wouldn't hide right on hand's breakpoint, but it actually will. Would 'hidden-hand-and-up' make more sense?

[wfendler]

Yeah, I had trouble with the names at first too. I'm cool with your modification of .hidden-hand-and-up. It follows the breakpoint naming a little better.

I'm wondering if maybe this exposes a fault in some of our general breakpoint naming stuff as a whole.

@include media-query(lap-and-down){
  // These styles apply to everything *below* lap, it's not technically "lap" and down.
}

So, technically a media query like the one above should be named something like "below-lap-start". It's difficult to talk about media-query breakpoints because we can go back and forth between talking about them as a specific point, or a range between two points.

Sorry, no real solutions in this comment. I think if we go ahead and keep this code like I proposed but use @cstoobes suggested name modification.. we can maybe tackle this bigger media-query problem later after we can put some more thought into it.

[cstoobes]

I agree with the overall problem, but I guess the hidden classes should still mirror the breakpoint classes. That way they are at least identically incorrect. As you have it, breakpoints don't make sense on the 'and-down' but hidden classes don't make sense on the 'and-up'

[wfendler]

Exactly. Having them consistent for now is what will be best. Then we can fine-tune the names later.

:+1:

[cstoobes]

Any other comments before I merge this?