Address
:
[go:
up one dir
,
main page
]
Include Form
Remove Scripts
Accept Cookies
Show Images
Show Referer
Rotate13
Base64
Strip Meta
Strip Title
Session Cookies
command-palette#onInput keydown->command-palette#onInputKeydown">
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!
Let's get you started!
Select Time Zone
(GMT-12:00) International Date Line West
(GMT-11:00) American Samoa
(GMT-11:00) Midway Island
(GMT-10:00) Hawaii
(GMT-09:00) Alaska
(GMT-08:00) Pacific Time (US & Canada)
(GMT-08:00) Tijuana
(GMT-07:00) Arizona
(GMT-07:00) Mazatlan
(GMT-07:00) Mountain Time (US & Canada)
(GMT-06:00) Central America
(GMT-06:00) Central Time (US & Canada)
(GMT-06:00) Chihuahua
(GMT-06:00) Guadalajara
(GMT-06:00) Mexico City
(GMT-06:00) Monterrey
(GMT-06:00) Saskatchewan
(GMT-05:00) Bogota
(GMT-05:00) Eastern Time (US & Canada)
(GMT-05:00) Indiana (East)
(GMT-05:00) Lima
(GMT-05:00) Quito
(GMT-04:00) Atlantic Time (Canada)
(GMT-04:00) Caracas
(GMT-04:00) Georgetown
(GMT-04:00) La Paz
(GMT-04:00) Puerto Rico
(GMT-04:00) Santiago
(GMT-03:30) Newfoundland
(GMT-03:00) Asuncion
(GMT-03:00) Brasilia
(GMT-03:00) Buenos Aires
(GMT-03:00) Montevideo
(GMT-02:00) Greenland
(GMT-02:00) Mid-Atlantic
(GMT-01:00) Azores
(GMT-01:00) Cape Verde Is.
(GMT+00:00) Edinburgh
(GMT+00:00) Lisbon
(GMT+00:00) London
(GMT+00:00) Monrovia
(GMT+00:00) UTC
(GMT+01:00) Amsterdam
(GMT+01:00) Belgrade
(GMT+01:00) Berlin
(GMT+01:00) Bern
(GMT+01:00) Bratislava
(GMT+01:00) Brussels
(GMT+01:00) Budapest
(GMT+01:00) Casablanca
(GMT+01:00) Copenhagen
(GMT+01:00) Dublin
(GMT+01:00) Ljubljana
(GMT+01:00) Madrid
(GMT+01:00) Paris
(GMT+01:00) Prague
(GMT+01:00) Rome
(GMT+01:00) Sarajevo
(GMT+01:00) Skopje
(GMT+01:00) Stockholm
(GMT+01:00) Vienna
(GMT+01:00) Warsaw
(GMT+01:00) West Central Africa
(GMT+01:00) Zagreb
(GMT+01:00) Zurich
(GMT+02:00) Athens
(GMT+02:00) Bucharest
(GMT+02:00) Cairo
(GMT+02:00) Harare
(GMT+02:00) Helsinki
(GMT+02:00) Jerusalem
(GMT+02:00) Kaliningrad
(GMT+02:00) Kyiv
(GMT+02:00) Pretoria
(GMT+02:00) Riga
(GMT+02:00) Sofia
(GMT+02:00) Tallinn
(GMT+02:00) Vilnius
(GMT+03:00) Baghdad
(GMT+03:00) Istanbul
(GMT+03:00) Kuwait
(GMT+03:00) Minsk
(GMT+03:00) Moscow
(GMT+03:00) Nairobi
(GMT+03:00) Riyadh
(GMT+03:00) St. Petersburg
(GMT+03:00) Volgograd
(GMT+03:30) Tehran
(GMT+04:00) Abu Dhabi
(GMT+04:00) Baku
(GMT+04:00) Muscat
(GMT+04:00) Samara
(GMT+04:00) Tbilisi
(GMT+04:00) Yerevan
(GMT+04:30) Kabul
(GMT+05:00) Almaty
(GMT+05:00) Astana
(GMT+05:00) Ekaterinburg
(GMT+05:00) Islamabad
(GMT+05:00) Karachi
(GMT+05:00) Tashkent
(GMT+05:30) Chennai
(GMT+05:30) Kolkata
(GMT+05:30) Mumbai
(GMT+05:30) New Delhi
(GMT+05:30) Sri Jayawardenepura
(GMT+05:45) Kathmandu
(GMT+06:00) Dhaka
(GMT+06:00) Urumqi
(GMT+06:30) Rangoon
(GMT+07:00) Bangkok
(GMT+07:00) Hanoi
(GMT+07:00) Jakarta
(GMT+07:00) Krasnoyarsk
(GMT+07:00) Novosibirsk
(GMT+08:00) Beijing
(GMT+08:00) Chongqing
(GMT+08:00) Hong Kong
(GMT+08:00) Irkutsk
(GMT+08:00) Kuala Lumpur
(GMT+08:00) Perth
(GMT+08:00) Singapore
(GMT+08:00) Taipei
(GMT+08:00) Ulaanbaatar
(GMT+09:00) Osaka
(GMT+09:00) Sapporo
(GMT+09:00) Seoul
(GMT+09:00) Tokyo
(GMT+09:00) Yakutsk
(GMT+09:30) Adelaide
(GMT+09:30) Darwin
(GMT+10:00) Brisbane
(GMT+10:00) Canberra
(GMT+10:00) Guam
(GMT+10:00) Hobart
(GMT+10:00) Melbourne
(GMT+10:00) Port Moresby
(GMT+10:00) Sydney
(GMT+10:00) Vladivostok
(GMT+11:00) Magadan
(GMT+11:00) New Caledonia
(GMT+11:00) Solomon Is.
(GMT+11:00) Srednekolymsk
(GMT+12:00) Auckland
(GMT+12:00) Fiji
(GMT+12:00) Kamchatka
(GMT+12:00) Marshall Is.
(GMT+12:00) Wellington
(GMT+12:45) Chatham Is.
(GMT+13:00) Nuku'alofa
(GMT+13:00) Samoa
(GMT+13:00) Tokelau Is.
Need this?
Go here
.
Sign up
I already have an account