Framework
Docs Examples Releases
3.2 3.1 3.0 2.3 1.2
Docs Examples Releases
Theme
Orientation
Color Mode
Font Family
Device
Palette
Style
Text Scale
Get TRMNL
Framework Docs
Device Preview
Get TRMNL

Top Result

No results found

- Guides

V3.2 Overview What's new in Framework 3.2: themes, the TRMNLPaint JS API, adaptive charts and icons, and theme-driven borders enter
V3.2 Upgrade Guide Compatibility notes for upgrading plugins to Framework 3.2 enter
V3.2 Enhancement Guide Make your plugin theme-ready and adopt adaptive charts, icons, and JS paint enter
TRMNL X Guide Framework changes for TRMNL X compatibility enter
Open Source What this repository is, how it fits together, and the paint mandate that shapes it enter
Contributing Run the framework locally, find your way around, run the tests, and open a good pull request enter

- Arrangement

Size Define exact width and height dimensions for elements enter
Spacing Control element spacing with fixed margin and padding values enter
Gap Set precise spacing between elements with predefined gap values enter
Flex Arrange elements with flexible layouts and alignment options enter
Grid Create grid layouts with predefined column structures enter
Aspect Ratio Maintain consistent proportions for elements regardless of their content enter

- Responsive utilities

Responsive Adapt styles to the device's size class, orientation, and bit depth using variant prefixes enter
Responsive Test Test responsive utilities and compare SCSS mixins with CSS classes enter
Visibility Control element visibility based on display bit depth enter

- Styling

Background Apply color tokens as backgrounds with bg--{token} enter
Border Apply border patterns that create the illusion of different border intensities enter
Rounded Control element rounding with predefined values enter
Outline Pixel-perfect dotted rounded borders drawn with CSS gradients on 1-bit displays enter
Image Optimize images using dithering techniques for 1-bit rendering enter
Image Stroke Legible images when displayed on shaded backgrounds enter
Scale Scale interface to affect content density and readability enter
Inverse Apply inverse framework colors to an element and its descendants enter

- Typography

Font Family Switch between Classic and TRMNL font bundles per device enter
Font Weight Toggle between regular and bold font weight independently of size enter
Font Glyphs Browse every glyph available in each Framework font bundle enter
Text Size Control text size with utility classes across all display types enter
Text Scale Scale all framework typography independently of interface geometry enter
Text Alignment Control text alignment with responsive breakpoint, orientation, and bit-depth variants enter
Text Color Apply grayscale and chromatic color shades to text elements enter
Text Stroke Legible text when displayed on shaded backgrounds enter

- Runtime

Framework Runtime How the runtime applies layout, clamping, overflow, and presentation adjustments at render time enter
Overflow Handle column items overflow enter
Table Overflow Handle table rows overflow enter
Clamp Manage text overflow with single and multi-line truncation enter
Format Value Format numbers and values with consistent styling enter
Fit Value Automatically resize numbers and values to fit within their containers enter
Content Limiter Change font size when content overflows to fit within the container enter
Pixel Perfect Ensure text renders with crisp edges by aligning to the pixel grid enter

- Paint

Paint API TRMNLPaint: read the live CSS cascade from JavaScript to resolve framework colors and tile patterns enter
Painting Colors Resolve background, text, stroke, and semantic tokens from JavaScript as canonical Fill objects enter
Painting Charts Chart series colors from the framework ramp, with Highcharts adapters enter
Painting Borders Read border rails as BorderFill objects for custom rails and Highcharts axes enter
Painting Typography Read text roles as TypeSpec objects for custom text and chart labels enter

- Sass

Sass API The framework SCSS source: architecture, cascade layers, and what a custom stack can build from it enter
Compiling the Framework Compile plugins.css and the theme stylesheets from source with Dart Sass enter
Custom Devices Device profiles and the $custom-devices configuration for custom builds enter
Sass Mixins Screen-targeting mixins and scale functions for authoring device-aware SCSS enter

- Themes

Themes Opt-in stylesheets that re-theme screens while preserving device-capability rendering enter
Authoring Themes The theme contract and workflow: boilerplate, slot mapping, registration, and linting enter
Theme Slots Every themable surface: semantic channels, component slots, utility remaps, border lines, and the chart ramp enter

- Variables

CSS Variables The CSS variable contract: which families are public, which are internal, and who reads, re-points, and generates them enter
Colors Complete palette definition: grayscale, chromatic hues, and semantic roles enter
Color Palettes Every palette a screen can carry: grayscale tiers, limited ink sets, and full color, with the class each one maps to enter
Tokens Complete CSS variable reference with root defaults, density, and bit-depth overrides enter

- Foundation

Structure The framework's exact div hierarchy and how Screen, View, Layout, Title Bar, Columns, and Mashup work together enter
Screen Device screen dimensions, orientation, and display properties enter
Devices Device profiles: the geometry, size, and density a screen--{keyname} class carries, and how to rate a panel of your own enter
Rendering Modes The grayscale tiers and color modes a screen can carry, what each one paints, and the depth it publishes to the runtime enter
View Show your plugin in different sizes with Mashup view containers enter
Layout Primary container for organizing plugin content enter
Title Bar Standardized title bar with plugin information and instance details enter
Columns Implement zero-config column layouts for content organization enter
Mashup Assemble multiple plugin views into a single interface enter

- Elements

Title Style headings with consistent typography enter
Value Display data values with consistent formatting enter
Label Create clear labels for unified content identification enter
Description Format descriptive text with standardized styles enter
Divider Create horizontal or vertical dividers between elements enter

- Components

Rich Text Display formatted paragraphs with alignment and size variants enter
Item Build standardized list items and content blocks enter
Table Create data tables optimized for 1-bit rendering enter
Chart Visualize data optimized for 1-bit rendering enter
Progress Display progress bars in different styles enter
Press
⌘K to toggle
↓↑ to browse

UI Framework

Build consistent, high-quality plugin layouts with our ePaper optimized framework

Docs

Complete documentation for components, utilities, and guides

74 pages

Examples

Explore real-world plugin layout demonstrations

9 plugins

Releases

Download CSS, JavaScript, and font bundles shipped with the framework

42 versions