hidden

Supple CSS | utilities.hidden

Hides an element completely from flow and screenreaders.

Read more about Supple CSS.

Table of contents

• Use
• Available classes
• Configurable variables
• Installation
• Testing
• Browser support

Use

<button>
  This button has text that is
  <span class="u-hidden"
    >totally hidden from flow, view and assistive technology</span
  >
</button>

responsive modifiers

When you set media queries in $in-query you can use them like this:

<button>
  This button has text that is
  <span class="u-hidden@lap"
    >totally hidden from flow, view and assistive technology</span
  >
</button>

Available classes

On the .u-hidden block

• .u-hidden: core visually hidden block
• .u-hidden@[QUERY-NAME]: applies hidden at the given media query. (available in $in-query SCSS setting)

Configurable variables

SCSS variables

• $in-query: a list of media queries where .u-hidden@[QUERY-NAME] is generated for, defaults to: ()

You can overwrite the SCSS variables the following ways:

// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/hidden' with (
  $in-query: (
    lap,
    desk,
  )
);

or

// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/hidden/variables' with (
  $in-query: (
    lap,
  )
);

// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/hidden';

Installation

Make sure you've installed/downloaded the Supple CSS library: Supple CSS installation

Testing

Basic visual tests are in test.html.

Browser support

• Chromium-based browsers (Chrome, Edge, Brave, Opera)
• WebKit-based browsers (Safari, iOS Safari)
• Firefox (Gecko)