Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Responsive visibility utility styles can't be used as LESS mixins

Created by: zacwasielewski

While answering this StackOverflow question, I found that the responsive utility classes (.visible-sm, .hidden-sm, etc.) in responsive-utilities.less only work if they're embedded directly in your HTML.

So for example, this works:

// HTML:
<div id="box" class="hidden-lg"></div>

But trying to apply the .hidden-lg class as a LESS mixin does not work:

// HTML:
<div id="box"></div>

// LESS:
#box {
    .hidden-lg;
}

This isn't exactly a bug, but it's nice to have the option to divorce your codebase from Bootstrap-specific styles, as described in this article.

The problem is that the .visible-* and .hidden-* classes don't contain any media queries; instead, they're wrapped inside media queries, so they can't know about or respond to the screen size. Here's a snippet of those class definitions from responsive-utilities.less:

// Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
  .visible-sm {
    .responsive-invisibility();
  }
  .visible-md {
    .responsive-visibility();
  }
  .visible-lg {
    .responsive-invisibility();
  }
  ...

If a fix for this "broken" behavior is desirable, it would be as simple as reformatting the above styles as such:

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

I've created some test jsFiddles:

(And here's the diff of my branch of the Bootstrap rep.)

Any thoughts on this?