Skip to content

Commit 07ef67d

Browse files
committed
Remove .hidden and .show classes
.hidden is incompatible with jQuery's $(...).hide()
1 parent e95b854 commit 07ef67d

File tree

2 files changed

+5
-30
lines changed

2 files changed

+5
-30
lines changed

docs/components/helpers.md

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -137,36 +137,23 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
137137
}
138138
{% endhighlight %}
139139

140-
### Showing and hiding content
140+
### Making content invisible
141141

142-
Force an element to be shown or hidden (**including for screen readers**) with the use of `.show` and `.hidden` classes. These classes use `!important` to avoid specificity conflicts, just like the [quick floats](#helper-floats). They are only available for block level toggling. They can also be used as mixins.
143-
144-
Furthermore, `.invisible` can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
142+
The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
145143

146144
{% highlight html %}
147-
<div class="show">...</div>
148-
<div class="hidden">...</div>
145+
<div class="invisible">...</div>
149146
{% endhighlight %}
150147

151148
{% highlight scss %}
152149
// Classes
153-
.show {
154-
display: block !important;
155-
}
156-
.hidden {
157-
display: none !important;
158-
visibility: hidden !important;
159-
}
160150
.invisible {
161151
visibility: hidden;
162152
}
163153

164-
// Usage as mixins
154+
// Usage as mixin
165155
.element {
166-
.show();
167-
}
168-
.another-element {
169-
.hidden();
156+
.invisible();
170157
}
171158
{% endhighlight %}
172159

scss/_utilities.scss

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,6 @@
4848

4949

5050
// Toggling content
51-
.show {
52-
display: block !important;
53-
}
5451
.invisible {
5552
visibility: hidden;
5653
}
@@ -59,15 +56,6 @@
5956
}
6057

6158

62-
// Hide from screenreaders and browsers
63-
//
64-
// Credit: HTML5 Boilerplate
65-
.hidden {
66-
display: none !important;
67-
visibility: hidden !important;
68-
}
69-
70-
7159
// For Affix plugin
7260
.affix {
7361
position: fixed;

0 commit comments

Comments
 (0)