Element not visibility before sm-0 and md-0

[aag23]

For example: <div class="col-1_xs-12_sm-0_md-9_lg-12">...</div>

It seems this div must be displayed on xs, md and lg sizes, and be hidden on sm. But it's not working, cause on xs-screen div inherits "display: none" by sm-size.

Is it a bug and how to fix it? Thanks.

[ixrock]

It's bad way to mix 2 different css-entities in that manner (size of column and visibility). With current implementation it seems not possible to turn back visibility of column, because on xs-size all previous breakpoints have been applied their styles. With changing column size col-(1-12) it works cause it simply overrides flex-basis, but (xs|sm|md|lg)-0 uses display:none to hide the column.

Solution: make api to show/hide columns with separated modifiers xs-visible md-hidden and override with media-query same css-property (display).

[aag23]

fine, thank you!

[bryanwillis]

There's definitely a cleaner sass/scss way of writing this, but this works:

[class*="#{$gl-colName}-"][class*="-1"], [class*="#{$gl-colName}-"][class*="-2"], [class*="#{$gl-colName}-"][class*="-3"], [class*="#{$gl-colName}-"][class*="-4"], [class*="#{$gl-colName}-"][class*="-5"], [class*="#{$gl-colName}-"][class*="-6"], [class*="#{$gl-colName}-"][class*="-7"], [class*="#{$gl-colName}-"][class*="-8"], [class*="#{$gl-colName}-"][class*="-9"], [class*="#{$gl-colName}-"][class*="-10"], [class*="#{$gl-colName}-"][class*="-11"], [class*="#{$gl-colName}-"][class*="-12"] 
{
  display: block;
}
[class*="#{$gl-colName}-"][class*="-0"]{
  display: none;
}

@media #{$gl-xl}{
  [class*="#{$gl-colName}-"][class*="_xl-1"], [class*="#{$gl-colName}-"][class*="_xl-2"], [class*="#{$gl-colName}-"][class*="_xl-3"], [class*="#{$gl-colName}-"][class*="_xl-4"], [class*="#{$gl-colName}-"][class*="_xl-5"], [class*="#{$gl-colName}-"][class*="_xl-6"], [class*="#{$gl-colName}-"][class*="_xl-7"], [class*="#{$gl-colName}-"][class*="_xl-8"], [class*="#{$gl-colName}-"][class*="_xl-9"], [class*="#{$gl-colName}-"][class*="_xl-10"], [class*="#{$gl-colName}-"][class*="_xl-11"], [class*="#{$gl-colName}-"][class*="_xl-12"] 
  {
    display: block;
  }
  [class*="#{$gl-colName}-"][class*="_xl-0"]{
    display: none;
  }
}

@media #{$gl-lg}{
  [class*="#{$gl-colName}-"][class*="_lg-1"], [class*="#{$gl-colName}-"][class*="_lg-2"], [class*="#{$gl-colName}-"][class*="_lg-3"], [class*="#{$gl-colName}-"][class*="_lg-4"], [class*="#{$gl-colName}-"][class*="_lg-5"], [class*="#{$gl-colName}-"][class*="_lg-6"], [class*="#{$gl-colName}-"][class*="_lg-7"], [class*="#{$gl-colName}-"][class*="_lg-8"], [class*="#{$gl-colName}-"][class*="_lg-9"], [class*="#{$gl-colName}-"][class*="_lg-10"], [class*="#{$gl-colName}-"][class*="_lg-11"], [class*="#{$gl-colName}-"][class*="_lg-12"] 
  {
    display: block;
  }
  [class*="#{$gl-colName}-"][class*="_lg-0"]{
    display: none;
  }
}

