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:
- Current Bootstrap ("broken")
- Modified Bootstrap (fixed)
(And here's the diff of my branch of the Bootstrap rep.)
Any thoughts on this?