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 and bit-depth overrides
↩
Docs - Typography
Text Color
Apply grayscale and chromatic color shades to text elements
↩
Text Alignment
Control text alignment with responsive breakpoint, orientation, and bit-depth variants
↩
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 v2 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 v2 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 and bit-depth overrides
↩
Docs - Typography
Text Color
Apply grayscale and chromatic color shades to text elements
↩
Text Alignment
Control text alignment with responsive breakpoint, orientation, and bit-depth variants
↩
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
Word Clock Français
Buy Now
About This Plugin
Montre l'heure avec une matrice de lettres
Available settings
Niveau de gris
Gris 25
Gris 30
Gris 50
Gris 60
Gris 65
Gris 70
Gris 75
18
Connections
8
Forks