TRMNL Framework

https://trmnl.com/framework/docs/3.1
Admin
TRMNL Framework is a CSS-based design system for building responsive user interfaces optimized for...
Tokens:75,572
Snippets:1,039
Trust Score:5.5
Update:2 months ago
Show doc for...
Tokens:
Raw
### Manual Screen Implementation

Source: https://trmnl.com/framework/docs/3.1/screen

Example of manually defining the screen container with a full-view layout.

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

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

### Size Responsive Utilities

Source: https://trmnl.com/framework/docs/3.1/responsive_test

Example of applying width styles using SCSS mixins.

```scss
@include screen.screen('md')
```

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

### Flex Responsive Utilities

Source: https://trmnl.com/framework/docs/3.1/responsive_test

Examples of applying flexbox layout styles using SCSS mixins.

```scss
@include screen.screen('md')
```

```scss
@include screen.screen('portrait')
```

```scss
@include screen.screen('lg', 'portrait')
```

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

### Spacing Responsive Utilities

Source: https://trmnl.com/framework/docs/3.1/responsive_test

Examples of applying padding and margin styles using SCSS mixins.

```scss
@include screen.screen('md')
```

```scss
@include screen.screen('portrait')
```

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

### Apply Responsive Size Utilities

Source: https://trmnl.com/framework/docs/3.1/size

Examples of applying responsive width, height, min/max constraints, and container query units using breakpoint prefixes.

```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>
```

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

### View Container Markup

Source: https://trmnl.com/framework/docs/3.1/view

Examples of how to structure the view container, either implicitly handled by the platform or explicitly defined by the developer.

```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>
```

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

### Platform-Provided Screen Structure

Source: https://trmnl.com/framework/docs/3.1/screen

Example of the structure when the platform automatically provides the screen container.

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

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

### Gap Responsive Utilities

Source: https://trmnl.com/framework/docs/3.1/responsive_test

Examples of applying gap spacing styles using SCSS mixins.

```scss
@include screen.screen('lg')
```

```scss
@include screen.screen('portrait')
```

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

### Text Responsive Utilities

Source: https://trmnl.com/framework/docs/3.1/responsive_test

Examples of applying text alignment styles 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')
```

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

### Visibility Responsive Utilities

Source: https://trmnl.com/framework/docs/3.1/responsive_test

Examples of controlling element visibility using SCSS mixins for different screen configurations.

```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 Display Utility Classes

Source: https://trmnl.com/framework/docs/3.1/visibility

Examples demonstrating how to apply display utilities with size-based prefixes to control element visibility and layout behavior across 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>
```

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

### Apply Device and Bit-Depth Specific Layouts

Source: https://trmnl.com/framework/docs/3.1/visibility

Examples demonstrating how to combine size and bit-depth prefixes to control element display properties across different hardware generations and screen 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>
```

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

### markFrameworkReady()

Source: https://trmnl.com/framework/docs/3.1/framework_runtime

Sets the window.frameworkReady flag and dispatches the 'trmnl:framework:ready' event. This should be called by the host page once its setup is complete.

```APIDOC
## markFrameworkReady()

### Description
Sets window.frameworkReady and dispatches trmnl:framework:ready on window. A host page calls it once its own setup is done.
```

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

### Background Responsive Utilities

Source: https://trmnl.com/framework/docs/3.1/responsive_test

