*-visible / *-hidden classes

[lechup]

I've read docs, and I didn't notice any *-visible / *-hidden classes.

Is using those are somewhat wrong and that is why You do not provide them?

Maybe this is a topic for PR?

[lechup]

@leejordan I've created a gist to show what i mean:
https://gist.github.com/lechup/269fd0e93e82d205266d636981ddceb0

It is based on Twitter bootrstrap 4 approach:
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

[dmoojunk]

For anyone interested, I quite liked this scss pattern for generating this - Credit to csswizardry and inuitt.css for the patterns. I will try and get round to a PR.

$breakpoints: (
    'xs-only'     'screen and (max-width: 29.94em)',
    'sm-only'     'screen and (min-width: 30em) and (max-width: 47.94em)',
    'sm-and-up'   'screen and (min-width: 30em)',
    'md-only'     'screen and (min-width: 48em) and (max-width: 74.94em)',
    'md-and-up'   'screen and (min-width: 48em)',
    'lg-only'     'screen and (min-width: 75em) and (max-width: 99.94em)',
    'lg-and-up'   'screen and (min-width: 75em)',
    'xlg-and-up'  'screen and (min-width: 100em)',

    'palm'               'screen and (max-width: 47.94em)',
    'lap'                'screen and (min-width: 48em) and (max-width: 74.94em)',
    'lap-and-up'         'screen and (min-width: 48em)',
    'portable'           'screen and (max-width: 74.94em)',
    'desk'               'screen and (min-width: 75em)',

    'retina'      '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
  ) !default;

@mixin media-query($mq) {
  $breakpoint-found: false;
  // Loop through the list of breakpoints we’ve provided in our settings file.

  @each $breakpoint in $breakpoints {
    // Grab the alias and the condition from their respective locations in
    // the list.
    $alias: nth($breakpoint, 1);
    $condition: nth($breakpoint, 2);
    // If the media query we’ve specified has an alias and a condition...

    @if $mq == $alias and $condition {
      // ...tell the mixin that we’ve found it...
      $breakpoint-found: true;
      // ...and spit it out here.

      @media #{$condition} {

        @content;
      }
    }
  }
  // If the user specifies a non-exitent alias, send them a warning.

  @if $breakpoint-found == false {

    @warn  'Oops! Breakpoint ‘#{$mq}’ does not exist. ';
  }
}

@mixin hide {
  display: none !important;
}

@each $state in xs-only,
  sm-only,
  sm-and-up,
  md-only,
  md-and-up,
  lg-only,
  lg-and-up,
  xlg-and-up,
  palm,
  lap,
  lap-and-up,
  portable,
  desk,
  retina {

  @include media-query(#{$state}) {
    .hide--#{$state} {
      @include hide;
    }
  }
}

[leejordan]

I guess I'm just concerned it will bloat out the framework for a feature that not everybody will need. Right now it's quite focused on one thing. However, it's possible I am wrong about this :)

[dmoojunk]

@leejordan fair enough. Its not difficult to implement if you need it.

[lechup]

Hm... @leejordan so maybe we create separate repo reflex-grid-addons and provide info in the docs ?

[leejordan]

Maybe we could add it to this repo but I'm open to ideas on how to make it optional in here. Or maybe I'm just wrong and it should be added by default. I'd be interested to see how much it adds to the final compiled and minified css file size.

[lechup]

See here:
https://gist.github.com/lechup/8bcf7b7af87e0d881c23a4674c75d540#file-reflexvisibility-min-css
it is 646 bytes

10195 bytes has reflexgrid itself, so it is 6,4% size gain ...

[leejordan]

I guess that's worth it as it seems like there is some demand. Open a PR and I'll replicate the same functionality in LESS just for parity 👍

[lechup]

@leejordan I was checking the size of my gist. @dmoojunk code has additional classes visible-only.

Which one do You want me to include? TWB4 classes up/down or code proposed by @dmoojunk ?

[dmoojunk]

I would strip the visible only's. Its a pretty niche use case I have.

[kode8]

This would be super handy! Foundation do the same, hide-for-medium, show-for-medium-up etc

[manuelbieh]

Nice. I landed here because I wanted to open a ticket for that. I need to hide content on small devices. That's currently not possible. Which is bad. In my case. I'm pretty sure there will be other people looking for a way to hide content on mobile.

Adding something like

.grid__col-xs-hidden, 
.grid__col-sm-hidden, 
.grid__col-md-hidden, 
.grid__col-lg-hidden, 
.grid__col-xlg-hidden {
  display: none;
}

doesnt bloat anything.

[leejordan]

I ended up needing these myself so I've added my implementation which is optional in version 1.5.0

https://github.com/leejordan/reflex/releases/tag/1.5.0