Remove .hidden and .show classes

.hidden is incompatible with jQuery's $(...).hide()
This commit is contained in:
Chris Rebert 2014-12-18 19:07:22 -08:00
parent e95b854301
commit 07ef67da20
2 changed files with 5 additions and 30 deletions

View File

@ -137,36 +137,23 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
} }
{% endhighlight %} {% endhighlight %}
### Showing and hiding content ### Making content invisible
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. 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.
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.
{% highlight html %} {% highlight html %}
<div class="show">...</div> <div class="invisible">...</div>
<div class="hidden">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight scss %} {% highlight scss %}
// Classes // Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
// Usage as mixins // Usage as mixin
.element { .element {
.show(); .invisible();
}
.another-element {
.hidden();
} }
{% endhighlight %} {% endhighlight %}

View File

@ -48,9 +48,6 @@
// Toggling content // Toggling content
.show {
display: block !important;
}
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
@ -59,15 +56,6 @@
} }
// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
visibility: hidden !important;
}
// For Affix plugin // For Affix plugin
.affix { .affix {
position: fixed; position: fixed;