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
This Day in History
Buy Now
1360
Connections
39
Forks
More by this Author
View all
National Day Calendar
AA Daily Reflection
