Top Result
No results found
Press
⌘K
to toggle
↓↑
to browse
⌥tab
to cycle providers
Docs - Guides
Framework v2 Overview
What’s new in Framework v2: utilities, components, and guides
↩
Upgrade Guide
Steps to upgrade your plugins to Framework v2
↩
Enhancement Guide
How to enhance your plugins with device-aware, bit-depth-aware, and orientation-responsive patterns
↩
Troubleshooting Guide
Resolve issues surfaced by v2’s stricter markup requirements
↩
TRMNL X Guide
↩
Docs - Utilities
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
↩
Background
Grayscale dithered patterns optimized for 1-bit rendering
↩
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
↩
Visibility
Control element visibility based on display bit depth
↩
Responsive
Adapt styles based on screen width using breakpoint prefixes
↩
Responsive Test
Test responsive utilities and compare SCSS mixins with CSS classes
↩
Text
Control text color, alignment and formatting
↩
Image
Optimize images using dithering techniques for 1-bit rendering
↩
Image Stroke
Legible images when displayed on shaded backgrounds
↩
Text Stroke
Legible text when displayed on shaded backgrounds
↩
Scale
Scale interface to affect content density and readability
↩
Aspect Ratio
Maintain consistent proportions for elements regardless of their content
↩
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
Framework v2 Overview
What’s new in Framework v2: utilities, components, and guides
↩
Upgrade Guide
Steps to upgrade your plugins to Framework v2
↩
Enhancement Guide
How to enhance your plugins with device-aware, bit-depth-aware, and orientation-responsive patterns
↩
Troubleshooting Guide
Resolve issues surfaced by v2’s stricter markup requirements
↩
TRMNL X Guide
↩
Docs - Utilities
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
↩
Background
Grayscale dithered patterns optimized for 1-bit rendering
↩
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
↩
Visibility
Control element visibility based on display bit depth
↩
Responsive
Adapt styles based on screen width using breakpoint prefixes
↩
Responsive Test
Test responsive utilities and compare SCSS mixins with CSS classes
↩
Text
Control text color, alignment and formatting
↩
Image
Optimize images using dithering techniques for 1-bit rendering
↩
Image Stroke
Legible images when displayed on shaded backgrounds
↩
Text Stroke
Legible text when displayed on shaded backgrounds
↩
Scale
Scale interface to affect content density and readability
↩
Aspect Ratio
Maintain consistent proportions for elements regardless of their content
↩
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
MetroDate
Buy Now
About This Plugin
Like MetroClock, but displays the date. Looks beautiful on the e-ink screen.
57
Connections
3
Forks