TRMNL Framework

https://trmnl.com/framework/docs/3.2
Admin
TRMNL Framework is an open-source ePaper design system and layout engine tuned for 1-bit, 2-bit, and...
Tokens:111,121
Snippets:1,523
Trust Score:5.5
Update:2 months ago
Show doc for...
Tokens:
Raw
### 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
<!-- view view--full (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view -->
```

```html
<div class="view view--full">
  <div class="layout">...</div>
  <div class="title_bar">...</div>
</div>
```

--------------------------------

### 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
<div class="layout">
  <div class="flex flex--row">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>
```

```html
<div class="layout">
  <div class="layout layout--row">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>
```

--------------------------------

### 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
<!-- Device-specific layouts -->
<div class="hidden md:1bit:block md:2bit:flex lg:4bit:grid">
  Different display types per device generation
</div>

<!-- Optimize for ePaper performance -->
<div class="table 1bit:block 2bit:flex">
  Simple layouts for lower bit-depth displays
</div>

<!-- Complex responsive + bit-depth targeting -->
<div class="hidden sm:inline md:1bit:block md:2bit:flex lg:4bit:grid">
  Progressive enhancement across all device capabilities
</div>
```

--------------------------------

### 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
<!-- mashup mashup--1Lx1R (platform-provided) -->
<!-- view view--half_vertical (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view -->
<!-- /mashup -->
```

```html
<div class="mashup mashup--1Lx1R">
  <div class="view view--half_vertical">
    <div class="layout">...</div>
    <div class="title_bar">...</div>
  </div>
  <div class="view view--half_vertical">
    <div class="layout">...</div>
    <div class="title_bar">...</div>
  </div>
</div>
```

--------------------------------

### 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
<!-- Basic responsive display -->
<div class="hidden md:block">Show as block on medium+</div>
<div class="block md:flex">Block by default, flex on medium+</div>
<div class="hidden lg:inline-grid">Show as inline-grid on large screens</div>

<!-- Complex responsive layouts -->
<div class="inline sm:inline-block md:flex lg:grid">
  Changes display type at each breakpoint
</div>

<!-- Hide on mobile, show different layouts -->
<div class="hidden sm:flex md:grid lg:table">
  Different layout per screen size
</div>

<!-- Table-style structures -->
<div class="table">
  <div class="table-row">
    <div class="table-cell">Cell A</div>
    <div class="table-cell">Cell B</div>
  </div>
</div>
```

--------------------------------

### 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
<!-- screen (platform-provided) -->
<!-- view view--full (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view -->
<!-- /screen -->
```

```html
<div class="screen">
  <div class="view view--full">
    <div class="layout">...</div>
    <div class="title_bar">...</div>
  </div>
</div>
```

--------------------------------

### 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
<!-- import Highcharts libraries -->
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts-more.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/pattern-fill.js"></script>

<div class="view view--full">
  <div class="layout layout--col gap--none">
    <div class="grid grid--cols-7 mb--5">
      <div class="h--32">
        <div id="day_0" class="h--24"></div>
        <span class="description text--center">Monday</span>
      </div>
      <div class="h--32">
        <div id="day_1" class="h--24"></div>
        <span class="description text--center">Tuesday</span>
      </div>
      <div class="h--32">
        <div id="day_2" class="h--24"></div>
        <span class="description text--center">Wednesday</span>
      </div>
      <div class="h--32">
        <div id="day_3" class="h--24"></div>
        <span class="description text--center">Thursday</span>
      </div>
      <div class="h--32">
        <div id="day_4" class="h--24"></div>
        <span class="description text--center">Friday</span>
      </div>
      <div class="h--32">
        <div id="day_5" class="h--24"></div>
        <span class="description text--center">Saturday</span>
      </div>
      <div class="h--32">
        <div id="day_6" class="h--24"></div>
        <span class="description text--center">Sunday</span>
      </div>
    </div>

    <div class="divider"></div>
```

--------------------------------

### 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
<!-- TRMNL X: 1040x780 CSS pixels at a 1.8 pixel ratio, 16 grays -->
<div class="screen screen--v2 screen--lg screen--density-2x screen--4bit">
  <div class="view view--full">
    <div class="layout">...</div>
  </div>
</div>
```

--------------------------------

### 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
<!-- view view--full (platform-provided) -->
<div class="layout">
  <div class="columns">
    <div class="column">...</div>
    <div class="column">...</div>
  </div>
</div>
<div class="title_bar">...</div>
<!-- /view -->
```

```html
<div class="view view--full">
  <div class="layout">
    <div class="columns">
      <div class="column">...</div>
      <div class="column">...</div>
    </div>
  </div>
  <div class="title_bar">...</div>
</div>
```

--------------------------------

### 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
<div class="screen screen--generic_16_9 screen--color-full">
  <div class="view view--full">
    <!-- bg--red-60 is a solid red here, a dither on every limited palette -->
    <div class="layout bg--red-60">
      <span class="title">Delayed</span>
    </div>
  </div>
</div>
```

--------------------------------

### 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
<!-- Width: 8 (32px) by default, 16 (64px) on md and up, 24 (96px) on lg and up -->
<div class="w--8 md:w--16 lg:w--24">Responsive Width</div>

<!-- Height: 8 (32px) by default, 16 (64px) on md and up, 24 (96px) on lg and up -->
<div class="h--8 md:h--16 lg:h--24">Responsive Height</div>

<!-- Min/Max with responsive -->
<div class="w--min-8 md:w--min-16 lg:w--min-24">Responsive Min Width</div>

<!-- Container query units with responsive -->
<div class="w--[25cqw] md:w--[50cqw] lg:w--[75cqw]">Responsive Container Query</div>
```

--------------------------------

### 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
<!-- Option 1: serve a released build -->
<link rel="stylesheet" href="https://trmnl.com/css/latest/plugins.css">
<script src="https://trmnl.com/js/latest/plugins.js"></script>

<!-- Option 2: compile and serve your own build -->
<link rel="stylesheet" href="/assets/plugins.css">
<script src="/assets/plugins.js"></script>
```

--------------------------------

### 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
<div class="columns">
  <div class="column"
       data-list-limit="true"
       data-list-max-height="340"
       data-list-hidden-count="true"
       data-list-max-columns="2">
    <!-- Items go here -->
  </div>
</div>
```

--------------------------------

### 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
<!-- view view--full (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view -->
```

```html
<!-- view view--full (platform-provided) -->
<div class="layout">
  <div class="title_bar">...</div>
</div>
<!-- /view -->
```

--------------------------------

### 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
<!-- Your layout; the platform supplies the screen and its classes -->
<div class="layout">
  <span class="title">Northbound</span>
  <span class="label label--primary">On time</span>
</div>
```

```html
<div class="screen screen--inky_impression_7_3 screen--color-7a">
  <div class="view view--full">
    <div class="layout">
      <span class="title">Northbound</span>
      <span class="label label--primary">On time</span>
    </div>
  </div>
</div>
```

--------------------------------

### 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
<!-- Regular by default, large on medium and above, xlarge on large and above -->
<span class="value md:value--large lg:value--xlarge">
  Responsive Value
</span>
```

--------------------------------

### 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
<!-- Base by default, xlarge on lg screens -->
<span class="description lg:description--xlarge">
  Responsive Description
</span>

<!-- Caption describing the responsive behavior (optional) -->
<span class="label label--small">Base by default, xlarge on lg screens</span>

<!-- Using base modifier to reset to default size at breakpoint -->
<span class="description description--large md:description--base">
  Large by default, base on medium+ screens
</span>

<!-- Progressive size scaling -->
<span class="description sm:description--large md:description--xlarge lg:description--xxlarge">
  Progressive Description Sizing
</span>
```

--------------------------------

### 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
<div class="flex flex--row flex--wrap gap">
  <div>Item 1</div> <div>Item 2</div> <div>Item 3</div>
  <div>Item 4</div> <div>Item 5</div> <div>Item 6</div>
</div>

<div class="flex flex--row flex--nowrap gap">
  <div>Item 1</div> <div>Item 2</div> <div>Item 3</div>
  <div>Item 4</div> <div>Item 5</div> <div>Item 6</div>
</div>
```

--------------------------------

### 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
<table class="table" data-table-limit="true">
        <thead>
          <tr>
            <th><span class="title"></span></th>
            <th><span class="title">Employee</span></th>
            <th><span class="title">Role</span></th>
            <th><span class="title">Pranks</span></th>
            <th><span class="title">Sales</span></th>
            <th><span class="title">Score</span></th>
            <th><span class="title">Fun Fact</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="label label--small">Row 1, Cell 1</span></td>
            <td><span class="label">Row 1, Cell 2</span></td>
            <td><span class="label label--small">Row 1, Cell 3</span></td>
          </tr>
        </tbody>
      </table>
```

--------------------------------

### 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
<!-- Device-accurate preview of a 6-color panel -->
<div class="screen screen--color-6a screen--preview-colors screen--preview-white-limited">
  ...
</div>
```

--------------------------------

### 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
<!-- black on 1-bit, gray-45 on 2-bit, gray-75 on 4-bit screens -->
<div class="h--36 w--36 rounded--large 1bit:bg--black 2bit:bg--gray-45 4bit:bg--gray-75"></div>
```

--------------------------------

### Create a Simple Item

Source: https://trmnl.com/framework/docs/3.2/item

The basic variant for lists where metadata is not required.

```html
<div class="item">
  <div class="content">
    <span class="title title--small">Team Meeting</span>
    <span class="description">Weekly team sync-up</span>
    <div class="flex gap--small">
      <span class="label label--small label--underline">9:00 AM - 10:00 AM</span>
      <span class="label label--small label--underline">Confirmed</span>
    </div>
  </div>
</div>
```

--------------------------------

### 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 (plain) -->
<span class="label">Default Label</span>

<!-- Outline: bordered label -->
<span class="label label--outline">Outline Label</span>

<!-- Underline: underlined label -->
<span class="label label--underline">Underline Label</span>

<!-- Gray: muted/secondary label -->
<span class="label label--gray">Gray Label</span>

<!-- Filled: black (darkest) background -->
<span class="label label--filled">Filled</span>

<!-- Semantic: primary, success, error, warning -->
<span class="label label--primary">Primary</span>
<span class="label label--success">Success</span>
<span class="label label--error">Error</span>

<!-- Backwards compatible: label--inverted = label--filled -->
<span class="label label--inverted">Inverted (alias)</span>

<!-- Combine sizes with styles -->
<span class="label label--large label--outline">Large Outline Label</span>
<span class="label label--xlarge label--filled">XLarge Filled Label</span>
```

--------------------------------

### 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
<div class="view view--full">
  <div class="layout">
    <div class="w--[50cqw]">50% of layout width</div>
    <div class="h--[33cqh]">33% of layout height</div>
  </div>
</div>
```

--------------------------------

### 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
<div class="grid grid--cols-1">
  <div class="row row--start">
    <div>Item</div>
  </div>
  <div class="row row--center">
    <div>Item</div>
  </div>
  <div class="row row--end">
    <div>Item</div>
  </div>
</div>
```

--------------------------------

### 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
<!-- The gray-16 palette: shades paint as solids -->
<div class="screen screen--amazon_kindle_2024 screen--sm screen--density-2x screen--4bit">...</div>

<!-- The bw palette, same device: shades paint as dither patterns -->
<div class="screen screen--amazon_kindle_2024 screen--sm screen--density-2x screen--1bit">...</div>
```

--------------------------------

### 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
<div class="grid grid--cols-3">
  <div class="col col--start">
    <div>Item</div>
  </div>
  <div class="col col--center">
    <div>Item</div>
  </div>
  <div class="col col--end">
    <div>Item</div>
  </div>
</div>
```

--------------------------------

### 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
<div class="screen screen--scale-xsmall">
  <!-- Your content here -->
</div>
```

--------------------------------

### 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
<!-- Small by default, large on md screens, xlarge on lg screens -->
<span class="value value--small md:value--large lg:value--xlarge">
  Responsive Value
</span>

<!-- Progressive scaling with screen size -->
<span class="value value--xsmall sm:value--small md:value--base lg:value--large value--tnums">
  1,234.56
</span>

<!-- Using base modifier to reset to default size at breakpoint -->
<span class="value value--small lg:value--base">
  Small by default, base on large screens
</span>
```

--------------------------------

### 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
<div class="bg--primary text--white">Primary</div>
<div class="bg--success text--white">Success</div>
<div class="bg--error text--white">Error</div>
<div class="text--warning">Warning text</div>
```

--------------------------------

### 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
<table class="table table--small" data-table-limit="true">
        <thead>
          <tr>
            <th><span class="title title--small">Employee</span></th>
            <th><span class="title title--small">Role</span></th>
            <th><span class="title title--small">Pranks</span></th>
            <th><span class="title title--small">Sales</span></th>
            <th><span class="title title--small">Score</span></th>
            <th><span class="title title--small">Fun Fact</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="label label--small">Row 1, Cell 1</span></td>
            <td><span class="label">Row 1, Cell 2</span></td>
            <td><span class="label label--small">Row 1, Cell 3</span></td>
          </tr>
        </tbody>
      </table>
```

--------------------------------

### 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
<!-- Left by default, center on md+, right on lg+ -->
<p class="description text--left md:text--center lg:text--right">Responsive alignment</p>

<!-- Progressive alignment scaling -->
<p class="description text--left sm:text--center md:text--right lg:text--justify">Progressive alignment</p>
```

--------------------------------

### 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
<div class="title_bar">
  <img class="image image--adaptive" src="/images/plugins/trmnl--render.svg">
  <span class="title">Title Bar with Instance</span>
  <span class="instance">Production</span>
</div>
```

--------------------------------

### 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
<div class="flex flex--row">
  <div class="basis--36">basis--36</div>
  <div class="basis--20">basis--20</div>
  <div class="basis--24">basis--24</div>
</div>

<div class="flex flex--row">
  <div class="order--last">order--last</div>
  <div class="order--first">order--first</div>
  <div class="order--2">order--2</div>
  <div class="order---1">order---1</div>
</div>
```

--------------------------------

### 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
<div class="grid grid--wrap grid--min-32">
  <div class="col">Item 1</div>
  <div class="col">Item 2</div>
  <div class="col">Item 3</div>
  <div class="col">Item 4</div>
  <div class="col">Item 5</div>
  <div class="col">Item 6</div>
  <div class="col">Item 7</div>
  <div class="col">Item 8</div>
</div>

<div class="grid grid--wrap grid--min-56">
  <div class="col">Item 1</div>
  <div class="col">Item 2</div>
  <div class="col">Item 3</div>
  <div class="col">Item 4</div>
  <div class="col">Item 5</div>
  <div class="col">Item 6</div>
  <div class="col">Item 7</div>
  <div class="col">Item 8</div>
</div>
```

--------------------------------

### 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
<img class="image image--small" src="path to image">
<img class="image image--xsmall" src="path to image">
```

--------------------------------

### 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
<div class="item">
  <div class="meta">
    <span class="index">1</span>
  </div>
  <div class="content">
    <span class="title title--small">Team Meeting</span>
    <span class="description">Weekly team sync-up</span>
    <div class="flex gap--small">
      <span class="label label--small label--underline">9:00 AM - 10:00 AM</span>
      <span class="label label--small label--underline">Confirmed</span>
    </div>
  </div>
</div>
```

--------------------------------

### 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 sizes -->
<div class="w--[80px] md:w--[110px] lg:w--[128px]">Responsive arbitrary width</div>
<div class="h--[100px] portrait:h--[128px]">Orientation-aware height</div>
```

--------------------------------

### 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
<!-- Original TRMNL -->
<div class="screen screen--og screen--1bit">
  <!-- 800x480, 1-bit depth -->
</div>

<!-- TRMNL V2 -->
<div class="screen screen--v2 screen--4bit">
  <!-- 1040x780, 4-bit depth -->
</div>

<!-- Amazon Kindle 2024 -->
<div class="screen screen--amazon_kindle_2024 screen--4bit">
  <!-- 800x480, 4-bit depth -->
</div>

<!-- Combined modifiers -->
<div class="screen screen--v2 screen--portrait screen--4bit">
  <!-- All modifiers work together -->
</div>
```
Tokens:
Raw