### Run Local Development Environment Source: https://trmnl.com/framework/docs/3.2/contributing Commands to initialize the project dependencies and start the local development server. ```bash bin/setup # gems, npm, token generation, and every CSS build bin/dev # server on :3001 with live Sass and Tailwind rebuilds ``` -------------------------------- ### View Container Markup Source: https://trmnl.com/framework/docs/3.2/view Examples of how to structure the view container, either as a platform-provided wrapper or a manual implementation. ```html
...
...
``` ```html
...
...
``` -------------------------------- ### Layout Container Examples Source: https://trmnl.com/framework/docs/3.2/layout Examples showing the basic structure of a layout container and the restriction against nesting layouts. ```html
Item 1
Item 2
``` ```html
Item 1
Item 2
``` -------------------------------- ### Responsive Size Utilities Source: https://trmnl.com/framework/docs/3.2/responsive_test Examples of applying width utilities using SCSS mixins for various screen conditions. ```SCSS @include screen.screen('md') ``` -------------------------------- ### Responsive Flex Utilities Source: https://trmnl.com/framework/docs/3.2/responsive_test Examples of applying flexbox utilities using SCSS mixins for various screen conditions. ```SCSS @include screen.screen('md') ``` ```SCSS @include screen.screen('portrait') ``` ```SCSS @include screen.screen('lg', 'portrait') ``` -------------------------------- ### Device and Bit-Depth Responsive Layouts Source: https://trmnl.com/framework/docs/3.2/visibility Examples demonstrating how to combine size and bit-depth prefixes to target specific ePaper display capabilities. ```html
Simple layouts for lower bit-depth displays
``` -------------------------------- ### Define a Mashup container Source: https://trmnl.com/framework/docs/3.2/mashup Examples showing platform-provided structure and manual implementation of a mashup layout. ```html
...
...
``` ```html
...
...
...
...
``` -------------------------------- ### Responsive Display Control Examples Source: https://trmnl.com/framework/docs/3.2/visibility Demonstrates applying responsive display classes to elements to change their layout behavior based on screen size breakpoints. ```html
Block by default, flex on medium+
Changes display type at each breakpoint
Cell A
Cell B
``` -------------------------------- ### markFrameworkReady() Source: https://trmnl.com/framework/docs/3.2/framework_runtime Signals that the host page setup is complete. Sets the window.frameworkReady flag and dispatches the trmnl:framework:ready event. ```APIDOC ## markFrameworkReady() ### Description Notifies the framework that the host page has finished its setup. This sets `window.frameworkReady` to true and dispatches the `trmnl:framework:ready` event on the window. ``` -------------------------------- ### Responsive Gap Utilities Source: https://trmnl.com/framework/docs/3.2/responsive_test Examples of applying gap utilities using SCSS mixins for various screen conditions. ```SCSS @include screen.screen('lg') ``` ```SCSS @include screen.screen('portrait') ``` -------------------------------- ### Responsive Background Utilities Source: https://trmnl.com/framework/docs/3.2/responsive_test Examples of applying background color utilities using SCSS mixins for various screen conditions. ```SCSS @include screen.screen('md') ``` ```SCSS @include screen.screen('portrait') ``` ```SCSS @include screen.screen('2bit') ``` ```SCSS @include screen.screen('md', 'portrait') ``` ```SCSS @include screen.screen('md', '2bit') ``` ```SCSS @include screen.screen('portrait', '2bit') ``` ```SCSS @include screen.screen('md', 'portrait', '2bit') ``` -------------------------------- ### Define Screen Structure Source: https://trmnl.com/framework/docs/3.2/screen Examples of how to structure the screen container, either provided by the platform or manually defined with device classes. ```html
...
...
``` ```html
...
...
``` -------------------------------- ### Responsive Visibility Utilities Source: https://trmnl.com/framework/docs/3.2/responsive_test Examples of controlling element visibility using SCSS mixins for various screen conditions. ```SCSS @include screen.screen('sm') ``` ```SCSS @include screen.screen('portrait') ``` ```SCSS @include screen.screen('4bit') ``` ```SCSS @include screen.screen('md', 'portrait') ``` ```SCSS @include screen.screen('lg', '2bit') ``` ```SCSS @include screen.screen('portrait', '4bit') ``` ```SCSS @include screen.screen('md', 'portrait', '2bit') ``` -------------------------------- ### Responsive Spacing Utilities Source: https://trmnl.com/framework/docs/3.2/responsive_test Examples of applying padding and margin utilities using SCSS mixins for various screen conditions. ```SCSS @include screen.screen('md') ``` ```SCSS @include screen.screen('portrait') ``` -------------------------------- ### Install Playwright Browser Source: https://trmnl.com/framework/docs/3.2/contributing Required command to install the Chromium browser for running runtime and visual test suites. ```bash npx playwright install chromium ``` -------------------------------- ### Responsive Text Utilities Source: https://trmnl.com/framework/docs/3.2/responsive_test Examples of applying text alignment utilities using SCSS mixins for various screen conditions. ```SCSS @include screen.screen('lg') ``` ```SCSS @include screen.screen('portrait') ``` ```SCSS @include screen.screen('2bit') ``` ```SCSS @include screen.screen('md', 'portrait') ``` ```SCSS @include screen.screen('lg', '4bit') ``` ```SCSS @include screen.screen('portrait', '2bit') ``` ```SCSS @include screen.screen('md', 'portrait', '2bit') ``` -------------------------------- ### Responsive Utility Class Patterns Source: https://trmnl.com/framework/docs/3.2/responsive Examples of modifier combinations used to target specific device configurations based on size, orientation, and bit-depth. ```text md:value--large ``` ```text portrait:flex--col ``` ```text 4bit:bg--gray-75 ``` ```text md:portrait:text--center ``` ```text lg:2bit:value--xlarge ``` ```text portrait:2bit:value--small ``` ```text md:portrait:4bit:value--large ``` ```text dark:md:portrait:2bit:hidden ``` -------------------------------- ### Setup Gauge Chart Layout Source: https://trmnl.com/framework/docs/3.2/chart Imports necessary Highcharts libraries and defines the HTML structure for a multi-gauge row layout. ```html
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
``` -------------------------------- ### Define a screen with a device profile Source: https://trmnl.com/framework/docs/3.2/devices Example of applying a device profile class to a screen container to set dimensions, density, and color depth. ```html
...
``` -------------------------------- ### Define Column Layout within View Source: https://trmnl.com/framework/docs/3.2/columns Examples showing how to structure columns within a layout container inside a view. ```html
...
...
...
``` ```html
...
...
...
``` -------------------------------- ### Applying Full Color Palette to Screen Source: https://trmnl.com/framework/docs/3.2/color_palettes Example of applying the screen--color-full class to a screen container to render colors at their actual hex values. ```html
Delayed
``` -------------------------------- ### Apply Responsive Size Utilities Source: https://trmnl.com/framework/docs/3.2/size Demonstrates applying width, height, min/max, and container query units across different screen breakpoints. ```html
Responsive Width
Responsive Height
Responsive Min Width
Responsive Container Query
``` -------------------------------- ### Resolving Typography Source: https://trmnl.com/framework/docs/3.2/paint_typography Examples of resolving typography for specific roles using the TRMNLPaint API. ```javascript // The .value role, size/family/weight resolved for the active bundle + density. var big = TRMNLPaint.type("value", { el: "my-chart" }); // -> TypeSpec var axis = TRMNLPaint.type("chart-label", { el: "my-chart" }); ``` -------------------------------- ### Framework Build Options Source: https://trmnl.com/framework/docs/3.2/sass_api Comparison between using the official CDN-hosted builds and serving a custom compiled build. ```html ``` -------------------------------- ### Define Sass entrypoint Source: https://trmnl.com/framework/docs/3.2/sass_build Create a file to load the framework module. ```scss // my-build.scss @use 'framework'; ``` -------------------------------- ### Resolving Framework Rail Utilities Source: https://trmnl.com/framework/docs/3.2/paint_borders Examples of using TRMNLPaint.border to resolve framework rail utilities for specific elements. ```javascript // Framework rail utilities, resolved for the current mode/theme. var gridRail = TRMNLPaint.border(65, { el: "my-chart" }); // -> BorderFill var axisRail = TRMNLPaint.border("black", { dir: "v", el: "my-chart" }); var step40 = TRMNLPaint.border(40, { el: "my-chart" }); ``` -------------------------------- ### Theme Boilerplate Configuration Source: https://trmnl.com/framework/docs/3.2/theme_authoring The starting point for a theme file, requiring layer ordering and scoping to the theme class. ```scss @use "../config/layers" as layers; @use "../mixins/theme-slots" as theme-slots; @include layers.order; @layer tn--themes { .trmnl .screen--theme-example { // 1. Semantic channels: the whole screen in a few lines. @include theme-slots.semantic-bg("canvas", "yellow"); @include theme-slots.semantic-text("text-primary", "black"); // 2. Component slots: tune specific surfaces. @include theme-slots.bg-slot("title-bar", "yellow-40"); // 3. Utility remaps: re-point the raw bg--/text-- utilities. @include theme-slots.utility-remap-grayscale("yellow"); // Optional: give image--adaptive icons their own paint // (they follow text-primary when this is omitted) // @include theme-slots.semantic-icon("yellow-20"); } } ``` -------------------------------- ### Legacy Overflow Configuration Source: https://trmnl.com/framework/docs/3.2/overflow Example of using legacy data attributes to configure column layout and hidden item counting. ```html
``` -------------------------------- ### Title Bar Placement Source: https://trmnl.com/framework/docs/3.2/title_bar Examples showing the correct sibling relationship and the incorrect nested relationship for the Title Bar component. ```html
...
...
``` ```html
...
``` -------------------------------- ### Apply Palette Classes to Screen Source: https://trmnl.com/framework/docs/3.2/color_palettes Demonstrates how to apply device and palette classes to the screen container to trigger framework-wide token re-rendering. ```html
Northbound On time
``` ```html
Northbound On time
``` -------------------------------- ### Framework Entrypoint Configuration Source: https://trmnl.com/framework/docs/3.2/sass_api The main SCSS entrypoint that loads configuration, mixins, and defines cascade layers. ```scss // framework/index.scss: configuration and mixins load first, // then every style lands in a declared cascade layer. @forward 'config/custom'; @use 'config/tokens' as vars; @use 'mixins' as mixins; @layer tn--normalize, tn--elements, tn--components, tn--base, tn--device-overrides, tn--themes, tn--utilities; ``` -------------------------------- ### Apply size-based responsive classes Source: https://trmnl.com/framework/docs/3.2/responsive Use breakpoint prefixes like md: and lg: to apply styles progressively on medium and large screens respectively. ```html Responsive Value ``` -------------------------------- ### Apply Responsive Breakpoint Prefixes Source: https://trmnl.com/framework/docs/3.2/description Use breakpoint prefixes like sm:, md:, and lg: to adjust description sizes across different device screen sizes. ```html Responsive Description Base by default, xlarge on lg screens Large by default, base on medium+ screens Progressive Description Sizing ``` -------------------------------- ### Configure Flex Wrapping Source: https://trmnl.com/framework/docs/3.2/flex Demonstrates the difference between wrapping and non-wrapping flex containers using the flex--wrap and flex--nowrap classes. ```html
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
``` -------------------------------- ### Table Overflow Implementation Source: https://trmnl.com/framework/docs/3.2/table_overflow A structured table example using the data-table-limit attribute to manage row visibility within a runtime environment. ```html
Employee Role Pranks Sales Score Fun Fact
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
``` -------------------------------- ### Apply device-accurate preview classes Source: https://trmnl.com/framework/docs/3.2/color_palettes Use these classes on a container to simulate the muted ink colors and off-white background of a specific panel. ```html
...
``` -------------------------------- ### Apply bit-depth responsive classes Source: https://trmnl.com/framework/docs/3.2/responsive Use bit-depth prefixes like 1bit:, 2bit:, and 4bit: to target specific display color capabilities without progressive inheritance. ```html
``` -------------------------------- ### Create a Simple Item Source: https://trmnl.com/framework/docs/3.2/item The basic variant for lists where metadata is not required. ```html
Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
``` -------------------------------- ### Label Style and Semantic Variants Source: https://trmnl.com/framework/docs/3.2/label Examples of applying various style classes and semantic color modifiers to the label component, including size combinations. ```html Default Label Outline Label Underline Label Gray Label Filled Primary Success Error Inverted (alias) Large Outline Label XLarge Filled Label ``` -------------------------------- ### Apply Container Query Size Classes Source: https://trmnl.com/framework/docs/3.2/size Use these classes to size elements as a percentage of the .layout container. ```html
50% of layout width
33% of layout height
``` -------------------------------- ### Position Grid Rows Source: https://trmnl.com/framework/docs/3.2/grid Use row--start, row--center, or row--end to control horizontal alignment of rows. ```html
Item
Item
Item
``` -------------------------------- ### Apply Palette Modes to Device Panels Source: https://trmnl.com/framework/docs/3.2/devices Demonstrates how to apply different palette classes to the same device panel to change the rendering mode. ```html
...
...
``` -------------------------------- ### Position Grid Columns Source: https://trmnl.com/framework/docs/3.2/grid Use col--start, col--center, or col--end to control vertical alignment of columns. ```html
Item
Item
Item
``` -------------------------------- ### Apply Extra Small Scale Source: https://trmnl.com/framework/docs/3.2/scale Use the screen--scale-xsmall class on the screen container to achieve 75% content density. ```html
``` -------------------------------- ### Apply Responsive Value Sizing Source: https://trmnl.com/framework/docs/3.2/value Use breakpoint prefixes like sm:, md:, and lg: to adjust value sizes based on screen width. ```html Responsive Value 1,234.56 Small by default, base on large screens ``` -------------------------------- ### Apply Semantic Background and Text Utilities Source: https://trmnl.com/framework/docs/3.2/background Use intent-based roles for consistent coloring across the application. ```html
Primary
Success
Error
Warning text
``` -------------------------------- ### Configure custom device profile Source: https://trmnl.com/framework/docs/3.2/sass_devices Define a new device profile by passing a map to the $custom-devices variable when loading the framework. ```scss // my-build.scss @use 'framework' with ( $custom-devices: ( 'my-panel': ( 'screen-w': 1024px, 'screen-h': 758px, 'pixel-ratio': 1.0, 'dither-pixel-ratio': 1.0, 'ui-scale': 1.0, 'color-depth': 2, 'density-tier': '1x', 'gap-scale': 1.0, 'size': 'lg' ) ) ); ``` -------------------------------- ### Implement a small table Source: https://trmnl.com/framework/docs/3.2/table Use the table--small class to create a compact table. The table--condensed class is also available as a backward-compatible alias. ```html
Employee Role Pranks Sales Score Fun Fact
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
``` -------------------------------- ### Apply Responsive Breakpoint Alignment Source: https://trmnl.com/framework/docs/3.2/text_alignment Use breakpoint prefixes to change alignment based on device size. ```html

