Top Result
No results found
Press
⌘K
to toggle
↓↑
to browse
⌥tab
to cycle providers
Docs - Guides
V3 Overview
What's new in Framework v3: color palette, semantic colors, extended grayscale, and CSS variable architecture
↩
V3 Upgrade Guide
Steps to upgrade your plugins from Framework v2 to v3
↩
V3 Enhancement Guide
Use chromatic colors, semantic roles, and label variants in your plugins
↩
TRMNL X Guide
Framework changes for TRMNL X compatibility
↩
Docs - Arrangement
Size
Define exact width and height dimensions for elements
↩
Spacing
Control element spacing with fixed margin and padding values
↩
Gap
Set precise spacing between elements with predefined gap values
↩
Flex
Arrange elements with flexible layouts and alignment options
↩
Grid
Create grid layouts with predefined column structures
↩
Aspect Ratio
Maintain consistent proportions for elements regardless of their content
↩
Docs - Responsive utilities
Responsive
Adapt styles based on screen width using breakpoint prefixes
↩
Responsive Test
Test responsive utilities and compare SCSS mixins with CSS classes
↩
Visibility
Control element visibility based on display bit depth
↩
Docs - Styling
Background
Apply color tokens as backgrounds with bg--{token}
↩
Border
Apply border patterns that create the illusion of different border intensities
↩
Rounded
Control element rounding with predefined values
↩
Outline
Pixel-perfect rounded borders using border-image for 1-bit displays
↩
Image
Optimize images using dithering techniques for 1-bit rendering
↩
Image Stroke
Legible images when displayed on shaded backgrounds
↩
Scale
Scale interface to affect content density and readability
↩
Colors
Complete palette definition: grayscale, chromatic hues, and blend pairs
↩
Tokens
Complete CSS variable reference with root defaults, density, and bit-depth overrides
↩
Docs - Typography
Font Family
Switch between Classic and TRMNL font bundles per device
↩
Font Weight
Toggle between regular and bold font weight independently of size
↩
Font Glyphs
Browse every glyph available in each Framework font bundle
↩
Text Size
Control text size with utility classes across all display types
↩
Text Alignment
Control text alignment with responsive breakpoint, orientation, and bit-depth variants
↩
Text Color
Apply grayscale and chromatic color shades to text elements
↩
Text Stroke
Legible text when displayed on shaded backgrounds
↩
Docs - Modulations
Overflow
Handle column items overflow
↩
Table Overflow
Handle table rows overflow
↩
Clamp
Manage text overflow with single and multi-line truncation
↩
Format Value
Format numbers and values with consistent styling
↩
Fit Value
Automatically resize numbers and values to fit within their containers
↩
Content Limiter
Change font size when content overflows to fit within the container
↩
Pixel Perfect
Ensure text renders with crisp edges by aligning to the pixel grid
↩
Framework Runtime
How the runtime applies layout, clamping, overflow, and presentation adjustments at render time
↩
Docs - Foundation
Structure
The framework's exact div hierarchy and how Screen, View, Layout, Title Bar, Columns, and Mashup work together
↩
Screen
Device screen dimensions, orientation, and display properties
↩
View
Show your plugin in different sizes with Mashup view containers
↩
Layout
Primary container for organizing plugin content
↩
Title Bar
Standardized title bar with plugin information and instance details
↩
Columns
Implement zero-config column layouts for content organization
↩
Mashup
Assemble multiple plugin views into a single interface
↩
Docs - Elements
Title
Style headings with consistent typography
↩
Value
Display data values with consistent formatting
↩
Label
Create clear labels for unified content identification
↩
Description
Format descriptive text with standardized styles
↩
Divider
Create horizontal or vertical dividers between elements
↩
Docs - Components
Rich Text
Display formatted paragraphs with alignment and size variants
↩
Item
Build standardized list items and content blocks
↩
Table
Create data tables optimized for 1-bit rendering
↩
Chart
Visualize data optimized for 1-bit rendering
↩
Progress
Display progress bars in different styles
↩
Navigation
Dashboard
Manage your TRMNL
↩
Devices
View and manage devices
Open
↩
· Show all
tab
Playlists
Organize content
↩
Plugins
Browse available plugins
↩
Account
Manage account settings
↩
Documentation
Framework Docs
Browse TRMNL Framework docs
↩
Navigation
Dashboard
Manage your TRMNL
↩
Devices
View and manage devices
Open
↩
· Show all
tab
Playlists
Organize content
↩
Plugins
Browse available plugins
↩
Account
Manage account settings
↩
Documentation
Framework Docs
Browse TRMNL Framework docs
↩
Docs - Guides
V3 Overview
What's new in Framework v3: color palette, semantic colors, extended grayscale, and CSS variable architecture
↩
V3 Upgrade Guide
Steps to upgrade your plugins from Framework v2 to v3
↩
V3 Enhancement Guide
Use chromatic colors, semantic roles, and label variants in your plugins
↩
TRMNL X Guide
Framework changes for TRMNL X compatibility
↩
Docs - Arrangement
Size
Define exact width and height dimensions for elements
↩
Spacing
Control element spacing with fixed margin and padding values
↩
Gap
Set precise spacing between elements with predefined gap values
↩
Flex
Arrange elements with flexible layouts and alignment options
↩
Grid
Create grid layouts with predefined column structures
↩
Aspect Ratio
Maintain consistent proportions for elements regardless of their content
↩
Docs - Responsive utilities
Responsive
Adapt styles based on screen width using breakpoint prefixes
↩
Responsive Test
Test responsive utilities and compare SCSS mixins with CSS classes
↩
Visibility
Control element visibility based on display bit depth
↩
Docs - Styling
Background
Apply color tokens as backgrounds with bg--{token}
↩
Border
Apply border patterns that create the illusion of different border intensities
↩
Rounded
Control element rounding with predefined values
↩
Outline
Pixel-perfect rounded borders using border-image for 1-bit displays
↩
Image
Optimize images using dithering techniques for 1-bit rendering
↩
Image Stroke
Legible images when displayed on shaded backgrounds
↩
Scale
Scale interface to affect content density and readability
↩
Colors
Complete palette definition: grayscale, chromatic hues, and blend pairs
↩
Tokens
Complete CSS variable reference with root defaults, density, and bit-depth overrides
↩
Docs - Typography
Font Family
Switch between Classic and TRMNL font bundles per device
↩
Font Weight
Toggle between regular and bold font weight independently of size
↩
Font Glyphs
Browse every glyph available in each Framework font bundle
↩
Text Size
Control text size with utility classes across all display types
↩
Text Alignment
Control text alignment with responsive breakpoint, orientation, and bit-depth variants
↩
Text Color
Apply grayscale and chromatic color shades to text elements
↩
Text Stroke
Legible text when displayed on shaded backgrounds
↩
Docs - Modulations
Overflow
Handle column items overflow
↩
Table Overflow
Handle table rows overflow
↩
Clamp
Manage text overflow with single and multi-line truncation
↩
Format Value
Format numbers and values with consistent styling
↩
Fit Value
Automatically resize numbers and values to fit within their containers
↩
Content Limiter
Change font size when content overflows to fit within the container
↩
Pixel Perfect
Ensure text renders with crisp edges by aligning to the pixel grid
↩
Framework Runtime
How the runtime applies layout, clamping, overflow, and presentation adjustments at render time
↩
Docs - Foundation
Structure
The framework's exact div hierarchy and how Screen, View, Layout, Title Bar, Columns, and Mashup work together
↩
Screen
Device screen dimensions, orientation, and display properties
↩
View
Show your plugin in different sizes with Mashup view containers
↩
Layout
Primary container for organizing plugin content
↩
Title Bar
Standardized title bar with plugin information and instance details
↩
Columns
Implement zero-config column layouts for content organization
↩
Mashup
Assemble multiple plugin views into a single interface
↩
Docs - Elements
Title
Style headings with consistent typography
↩
Value
Display data values with consistent formatting
↩
Label
Create clear labels for unified content identification
↩
Description
Format descriptive text with standardized styles
↩
Divider
Create horizontal or vertical dividers between elements
↩
Docs - Components
Rich Text
Display formatted paragraphs with alignment and size variants
↩
Item
Build standardized list items and content blocks
↩
Table
Create data tables optimized for 1-bit rendering
↩
Chart
Visualize data optimized for 1-bit rendering
↩
Progress
Display progress bars in different styles
↩
Start by adding your first device!
Back to Recipes
InfoQ Headlines
Buy Now
6
Connections
0
Forks
Roland Meertens
Editor at InfoQ.com, and passionate robotics hobbyist