Commit c59ba499 authored by Mark Otto's avatar Mark Otto
Browse files

Merge pull request #45 from twbs/bye-hidden

Remove .hidden and .show classes
parents d44a1f24 07ef67da
Showing with 5 additions and 30 deletions
+5 -30
...@@ -137,36 +137,23 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes ...@@ -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 %}
......
...@@ -48,9 +48,6 @@ ...@@ -48,9 +48,6 @@
// Toggling content // Toggling content
.show {
display: block !important;
}
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
...@@ -59,15 +56,6 @@ ...@@ -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;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment