Responsive
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-Based Responsive
How It Works
Each device automatically sets a size class (e.g., screen--md) based on its width, activating the appropriate responsive utilities.
The system follows a mobile-first approach. When you use md:value--large, it applies on medium screens and larger.
Basic Usage
Prefix any utility class with a breakpoint name followed by a colon. The style applies at that breakpoint and all larger sizes.
Responsive
Size Based
<!-- Regular by default, large on medium and above, xlarge on large and above -->
<span class="value md:value--large lg:value--xlarge">
Responsive Value
</span>Available Breakpoints
Three standard breakpoints cover all current supported TRMNL devices. Each breakpoint represents a minimum screen width.
| Prefix | Screen Class | Min Width | Example Devices |
|---|---|---|---|
sm:
|
screen--sm
|
600px | Kindle 2024 |
md:
|
screen--md
|
800px | TRMNL OG, TRMNL OG V2 |
lg:
|
screen--lg
|
1024px | TRMNL V2 |
Bit-Depth Responsive
How It Works
Bit-depth responsiveness adapts styles based on the display's color capabilities. Unlike size-based breakpoints, bit-depth variants are not progressive - each variant targets a specific bit-depth only.
When you use 4bit:bg--gray-65, it applies only on 4-bit screens, not on 1-bit or 2-bit screens.
Basic Usage
Prefix utilities with bit-depth values to create display-specific styles. This is especially useful for optimizing appearance across monochrome and grayscale screens.
Responsive
Bit Depth
<!-- black on 1-bit, gray-45 on 2-bit, gray-75 on 4-bit screens -->
<div class="h--36 w--36 rounded--large 1bit:bg--black 2bit:bg--gray-45 4bit:bg--gray-75"></div>Available Bit-Depths
The framework supports three bit-depth variants corresponding to TRMNL's display technologies. Each targets specific color capabilities.
| Prefix | Screen Class | Color Support | Example Devices |
|---|---|---|---|
1bit:
|
screen--1bit
|
Monochrome (2 shades) | TRMNL OG |
2bit:
|
screen--2bit
|
Grayscale (4 shades) | TRMNL OG V2 |
4bit:
|
screen--4bit
|
Grayscale (16 shades) | TRMNL V2, Kindle 2024 |
Combining Both Systems
The responsive system lets you combine size and bit-depth variants. This enables highly targeted designs that adapt to both screen dimensions and color capabilities.
Pattern and Order
Always use the pattern:
size:bit-depth:utility.
The size breakpoint comes first, followed by the bit-depth variant.
Responsive
Advanced Targeting
<!-- Target TRMNL OG: 1bit, MD -->
<div class="text--gray-50 md:1bit:text--black">Aa</div>
<!-- Target TRMNL OG V2: 2bit, MD -->
<div class="text--gray-50 md:2bit:text--black">Aa</div>
<!-- Target TRMNL V2: 4bit, LG -->
<div class="text--gray-50 lg:4bit:text--black">Aa</div>Component Support
Not all framework components support responsive variants. Understanding which components support which systems helps you make informed design decisions.
Component Support Overview
This table shows which responsive features each framework component supports. Use this reference to understand what's possible with each component type.
| Component | Size-Based | Bit-Depth | Combined | Example Usage |
|---|---|---|---|---|
| Background | ✓ Yes | ⚡ Auto | ✓ Yes |
bg--gray-50 (auto adapts)
|
| Border | ✗ No | ⚡ Auto | ✗ No |
border--h-3 (auto adapts)
|
| Text | ✓ Yes | ✓ Yes | ✓ Yes |
lg:2bit:text--center
|
| Value | ✓ Yes | ✓ Yes | ✓ Yes |
md:4bit:value--large
|
| Visibility | ✓ Yes | ✓ Yes | ✓ Yes |
sm:1bit:hidden
|
| Spacing | ✓ Yes | ✗ No | ✗ No |
md:p--large, lg:m--xlarge
|
| Layout | ✓ Yes | ✗ No | ✗ No |
md:layout--row, lg:layout--col
|
| Gap | ✓ Yes | ✗ No | ✗ No |
md:gap--large, lg:gap--xlarge
|
| Flexbox | ✓ Yes | ✗ No | ✗ No |
md:flex--center, lg:flex--row
|
| Rounded | ✓ Yes | ✗ No | ✗ No |
md:rounded--large, lg:rounded--xlarge
|
| Size | ✓ Yes | ✗ No | ✗ No |
md:w--large, lg:h--full
|
| Grid | ✗ No | ✗ No | ✗ No |
grid--cols-3, col--span-2
|
| Clamp | ✗ No | ✗ No | ✗ No |
clamp--3, clamp--none
|
| Effects | ✗ No | ✗ No | ✗ No |
crisp-edges
|
| Image | ✗ No | ✗ No | ✗ No |
image--fit-cover
|
Legend: ✓ Yes = Full support, ✗ No = Not supported, ⚡ Auto = Built-in adaptive behavior. When a component doesn't support responsive variants, you can often achieve similar results by conditionally applying different utility classes at the template level.