From 07ef67da20c800eb3afa51d2064549ed325cc145 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 18 Dec 2014 19:07:22 -0800 Subject: [PATCH] Remove .hidden and .show classes .hidden is incompatible with jQuery's $(...).hide() --- docs/components/helpers.md | 23 +++++------------------ scss/_utilities.scss | 12 ------------ 2 files changed, 5 insertions(+), 30 deletions(-) diff --git a/docs/components/helpers.md b/docs/components/helpers.md index fea487860f..a5be35679e 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 %} -
...
- + {% 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 6b82d2fc3f..d334001251 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;