Visibility Classes
Visibility classes let you show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements users see depending on their browsing environment.
This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.
Show by Screen Size
In this example, we use the show visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.
HTML
<p class="panel">
<strong class="show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>Rendered HTML
This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.
Hide by Screen Size
This example shows the opposite: It uses the hide visibility classes to state which elements should disappear based on your device's screen size or orientation. Users will see elements on every browser except those that meet these conditions.
HTML
<p class="panel">
<strong class="hide-for-small-only">You are <em>not</em> on a small screen.</strong>
<strong class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
<strong class="hide-for-medium-only">You are <em>not</em> on a medium screen.</strong>
<strong class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
<strong class="hide-for-large-only">You are <em>not</em> on a large screen.</strong>
<strong class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
<strong class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
<strong class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
</p>Rendered HTML
You are not on a small screen. You are not on a medium, large, xlarge, or xxlarge screen. You are not on a medium screen. You are not on a large, xlarge, or xxlarge screen. You are not on a large screen. You are not on an xlarge screen and up. You are not on an xlarge screen. You are not on an xxlarge screen.
Orientation Detection
This straightforward example shows how two strings of text determine whether or not an element is visible in different orientations. This will change on mobile devices when you rotate the device. On desktop, the orientation is almost always reported as landscape.
HTML
<p class="panel">
<strong class="show-for-landscape">You are in landscape orientation.</strong>
<strong class="show-for-portrait">You are in portrait orientation.</strong>
</p>Rendered HTML
You are in landscape orientation. You are in portrait orientation.
Touch Detection
There are also visibility classes to hide or show content based on whether a device supports touch (as determined by Modernizr).
HTML
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>Rendered HTML
You are on a touch-enabled device. You are not on a touch-enabled device.
Accessibility
Adding display: none to an element will prevent screen readers from reading it. However, there are techniques to hide content while still making it readable by screen readers.
Show for Screen Readers Only
To visually hide content, while still allowing assistive technology to read it, add the class show-for-sr.
HTML
<p class="show-for-sr">This text can only be read by a screen reader.</p>
<p>There's a line of text above this one, you just can't see it.</p>Rendered HTML
This text can only be read by a screen reader.
There's a line of text above this one, you just can't see it.
Hide for Screen Readers Only
To hide text from assistive technology, while still keeping it visible, add the attribute aria-hidden="true". This doesn't affect how the element looks, but screen readers will skip over it.
HTML
<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>Rendered HTML
Creating Skip Links
If your site has a lot of navigation, a screen reader will have to read through the entire navigation to get to your site's content. To remedy this, you can add a "skip link" at the very top of your page, which will send the user farther down the page, past the navigation when clicked on.
Use the class show-on-focus to hide an element, except when it has focus.
HTML
<p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>
<div id="mainContent"></div>Rendered HTML
Responsive Visibility
Finally, if you want to hide some content but still make it accessible for screen readers, use the hidden visibility classes. Do not confuse these classes with hide visibility classes. Use these classes in conjunction with the hide and show visibility classes to control complex layouts while offering accessibility for those using screen readers.
HTML
<p class="panel">
<strong class="hidden-for-small-only">You are <em>not</em> on a small screen.</strong>
<strong class="hidden-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
<strong class="hidden-for-medium-only">You are <em>not</em> on a medium screen.</strong>
<strong class="hidden-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
<strong class="hidden-for-large-only">You are <em>not</em> on a large screen.</strong>
<strong class="hidden-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
<strong class="hidden-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
<strong class="hidden-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
</p>Rendered HTML
You are not on a small screen. You are not on a medium, large, xlarge, or xxlarge screen. You are not on a medium screen. You are not on a large, xlarge, or xxlarge screen. You are not on a large screen. You are not on an xlarge screen and up. You are not on an xlarge screen. You are not on an xxlarge screen.
To reverse the rules defined by hidden, use the visible visibility classes.
HTML
<p class="panel">
<strong class="visible-for-small-only">This text is shown only on a small screen.</strong>
<strong class="visible-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="visible-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="visible-for-large-up">This text is shown on large screens and up.</strong>
<strong class="visible-for-large-only">This text is shown only on a large screen.</strong>
<strong class="visible-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="visible-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="visible-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>Rendered HTML
This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.
Print Visibility
Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach .show-for-print to an element to show when printing, .print-only for showing the element only when printing, and .hide-for-print to hide something when printing.
Available classes:
.show-for-print,.print-only(Visible for printing).hide-for-print,.hide-on-print(Hidden while printing)
Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/visibility";