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.
<div class="row">
<strong class="columns show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="columns show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="columns show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="columns show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="columns show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="columns show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="columns show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
</div>
This example shows the opposite - using 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.
<div class="row">
<strong class="columns hide-for-small-only">You are <em>not</em> on a small screen.</strong>
<strong class="columns hide-for-medium-up">You are <em>not</em> on a medium, large, or xlarge screen.</strong>
<strong class="columns hide-for-medium-only">You are <em>not</em> on a medium screen.</strong>
<strong class="columns hide-for-large-up">You are <em>not</em> on a large, or xlarge screen.</strong>
<strong class="columns hide-for-large-only">You are <em>not</em> on a large screen.</strong>
<strong class="columns hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
<strong class="columns hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
</div>
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.
<div class="row">
<strong class="columns show-for-landscape">You are in landscape orientation.</strong>
<strong class="columns show-for-portrait">You are in portrait orientation.</strong>
</div>
There are also visibility classes to hide or show content based on whether a device supports touch (as determined by Modernizr).
<div class="row">
<strong class="columns show-for-touch">You are on a touch-enabled device.</strong>
<strong class="columns hide-for-touch">You are not on a touch-enabled device.</strong>
</div>
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.
To visually hide content, while still allowing assistive technology to read it, add the class .show-for-sr.
<strong class="show-for-sr">This text can only be read by a screen reader.</strong>
<strong>There is a line of text above this one, you just can't see it.</strong>
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.
<strong aria-hidden="true">This text can be seen, but wont be read by a screen reader.</strong>
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.
<p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>
<div id="mainContent"></div>
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.
<div class="row">
<strong class="small-12 columns hidden-for-small-only">You are <em>not</em> on a small screen.</strong>
<strong class="small-12 columns hidden-for-medium-up">You are <em>not</em> on a medium, large, or xlarge screen.</strong>
<strong class="small-12 columns hidden-for-medium-only">You are <em>not</em> on a medium screen.</strong>
<strong class="small-12 columns hidden-for-large-up">You are <em>not</em> on a large, or xlarge screen.</strong>
<strong class="small-12 columns hidden-for-large-only">You are <em>not</em> on a large screen.</strong>
<strong class="small-12 columns hidden-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
<strong class="small-12 columns hidden-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
</div>
To reverse the rules defined by hidden, use the visible visibility classes.
<div class="row">
<strong class="small-12 columns visible-for-small-only">This text is shown only on a small screen.</strong>
<strong class="small-12 columns visible-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="small-12 columns visible-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="small-12 columns visible-for-large-up">This text is shown on large screens and up.</strong>
<strong class="small-12 columns visible-for-large-only">This text is shown only on a large screen.</strong>
<strong class="small-12 columns visible-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="small-12 columns visible-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
</div>
The UITK 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.
Important: Grid classes can be used to style print media, just be sure to use the .small-# grid classes. This should already be mostly complete for you because of the MOBILE-FIRST implementation of the grid throughout your code.
Available classes:
.show-for-print and .print-only = (Visible for printing).hide-for-print and .hide-on-print = (Hidden while printing)<div class="row">
<strong class="columns text-center show-for-print">This will only display in print media.</strong>
<strong class="columns text-center hide-for-print">This will <i>NOT</i> display in print media.</strong>
<strong class="columns text-center print-only">This will only display in print media.</strong>
<strong class="columns text-center hide-on-print">This will <i>NOT</i> display in print media.</strong>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Visibility
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.