diff --git a/docs/components/helpers.md b/docs/components/helpers.md index fea487860f013b061e3733f734e4d885e001bf99..a5be35679e6ca70a4928f6368c828c6b4235fbf3 100644 --- a/docs/components/helpers.md +++ b/docs/components/helpers.md @@ -137,36 +137,23 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% 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. - -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. +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. {% highlight html %} -<div class="show">...</div> -<div class="hidden">...</div> +<div class="invisible">...</div> {% endhighlight %} {% highlight scss %} // Classes -.show { - display: block !important; -} -.hidden { - display: none !important; - visibility: hidden !important; -} .invisible { visibility: hidden; } -// Usage as mixins +// Usage as mixin .element { - .show(); -} -.another-element { - .hidden(); + .invisible(); } {% endhighlight %} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 6b82d2fc3f1bd816438929d53ff6adec362f0476..d3340012518a6d6ee4fad950e093968dda11b0e2 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -48,9 +48,6 @@ // Toggling content -.show { - display: block !important; -} .invisible { visibility: hidden; } @@ -59,15 +56,6 @@ } -// Hide from screenreaders and browsers -// -// Credit: HTML5 Boilerplate -.hidden { - display: none !important; - visibility: hidden !important; -} - - // For Affix plugin .affix { position: fixed;