Examples of applying background styles using SCSS mixins and CSS classes 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')
```

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

### Apply size-based responsive classes

Source: https://trmnl.com/framework/docs/3.1/responsive

Use breakpoint prefixes to apply styles starting at a specific screen size and continuing for all larger sizes.

```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>
```

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

### Setup Bar Chart Layout and Data

Source: https://trmnl.com/framework/docs/3.1/chart

Provides the HTML structure for a dashboard-style bar chart and initializes the underlying data arrays. Requires Highcharts and pattern-fill scripts to be loaded.

```html
<!-- import Highcharts library -->
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts.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--space-between">
    <!-- Business metrics displayed above chart -->
    <div class="grid grid--cols-4">
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <div class="w--14 h--1.5 mb--2 bg--black" style="border-radius: 20px;"></div>
          <span class="value value--tnums">$31,883</span>
          <span class="label">Revenue</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <div class="w--14 h--1.5 mb--2 bg--gray-3"></div>
          <span class="value value--tnums">$22,910</span>
          <span class="label">Expenses</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <div class="w--14 h--1.5 mb--2 bg--gray-5"></div>
          <span class="value value--tnums">$8,990</span>
          <span class="label">Marketing</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <div class="w--14 h--1.5 mb--2 bg--gray-7"></div>
          <span class="value value--tnums">$14,930</span>
          <span class="label">Operations</span>
        </div>
      </div>
    </div>

    <div class="border--h-5 w--full"></div>

    <!-- Chart container with unique ID -->
    <div id="example-bar-chart" class="w--full"></div>

    <script type="text/javascript">
      // Simplified regional data across four quarters
      var revenueData = [
        ["Jan", 5883],
        ["Feb", 5260],
        ["Mar", 4760],
        ["Apr", 5120],
        ["May", 5540],
        ["Jun", 6320]
      ];

      var expensesData = [
        ["Jan", 3580],
        ["Feb", 3210],
        ["Mar", 3620],
        ["Apr", 3950],
        ["May", 4120],
        ["Jun", 4430]
      ];

      var marketingData = [
        ["Jan", 1120],
        ["Feb", 980],
        ["Mar", 1320],
        ["Apr", 1650],
        ["May", 1820],
        ["Jun", 2100]
      ];
```

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

### Define a Layout container

Source: https://trmnl.com/framework/docs/3.1/layout

Examples of basic layout containers using flex and layout row modifiers.

```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>
```

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

### Implement a Line Chart

Source: https://trmnl.com/framework/docs/3.1/chart

This example demonstrates how to integrate a line chart using Highcharts and Chartkick, including the necessary HTML structure and configuration for the TRMNL aesthetic.

```html
<!-- import Highcharts + Chartkick libraries -->
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts.js"></script>
<script src="https://trmnl.com/js/chartkick/5.0.1/chartkick.min.js"></script>

<!-- markup with empty, ID'd element for chart injection -->
<div class="view view--full">
  <div class="layout layout--col gap--space-between">
    <div class="grid grid--cols-3">
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--tnums">25,388</span>
          <span class="label">Pageviews</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--tnums">4,771</span>
          <span class="label">Visitors</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--tnums">2.23</span>
          <span class="label">Mins on Page</span>
        </div>
      </div>
    </div>

    <div id="chart-123" class="w--full"></div>
  </div>

  <div class="title_bar">
    <img class="image" src="https://trmnl.com/images/plugins/simple-analytics--render.svg" alt="Simple Analytics Logo">
    <span class="title">Simple Analytics</span>
    <span class="instance">trmnl.com</span>
  </div>
</div>

<script type="text/javascript">
  var data = [["2024-06-09", 975],["2024-06-10", 840],["2024-06-11", 1004],["2024-06-12", 1308],["2024-06-13", 753],["2024-06-14", 600],["2024-06-15", 710],
              ["2024-06-16", 489],["2024-06-17", 510],["2024-06-18", 590],["2024-06-19", 610],["2024-06-20", 671],["2024-06-21", 512],["2024-06-22", 550],
              ["2024-06-23", 421],["2024-06-24", 315],["2024-06-25", 604],["2024-06-26", 672],["2024-06-27", 601],["2024-06-28", 705],["2024-06-29", 800],
              ["2024-06-30", 912],["2024-07-01", 1503],["2024-07-02", 1273],["2024-07-03", 1250],["2024-07-04", 1198],["2024-07-05", 1005],["2024-07-06", 1300],
              ["2024-07-07", 1103],["2024-07-08", 1004],["2024-07-09", 600]];

  // recommended configs to achieve the TRMNL Framework aesthetic
  var createChart = function() {
    new Chartkick["LineChart"](
    "chart-123",
    data,
    {
      adapter: "highcharts", // chartjs, google, etc available
      prefix: "",
      thousands: ",",
      points: false,
      colors: ["black"],
      curve: true,
      library: {
        chart: {
          height: 260,
          backgroundColor: 'transparent'
        },
        plotOptions: {
          series: {
            animation: false,
            lineWidth: 4
          }
        },
        yAxis: {
          labels: {
            style: {
              fontSize: "16px",
              color:"#000000"
            }
          },
          gridLineDashStyle: "shortdot",
          gridLineWidth: 1,
          gridLineColor: "#000000",
          tickAmount: 5
        },
        xAxis: {
          type: "daytime",
          labels: {
            style: {
              fontSize: "16px",
              color: "#000000"
            }
          },
          lineWidth: 0,
          gridLineDashStyle: "dot",
          tickWidth: 1,
          tickLength: 0,
          gridLineWidth: 1,
          gridLineColor: "#000000",
          tickPixelInterval: 120
        }
      }
    });
  };

  // ensure your chart loads before plugin render is generated
  if ("Chartkick" in window) {
    createChart();
  } else {
    window.addEventListener("chartkick:load", createChart, true);
  }
