TRMNL Framework

https://trmnl.com/framework
Admin
TRMNL Framework is an e-ink optimized UI framework for building consistent, high-quality plugin...
Tokens:111,236
Snippets:1,382
Trust Score:5.5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Mashup Layout Example (Platform-Provided)

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

This example shows the structure when the platform provides the Mashup container automatically. It includes comments indicating platform-provided elements.

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

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

### Mashup Layout Example (User-Provided)

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

This example demonstrates how a user can provide their own Mashup container with a specific 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>
```

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

### Single View Layout Example

Source: https://trmnl.com/framework/docs/3.1/structure.md

Demonstrates the structure for a single plugin occupying the full screen, including the screen, view, and layout.

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

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

### Responsive Width Example

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

Apply different width values at different screen sizes. Styles apply to the target breakpoint and larger.

```html
<div class="w--8 md:w--16 lg:w--24">Responsive Width</div>
```

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

### Responsive Title Example

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

Shows how to make a Title responsive, changing size based on screen width. This example is small by default and becomes xlarge on large screens.

```html
<span class="title title--small lg:title--xlarge">
  Responsive Title
</span>
```

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

### Responsive Height Example

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

Apply different height values at different screen sizes. Styles apply to the target breakpoint and larger.

```html
<div class="h--8 md:h--16 lg:h--24">Responsive Height</div>
```

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

### Responsive Text Size Example

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

Applies text size utilities with responsive prefixes. Use at the medium breakpoint and up.

```html
<span class="text--base md:text--large portrait:text--small">
  Responsive text sizing
</span>
```

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

### Responsive Min/Max Width Example

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

Apply responsive minimum width values. Styles apply to the target breakpoint and larger.

```html
<div class="w--min-8 md:w--min-16 lg:w--min-24">Responsive Min Width</div>
```

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

### Responsive Grid Column Setup

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

Configure grid columns and spans based on screen size and orientation.

```html
md:grid--cols-3, md:portrait:col--span-2
```

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

### Plugin View Markup Example

Source: https://trmnl.com/framework/docs/3.1/structure.md

This is an example of the expected div structure for a plugin's view markup, including layout and title bar.

```html
<!-- plugin's view markup -->
    <div class="layout">...</div>
    <div class="title_bar">...</div>
    <!-- /plugin's view markup -->
```

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

### Responsive Gap Patterns

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

Demonstrates different responsive gap patterns using flexbox and grid layouts. The first example stacks items vertically and adjusts gap size based on screen size and orientation. The second example uses a two-column grid with varying gap sizes across breakpoints and orientations.

```html
<div class="flex flex--col gap md:gap--large portrait:gap--small">...</div>
```

```html
<div class="grid grid--cols-2 gap--xsmall lg:gap--medium md:portrait:gap--large">...</div>
```

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

### Bit-depth Text Size Example

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

Applies text size utilities with bit-depth prefixes. Use on 4-bit displays only.

```html
<span class="text--base 4bit:text--xlarge">
  Larger on 4-bit displays
</span>
```

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

### Basic Column Layout Example

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

Demonstrates the basic structure for creating a column layout with content. This is useful for organizing same-type data into distinct columns.

```html
<div class="layout">
  <div class="columns">
    <div class="column">...</div>
    <div class="column">...</div>
  </div>
</div>
```

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

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

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

### XSmall Table Example

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

Demonstrates the usage of the 'table--xsmall' class for creating compact table rows. This is useful when space is limited and a denser table display is required.

```html
<table class="table table--xsmall" 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 label--small">Row 1, Cell 2</span></td>
                <td><span class="label label--small">Row 1, Cell 3</span></td>
              </tr>
            </tbody>
          </table>
```

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

### Responsive Display Control Examples

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

Demonstrates how to use responsive prefixes like 'hidden', 'flex', 'grid', and 'inline-block' to control element display at different screen sizes. These utilities are mobile-first.

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

```html
<div class="inline sm:inline-block md:flex lg:grid">
  Changes display type at each breakpoint
</div>
```

```html
<div class="hidden sm:flex md:grid lg:table">
  Different layout per screen size
</div>
```

```html
<div class="table">
  <div class="table-row">
    <div class="table-cell">Cell A</div>
    <div class="table-cell">Cell B</div>
  </div>
