Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

deprecate .hide; fixes #10446 #10769

Merged
merged 1 commit into from
Sep 24, 2013
Merged

deprecate .hide; fixes #10446 #10769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 6 additions & 15 deletions css.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2332,42 +2332,33 @@ <h3 id="helper-classes-clearfix">Clearfix</h3>


<h3 id="helper-classes-show-hide">Showing and hiding content</h3>
<p>Force an element to be shown or hidden via <code>display</code> with the use of <code>.show</code> and <code>.hide</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
<p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
<p><code>.hide</code> is also available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
{% highlight html %}
<div class="show">...</div>
<div class="hide">...</div>
<div class="hidden">...</div>
{% endhighlight %}
{% highlight css %}
// Classes
.show {
display: block !important;
}
.hide {
.hidden {
display: none !important;
visibility: hidden !important;
}

// Usage as mixins
.element {
.show();
}
.another-element {
.hide();
.hidden();
}
{% endhighlight %}


<h3 id="helper-classes-screen-readers">Screen reader content</h3>
<p>Hide an element everywhere, <strong>including screen readers</strong>, with <code>.hidden</code>. Can also be used as a mixin.</p>
{% highlight html %}
<div class="hidden"></div>
{% endhighlight %}
{% highlight css %}
// Usage as a Mixin
.example {
.hidden();
}
{% endhighlight %}

<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
{% highlight html %}
<a class="sr-only" href="#content">Skip to content</a>
Expand Down
1 change: 1 addition & 0 deletions less/utilities.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
// Toggling content
// -------------------------

// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.hide {
display: none !important;
}
Expand Down