Show hide utility classes

A series of classes that can be used to show and hide content depending on the current viewport width

Keep It Simple

Ideally, mobile UI and desktop UI should flow seamlessly using responsive design. What is shown on the desktop should be a subtly rearranged version of what is used on mobile, with the source order and tabbing order unchanged.

This approach helps:

Users move between their devices and pick up where they left off without having to relearn a new UI.
Screen reader users navigate around the page more effectively.

Classes

Note on specificity

These classes are applied with a mobile-first approach, meaning the higher viewport widths take precedence over the smaller widths.

Hide classes

Elements with these classes will be visible until the viewport reaches the width in the class.

ba-u-hide-480vw
ba-u-hide-640vw
ba-u-hide-800vw
ba-u-hide-1024vw

Show classes

Elements with these classes will be hidden until the viewport reaches the width in the class.

ba-u-show-480vw
ba-u-show-640vw
ba-u-show-800vw
ba-u-show-1024vw

How to use

Hide on smaller screens and show on larger screens

<div class="ba-u-show-1024vw">I will be shown on viewports wider than 1024px (64rem)</div>

Show an element on smaller screens and hide on larger screens

<div class="ba-u-hide-640vw">I will only be shown on viewports narrower than than 640px (40rem)</div>