Issue #8883: make responsive visibility classes mixable with each other #9692

turchenkoalex · 2013-08-16T17:42:58Z

visible-* classes now can be mixable with each other and hidden-* too (Issue #8883)

For example class="visible-xs visible-sm" will be visible at extra small and small screens, class="hidden-xs hidden-lg" hidden for extra small and large screen but visible for small and middle

<div class="visible-xs visible-md">Visible on medium and extra small only</div>
<div class="hidden-xs hidden-md">Visible on small and large only</div>

visible-* classes now compatible with each other and hidden-* too For example class="visible-xs visible-sm" will be visible at extra small and small screens, class="hidden-xs hidden-lg" hidden for extra small and large screen but visible for small and middle

masterbee · 2013-08-16T19:11:30Z

+1 for @turchenkoalex - Well done, I did a small test with your pull request on my fork, and the multi-classing works. Love the inverting of the base display properties ( hidden-* states as visible, and visible-* as invisible ) very smart and did the trick! @mdo any feedback? this is a great little tweak.

@cfarquharson - this will help us deal with the hiding over multiple discrete breakpoints.

eratzlaff · 2013-08-16T20:01:35Z

👍

pixelchutes · 2013-08-16T20:59:54Z

Definitely agree! Reviewed this yesterday and the approach is both elegant and functional. 🍻

mdo · 2013-08-16T21:45:36Z

Haven't played with it too much, but I think the downside here is that these classes are not entirely mixin-friendly now, correct? Since there are two declarations per class, Less won't pick it all up I believe.

Done any tests for that?

mdo · 2013-08-16T21:59:17Z

FYI, if we can fix this, we can slate it for 3.1 when we add new features. We won't be able to get this into 3.0 I'm afraid due to timing.

cfarquharson · 2013-08-16T22:51:37Z

yes, I fully agree!

dstroot · 2013-08-17T01:10:54Z

Saw this got punted to 3.1 by @mdo. I think its a great approach and would love to see it sooner. Cheers to @turchenkoalex and all the others who took a whack at this.

turchenkoalex · 2013-08-17T02:53:44Z

Sorry for that message, it's not worked idea

For @mdo request I removed double declaration of class visible-* and hidden-*

Visible classes:

The basic idea is that .responsive-invisibility(); moved from multiple declaration to each class

Code:

.visible-xs {
  .responsive-invisibility();
  @media (max-width: @screen-tablet) {
    .responsive-visibility();
  }
}
.visible-sm {
  .responsive-invisibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-visibility();
  }
}
.visible-md {
  .responsive-invisibility();
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-visibility();
  }
}
.visible-lg {
  .responsive-invisibility();
  @media (min-width: @screen-large-desktop) {
    .responsive-visibility();
  }
}

Someone else can test it?

Or I misunderstood what @mdo said?

masterbee · 2013-08-17T03:19:58Z

@turchenkoalex - I believe @mdo, just wants the code well tested. Your original pull request is elegant and works well but it changes the behaviour of the responsive utilities a bit. @mdo want to be sure to add this correctly and is pushing this off to 3.1 since they have a small window for 3.0. I will working on the tests for this later this week since I am curious on how this performs and would adopt for my own fork if everything works out.

Feel free to correct me if I am wrong @mdo

Thanks again @turchenkoalex - great work on this.

turchenkoalex · 2013-08-17T03:24:45Z

@masterbee thanks, I fully agree!

eratzlaff · 2013-08-17T03:55:23Z

@turchenkoalex Your new solution now work fine for mixins
http://lesscss.org/#-mixins
Example:

.tablet-phone {
  .visible-xs;
  .visible-sm;
}

class="show-xs-sm"
but don't work on normal case class="visible-xs visible-sm"

pixelchutes · 2013-08-17T04:03:53Z

@eratzlaff, shouldn't that be .visible-xs?

eratzlaff · 2013-08-17T04:10:20Z

@pixelchutes fixed tanks

eratzlaff · 2013-08-17T04:17:55Z

.visible-xs {
  @media (max-width: @screen-phone-max) {
    .responsive-visibility();
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
  &.visible-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-invisibility();
  }
  &.visible-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-visibility();
    }    
  }
}
.visible-sm {
  @media (max-width: @screen-phone-max) {
    .responsive-invisibility();
  }
  &.visible-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-visibility();
    }
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-visibility();
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
  &.visible-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-invisibility();
  }
  &.visible-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-visibility();
    }    
  }
}
.visible-md {
  @media (max-width: @screen-phone-max) {  
    .responsive-invisibility();
  }
  &.visible-xs {
    @media (max-width: @screen-phone-max) {  
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-visibility();
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-invisibility();
  }
  &.visible-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-visibility();
    }    
  }
}
.visible-lg {
  @media (max-width: @screen-phone-max) {
    .responsive-invisibility();
  }
  &.visible-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
  &.visible-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-visibility();
  }
}