</div>
```

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

### Responsive Container Query Width Example

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

Apply responsive width using container query units. Styles apply to the target breakpoint and larger.

```html
<div class="w--[25cqw] md:w--[50cqw] lg:w--[75cqw]">Responsive Container Query</div>
```

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

### Mashup (Multiple Views) Structure Example

Source: https://trmnl.com/framework/docs/3.1/structure.md

Shows the structure for multiple plugins on one screen, wrapping views in a Mashup with specific view size modifiers.

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

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

### Canonical Screen Structure Example

Source: https://trmnl.com/framework/docs/3.1/structure.md

Illustrates the canonical div hierarchy for a screen, including the screen, view, layout, and optional title bar.

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

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

### Simple Item Example

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

This snippet shows a basic Item component without any icons. It's suitable for displaying titles, descriptions, and associated labels.

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

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

### Indexed Table Example

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

Demonstrates how to create an indexed table by adding a meta block with an index to cells. The 'table--indexed' class docks the meta block and adds padding.

```html
<table class="table table--indexed" data-table-limit="true">
  <thead>
    <tr>
      <th><span class="title title--small"></span></th>
      <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="meta"><span class="index">1</span></span></td>
      <td><span class="label">Pam Beesly</span></td>
      <td><span class="label label--small">Receptionist</span></td>
      <td><span class="label label--small">3</span></td>
      <td><span class="label label--small">$0</span></td>
      <td><span class="label label--small">0.00</span></td>
      <td><span class="label label--small" data-clamp="1">Loves drawing</span></td>
    </tr>
  </tbody>
</table>
```

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

### Responsive Overflow Columns Example

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

Configure the number of columns generated by the Overflow engine based on screen size and orientation using data attributes. The most specific attribute wins.

```html
<!-- 2 columns on small screens, 3 on large -->
<div class="columns"
     data-overflow-max-cols="2"
     data-overflow-max-cols-lg="3">
  ...
</div>

<!-- Different column counts for portrait orientation -->
<div class="columns"
     data-overflow-max-cols="3"
     data-overflow-max-cols-portrait="1"
     data-overflow-max-cols-lg-portrait="2">
  ...
</div>
```

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

### Basic Portrait Orientation Variant

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

Use the `portrait:` prefix to apply styles only when the screen is in portrait orientation. This example arranges items in a row by default (landscape) and switches to a column layout in portrait.

```html
<div class="flex flex--row portrait:flex--col gap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

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

### Responsive Rich Text Size

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

Shows how to apply responsive prefixes to Rich Text size variants. This example displays base size by default and switches to xxxlarge on large screens.

```html
<div class="richtext gap--large">
  <div class="content content--base lg:content--xxxlarge">
    <p>Base by default, xxxlarge on large screens</p>
  </div>
</div>
```

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

### Smart Columns Configuration

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

This example demonstrates how to use Overflow with smart columns. It requires placing Item elements inside a Column, which is nested within a Columns container, and setting column count attributes.

```html
<!-- Place .item elements inside a single .column element, that's nested inside a .columns container. Set the exact or maximum number of columns with `data-overflow-cols` or `data-overflow-max-cols`. -->

<!-- Example with data-overflow-cols -->
<div class="columns" data-overflow-cols="1">
  <div class="column">
    <div class="item">...</div>
    <!-- more .item elements -->
  </div>
</div>
```

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

### Responsive Clamp Example

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

Control the number of lines displayed for text elements using data attributes, with support for different breakpoints including large and portrait orientations. This prevents text overflow.

```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 Different Sizes at Different Screen Widths

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

Use breakpoint prefixes like `sm:`, `md:`, `lg:` to apply different sizes at different screen widths. This example shows a description that is large by default and resets to base size on medium screens and up.

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

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

### Basis and Order Controls

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

Demonstrates setting the initial size of flex items with `basis--XX` utilities and controlling their visual order with `order--first`, `order--last`, and `order--X`.

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

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

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

### Label with Text Clamping (2-line)

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

This example demonstrates clamping a label to exactly two lines, with an ellipsis appended to indicate that the text has been truncated.

```html
<!-- Two line clamping -->
<span class="label" data-clamp="2">
  This text will be clamped to exactly two lines with ellipsis
</span>
```

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

### Peta Value Example

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

Use the `value--peta` class for the largest text. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--peta value--tnums">42</span>
```

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

### Tera Value Example

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

Use the `value--tera` class for colossal text. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--tera value--tnums">42</span>
```

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

### Grow, Shrink, and Flex Shorthand

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

Illustrates item-level controls for growing (`grow`), preventing shrinking (`shrink-0`), and applying flex shorthand properties (`flex-none`, `flex-initial`).

```html
<div class="flex flex--row">
  <div class="grow">grow</div>
  <div class="shrink-0 w--36">shrink-0</div>
  <div class="flex-none w--36">flex-none</div>
  <div class="flex-initial w--36">flex-initial</div>
</div>
```

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

### Giga Value Example

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

Use the `value--giga` class for massive text. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--giga value--tnums">42</span>
```

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

### XXXLarge Value Example

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

Use the `value--xxxlarge` class for very large text. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--xxxlarge">Example</span>
<span class="value value--xxxlarge value--tnums">48,206.62</span>
```

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

### Responsive Content Sizing with Breakpoint Prefixes

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

Apply different content sizes at different screen widths using breakpoint prefixes like sm:, md:, lg:. Base size is applied by default.

```html
<!-- Base by default, xxlarge on lg screens -->
<div class="richtext gap--large">
  <div class="content content--base lg:content--xxlarge">
    <p>Responsive content</p>
  </div>
</div>
```

```html
<!-- Small by default, base on medium+ screens -->
<div class="richtext gap--large">
  <div class="content content--small md:content--base">
    <p>Small by default, base on medium+ screens</p>
  </div>
</div>
```

```html
<!-- Progressive size scaling -->
<div class="richtext gap--large">
  <div class="content content--small sm:content--base md:content--large lg:content--xxlarge">
    <p>Progressive content sizing</p>
  </div>
</div>
```

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

### XXLarge Value Example

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

Use the `value--xxlarge` class for very large text. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--xxlarge">Example</span>
<span class="value value--xxlarge value--tnums">48,206.62</span>
```

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

### XLarge Value Example

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

Use the `value--xlarge` class for larger text. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--xlarge">Example</span>
<span class="value value--xlarge value--tnums">48,206.62</span>
```

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

### Large Value Example

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

Use the `value--large` class for larger text. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--large">Example</span>
<span class="value value--large value--tnums">48,206.62</span>
```

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

### Bit-Depth Display Control Examples

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

Illustrates using bit-depth prefixes such as '1bit:hidden', '2bit:flex', and '4bit:grid' to tailor layouts for displays with specific bit-depth capabilities, optimizing for monochrome or grayscale screens.

```html
<div class="1bit:hidden">Hide on monochrome displays</div>
<div class="2bit:flex">Display as flex on 4-shade grayscale displays</div>
<div class="4bit:grid">Display as grid on 16-shade grayscale displays</div>
```

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

### Responsive Gap with Size and Orientation

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

Apply different gap sizes based on screen size and orientation. This example sets small gaps by default, large gaps on medium screens and up, extra-large gaps on large screens and up, medium gaps in portrait mode, and extra-large gaps on medium screens and up in portrait mode.

```html
<div class="grid grid--cols-3 gap--small md:gap--large lg:gap--xlarge portrait:gap--medium md:portrait:gap--xlarge">
      <div>...</div>
      <div>...</div>
      <div>...</div>
    </div>
```

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

### Apply Chromatic Backgrounds and Text

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

Use `bg--{hue}-{step}` for color backgrounds and `text--{hue}-{step}` for color text. Examples include red, blue, and green hues with specific shade steps.

```html
<div class="bg--red">Pure red</div>
<div class="bg--red-50">Red 50</div>
<div class="bg--blue-40">Blue 40</div>
<div class="bg--green-60">Green 60</div>
<div class="text--red-50">Red text</div>
```

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

### Responsive Visibility: Medium Screens and Up

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

Use 'hidden md:visible' to hide an element by default and make it visible starting from medium screen sizes.

```html
<div class="hidden md:visible">md:visible</div>
```

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

### Responsive Content Sizing with Bit-Depth Prefixes

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

Optimize content text size for different display color capabilities using bit-depth prefixes like 1bit:, 2bit:, and 4bit:.

```html
<!-- Different content sizes for different bit-depth displays -->
<div class="richtext gap--large">
  <div class="content 1bit:content--large 2bit:content--xlarge 4bit:content--xxlarge">
    <p>Display optimized content</p>
  </div>
</div>
```

```html
<!-- Selective bit-depth targeting -->
<div class="richtext gap--large">
  <div class="content 1bit:content--base 4bit:content--xlarge">
    <p>Selective sizing</p>
  </div>
</div>
```

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

### Responsive Font Weight - Medium Breakpoint

Source: https://trmnl.com/framework/docs/3.1/font_weight.md

Applies bold font weight starting from the medium breakpoint and up, ensuring text is bold on larger screens.

```html
<span class="text--large font--regular md:font--bold">
  Bold at medium breakpoint and up
</span>
```

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

### Mega Value Example

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

