Hide classes

[mattjburrows]

In iPlayer we have had the need to add some classes which show / hide grid columns based on breakpoint.

The current implementation we have is a simple 'display: none' and then breakpoint specific classes for reshowing. This has been problematic as the reshowing classes have traditionally been display: block, which doesn't work well when you want to reset to any other display type...

My proposal would be:

<div class="gel-layout">
    <div class="gel-grid__item  gel-1/2 gel-1/4@m gel-hide-gte@l"></div>
    <div class="gel-grid__item  gel-1/4@l gel-hide-lte@m"></div>
</div>

@mixin gel-hide-until ($mq) {
  @include mq($until: $mq) {
    display: none !important;
  }
}

@mixin gel-hide-from ($mq) {
  @include mq($from: $mq) {
    display: none !important;
  }
}

.gel-hide-lte {
  &\@s {
    @include gel-hide-until(gel-bp-m);
  }

  &\@m {
    @include gel-hide-until(gel-bp-l);
  }

  &\@l {
    @include gel-hide-until(gel-bp-xl);
  }

  &\@xl {
    @include gel-hide-until(gel-bp-xxl);
  }
}

.gel-hide-gte {
  &\@m {
    @include gel-hide-from(gel-bp-m);
  }

  &\@l {
    @include gel-hide-from(gel-bp-l);
  }

  &\@xl {
    @include gel-hide-from(gel-bp-xl);
  }

  &\@xxl {
    @include gel-hide-from(gel-bp-xxl);
  }
}

This solution would only ever hide with no need for reshowing.

[mintuz]

We do something similar within Grandstand Framework - https://github.com/bbc/grandstand/blob/master/lib/utilities/_display.scss

[mattjburrows]

@mintuz I see, however you still have to reset based on initial state. This propsal would be just hiding when you need to hide. Do you think there is a case for getting it added?

[JoeHart]

This looks perfectly reasonable to me, took me longer than I'd like to admit to work out what gte and lte stood for but I can't think of anything better that conveys the same information as accurately and concisely.

[tsouk]

I think it'd be good for gel-grid to have something like that it. +1 from me!

[Mousius]

Currently all of the gel-grid classes use the mobile first convention, so use @s to mean "from the small breakpoint". What you are introducing is a different pattern and I know there's talk of gel-typography using the @s option to allow different fonts at different breakpoints. This would mean these hide classes break from how the current gel packages work and are more fiddly to understand. My suggestion would be to listen to the gel-grid configuration to figure out whether the item should be display: block or display: flex so you can use the simpler:

<div class="gel-layout">
    <div class="gel-grid__item gel-1/2 gel-1/4@m gel-hide@l"></div>
    <div class="gel-grid__item gel-1/4@l gel-hide gel-show@m"></div>
</div>

[mattjburrows]

@JoeHart @tsouk has @DaMouse404 argument swayed you? Or do you still think this could be a good idea?

[tsouk]

Hey @DaMouse404, @mattjburrows Sorry for the late replies on this. We are live on AWS now, so more time to do more cool shary things.

I think I am swayed by the argument. I still would like to have there show, hide classes though!

We can invite more peeps into this discussion btw, lemme say something in Code:GEL

[EmmaJP]

If the only thing hiding something at a given breakpoint is the CSS, does the code and assets still load in the background? I get that smart phones and tariffs are more capable ... but not all users are on the latest device or the best tariff or 4G. Just something to keep in mind. Up to you to decide if its an issue. That said, code consistency is always a good thing.