Visibility

Bulma-style visibility utilities: display modifiers, .is-hidden, .is-invisible, and .is-sr-only, each with a responsive matrix keyed off the framework's breakpoint scale.

How it works

  • Five base display classes — .is-block, .is-flex, .is-inline, .is-inline-block, .is-inline-flex — pin an element to that display value regardless of its tag's default.
  • .is-hidden removes the element from layout (display: none). .is-invisible keeps the layout box but hides it visually (visibility: hidden). .is-sr-only removes the element visually but keeps it in the accessibility tree for screen readers.
  • Each display class and .is-hidden also ships nine responsive variants. Suffix the class with one of:
    • -mobile — only on mobile (< 768px)
    • -tablet-only — only between 768px and 1023px
    • -desktop-only — only between 1024px and 1279px
    • -widescreen-only — only between 1280px and 1535px
    • -touch — mobile + tablet combined (< 1024px)
    • -tablet — from 768px upwards
    • -desktop — from 1024px upwards
    • -widescreen — from 1280px upwards
    • -fullhd — from 1536px upwards
  • All classes use !important: visibility helpers are escape hatches whose explicit job is to override any component-level display rule.

Live

Display modifiers

.is-block .is-inline-block .is-inline 
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<span class="is-block" style="padding: 0.3rem 0.6rem; background: var(--kc-primary-bg); color: var(--kc-primary-fg);">.is-block</span>
<span class="is-inline-block" style="padding: 0.3rem 0.6rem; background: var(--kc-success-bg); color: var(--kc-success-fg);">.is-inline-block</span>
<span class="is-inline" style="padding: 0.3rem 0.6rem; background: var(--kc-warning-bg); color: var(--kc-warning-fg);">.is-inline</span>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-visibility', 'module-card')
);
Playground

.is-hidden, .is-invisible, .is-sr-only

Visible Visible (sr-only suffix) 
<div style="display: flex; gap: 0.5rem; align-items: center;">
<span style="padding: 0.3rem 0.6rem; background: var(--kc-default-bg); color: var(--kc-default-fg); border: 1px solid currentColor;">Visible</span>
<span class="is-invisible" style="padding: 0.3rem 0.6rem; background: var(--kc-danger-bg); color: var(--kc-danger-fg);">.is-invisible (slot reserved)</span>
<span class="is-hidden" style="padding: 0.3rem 0.6rem; background: var(--kc-danger-bg); color: var(--kc-danger-fg);">.is-hidden (removed)</span>
<span style="padding: 0.3rem 0.6rem; background: var(--kc-success-bg); color: var(--kc-success-fg);">Visible<span class="is-sr-only"> (sr-only suffix)</span></span>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-visibility')
);
Playground

Responsive show/hide (resize the viewport to see)

Hidden on mobile Hidden from tablet up Block from desktop up 
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<span class="is-hidden-mobile" style="padding: 0.3rem 0.6rem; background: var(--kc-primary-bg); color: var(--kc-primary-fg);">Hidden on mobile</span>
<span class="is-hidden-tablet" style="padding: 0.3rem 0.6rem; background: var(--kc-warning-bg); color: var(--kc-warning-fg);">Hidden from tablet up</span>
<span class="is-block-desktop" style="padding: 0.3rem 0.6rem; background: var(--kc-success-bg); color: var(--kc-success-fg);">Block from desktop up</span>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-visibility')
);
Playground

Markup

markup
<!-- Always shown -->
<div class="is-flex">…</div>

<!-- Shown only on tablet (768px–1023px) -->
<div class="is-flex-tablet-only">…</div>

<!-- Hidden on mobile, visible from tablet up -->
<div class="is-hidden-mobile">…</div>

<!-- Visually hidden but still announced by screen readers -->
<span class="is-sr-only">Saved</span>

Accessibility

  • .is-hidden and .is-hidden-<scope> set display: none — the element is removed from both layout and the accessibility tree. Use this when the content shouldn't be announced.
  • .is-invisible sets visibility: hidden — the element keeps its layout box but is removed from the accessibility tree. Use this when you need to preserve spacing without announcing.
  • .is-sr-only removes the element from layout but keeps it in the accessibility tree, so screen readers still announce it. Use this for labels and instructions that are redundant for sighted users.

Variables

VariableDefaultNotes
$selector-prefix'.is-'Re-uses the framework-wide $selector-prefix-is. Override to alias these helpers under your own prefix.
$displays(block, flex, inline, inline-block, inline-flex)Each entry gets a base .is-<value> class plus a per-scope variant. Add grid if you need .is-grid.
$scopes9 entries (mobile, tablet-only, desktop-only, widescreen-only, touch, tablet, desktop, widescreen, fullhd)Each entry is (from, until) with null meaning "no bound". Trim to shrink the bundle if you don't need every variant. fullhd-only is intentionally omitted: fullhd is the last band, so a hypothetical -only variant would be identical to plain -fullhd and would only add bytes.

Override example

app.scss
@use '@adnap/krysalicss/helper/visibility' with (
  // Drop the helpers you don't need from the responsive matrix:
  $scopes: (
    mobile:        (null, tablet),
    tablet-only:   (tablet, desktop),
    desktop:       (desktop, null),
  ),
  // Or extend the display values that get a class:
  $displays: (block, flex, inline, inline-block, inline-flex, grid),
);

Tokens consumed

None — the visibility helpers are layout-only and don't read any --kc-* token.