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 Value Regular by default, large on medium and above, xlarge on large and above
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.

black on 1-bit, gray-45 on 2-bit, gray-75 on 4-bit 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.

Aa
TRMNL OG
Aa
TRMNL OG V2
Aa
TRMNL V2
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.