Visibility
The visibility and display utilities provide comprehensive control over element visibility and display types across devices. They include hidden/visible controls and display helpers like flex, grid, and inline, with responsive and bit-depth variants for device-specific layouts.
Visibility Across Devices
See how visibility classes behave across different screen sizes. Each column represents a different device size.
<!-- Always visible -->
<div class="visible">visible</div>
<!-- Always hidden -->
<div class="hidden">hidden</div>
<!-- Hidden by default, visible on medium+ -->
<div class="hidden md:visible">md:visible</div>
<!-- Visible by default, hidden on medium+ -->
<div class="visible md:hidden">md:hidden</div>
<!-- Visible by default, hidden on large -->
<div class="visible lg:hidden">lg:hidden</div>
<!-- Display as flex on medium+ -->
<div class="hidden md:flex">md:flex</div>
<!-- Display as grid on large screens -->
<div class="hidden lg:grid">lg:grid</div>Display Utilities
Control how elements are displayed with specific display types. These classes set the CSS display property.
| Class | Effect | CSS Output |
|---|---|---|
hidden
|
Hide element completely |
display: none
|
visible
|
Display as block element |
display: block
|
block
|
Display as block element |
display: block
|
inline
|
Display as inline element |
display: inline
|
inline-block
|
Display as inline block element |
display: inline-block
|
flex
|
Display as flex container |
display: flex
|
grid
|
Display as grid container |
display: grid
|
table
|
Display as table element |
display: table
|
table-row
|
Display as table row element |
display: table-row
|
Responsive Display Control
All display utilities work with responsive prefixes Responsive . Size prefixes are mobile-first (apply at that size and larger). You can combine any display utility with responsive breakpoints Responsive .
| Example Class | Effect | Active On |
|---|---|---|
sm:hidden
|
Hide on small screens and larger | All devices (600px+) |
md:flex
|
Display as flex on medium screens and larger | TRMNL OG, TRMNL V2 (800px+) |
lg:grid
|
Display as grid on large screens | TRMNL V2 (1024px+) |
sm:inline-block
|
Display as inline-block on small screens and larger | All devices (600px+) |
<!-- Basic responsive display -->
<div class="hidden md:block">Show as block on medium+</div>
<div class="block md:flex">Block by default, flex on medium+</div>
<div class="hidden lg:grid">Show as grid on large screens</div>
<!-- Complex responsive layouts -->
<div class="inline sm:inline-block md:flex lg:grid">
Changes display type at each breakpoint
</div>
<!-- Hide on mobile, show different layouts -->
<div class="hidden sm:flex md:grid lg:table">
Different layout per screen size
</div>Bit-Depth Display Control
All display utilities work with bit-depth prefixes to target specific display capabilities. Perfect for optimizing layouts for different e-ink displays.
| Example Class | Effect | Active On |
|---|---|---|
1bit:hidden
|
Hide on monochrome displays | TRMNL OG only |
2bit:flex
|
Display as flex on 4-shade grayscale displays | TRMNL OG V2 only |
4bit:grid
|
Display as grid on 16-shade grayscale displays | TRMNL V2, Kindle 2024 only |
Device-Specific Display Control
Combine size and bit-depth prefixes with any display utility to target specific devices precisely.
Use the pattern: size:bit-depth:display
| Example Class | Target Device | Effect |
|---|---|---|
md:1bit:block
|
TRMNL OG only | Display as block (800px, monochrome) |
md:2bit:flex
|
TRMNL OG V2 only | Display as flex (800px, 4-shade grayscale) |
lg:4bit:grid
|
TRMNL V2 only | Display as grid (1024px, 16-shade grayscale) |
sm:4bit:table
|
Kindle 2024 only | Display as table (600px, 16-shade grayscale) |
<!-- Device-specific layouts -->
<div class="hidden md:1bit:block md:2bit:flex lg:4bit:grid">
Different display types per device generation
</div>
<!-- Optimize for e-ink performance -->
<div class="table 1bit:block 2bit:flex">
Simple layouts for lower bit-depth displays
</div>
<!-- Complex responsive + bit-depth targeting -->
<div class="hidden sm:inline md:1bit:block md:2bit:flex lg:4bit:grid">
Progressive enhancement across all device capabilities
</div>