Enhancement Guide

Write a safe default that looks great on 1-bit displays, then layer enhancements for richer devices using `2bit:` and `4bit:` prefixes. Common use cases include deeper background shades, enabling additional structure, or revealing supplementary content only when contrast permits.

• Background layering: `bg--gray-20 2bit:bg--gray-35 4bit:bg--gray-50`
• Conditional visibility: `hidden 4bit:block`
• Legibility on patterns: use Text Stroke Text Stroke Legible text when displayed on shaded backgrounds The Text Stroke system allows you to add outlined text with customizable stroke width and color. This is useful for creating text that stands out against shaded backgrounds. and Image Stroke Image Stroke Legible images when displayed on shaded backgrounds The Image Stroke system allows you to add an outline to a vector or transparent raster images with customizable stroke width and color. This is useful for creating images that stand out against shaded backgrounds.

See Visibility Visibility Control element visibility based on display bit depth 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. and Background Background Grayscale dithered patterns optimized for 1-bit rendering The Background system creates the illusion of grayscale through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels. .

Adjust density and flow based on device orientation without branching your markup. Apply orientation prefixes to any class to tune structure, alignment, and spacing.

• Columns: `portrait:grid--cols-2 landscape:grid--cols-4`
• Direction: `portrait:flex--col landscape:flex--row`
• Spacing: `portrait:gap--small landscape:gap--space-between`

See 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. and Layout Layout Primary container for organizing plugin content The Layout system provides flexible containers for organizing content either horizontally or vertically, with various alignment options. It uses CSS Flexbox under the hood to create consistent and responsive layouts. .

Use size breakpoints to scale complexity and density. Combine with orientation and bit-depth for precise control, keeping your default minimal and layering enhancements for larger screens.

• Progressive layout: `sm:flex md:grid lg:portrait:grid--cols-4`
• Composed conditions: `md:portrait:2bit:gap--medium`, `lg:4bit:rounded--medium`

See 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. and Responsive Test Responsive Test Test responsive utilities and compare SCSS mixins with CSS classes This page tests responsive utilities by comparing SCSS mixins with CSS classes across different screen conditions. Each test row shows an element styled with SCSS mixins alongside the same element styled with CSS utility classes. Both columns should look identical when the conditions are met, demonstrating that mixins and classes produce equivalent results. .