Responsive Utilities

Barebones includes visibility helpers for showing or hiding content at specific breakpoints. These utilities are generated from the same breakpoint map used by the grid and responsive spacing classes.

Visibility classes

Use visible-{breakpoint} to show an element only within a specific breakpoint range. Each visible class is hidden by default, then displayed at the matching breakpoint. The element remains visible outside the matching breakpoint unless another class or style changes it.

<div class="visible-lg">
    Visible on large screens
</div>

<div class="visible-xs">
    Visible on extra-small screens
</div>

<div class="hidden-lg">
    Hidden on large screens
</div>

<div class="hidden-xs">
    Hidden on extra-small screens
</div>

Available breakpoints

Responsive utility classes are generated for the following breakpoints:

The generated class names are:

visible-lg
visible-md
visible-sm
visible-xs
hidden-lg
hidden-md
hidden-sm
hidden-xs

How they are generated

The utilities are generated from the $breakpoints map in assets/styles/config/_variables.scss.

@each $breakpoint in $breakpoints {
    $key   : list.nth($breakpoint, 1);
    $value : list.nth($breakpoint, 2);

    .visible-#{$key} {
        display: none;

        @media only screen and #{$value} {
            display: block !important;
        }
    }

    .hidden-#{$key} {
        @media only screen and #{$value} {
            display: none !important;
        }
    }
}

When to use them

Use responsive utilities when content genuinely needs to appear or disappear at a specific breakpoint. For layout changes, prefer responsive grid classes, spacing utilities, or component-level Sass.

Accessibility note

Hidden content may still exist in the HTML depending on how it is hidden and when it is hidden. Avoid using visibility helpers to create separate versions of important content unless the duplicated content is kept equivalent and accessible.