Visibility

How to hide/show elements in CodyFrame.

🔍 On this page:

1. Visibility Property
2. Display Property
3. Display/hide at specific breakpoints
4. is-visible/is-hidden Classes
5. No-JS
6. Print

Visibility Property #

Visibility utility classes:

Edit the visibility utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl - e.g., [email protected]).

Display Property #

Display utility classes:

Edit the display utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl - e.g., [email protected]).

Display/hide at specific breakpoints #

Use the [email protected]{breakpoint} classes to show an element at a specific breakpoint:

<div class="component [email protected]"></div>

<style>
  .component {
    display: inline-flex;
  }
</style>

Unlike the display property utility classes, when you apply the [email protected] class to an element, for example, you're automatically hiding it (display: none) until the medium breakpoint, when its display value is changed to the one declared in CSS (in the above example → inline-flex).

This is possible because we use the "not" media query logic: 

@include breakpoint(md, "not all") {
  .display\@md { 
    display: none !important; 
  }
}

// in CSS it compiles to 👇
@media not all and (min-width: 64rem) {
  .display\@md {
    display: none !important;
  }
}

You can combine the [email protected]{breakpoint} utility classes with the display property utility classes:

<div class="component inline-flex [email protected]">
  <!-- ... -->
</div>

Or use only the display property utility classes:

<div class="component hide [email protected]">
  <!-- ... -->
</div>

is-visible/is-hidden Classes #

The .is-visible/.is-hidden utility classes can be used to toggle the display value of an element regardless of the breakpoint.

We define the --display variable so that you can set any display value you want on a component level by updating the CSS variable (you don't need to set the variable if display = block, which is the default value of the variable).

:root {
  --display: block;
}

.is-visible {
  display: var(--display) !important;
}

.is-hidden {
  display: none !important;
}

.component {
  display: none;
  --display: flex;
}

no-js #

To hide an element if JavaScript is disabled by the user, use the .no-js:is-hidden class:

<button class="no-js:is-hidden">Show sidebar</button>

Print #

To hide an element if the page is printed, use the .print:is-hidden class:

<header class="print:is-hidden"></header>
<main></main>
<footer class="print:is-hidden"></footer>