Responsive alignment

Progressive alignment

``` -------------------------------- ### Title Bar with Instance Source: https://trmnl.com/framework/docs/3.2/title_bar A Title Bar implementation that includes an additional instance label for context. ```html
Title Bar with Instance Production
``` -------------------------------- ### Set Basis and Order Source: https://trmnl.com/framework/docs/3.2/flex Configures initial item size with basis utilities and reorders items without changing DOM structure. ```html
basis--36
basis--20
basis--24
order--last
order--first
order--2
order---1
``` -------------------------------- ### Enable Responsive Grid Wrapping Source: https://trmnl.com/framework/docs/3.2/grid Use grid--wrap combined with grid--min-{size} to enable responsive wrapping based on a minimum column width. ```html
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
``` -------------------------------- ### Set Image Sizes Source: https://trmnl.com/framework/docs/3.2/image Apply image--small or image--xsmall to cap the width of images while maintaining aspect ratio. ```html ``` -------------------------------- ### Create an Item with Meta and Index Source: https://trmnl.com/framework/docs/3.2/item Use this variant for ordered lists or when additional context is required alongside the item content. ```html
1
Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
``` -------------------------------- ### Apply Responsive Arbitrary Sizes Source: https://trmnl.com/framework/docs/3.2/trmnl_x_guide Use these utilities to set specific pixel dimensions (0-128px) that adapt based on responsive prefixes or orientation. ```html
Responsive arbitrary width
Orientation-aware height
``` -------------------------------- ### Configure Device Variants Source: https://trmnl.com/framework/docs/3.2/screen Apply device-specific classes and bit-depth modifiers to ensure correct scaling and rendering on different hardware. ```html
```