TRMNL X Guide

Every element and component now supports an explicit --base size modifier. It produces the exact same result as using the class without any size modifier, but it lets you reset to the default size at a specific breakpoint.

Previously, if you set a smaller size for compact screens, there was no way to undo it at a larger breakpoint. Now you can:

To take full advantage of TRMNL X's larger display, new size tiers have been added across all typography elements. All new sizes support responsive prefixes and render correctly on 2-bit and 4-bit screens.

Four new sizes for hero-style numbers and display text. See the Value Value Display data values with consistent formatting The Value system provides consistent text styling for displaying numerical and textual values, with various size options and support for tabular numbers. It ensures readability and visual hierarchy across different contexts. docs for full details.

Three new large sizes for headings. See the Title Title Style headings with consistent typography The Title system provides consistent text headings with different size variants. It helps maintain visual hierarchy and readability throughout the interface. docs.

New large sizes for Label Label Create clear labels for unified content identification The Label system provides various styles for displaying text labels, with options for different visual treatments and sizes. Labels can be used to highlight text, show status, or create visual hierarchy in your interface. (label--large, label--xlarge, label--xxlarge), Description Description Format descriptive text with standardized styles The Description component provides a standardized way to display descriptive text content with consistent styling. (description--large, description--xlarge, description--xxlarge), and Rich Text Rich Text Display formatted paragraphs with alignment and size variants The Rich Text component provides a flexible container for displaying text content with consistent styling and layout options. It's commonly used for paragraphs, articles, and other formatted text content that needs to maintain readability and visual hierarchy. content (content--xlarge, content--xxlarge, content--xxxlarge).

The 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. element now establishes a CSS Container Query context, enabling a new set of container-relative sizing utilities. Unlike viewport units, these are relative to the layout's dimensions, so they work correctly inside mashup slots (half vertical, quadrant, etc.) where the available space is a fraction of the full screen.

The w--[Npx] and h--[Npx] utilities now support responsive prefixes. Previously, these were static-only. The maximum value has been reduced from 1000px to 800px. See the Size Size Define exact width and height dimensions for elements The Size system provides utility classes for controlling width and height dimensions. It includes both fixed sizes and responsive utilities to handle various layout needs. docs.

The Overflow Overflow Handle column items overflow The Overflow engine automatically lays out items into up to N columns and adds an “and X more” label when content exceeds the available height. It also applies text clamping per-column width and handles grouped headers without leaving orphaned headings. engine now reads responsive data attributes to determine how many columns to generate, based on screen size and orientation. Resolution order (most specific wins): size + portrait, then size, then portrait, then base.

stretch-x and stretch-y now behave correctly relative to the 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. direction. In layout--row, stretch-x grows along the horizontal axis and stretch-y stretches vertically. In layout--col, the axes are swapped. These utilities also now include min-width: 0 / min-height: 0 to prevent flex children from overflowing their containers.

The Grid Grid Create grid layouts with predefined column structures The Grid system provides a flexible way to create both column-based and row-based layouts. It supports various column counts, column spans, and responsive behaviors to create complex layouts easily. col--span-* classes now work with all responsive prefixes. Responsive parent variants also work: if the grid itself has a responsive prefix (e.g., portrait:grid), nested children resolve correctly.

The Item Item Build standardized list items and content blocks The Item component provides a flexible container for displaying content with optional metadata and indexing. It's commonly used for lists, schedules, and other content that needs consistent formatting. component now gives .icon elements the same flex styling as .content. Items in Flex Flex Arrange elements with flexible layouts and alignment options The Flex system provides utility classes for creating flexible layouts using Flexbox. It supports both row and column directions with various alignment, centering, and stretching options. row containers automatically stretch to match the tallest sibling, and items in Grid Grid Create grid layouts with predefined column structures The Grid system provides a flexible way to create both column-based and row-based layouts. It supports various column counts, column spans, and responsive behaviors to create complex layouts easily. containers stretch to fill their cell height.

New Gap Gap Set precise spacing between elements with predefined gap values The Gap system provides consistent spacing between elements using CSS gap property. It offers predefined sizes, responsive spacing, and custom values to maintain visual rhythm throughout your interface. classes: gap--base (explicit base, useful for responsive reset), gap--auto (distributes space evenly around items), and gap--distribute (first item at start, last at end, space between). Arbitrary gaps now start from gap--[0px] (previously 5px). gap--space-between remains as a legacy alias.

New Rounded Rounded Control element rounding with predefined values The Rounded system provides consistent border radius values for creating smooth corners on elements. It offers predefined sizes, corner-specific controls, and custom values to maintain visual consistency throughout your interface. class: rounded--base (explicit base, 10px). Arbitrary values now start from rounded--[0px] (previously 1px).

The Rich Text Rich Text Display formatted paragraphs with alignment and size variants The Rich Text component provides a flexible container for displaying text content with consistent styling and layout options. It's commonly used for paragraphs, articles, and other formatted text content that needs to maintain readability and visual hierarchy. component has several improvements:

The Clamp Clamp Manage text overflow with single and multi-line truncation The Clamp engine truncates text to a specified number of lines using word-based ellipsis. It preserves the original text, measures available width, and re-applies clamping whenever layouts change. system now supports the lg breakpoint.

landscape: prefixed classes now work correctly even without an explicit .screen--landscape class on the screen element. Since landscape is the default orientation, landscape: prefixes activate whenever .screen--portrait is not present. See the 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. docs.

The following changes are under-the-hood improvements to how the Framework generates its CSS. They don't introduce new classes or markup patterns, but they make the responsive system more robust and maintainable.