</script>
```

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

### Platform-provided Mashup Markup

Source: https://trmnl.com/framework/docs/3.1/mashup

Example of the structure used when the platform automatically provides the mashup container.

```html
<!-- mashup mashup--1Lx1R (platform-provided) -->
<!-- view view--half_vertical (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view -->
<!-- /mashup -->
```

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

### Manual Mashup Container Implementation

Source: https://trmnl.com/framework/docs/3.1/mashup

Example of manually defining a mashup container with the mashup--1Lx1R layout class.

```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>
```

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

### Flex Align Content

Source: https://trmnl.com/framework/docs/3.1/flex

Examples of aligning content across multiple lines when wrapping is enabled.

```html
<div class="flex flex--row flex--wrap flex--content-between gap">
  <!-- multi-line items -->
</div>

<div class="flex flex--row flex--wrap flex--content-center gap">
  <!-- multi-line items -->
</div>
```

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

### Apply Column Layout Stretch

Source: https://trmnl.com/framework/docs/3.1/layout

Examples of applying full, horizontal, or vertical stretch modifiers to column-based layouts.

```html
<div class="layout layout--col layout--stretch">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

```html
<div class="layout layout--col layout--stretch-x">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

```html
<div class="layout layout--col layout--stretch-y">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

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

### Apply Row Layout Stretch

Source: https://trmnl.com/framework/docs/3.1/layout

Examples of applying full, horizontal, or vertical stretch modifiers to row-based layouts.

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

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

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

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

### Title Bar in Mashups

Source: https://trmnl.com/framework/docs/3.1/title_bar

Example of Title Bar usage within a Mashup layout, where compact styling is applied automatically.

```html
<div class="mashup mashup--1Lx1R">
  <div class="view view--half_vertical">
    <div class="layout">
      <span class="label">Plugin A</span>
    </div>
    <div class="title_bar">
      <img class="image image--adaptive" src="/images/plugins/trmnl--render.svg">
      <span class="title">Calendar</span>
    </div>
  </div>
  <div class="view view--half_vertical">
    <div class="layout">
      <span class="label">Plugin B</span>
    </div>
    <div class="title_bar">
      <img class="image image--adaptive" src="/images/plugins/trmnl--render.svg">
      <span class="title">RSS</span>
    </div>
  </div>
</div>
```

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

### Apply Responsive Breakpoint Prefixes

Source: https://trmnl.com/framework/docs/3.1/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>
```

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

### Implement Item with Meta

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

Displays an item containing a title, description, and a metadata section with labels.

```html
<div class="item">
  <div class="meta"></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>
```

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

### Title Bar with Instance

Source: https://trmnl.com/framework/docs/3.1/title_bar

Implementation including an additional instance label for extra 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>
```

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

### Grid Wrapping with Minimum Sizes

Source: https://trmnl.com/framework/docs/3.1/grid

Enable responsive wrapping with grid--wrap and set minimum track sizes using grid--min-{size} classes.

```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>
```

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

### Row Positioning

Source: https://trmnl.com/framework/docs/3.1/grid

Control horizontal alignment using row--start, row--center, or row--end modifier classes.

```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>
```

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

### Column Positioning

Source: https://trmnl.com/framework/docs/3.1/grid

Control vertical alignment using col--start, col--center, or col--end modifier classes.

```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 Container Query Sizes

Source: https://trmnl.com/framework/docs/3.1/size

Size elements as a percentage of the layout container using cqw and cqh units.

```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>
```

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

### Apply Breakpoint-based Responsive Alignment

Source: https://trmnl.com/framework/docs/3.1/text_alignment

Use breakpoint prefixes like sm:, md:, and lg: 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>
```

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

### Apply Responsive Breakpoint Prefixes to Labels

Source: https://trmnl.com/framework/docs/3.1/label

Use size-based prefixes like sm:, md:, and lg: to adjust label appearance across different screen sizes.

```html
<!-- Small by default, xlarge on lg screens -->
<span class="label label--small lg:label--xlarge">
  Responsive Label
</span>

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

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

<!-- Progressive size scaling -->
<span class="label label--small sm:label--base md:label--large lg:label--xlarge">
  Progressive Label Sizing
</span>
```

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

### Flex Wrap vs No-wrap

Source: https://trmnl.com/framework/docs/3.1/flex

Demonstrates the difference between wrapping and non-wrapping flex containers.

```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>
```

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

### Apply Responsive Arbitrary Sizes

Source: https://trmnl.com/framework/docs/3.1/trmnl_x_guide

Use pixel-based width and height utilities with responsive prefixes. Values range from 0 to 128 pixels.

```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>
```

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

### Implement Orientation-Responsive Layouts

Source: https://trmnl.com/framework/docs/3.1/flex

Use the portrait: prefix to adapt flex direction based on device orientation.

```html
<!-- Navigation that adapts to orientation -->
<div class="flex flex--row portrait:flex--col gap">
  <div class="stretch">Nav Item 1</div>
  <div class="stretch">Nav Item 2</div>
  <div class="stretch">Nav Item 3</div>
</div>

<!-- Combined with size breakpoints -->
<div class="flex flex--col md:flex--row md:portrait:flex--col">
  <!-- Column on small screens -->
  <!-- Row on medium+ landscape screens -->
  <!-- Column on medium+ portrait screens -->
</div>
```

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

### Combine Responsive Variants

Source: https://trmnl.com/framework/docs/3.1/responsive

Demonstrates stacking size, orientation, and bit-depth modifiers on layout and typography utilities.

```html
<!-- Orientation variant on a layout utility (size and orientation only) -->
<div class="flex flex--row portrait:flex--col">...</div>

<!-- Size + orientation -->
<div class="text--center md:portrait:text--left">...</div>

<!-- All three combined on a bit-depth utility: size + orientation + bit-depth -->
<div class="value md:portrait:4bit:value--large">
  <!-- Base size by default -->
  <!-- Large on medium+ screens, in portrait, on 4-bit displays -->
</div>
```

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

### Apply Small Scale Level

Source: https://trmnl.com/framework/docs/3.1/scale

Use the screen--scale-small class to reduce content scale to 87.5% for higher density.

```html
<div class="screen screen--scale-small">
  <!-- Your content here -->
</div>
```

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

### Apply Bit-Depth Responsive Alignment

Source: https://trmnl.com/framework/docs/3.1/text_alignment

Use bit-depth prefixes like 1bit:, 2bit:, and 4bit: to target specific display color capabilities.

```html
<!-- Center by default, right on 2-bit screens -->
<p class="description text--center 2bit:text--right">Bit-depth alignment</p>

<!-- Combined: size + bit-depth -->
<p class="description text--left lg:4bit:text--center">Left by default, center on lg+ 4-bit screens</p>
```

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

### Gauge Initialization Logic

Source: https://trmnl.com/framework/docs/3.1/chart

Iterates through scores to create daily gauges and initializes a main weekly gauge.

```javascript
  // Create small daily gauges
  dailyScores.forEach((score, idx) => {
    let opts = {
      title: null,
      labels: { enabled: false },
      series: {
        fontSize: "16px",
        fontWeight: "400",
        fontFamily: "NicoClean"
      },
                        yAxis: {
        title: null
      }
    }
    createGauge(score, idx, opts);
  });

  // Create main weekly gauge
  createGauge(weeklyScore, "all", {
    title: null,
    height: "80%",
                          labels: {
      distance: 15
    },
    series: {
      fontSize: "3em",
      fontWeight: "550"
    },
    yAxis: {
      title: textRating(weeklyScore)
    }
  });
```

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

### Apply Basic Aspect Ratios

Source: https://trmnl.com/framework/docs/3.1/aspect_ratio

Use predefined aspect ratio classes to set fixed proportions on elements.

```html
<!-- Square aspect ratio -->
<div class="aspect--1/1">...</div>

<!-- Widescreen aspect ratio -->
<div class="aspect--16/9">...</div>

<!-- Portrait aspect ratio -->
<div class="aspect--3/4">...</div>
```

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

### Implement 1 Left, 1 Right Layout

Source: https://trmnl.com/framework/docs/3.1/mashup

Uses the mashup--1Lx1R modifier to split the screen into two vertical columns.

```html
<div class="mashup mashup--1Lx1R">
  <div class="view view--half_vertical">
    <div class="layout">
      <span class="label">Plugin A</span>
    </div>
  </div>
  <div class="view view--half_vertical">
    <div class="layout">
      <span class="label">Plugin B</span>
    </div>
  </div>
</div>
```

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

### Description Component Size Variants

Source: https://trmnl.com/framework/docs/3.1/description

Demonstrates the four available size variants and a responsive modifier for adjusting size based on screen breakpoints.

```html
<!-- Base (default) -->
<span class="description">Base Description</span>

<!-- Large: larger text for emphasis -->
<span class="description description--large">Large Description</span>

<!-- Extra Large: prominent descriptions -->
<span class="description description--xlarge">XLarge Description</span>

<!-- Extra Extra Large: maximum emphasis -->
<span class="description description--xxlarge">XXLarge Description</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>
```

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

### Apply Semantic Background and Text Colors

Source: https://trmnl.com/framework/docs/3.1/background

Use intent-based roles for consistent styling 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>
```

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

### Implement 1 Top, 1 Bottom Layout

Source: https://trmnl.com/framework/docs/3.1/mashup

Uses the mashup--1Tx1B modifier to split the screen into two horizontal rows.

```html
<div class="mashup mashup--1Tx1B">
  <div class="view view--half_horizontal">
    <div class="layout">
      <span class="label">Plugin A</span>
    </div>
  </div>
  <div class="view view--half_horizontal">
    <div class="layout">
      <span class="label">Plugin B</span>
    </div>
  </div>
</div>
```

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

### Basic Column Layout

Source: https://trmnl.com/framework/docs/3.1/columns

Simple implementation of multiple columns containing content.

```html
<div class="columns">
  <div class="column">
    Content for column 1
  </div>
  <div class="column">
    Content for column 2
  </div>
  <div class="column">
    Content for column 3
  </div>
</div>
```

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

### Default Screen Structure

Source: https://trmnl.com/framework/docs/3.1/screen

The standard boilerplate for a default 800x480px landscape screen.

```html
<div class="screen">
  <div class="view view--full">
    <div class="layout">
      <!-- Your content here -->
    </div>
  </div>
</div>
```

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

### Optimize Labels for Bit-Depth

Source: https://trmnl.com/framework/docs/3.1/label

Apply 1bit:, 2bit:, or 4bit: prefixes to target specific display color capabilities.

```html
<!-- Different styles for different bit-depth displays -->
<span class="label 1bit:label--filled 2bit:label--outline 4bit:label--underline">
  Display Optimized
</span>

<!-- Selective bit-depth targeting -->
<span class="label 1bit:label--outline 4bit:label--gray">
  Selective Styling
</span>
```

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

### Responsive Title Variants

Source: https://trmnl.com/framework/docs/3.1/title

Shows how to use breakpoint prefixes to change title sizes based on device screen size.

```html
<!-- Small by default, xlarge on lg screens -->
<span class="title title--small lg:title--xlarge">
  Responsive Title
</span>

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

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

### Title Size Variations

Source: https://trmnl.com/framework/docs/3.1/title

Demonstrates the five available size variants for the Title component and a basic responsive implementation.

```html
<!-- Small: compact headings for secondary content -->
<span class="title title--small">Small Title</span>

<!-- Base: default size, most common usage -->
<span class="title">Base Title</span>
<span class="title title--base">Base Title</span>

<!-- Large: prominent headers -->
<span class="title title--large">Large Title</span>

<!-- Extra Large: hero sections -->
<span class="title title--xlarge">Extra Large Title</span>

<!-- Extra Extra Large: maximum impact -->
<span class="title title--xxlarge">XXL Title</span>

<!-- Responsive example -->
<span class="title title--small lg:title--base">Small by default, base on large screens</span>
```

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

### Apply visibility and display utilities

Source: https://trmnl.com/framework/docs/3.1/visibility

Use these classes to toggle element visibility or change display types based on screen size breakpoints.

```html
<!-- Always visible -->
<div class="visible">visible</div>

<!-- Always hidden -->
<div class="hidden">hidden</div>

<!-- Hidden by default, visible on medium+ -->
<div class="hidden md:visible">md:visible</div>

<!-- Visible by default, hidden on medium+ -->
<div class="visible md:hidden">md:hidden</div>

<!-- Visible by default, hidden on large -->
<div class="visible lg:hidden">lg:hidden</div>

<!-- Display as flex on medium+ -->
<div class="hidden md:flex">md:flex</div>

<!-- Display as grid on large screens -->
<div class="hidden lg:grid">lg:grid</div>
```

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

### Apply Responsive Aspect Ratios

Source: https://trmnl.com/framework/docs/3.1/aspect_ratio

Combine base aspect ratio classes with responsive prefixes to change proportions based on screen size or orientation.

```html
<!-- Square, 3:4 on portrait screens -->
<div class="aspect--1/1 portrait:aspect--3/4">...</div>

<!-- 4:3, widescreen on large screens and up -->
<div class="aspect--4/3 lg:aspect--16/9">...</div>

<!-- Widescreen on large landscape screens only -->
<div class="aspect--1/1 lg:landscape:aspect--16/9">...</div>
```

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

### Implement 1 Left, 2 Right Layout

Source: https://trmnl.com/framework/docs/3.1/mashup

Uses the mashup--1Lx2R modifier to place one view on the left and two stacked views on the right.

```html
<div class="mashup mashup--1Lx2R">
  <div class="view view--half_vertical">
    <div class="layout">
      <span class="label">Plugin A</span>
    </div>
  </div>
  <div class="view view--quadrant">
    <div class="layout">
      <span class="label">Plugin B</span>
    </div>
  </div>
  <div class="view view--quadrant">
    <div class="layout">
      <span class="label">Plugin C</span>
    </div>
  </div>
</div>
```

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

### Manage Label Class Backward Compatibility

Source: https://trmnl.com/framework/docs/3.1/label

Use preferred class names like label--gray and label--filled, while noting that legacy names like label--gray-out and label--inverted remain supported.

```html
<!-- Deprecated (but still works) -->
<span class="label label--gray-out">Gray label (deprecated)</span>
<span class="label label--inverted">Inverted (alias)</span>

<!-- Preferred (new naming) -->
<span class="label label--gray">Gray label (preferred)</span>
<span class="label label--filled">Filled label (preferred)</span>
```

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

### Implement Multi-line Wrapping for Descriptions

Source: https://trmnl.com/framework/docs/3.1/description

Default behavior for descriptions allows text to wrap naturally when exceeding the container width.

```html
<!-- Descriptions with longer text will wrap naturally -->
<span class="description">This longer description will wrap to multiple lines when it exceeds the width</span>
```

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

### Apply predefined gap sizes

Source: https://trmnl.com/framework/docs/3.1/gap

Use these classes to apply standardized spacing in grid or flex layouts.

```html
<!-- Available base gap sizes from smallest to largest -->
<div class="grid grid--cols-3 gap--none">...</div>
<div class="grid grid--cols-3 gap--xsmall">...</div>
<div class="grid grid--cols-3 gap--small">...</div>
<div class="grid grid--cols-3 gap">...</div>
<div class="grid grid--cols-3 gap--medium">...</div>
<div class="grid grid--cols-3 gap--large">...</div>
<div class="grid grid--cols-3 gap--xlarge">...</div>
<div class="grid grid--cols-3 gap--xxlarge">...</div>

<!-- Or using the base modifier -->
<div class="flex flex--col gap--base">...</div>
```

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

### Implement 1 Top, 2 Bottom Layout

Source: https://trmnl.com/framework/docs/3.1/mashup

Uses the mashup--1Tx2B modifier to place one view on top and two side-by-side views on the bottom.

```html
<div class="mashup mashup--1Tx2B">
  <div class="view view--half_horizontal">
    <div class="layout">
      <span class="label">Plugin A</span>
    </div>
  </div>
  <div class="view view--quadrant">
    <div class="layout">
      <span class="label">Plugin B</span>
    </div>
  </div>
  <div class="view view--quadrant">
    <div class="layout">
      <span class="label">Plugin C</span>
    </div>
  </div>
</div>
```

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

### Initialize Bar Chart with Pattern Fills

Source: https://trmnl.com/framework/docs/3.1/chart

Configures a column chart with four series, custom pattern-based colors, and disabled interactivity for static display.

```javascript
      var operationsData = [
        ["Jan", 2240],
        ["Feb", 2170],
        ["Mar", 2380],
        ["Apr", 2520],
        ["May", 2730],
        ["Jun", 2890]
      ];

      var formattedBarData = [
        { name: "Revenue", data: revenueData },
        { name: "Expenses", data: expensesData },
        { name: "Marketing", data: marketingData },
        { name: "Operations", data: operationsData }
      ];

      // Initialize chart with bar/column configuration for 4 series
      Highcharts.chart("example-bar-chart", {
        chart: {
          type: "column",
          height: 284,
          width: null,
          animation: false,
          spacing: [10, 10, 5, 10],
          backgroundColor: "transparent"
        },
        title: {
          text: null
        },
        plotOptions: {
          series: {
            animation: false,
            enableMouseTracking: false,
            states: {
              hover: { enabled: false }
            },
            pointPadding: 0.05,  // Reduced padding for more bars
            groupPadding: 0.1,
            borderWidth: 0
          }
        },
        // Define all four series with different styles
        series: [{
          data: formattedBarData[0].data,
          color: "#000000",
          name: formattedBarData[0].name,
          zIndex: 4  // Highest zIndex to keep this in front
        }, {
          data: formattedBarData[1].data,
          name: formattedBarData[1].name,
          zIndex: 3,
          color: {
            pattern: {
              image: "https://trmnl.com/images/grayscale/gray-3.png",
              width: 12,
              height: 12
            }
          }
        }, {
          data: formattedBarData[2].data,
          name: formattedBarData[2].name,
          zIndex: 2,
          color: {
            pattern: {
              image: "https://trmnl.com/images/grayscale/gray-5.png",
              width: 12,
              height: 12
            }
          }
        }, {
          data: formattedBarData[3].data,
          name: formattedBarData[3].name,
          zIndex: 1,
          color: {
            pattern: {
              image: "https://trmnl.com/images/grayscale/gray-7.png",
              width: 12,
              height: 12
            }
          }
        }],
        tooltip: { enabled: false },
        legend: { enabled: false },
        yAxis: {
          labels: {
            style: { fontSize: "16px", color: "#000000" }
          },
          gridLineDashStyle: "shortdot",
          gridLineWidth: 1,
          gridLineColor: "#000000",
          tickAmount: 5,
          title: {
            text: null
          }
        },
        xAxis: {
          type: "category",
          labels: {
            style: { fontSize: "16px", color: "#000000" },
            padding: 5,
            y: 25
          },
          lineWidth: 0,
          gridLineDashStyle: "dot",
          tickWidth: 0,
          tickLength: 0,
          gridLineWidth: 1,
          gridLineColor: "#000000",
          title: {
            text: null
          }
        },
        credits: {
          enabled: false
        }
      });
```

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

### Apply Base Text Size

Source: https://trmnl.com/framework/docs/3.1/text_size

Use the text--base class for standard body text sizing.

```html
<span class="text--base">Regular text</span>
<span class="text--base font--bold">Bold text</span>
```

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

### Implement Container Query Units

Source: https://trmnl.com/framework/docs/3.1/trmnl_x_guide

Use these utilities to size elements relative to the layout container rather than the viewport. Supports responsive variants.

```html
<!-- Width as percentage of the layout container -->
<div class="w--[50cqw]">Half the layout width</div>

<!-- Height as percentage of the layout container -->
<div class="h--[80cqh]">80% of layout height</div>

<!-- Min/max constraints -->
<div class="w--min-[30cqw] w--max-[70cqw]">Constrained width</div>

<!-- Responsive container query units -->
<div class="w--[100cqw] lg:w--[50cqw]">Full width on small, half on large</div>
```

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

### Apply Responsive Breakpoint Colors

Source: https://trmnl.com/framework/docs/3.1/text_color

Use breakpoint prefixes to change text color based on screen width.

```html
<!-- Text color: different shades at different breakpoints -->
<span class="value text--gray-50 md:text--gray-30">Responsive color</span>

<!-- Progressive color scaling -->
<span class="value text--gray-70 sm:text--gray-50 md:text--gray-30 lg:text--black">Progressive color</span>

<!-- Chromatic color at breakpoints -->
<span class="value text--red sm:text--blue lg:text--green">Responsive chromatic color</span>
```

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

### Apply Regular Scale Level

Source: https://trmnl.com/framework/docs/3.1/scale

Use the screen--scale-regular class to set the content scale to the 100% baseline.

```html
<div class="screen screen--scale-regular">
  <!-- Your content here -->
</div>
```

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

### Bit-Depth Responsive Behavior

Source: https://trmnl.com/framework/docs/3.1/outline

SCSS mixins and selectors that handle the transition between gradient-based dots and standard borders based on display capabilities.

```scss
/* 1-bit: CSS gradient dots (via outline-dots mixin) */
.outline::after {
    @include outline-dots;
}

/* 2-bit and 4-bit: Falls back to CSS border */
.screen--2bit .outline::after,
.screen--4bit .outline::after {
    background: none;
    border: 1px solid var(--framework-semantic-border-strong-border-color,
        var(--framework-outline-strong, var(--framework-border-strong)));
    border-radius: calc(7px * var(--content-scale, 1));
}
```

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

### Apply Orientation-Responsive Layout

Source: https://trmnl.com/framework/docs/3.1/responsive

Use the portrait: prefix to switch between row and column layouts based on screen orientation.

```html
<!-- Row layout in landscape, column layout in portrait -->
<div class="flex flex--row portrait:flex--col gap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

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

### Configure Responsive Text Clamping

Source: https://trmnl.com/framework/docs/3.1/trmnl_x_guide

Apply data-clamp attributes to control text truncation lines across different screen sizes and orientations.

```html
<!-- 2 lines on small/medium, 4 on large, 1 in portrait -->
<span class="label"
      data-clamp="2"
      data-clamp-lg="4"
      data-clamp-portrait="1">
  Long label text...
</span>
```

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

### Apply Orientation-Based Variants

Source: https://trmnl.com/framework/docs/3.1/description

Adapt description sizes to device orientation using the portrait: prefix, which can also be combined with size breakpoints.

```html
<!-- Large by default, base in portrait -->
<span class="description description--large portrait:description--base">Orientation Variant</span>

<!-- Caption describing the responsive behavior (optional) -->
<span class="label label--small">Large by default, base in portrait.</span>
```
Tokens:
Raw