Use the `value--mega` class for extremely large text. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--mega value--tnums">42</span>
```

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

### Small Value Example

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

Use the `value--small` class for a smaller text size. The `value--tnums` modifier enables tabular numbers.

```html
<span class="value value--small">Example</span>
<span class="value value--small value--tnums">48,206.62</span>
```

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

### Combined Size, Orientation, and Bit-Depth Variant

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

This example demonstrates combining size, orientation, and bit-depth variants for highly specific targeting. It arranges items in a row by default and switches to a column layout on medium screens and larger, in portrait mode, with a 4-bit display.

```html
<div class="flex flex--row md:portrait:4bit:flex--col">
  <!-- Row layout by default -->
  <!-- Column layout on medium+ screens, in portrait, with 4-bit display -->
</div>
```

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

### Tabular Numbers Formatting

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

Add the `value--tnums` modifier to enable tabular numbers for consistent alignment. This example shows regular and tabular numbers side-by-side.

```html
<span class="value value--large">Regular: 48,206.62</span>
<span class="value value--large value--tnums">Tabular: 48,206.62</span>
```

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

### Left Aligned Rich Text Example

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

Demonstrates left alignment for the richtext container, content block, and text. This is the default and most readable format for longer text content.

```html
<div class="richtext richtext--left gap--large">
  <img class="image" src="/assets/trmnl--glyph-black-large.svg">
  <div class="content content--left gap text--left">
    <p>This is an example of left-aligned rich text content.</p>
    <p>Multiple paragraphs will maintain the same alignment.</p>
  </div>
</div>
```

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

### Apply Semantic Backgrounds and Text

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

Use `bg--{role}` for intent-based backgrounds and `text--{role}` for intent-based text. Supported roles include primary, success, error, and warning.

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

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

### Responsive Text Color with Orientation Prefixes

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

Text colors can adapt to orientation using `portrait:` and `landscape:` prefixes. This example shows black text in portrait mode.

```html
<!-- Different color in portrait -->
<span class="value text--gray-50 portrait:text--black">Orientation color variant</span>

<!-- Combined size and orientation -->
<span class="value text--gray-50 md:portrait:text--gray-30">Color on md+ portrait</span>
```

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

### Combined Responsive Flex Layouts

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

Demonstrates combining orientation-responsive variants with size breakpoints for complex adaptive layouts.

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

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

### Label with Text Clamping (1-line)

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

Use the `data-clamp` attribute to limit labels to a specific number of lines. This example shows clamping to a single line with ellipsis overflow.

```html
<!-- data-clamp applies to any label size (small, base, large, xlarge, xxlarge) -->

<!-- Single line clamping with data attribute -->
<span class="label" data-clamp="1">
  This text will be clamped to one line
</span>
```

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

### Orientation-Responsive Flex Direction

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

Use the 'portrait:' prefix to change flex direction or alignment based on screen orientation. This example shows a row in landscape and a column in portrait.

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

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

### Responsive Clamp with Screen Size and Orientation Modifiers

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

Apply different clamping rules based on screen size and orientation using `data-clamp-` modifiers. This example clamps to 2 lines by default, 4 on medium+ screens, and 1 in portrait mode.

```html
<span class="description" data-clamp="2" data-clamp-md="4" data-clamp-portrait="1">Clamp to 2 lines by default, 4 on medium+ screens, 1 in portrait</span>
```

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

### Responsive Gap Utilities

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

Apply different gap sizes for various screen sizes.

```html
md:gap--large, lg:gap--xlarge
```

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

### Apply Grayscale Backgrounds

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

Use `bg--{shade}` utility classes to apply grayscale background patterns. Examples include black, gray-10 through gray-75, and white.

```html
<div class="bg--black">Black</div>
<div class="bg--gray-10">Gray 10</div>
<div class="bg--gray-15">Gray 15</div>
<div class="bg--gray-20">Gray 20</div>
<div class="bg--gray-25">Gray 25</div>
<div class="bg--gray-30">Gray 30</div>
<div class="bg--gray-35">Gray 35</div>
<div class="bg--gray-40">Gray 40</div>
<div class="bg--gray-45">Gray 45</div>
<div class="bg--gray-50">Gray 50</div>
<div class="bg--gray-55">Gray 55</div>
<div class="bg--gray-60">Gray 60</div>
<div class="bg--gray-65">Gray 65</div>
<div class="bg--gray-70">Gray 70</div>
<div class="bg--gray-75">Gray 75</div>
<div class="bg--white">White</div>
```
Tokens:
Raw