@media #{$gl-md}{
  [class*="#{$gl-colName}-"][class*="_md-1"], [class*="#{$gl-colName}-"][class*="_md-2"], [class*="#{$gl-colName}-"][class*="_md-3"], [class*="#{$gl-colName}-"][class*="_md-4"], [class*="#{$gl-colName}-"][class*="_md-5"], [class*="#{$gl-colName}-"][class*="_md-6"], [class*="#{$gl-colName}-"][class*="_md-7"], [class*="#{$gl-colName}-"][class*="_md-8"], [class*="#{$gl-colName}-"][class*="_md-9"], [class*="#{$gl-colName}-"][class*="_md-10"], [class*="#{$gl-colName}-"][class*="_md-11"], [class*="#{$gl-colName}-"][class*="_md-12"] 
  {
    display: block;
  }
  [class*="#{$gl-colName}-"][class*="_md-0"]{
    display: none;
  }
}

@media #{$gl-sm}{
  [class*="#{$gl-colName}-"][class*="_sm-1"], [class*="#{$gl-colName}-"][class*="_sm-2"], [class*="#{$gl-colName}-"][class*="_sm-3"], [class*="#{$gl-colName}-"][class*="_sm-4"], [class*="#{$gl-colName}-"][class*="_sm-5"], [class*="#{$gl-colName}-"][class*="_sm-6"], [class*="#{$gl-colName}-"][class*="_sm-7"], [class*="#{$gl-colName}-"][class*="_sm-8"], [class*="#{$gl-colName}-"][class*="_sm-9"], [class*="#{$gl-colName}-"][class*="_sm-10"], [class*="#{$gl-colName}-"][class*="_sm-11"], [class*="#{$gl-colName}-"][class*="_sm-12"] 
  {
    display: block;
  }
  [class*="#{$gl-colName}-"][class*="_sm-0"]{
    display: none;
  }
}

@media #{$gl-xs}{
  [class*="#{$gl-colName}-"][class*="_xs-1"], [class*="#{$gl-colName}-"][class*="_xs-2"], [class*="#{$gl-colName}-"][class*="_xs-3"], [class*="#{$gl-colName}-"][class*="_xs-4"], [class*="#{$gl-colName}-"][class*="_xs-5"], [class*="#{$gl-colName}-"][class*="_xs-6"], [class*="#{$gl-colName}-"][class*="_xs-7"], [class*="#{$gl-colName}-"][class*="_xs-8"], [class*="#{$gl-colName}-"][class*="_xs-9"], [class*="#{$gl-colName}-"][class*="_xs-10"], [class*="#{$gl-colName}-"][class*="_xs-11"], [class*="#{$gl-colName}-"][class*="_xs-12"] 
  {
    display: block;
  }
  [class*="#{$gl-colName}-"][class*="_xs-0"]{
    display: none;
  }
}

[bryanwillis]

Here's the complete scss and css. A note though, if you use this gist, notice I changed the media queries to be mobile first like most other grid frameworks and dropped .equalHeight because I've found it has too many issues currently. I also changed the units to px because the current way can get thrown off if the font size changes.

[ixrock]

Probably this should make it cleaner :D

@media #{$gl-xl}{
  [class*="#{$gl-colName}-"]:not([class*="_xl-0"])  {
    display: block;
  }
  [class*="#{$gl-colName}-"][class*="_xl-0"]{
    display: none;
  }
}

And so on.. But still bugs possible.. if the block which was hidden becomes visible could break layout cause it might have had not display: block, but display: flex for example (inner grid?).

[bryanwillis]

@ixrock Could you give an example of where it could break?

If I'm understanding what you're saying couldn't we just add in the grid as well?

@media #{$gl-xl}{
  [class*="#{$gl-colName}-"]:not([class*="_xl-0"])  {
    display: block;
  }
  [class*="grid"][class*="#{$gl-colName}-"]:not([class*="_xl-0"])  {
    display: flex;
  }
  [class*="#{$gl-colName}-"][class*="_xl-0"]{
    display: none;
  }
}

[ixrock]

@bryanwillis yeah, probably it should work!

[bryanwillis]

Here it is compiled into css with the current Gridlex variables applied. I haven't tested, but I think I got it right:

  [class*="col-"]:not([class*="col-0"]) {
    display: block;
  }

  [class*="grid-"][class*="col-"]:not([class*="col-0"]) {
    display: flex;
  }

  [class*="col-"][class*="col-0"] {
    display: none;
  }

