[Grid] Add visibility classes

[joshblack]

From @DusanMilko:

I would like to request carbon team to add visibility classes for breakpoints so you could do:
bx--col-xs-1 bx--col-lg-hidden <- this hides for lg and up, could also add bx--col-lg-only-hidden to hide for that breakpoint only. I can make a pr if you would prefer, let me know

Like foundation has done:
https://foundation.zurb.com/sites/docs/visibility.html

[DusanMilko]

Will add p/r today

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[fabpico]

@joshblack I would like to reactivate this issue, I also would like to have such classes.

[joshblack]

Hi there @FabianPiconeDev! I believe these should be available under the "0 column span" classes. Let me know if I'm misunderstanding or you're looking for something else! 👀

[fabpico]

@joshblack Ok but, when I have:

<div className={'bx--col-sm-0'}>{icon.large}</div>
<div className={'bx--col-lg-0'}>{icon.small}</div>

I would expect that the element with class bx--col-sm-0 would be visible in large view. But it is never visible because the CSS behind it is without any media query limitation.

.bx--col-sm-0 {
    display: none;
}

The element is not in a grid (so my request is not exclusively grid related). When the element is not in a grid, I wouldn't want to use grid classes.

I see I could make something like:

<div className={'bx--col-lg-12 bx--col-sm-0'}>{icon.large}</div>
<div className={'bx--col-sm-12 bx--col-lg-0'}>{icon.small}</div>

but this is less readable and implicits a wrapping grid (which is optional), compared to having classes like small-only, medium-up, large-only, and so on.

[joshblack]

Got it, @FabianPiconeDev! That totally makes sense to me 👍 I'll re-open and we can make sure to guard these declarations with max-width in media queries.

Thanks so much for clarifying, it was super helpful and I appreciate it.

[tw15egan]

@fabpico are you thinking of entirely new grid classes (bx-col-sm-0-only), that only hide content at specific breakpoints? Or do you think we should add media queries to the 0 column span classes (bx--col-sm-0) so that they should only hide content at that breakpoint?

Since you say you are not using it inside of a grid, perhaps these make even more sense living outside of the grid package, as a utility class inside @carbon/styles in the breakpoint.scss file. This would be a convenient way to hide things at different breakpoints outside of the grid context

@joshblack do you have any preferences? I think I am leaning towards adding utility classes to breakpoints.scss in the @carbon/styles since it can be done in the grid context already e.g. bx--col-lg-12 bx--col-sm-0

[tw15egan]

POC up in #11786

[fabpico]

@tw15egan

@fabpico are you thinking of entirely new grid classes (bx-col-sm-0-only), that only hide content at specific breakpoints?

I was thinking about entirely new visibility classes outside of the grid context, but breakpoint aware. Like small-only, medium-up, large-only.

I am already using such custom classes:

.medium-down {
  @media (min-width: $carbon--grid-breakpoint-large-width) {
    display: none;
  }
}

.small-only {
  @media (min-width: $carbon--grid-breakpoint-medium-width) {
    display: none;
  }
}

Since you say you are not using it inside of a grid, perhaps these make even more sense living outside of the grid package, as a utility class inside @carbon/styles in the breakpoint.scss file.

I totally agree.