Ugly code, but its work fine on my test cases.
If some one could find a way to clean it up.
Mixins

.show-xs {
    .visible-xs;
}
.show-sm {
    .visible-sm;
}
.show-md {
    .visible-md;
}
.show-lg {
    .visible-lg;
}

.show-xs-sm {
    .visible-xs;
    .visible-sm;
}
.show-xs-md {
    .visible-xs;
    .visible-md;
}
.show-xs-lg {
    .visible-xs;
    .visible-lg;
}
.show-sm-md {
    .visible-sm;
    .visible-md;
}
.show-sm-lg {
    .visible-sm;
    .visible-lg;
}
.show-md-lg {
    .visible-md;
    .visible-lg;
}

.show-xs-sm-md {
    .visible-xs;
    .visible-sm;
    .visible-md;
}
.show-xs-sm-lg {
    .visible-xs;
    .visible-sm;
    .visible-lg;
}
.show-xs-md-lg {
    .visible-xs;
    .visible-md;
    .visible-lg;
}
.show-sm-md-lg {
    .visible-sm;
    .visible-md;
    .visible-lg;
}

HTML

<div class="col-xs-6">
            <div class="visible-xs">visible-xs</div>
            <div class="visible-sm">visible-sm</div>
            <div class="visible-md">visible-md</div>
            <div class="visible-lg">visible-lg</div>
        </div>
        <div class="col-xs-6">
            <div class="show-xs">visible-xs</div>
            <div class="show-sm">visible-sm</div>
            <div class="show-md">visible-md</div>
            <div class="show-lg">visible-lg</div>
        </div>
        <div class="col-xs-6">
            <div class="visible-xs visible-sm">visible-xs visible-sm</div>
            <div class="visible-xs visible-md">visible-xs visible-md</div>
            <div class="visible-xs visible-lg">visible-xs visible-lg</div>
            <div class="visible-sm visible-md">visible-sm visible-md</div>
            <div class="visible-sm visible-lg">visible-sm visible-lg</div>
            <div class="visible-md visible-lg">visible-md visible-lg</div>
        </div>
        <div class="col-xs-6">
            <div class="show-xs-sm">visible-xs visible-sm</div>
            <div class="show-xs-md">visible-xs visible-md</div>
            <div class="show-xs-lg">visible-xs visible-lg</div>
            <div class="show-sm-md">visible-sm visible-md</div>
            <div class="show-sm-lg">visible-sm visible-lg</div>
            <div class="show-md-lg">visible-md visible-lg</div>
        </div>
        <div class="col-xs-6">
            <div class="visible-xs visible-sm visible-md">visible-xs visible-sm visible-md</div>
            <div class="visible-xs visible-sm visible-lg">visible-xs visible-sm visible-lg</div>
            <div class="visible-xs visible-md visible-lg">visible-xs visible-md visible-lg</div>
            <div class="visible-sm visible-md visible-lg">visible-sm visible-md visible-lg</div>
        </div>
        <div class="col-xs-6">
            <div class="show-xs-sm-md">visible-xs visible-sm visible-md</div>
            <div class="show-xs-sm-lg">visible-xs visible-sm visible-lg</div>
            <div class="show-xs-md-lg">visible-xs visible-md visible-lg</div>
            <div class="show-sm-md-lg">visible-sm visible-md visible-lg</div>
        </div>

Sorry for the long comment.

eratzlaff · 2013-08-17T04:40:48Z

Some code cleaned

.visible-xs {
  .responsive-invisibility();
  @media (max-width: @screen-phone-max) {
    .responsive-visibility();
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }
  }
  &.visible-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-visibility();
    }    
  }
  &.visible-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-visibility();
    }    
  }
}
.visible-sm {
  .responsive-invisibility();
  &.visible-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-visibility();
  }
  &.visible-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-visibility();
    }    
  }
  &.visible-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-visibility();
    }    
  }
}
.visible-md {
  .responsive-invisibility();
  &.visible-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-visibility();
    }    
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-visibility();
  }
  &.visible-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-visibility();
    }    
  }
}
.visible-lg {
  .responsive-invisibility();
  &.visible-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-visibility();
    }    
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }
  }
  &.visible-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-visibility();
  }
}

visible-xs and hidden-xs media query changed from (max-width: @screen-tablet) to (max-width: @screen-phone-max). -xs media query intersects with the -sm media query before.

mdo · 2013-08-19T03:35:47Z

What's the status on this? Unsure what the last commit accomplishes with regards to the latest comments. Plus, looks like there are conflicts. At this point, we'll have to slate this for v3.1 btw.

eratzlaff · 2013-08-19T04:02:51Z

@mdo Please try my solution. The last one. I try it with mixins and all work as far I try.
Maybe the code can be cleaner.

eratzlaff · 2013-08-19T04:08:09Z

@mdo missing part for hidden-*