@media screen and (max-width: 80em) {
  [class*="col-"]:not([class*="_lg-0"]) {
    display: block;
  }

  [class*="grid-"][class*="col-"]:not([class*="_lg-0"]) {
    display: flex;
  }

  [class*="col-"][class*="_lg-0"] {
    display: none;
  }
}
@media screen and (max-width: 64em) {
  [class*="col-"]:not([class*="_md-0"]) {
    display: block;
  }

  [class*="grid-"][class*="col-"]:not([class*="_md-0"]) {
    display: flex;
  }

  [class*="col-"][class*="_md-0"] {
    display: none;
  }
}
@media screen and (max-width: 48em) {
  [class*="col-"]:not([class*="_sm-0"]) {
    display: block;
  }

  [class*="grid-"][class*="col-"]:not([class*="_sm-0"]) {
    display: flex;
  }

  [class*="col-"][class*="_sm-0"] {
    display: none;
  }
}
@media screen and (max-width: 35.5em) {
  [class*="col-"]:not([class*="_xs-0"]) {
    display: block;
  }

  [class*="grid-"][class*="col-"]:not([class*="_xs-0"]) {
    display: flex;
  }

  [class*="col-"][class*="_xs-0"] {
    display: none;
  }
}

[bryanwillis]

Scss

$breakpoints : (
  lg: 80em,
  md: 64em,
  sm: 48em,
  xs: 35.5em
) !default;

[class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
  display: block;
}
[class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
  display: flex;
}
[class*="#{$gl-colName}-0"] {
  display: none;
}
@mixin responsiveHide($breakpoints) {
  @each $breakpoint-name, $breakpoint-value in $breakpoints {
    @media screen and (max-width: $breakpoint-value) {
      [class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"]) {
        display: block;
      }
      [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"])  {
        display: flex;
      }
      [class*="#{$gl-colName}-"][class*="_#{$breakpoint-name}-0"]{
        display: none;
      }
    }
  }
}
@include responsiveHide($breakpoints);

[devlint]

Hello and thanks to you all for the discussion about the issue :)

@bryanwillis Thanx for the code which I am inspired! I change a little the code like this in the next release:

/************************
    HIDING COLS
*************************/
[class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
  display: block;
}
[class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
  display: flex;
}
[class*="#{$gl-colName}-"][class*="#{$gl-colName}-0"] {
  display: none;
}
@media #{$gl-lg}{
  [class*="#{$gl-gridName}"] {
    > :not([class*="_lg-0"]){
      display: block;
    }
    &:not([class*="_lg-0"]) {
      display: flex;
    }
    >[class*="_lg-0"],
    &[class*="-equalHeight"] > [class*="_lg-0"]{
      display: none;
    }
  }
}
@media #{$gl-md}{
  [class*="#{$gl-gridName}"] {
    > :not([class*="_md-0"]){
      display: block;
    }
    &:not([class*="_md-0"]) {
      display: flex;
    }
    >[class*="_md-0"],
    &[class*="-equalHeight"] > [class*="_md-0"]{
      display: none;
    }
  }
}
@media #{$gl-sm}{
  [class*="#{$gl-gridName}"] {
    > :not([class*="_sm-0"]){
      display: block;
    }
    &:not([class*="_sm-0"]) {
      display: flex;
    }
    >[class*="_sm-0"],
    &[class*="-equalHeight"] > [class*="_sm-0"]{
      display: none;
    }
  }
}
@media #{$gl-xs}{
  [class*="#{$gl-gridName}"] {
    > :not([class*="_xs-0"]){
      display: block;
    }
    &:not([class*="_xs-0"]) {
      display: flex;
    }
    >[class*="_xs-0"],
    &[class*="-equalHeight"] > [class*="_xs-0"]{
      display: none;
    }
  }
}

[devlint]

Version 2.2.3 is published. If it's ok for you, I let you close the issue? Thx.