Framework
Docs Examples Releases
3.3 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.3 Overview What's new in Framework 3.3: themes, the TRMNLPaint JS API, adaptive charts, maps and icons, and theme-driven borders enter
V3.3 Upgrade Guide Compatibility notes for upgrading plugins to Framework 3.3 enter
V3.3 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
Position Take an element out of flow and set its distance from each edge of its container 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 Draw horizontal and vertical rules on the same shade scale as backgrounds enter
Rounded Control element rounding with predefined values enter
Outline Draw a pixel-perfect dotted rounded border on any element enter
Image Place images with size, object fit, dithering, inversion, and adaptive icon utilities 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 The JavaScript pass that measures the screen and fits your content into it 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 exact colors and patterns CSS paints right now, from JavaScript enter
Painting Colors Read background, text, stroke, and semantic colors from JavaScript as Fill objects enter
Painting Charts Chart series colors for the current device, mode, and theme, with Highcharts adapters enter
Painting Maps Map slot colors for the current device, mode, and theme, with MapLibre GL JS adapters enter
Painting Borders Read framework border lines as BorderFill objects, for your own lines 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 Visually customize any plugin with a drop-in stylesheet that recolors the whole screen enter
Authoring Themes How to build your own theme: start from the boilerplate, map the slots, register the id, and lint enter
Theme Slots Every part of a screen a theme can recolor, from whole-screen colors down to single components, utilities, borders, and chart series enter

- Variables

CSS Variables The CSS variable contract: which families are public, which are internal, and who reads, changes, 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 bit depth JavaScript can read 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 with charts that adapt to the device and theme enter
Map Plot locations and routes on a vector map that adapts to the device and theme 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

77 pages

Examples

Explore real-world plugin layout demonstrations

9 plugins

Releases

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

44 versions