.hidden-xs {
  .responsive-visibility();
  @media (max-width: @screen-phone-max) {
    .responsive-invisibility();
  }
  &.hidden-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-invisibility();
    }    
  }
  &.hidden-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-invisibility();
    }    
  }
  &.hidden-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-invisibility();
    }    
  }
}
.hidden-sm {
  .responsive-visibility();
  &.hidden-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-invisibility();
    }
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
  &.hidden-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-invisibility();
    }    
  }
  &.hidden-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-invisibility();
    }    
  }
}
.hidden-md {
  .responsive-visibility();
  &.hidden-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-invisibility();
    }    
  }
  &.hidden-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-invisibility();
    }    
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
  &.hidden-lg {
    @media (min-width: @screen-large-desktop) {
      .responsive-invisibility();
    }    
  }
}
.hidden-lg {
  .responsive-visibility();
  &.hidden-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-invisibility();
    }    
  }
  &.hidden-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-invisibility();
    }    
  }
  &.hidden-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-invisibility();
    }    
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-invisibility();
  }
}

mdo · 2013-08-19T07:19:46Z

Fixed via #9821.

ameyms · 2013-08-19T09:12:58Z

👍 awesome!

pixelchutes · 2013-08-19T18:04:17Z

Thx @turchenkoalex @eratzlaff @mdo! Pulled down and working as advertised. Love that this will be baked into 3.0, too.

energyhousedigital · 2014-01-29T10:06:33Z

I don't see this on the master on github anymore, although I can on the 3.0.3 version from getbootstrap.com. Any advise?

eratzlaff · 2014-02-11T00:19:46Z

#11214 #11302
http://getbootstrap.com/css/#responsive-utilities-tests don't work any more. :(

cvrebert · 2014-02-11T00:30:10Z

@eratzlaff Should be fixed in master; see #12025.

mdo mentioned this pull request Aug 16, 2013

Feature planning #9397

Closed

22 tasks

cvrebert mentioned this pull request Aug 16, 2013

Responsive Utilities: Stackable hidden/visible #9721

Closed

Fix crossing media queries for visibility utilities

9d6855b

visible-xs and hidden-xs media query changed from (max-width: @screen-tablet) to (max-width: @screen-phone-max). -xs media query intersects with the -sm media query before.

masterbee mentioned this pull request Aug 19, 2013

make visible/hidden classes mixable #9821

Merged

mdo closed this Aug 19, 2013

twbs locked and limited conversation to collaborators Jan 4, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue #8883: make responsive visibility classes mixable with each other #9692

Issue #8883: make responsive visibility classes mixable with each other #9692

turchenkoalex commented Aug 16, 2013

masterbee commented Aug 16, 2013

eratzlaff commented Aug 16, 2013

pixelchutes commented Aug 16, 2013

mdo commented Aug 16, 2013

mdo commented Aug 16, 2013

cfarquharson commented Aug 16, 2013

dstroot commented Aug 17, 2013

turchenkoalex commented Aug 17, 2013

masterbee commented Aug 17, 2013

turchenkoalex commented Aug 17, 2013

eratzlaff commented Aug 17, 2013

pixelchutes commented Aug 17, 2013

eratzlaff commented Aug 17, 2013

eratzlaff commented Aug 17, 2013

eratzlaff commented Aug 17, 2013

mdo commented Aug 19, 2013

eratzlaff commented Aug 19, 2013

eratzlaff commented Aug 19, 2013

mdo commented Aug 19, 2013

ameyms commented Aug 19, 2013

pixelchutes commented Aug 19, 2013

energyhousedigital commented Jan 29, 2014

eratzlaff commented Feb 11, 2014

cvrebert commented Feb 11, 2014

Issue #8883: make responsive visibility classes mixable with each other #9692

Issue #8883: make responsive visibility classes mixable with each other #9692

Conversation

turchenkoalex commented Aug 16, 2013

masterbee commented Aug 16, 2013

eratzlaff commented Aug 16, 2013

pixelchutes commented Aug 16, 2013

mdo commented Aug 16, 2013

mdo commented Aug 16, 2013

cfarquharson commented Aug 16, 2013

dstroot commented Aug 17, 2013

turchenkoalex commented Aug 17, 2013

masterbee commented Aug 17, 2013

turchenkoalex commented Aug 17, 2013

eratzlaff commented Aug 17, 2013

pixelchutes commented Aug 17, 2013

eratzlaff commented Aug 17, 2013

eratzlaff commented Aug 17, 2013

eratzlaff commented Aug 17, 2013

mdo commented Aug 19, 2013

eratzlaff commented Aug 19, 2013

eratzlaff commented Aug 19, 2013

mdo commented Aug 19, 2013

ameyms commented Aug 19, 2013

pixelchutes commented Aug 19, 2013

energyhousedigital commented Jan 29, 2014

eratzlaff commented Feb 11, 2014

cvrebert commented Feb 11, 2014