Hides an element completely from flow and screenreaders.
Read more about Supple CSS.
<button>
This button has text that is
<span class="u-hidden"
>totally hidden from flow, view and assistive technology</span
>
</button>
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>
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)$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';
Make sure you’ve installed/downloaded the Supple CSS library: Supple CSS installation
Basic visual tests are in test.html.