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
|
inline-grid
|
Display as inline grid container |
display: inline-grid
|
table
|
Display as table element |
display: table
|
table-row
|
Display as table row element |
display: table-row
|
table-cell
|
Display as table cell element |
display: table-cell
|
Responsive Display Control
All display utilities work with responsive prefixes Responsive Responsive Adapt styles based on screen width using breakpoint prefixes The Responsive system provides two complementary approaches for creating adaptive layouts: Size-based breakpoints that respond to screen dimensions, and Bit-depth variants that adapt to color capabilities. Together, they enable precise control over how your content appears across TRMNL's diverse range of devices. . Size prefixes are mobile-first (apply at that size and larger). You can combine any display utility with responsive breakpoints Responsive Responsive Adapt styles based on screen width using breakpoint prefixes The Responsive system provides two complementary approaches for creating adaptive layouts: Size-based breakpoints that respond to screen dimensions, and Bit-depth variants that adapt to color capabilities. Together, they enable precise control over how your content appears across TRMNL's diverse range of devices. .
| 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:inline-grid">Show as inline-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>
<!-- Table-style structures -->
<div class="table">
<div class="table-row">
<div class="table-cell">Cell A</div>
<div class="table-cell">Cell B</div>
</div>
</div>Bit-Depth Display Control
All display utilities work with bit-depth prefixes to target specific display capabilities. Perfect for optimizing layouts for different ePaper 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 ePaper 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>Dark Mode Display Control
Visibility utilities support dark-first prefixes for screen dark mode targeting.
Use dark: to show or hide content by screen dark mode.
Light-mode behavior is the default state.
<!-- Hide only in dark mode -->
<div class="dark:hidden">Dark mode hides this</div>
<!-- Show only in dark mode -->
<div class="hidden dark:block">Dark mode shows this</div>
<!-- Combined targeting -->
<div class="dark:md:portrait:2bit:hidden">
Hidden on dark medium+ portrait 2-bit screens
</div>