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
enter
V3 Upgrade Guide
Steps to upgrade your plugins from Framework v2 to v3
enter
V3 Enhancement Guide
Use chromatic colors, semantic roles, and label variants in your plugins
enter
TRMNL X Guide
Framework changes for TRMNL X compatibility
enter
Docs - 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
Docs - Responsive utilities
Responsive
Adapt styles based on screen width using breakpoint 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
Docs - 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 rounded borders using border-image for 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
Colors
Complete palette definition: grayscale, chromatic hues, and blend pairs
enter
Tokens
Complete CSS variable reference with root defaults, density, and bit-depth overrides
enter
Inverse
Apply inverse framework colors to an element and its descendants
enter
Docs - 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 framework typography independently from 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
Docs - Modulations
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
Framework Runtime
How the runtime applies layout, clamping, overflow, and presentation adjustments at render time
enter
Docs - 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
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
Docs - 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
Docs - 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
Navigation
Dashboard
Manage your TRMNL
enter
Devices
View and manage devices
Open
enter
· Show all
tab
Playlists
Organize content
enter
Plugins
Browse and open your plugins
Open
enter
· Show all
tab
Account
Manage account settings
enter
Documentation
Framework Docs
Browse TRMNL Framework docs
enter
Navigation
Dashboard
Manage your TRMNL
enter
Devices
View and manage devices
Open
enter
· Show all
tab
Playlists
Organize content
enter
Plugins
Browse and open your plugins
Open
enter
· Show all
tab
Account
Manage account settings
enter
Documentation
Framework Docs
Browse TRMNL Framework docs
enter
Docs - Guides
V3 Overview
What's new in Framework v3: color palette, semantic colors, extended grayscale, and CSS variable architecture
enter
V3 Upgrade Guide
Steps to upgrade your plugins from Framework v2 to v3
enter
V3 Enhancement Guide
Use chromatic colors, semantic roles, and label variants in your plugins
enter
TRMNL X Guide
Framework changes for TRMNL X compatibility
enter
Docs - 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
Docs - Responsive utilities
Responsive
Adapt styles based on screen width using breakpoint 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
Docs - 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 rounded borders using border-image for 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
Colors
Complete palette definition: grayscale, chromatic hues, and blend pairs
enter
Tokens
Complete CSS variable reference with root defaults, density, and bit-depth overrides
enter
Inverse
Apply inverse framework colors to an element and its descendants
enter
Docs - 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 framework typography independently from 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
Docs - Modulations
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
Framework Runtime
How the runtime applies layout, clamping, overflow, and presentation adjustments at render time
enter
Docs - 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
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
Docs - 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
Docs - 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
Start by adding your first device!
No plugins installed yet
Back to Recipes
SunClock
Buy Now
385
Connections
30
Forks
More by this Author
View all
preview
GitHub Issues
preview
Chess.com Ratings Chart
preview
Lichess Puzzle
