]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Remove .hidden and .show classes
authorChris Rebert <code@rebertia.com>
Fri, 19 Dec 2014 03:07:22 +0000 (19:07 -0800)
committerChris Rebert <code@rebertia.com>
Fri, 19 Dec 2014 03:07:22 +0000 (19:07 -0800)
.hidden is incompatible with jQuery's $(...).hide()

docs/components/helpers.md
scss/_utilities.scss

index fea487860f013b061e3733f734e4d885e001bf99..a5be35679e6ca70a4928f6368c828c6b4235fbf3 100644 (file)
@@ -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 %}
 
index 6b82d2fc3f1bd816438929d53ff6adec362f0476..d3340012518a6d6ee4fad950e093968dda11b0e2 100644 (file)
@@ -48,9 +48,6 @@
 
 
 // Toggling content
-.show {
-  display: block !important;
-}
 .invisible {
   visibility: hidden;
 }
 }
 
 
-// Hide from screenreaders and browsers
-//
-// Credit: HTML5 Boilerplate
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-
 // For Affix plugin
 .affix {
   position: fixed;