Visibility
How to hide/show elements in CodyFrame.
Visibility Property #
Visibility utility classes:
CSS Class | Description |
---|---|
v{p}isible |
visibility: visible; |
i{p}nvisible |
visibility: hidden; |
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:
CSS Class | Description |
---|---|
b{p}lock |
display: block; |
f{p}lex |
display: flex; |
i{p}nline-block |
display: inline-block; |
i{p}nline-flex |
display: inline-flex; |
i{p}nline |
display: inline; |
c{p}ontents |
display: contents; |
h{p}ide |
display: none; |
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>