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
The New York Times
Buy Now
About This Plugin
Top New York Times headlines was built by Benjamin.
296
Connections
26
Forks
