TRMNL Framework v2

https://usetrmnl.com/framework_v2
Admin
TRMNL Framework v2 is a design system framework offering utilities and components for creating...
Tokens:93,100
Snippets:415
Trust Score:9.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Framework v2 Guides

Source: https://usetrmnl.com/framework_v2/v2_overview

This section provides essential guides for using Framework v2, including an overview of new features and changes compared to v1, an upgrade guide for migrating projects, and an enhancement guide for extending framework capabilities.

```html
<a href="https://usetrmnl.com/framework_v2/v2_overview">Framework v2 Overview</a>
<a href="https://usetrmnl.com/framework_v2/upgrade_guide">Upgrade Guide</a>
<a href="https://usetrmnl.com/framework_v2/enhancement_guide">Enhancement Guide</a>
```

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

### Usetrmnl Framework v2 Guides

Source: https://usetrmnl.com/framework_v2/aspect_ratio

This section lists the main guides for the Usetrmnl Framework v2, including an overview, upgrade guide, and enhancement guide.

```html
<ul>
  <li><a href="https://usetrmnl.com/framework_v2/v2_overview">Framework v2 Overview</a></li>
  <li><a href="https://usetrmnl.com/framework_v2/upgrade_guide">Upgrade Guide</a></li>
  <li><a href="https://usetrmnl.com/framework_v2/enhancement_guide">Enhancement Guide</a></li>
</ul>
```

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

### TRMNL Framework v2 Guides

Source: https://usetrmnl.com/framework_v2/label

Links to guides for understanding the framework, including an overview, upgrade instructions, and enhancement tips.

```html
<a href="https://usetrmnl.com/framework_v2/v2_overview">Framework v2 Overview</a>
<a href="https://usetrmnl.com/framework_v2/upgrade_guide">Upgrade Guide</a>
<a href="https://usetrmnl.com/framework_v2/enhancement_guide">Enhancement Guide</a>
```

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

### TRMNL Framework v2 Guides

Source: https://usetrmnl.com/framework_v2/enhancement_guide

This section provides guides for using TRMNL Framework v2, including an overview, an upgrade guide for migrating to v2.0, and an enhancement guide for leveraging expanded responsive capabilities.

```html
<a href="https://usetrmnl.com/framework_v2/v2_overview">Framework v2 Overview</a>
<a href="https://usetrmnl.com/framework_v2/upgrade_guide">Upgrade Guide</a>
<a href="https://usetrmnl.com/framework_v2/enhancement_guide">Enhancement Guide</a>
```

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

### TRMNL Framework v2 Guides

Source: https://usetrmnl.com/framework_v2/view

Documentation guides for the framework, including an overview, upgrade instructions, and enhancement details.

```html
<a href="https://usetrmnl.com/framework_v2/v2_overview">Framework v2 Overview</a>
<a href="https://usetrmnl.com/framework_v2/upgrade_guide">Upgrade Guide</a>
<a href="https://usetrmnl.com/framework_v2/enhancement_guide">Enhancement Guide</a>
```

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

### TRMNL Framework v2 Guides

Source: https://usetrmnl.com/framework_v2/rich_text

Links to guides for TRMNL Framework v2, covering the overview, upgrade process, and enhancement strategies.

```html
<!-- Guides Documentation Links -->
<a href="https://usetrmnl.com/framework_v2/v2_overview">Framework v2 Overview</a>
<a href="https://usetrmnl.com/framework_v2/upgrade_guide">Upgrade Guide</a>
<a href="https://usetrmnl.com/framework_v2/enhancement_guide">Enhancement Guide</a>
```

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

### TRMNL Framework v2: Upgrade and Enhancement Guides

Source: https://usetrmnl.com/framework_v2/framework_runtime

Provides links to guides for upgrading to Framework v2 and for enhancing its functionality. These guides are essential for users migrating or customizing the framework.

```html
<ul>
  <li><a href="https://usetrmnl.com/framework_v2/v2_overview"> Framework v2 Overview</a></li>
  <li><a href="https://usetrmnl.com/framework_v2/upgrade_guide"> Upgrade Guide</a></li>
  <li><a href="https://usetrmnl.com/framework_v2/enhancement_guide"> Enhancement Guide</a></li>
</ul>
```

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

### Responsive Display Control Examples

Source: https://usetrmnl.com/framework_v2/visibility

Illustrates how to apply display utilities responsively using prefixes like 'sm:', 'md:', and 'lg:'. These examples show how elements can change their display behavior across different screen sizes, from mobile-first to larger 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:grid">Show as 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>
```

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

### Device-Specific Display Control Examples

Source: https://usetrmnl.com/framework_v2/visibility

Shows how to combine size and bit-depth prefixes for precise targeting of specific devices and display types. Examples include 'md:1bit:block', 'md:2bit:flex', and 'lg:4bit:grid' to manage layouts across various hardware generations and display technologies.

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

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

### Size-Based Responsive Example

Source: https://usetrmnl.com/framework_v2/responsive

Demonstrates how to apply styles progressively based on screen size using prefixes like 'md:' and 'lg:'. Styles apply from the specified breakpoint upwards.

```html
<span class="value md:value--large lg:value--xlarge">
  Responsive Value
</span>
```

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

### Bit-Depth Responsive Example

Source: https://usetrmnl.com/framework_v2/responsive

Illustrates applying styles based on display bit-depth. Prefixes like '1bit:', '2bit:', and '4bit:' target specific color capabilities without progressive application.

```html
<div class="h--36 w--36 rounded--large 1bit:bg--black 2bit:bg--gray-45 4bit:bg--gray-75"></div>
```

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

### Training Session and Onboarding Workshop

Source: https://usetrmnl.com/framework_v2/clamp

New employee onboarding covering environment setup, coding standards, product architecture, and support processes. Includes hands-on labs and a Q&A block for new joiners.

```text
Training Session and Onboarding Workshop
New employee onboarding covering environment setup, coding standards, product architecture, and support processes. Includes hands-on labs and a Q&A block for new joiners.
9:30 AM - 11:30 AMRequired
```

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

### Usetrmnl Framework v2 On-Page Enhancements

Source: https://usetrmnl.com/framework_v2/enhancement_guide

Links to sections within the enhancement guide for Usetrmnl Framework v2, detailing changes, variants, and responsive features.

```APIDOC
On-Page Enhancements:
  What changed in Framework v2.0: https://usetrmnl.com/framework_v2/enhancement_guide#what-changed-in-framework-v2-0
  Bit-depth variants (1-bit, 2-bit, 4-bit): https://usetrmnl.com/framework_v2/enhancement_guide#bit-depth-variants-1-bit-2-bit-4-bit
  Automatic bit‑depth adaptation (Background, Border, Text): https://usetrmnl.com/framework_v2/enhancement_guide#automatic-bit-depth-adaptation-background-border-text
  Orientation variants (portrait, landscape): https://usetrmnl.com/framework_v2/enhancement_guide#orientation-variants-portrait-landscape
  Responsive breakpoints (sm, md, lg, xl): https://usetrmnl.com/framework_v2/enhancement_guide#responsive-breakpoints-sm-md-lg-xl
  Utilities and elements added in v2: https://usetrmnl.com/framework_v2/enhancement_guide#utilities-and-elements-added-in-v2
```

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

### Responsive Gap Examples

Source: https://usetrmnl.com/framework_v2/gap

Shows how to apply different gap values at various breakpoints and orientations using responsive prefixes like `md:`, `portrait:`, and `md:portrait:`. Supports mobile-first approach.

```html
<!-- Size + orientation examples -->
<div class="grid grid--cols-3 gap--small md:gap--large lg:gap--xlarge portrait:gap md:portrait:gap--xlarge">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

<!-- Examples of different responsive patterns -->
<div class="flex flex--col gap md:gap--large portrait:gap--small">...</div>
<div class="grid grid--cols-2 gap--xsmall lg:gap--medium md:portrait:gap--large">...</div>
```

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

### Apply Background Patterns with Utility Classes

Source: https://usetrmnl.com/framework_v2/background

Demonstrates the usage of `bg--{shade}` utility classes to apply various background patterns to HTML elements. Includes examples for black, gray shades, 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>
```

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

### Combining Responsive Variants (HTML)

Source: https://usetrmnl.com/framework_v2/responsive

Demonstrates combining size, orientation, and bit-depth variants for advanced responsive targeting. This example shows how to change text alignment based on screen size and orientation.

```html
<!-- Simple orientation variant -->
<div class="flex flex--row portrait:flex--col">...</div>

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

<!-- All three combined: size + orientation + bit-depth -->
<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>
```

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

### Bit-Depth Display Control Examples

Source: https://usetrmnl.com/framework_v2/visibility

Demonstrates the use of bit-depth prefixes (e.g., '1bit:', '2bit:', '4bit:') to control element display based on the capabilities of e-ink displays. This allows for optimized layouts for monochrome or grayscale screens.

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

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

### Value Component: Responsive Breakpoint Prefixes

Source: https://usetrmnl.com/framework_v2/value

Demonstrates responsive text sizing using breakpoint prefixes like 'sm:', 'md:', and 'lg:' to adapt text size based on screen width. Includes examples of progressive scaling.

```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--medium lg:value--large value--tnums">
  1,234.56
</span>
```

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

### View without Title Bar Example

Source: https://usetrmnl.com/framework_v2/view

A basic example of a view without a title bar, suitable for simpler interfaces. It only requires the layout container.

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

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

### Vertical Borders HTML Examples

Source: https://usetrmnl.com/framework_v2/border

Demonstrates the usage of vertical border classes in HTML. These classes apply different visual border styles to elements.

```html
<div class="border--v-1">Vertical Border 1</div>
<div class="border--v-2">Vertical Border 2</div>
<div class="border--v-3">Vertical Border 3</div>
<div class="border--v-4">Vertical Border 4</div>
<div class="border--v-5">Vertical Border 5</div>
<div class="border--v-6">Vertical Border 6</div>
<div class="border--v-7">Vertical Border 7</div>
```

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

### Framework v2 Utilities

Source: https://usetrmnl.com/framework_v2/v2_overview

This section details various utility classes and functionalities within Framework v2, including size, spacing, flexbox, grid, background, border, rounded corners, visibility, and text manipulation. It also covers responsive design features and image styling.

```html
<a href="https://usetrmnl.com/framework_v2/size">Size</a>
<a href="https://usetrmnl.com/framework_v2/spacing">Spacing</a>
<a href="https://usetrmnl.com/framework_v2/gap">Gap</a>
<a href="https://usetrmnl.com/framework_v2/flex">Flex</a>
<a href="https://usetrmnl.com/framework_v2/grid">Grid</a>
<a href="https://usetrmnl.com/framework_v2/background">Background</a>
<a href="https://usetrmnl.com/framework_v2/border">Border</a>
<a href="https://usetrmnl.com/framework_v2/rounded">Rounded</a>
<a href="https://usetrmnl.com/framework_v2/visibility">Visibility</a>
<a href="https://usetrmnl.com/framework_v2/responsive">Responsive Beta</a>
<a href="https://usetrmnl.com/framework_v2/responsive_test">Responsive Test Beta</a>
<a href="https://usetrmnl.com/framework_v2/text">Text</a>
<a href="https://usetrmnl.com/framework_v2/image">Image</a>
<a href="https://usetrmnl.com/framework_v2/image_stroke">Image Stroke</a>
<a href="https://usetrmnl.com/framework_v2/text_stroke">Text Stroke</a>
<a href="https://usetrmnl.com/framework_v2/scale">Scale</a>
<a href="https://usetrmnl.com/framework_v2/aspect_ratio">Aspect Ratio Beta</a>
```

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

### No Bleed Modifier Example

Source: https://usetrmnl.com/framework_v2/view

Shows how to apply the 'screen--no-bleed' modifier to a screen container to remove default padding, allowing content to reach the edges.

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

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

### usetrmnl Framework v2 On-Page Navigation

Source: https://usetrmnl.com/framework_v2/framework_runtime

Provides links to specific sections within the framework_runtime documentation page for quick navigation.

```APIDOC
Framework Runtime Navigation:
  - What it does: Link to https://usetrmnl.com/framework_v2/framework_runtime#what-it-does
  - Runtime steps and stats: Link to https://usetrmnl.com/framework_v2/framework_runtime#runtime-steps-and-stats
  - Clamp: Link to https://usetrmnl.com/framework_v2/framework_runtime#clamp
  - Overflow: Link to https://usetrmnl.com/framework_v2/framework_runtime#overflow
  - Value Formatting: Link to https://usetrmnl.com/framework_v2/framework_runtime#value-formatting
  - Fit Value: Link to https://usetrmnl.com/framework_v2/framework_runtime#fit-value
  - Grid Gaps: Link to https://usetrmnl.com/framework_v2/framework_runtime#grid-gaps
  - Column Gaps: Link to https://usetrmnl.com/framework_v2/framework_runtime#column-gaps
  - Pixel‑Perfect Fonts: Link to https://usetrmnl.com/framework_v2/framework_runtime#pixelperfect-fonts
  - Content Limiter: Link to https://usetrmnl.com/framework_v2/framework_runtime#content-limiter
  - Index Widths: Link to https://usetrmnl.com/framework_v2/framework_runtime#index-widths
  - Why this exists: Link to https://usetrmnl.com/framework_v2/framework_runtime#why-this-exists
```

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

### View with Title Bar Example

Source: https://usetrmnl.com/framework_v2/view

Demonstrates how to create a view with a title bar, including layout and title bar elements. This structure provides context and navigation.

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

<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg" />
  <span class="title">Title</span>
  <span class="instance">Instance</span>
</div>
```

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

### Value Component: Default Size

Source: https://usetrmnl.com/framework_v2/value

Uses the base 'value' class without size modifiers for the standard display size. Includes an example with tabular numbers.

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

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

### Usetrmnl Framework v2 Components

Source: https://usetrmnl.com/framework_v2/progress

Overview of the core components available in the Usetrmnl Framework v2, including their documentation links.

```APIDOC
Base Components:
  Screen: https://usetrmnl.com/framework_v2/screen
  View: https://usetrmnl.com/framework_v2/view
  Layout: https://usetrmnl.com/framework_v2/layout
  Title Bar: https://usetrmnl.com/framework_v2/title_bar
  Columns: https://usetrmnl.com/framework_v2/columns
  Mashup: https://usetrmnl.com/framework_v2/mashup

Elements:
  Title: https://usetrmnl.com/framework_v2/title
  Value: https://usetrmnl.com/framework_v2/value
  Label: https://usetrmnl.com/framework_v2/label
  Description: https://usetrmnl.com/framework_v2/description
  Divider: https://usetrmnl.com/framework_v2/divider

Components:
  Rich Text: https://usetrmnl.com/framework_v2/rich_text
  Item: https://usetrmnl.com/framework_v2/item
  Table: https://usetrmnl.com/framework_v2/table
  Chart: https://usetrmnl.com/framework_v2/chart
  Progress: https://usetrmnl.com/framework_v2/progress

Progress Specifics:
  Progress Variants: https://usetrmnl.com/framework_v2/progress#progress-variants
  Bar Progress: https://usetrmnl.com/framework_v2/progress#bar-progress
  Dots Progress: https://usetrmnl.com/framework_v2/progress#dots-progress
```

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

### Value Component: Large Size

Source: https://usetrmnl.com/framework_v2/value

Applies the 'value--large' class for emphasized text, suitable for important information and headings. Includes an example with tabular numbers.

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

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

### Deployment Pipeline and Release Automation

Source: https://usetrmnl.com/framework_v2/clamp

Set up automated deployment process with CI/CD enhancements, environment promotion strategies, and rollback procedures. Measure lead time and change failure rate.

```text
Deployment Pipeline and Release Automation
Set up automated deployment process with CI/CD enhancements, environment promotion strategies, and rollback procedures. Measure lead time and change failure rate.
4:30 PM - 6:00 PMDevOps
```

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

### Regional Number Formats Example

Source: https://usetrmnl.com/framework_v2/format_value

Shows how to format numbers according to different regional standards using the `data-value-locale` attribute. This allows for locale-specific number and currency formatting.

```html
<span class="value value--xlarge value--tnums" data-value-format="true" data-value-locale="en-US">$123456.78</span>

<span class="value value--large value--tnums" data-value-format="true" data-value-locale="de-DE">€123456.78</span>

<span class="value value--small value--tnums" data-value-format="true" data-value-locale="fr-FR">€123456.78</span>
```

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

### Usetrmnl Framework v2 Base Elements

Source: https://usetrmnl.com/framework_v2/flex

Documentation for base elements in the Usetrmnl Framework v2, including screen, view, layout, title bar, columns, and mashup.

```APIDOC
Screen:
  - Represents the overall screen or viewport.

View:
  - Defines a specific view or section within the screen.

Layout:
  - Provides layout structures and management.

Title Bar:
  - Handles the display and behavior of title bars.

Columns:
  - Utilities for creating column-based layouts.

Mashup:
  - Integrates or combines different components or data.
```

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

### Currency Values Formatting Example

Source: https://usetrmnl.com/framework_v2/format_value

Demonstrates how to format values with currency symbols. The framework automatically handles symbol placement and formatting based on the provided value and currency.

```html
<span class="value value--xlarge value--tnums" data-value-format="true" data-fit-value="true">$2345678</span>

<span class="value value--large value--tnums" data-value-format="true" data-fit-value="true">$456789</span>

<span class="value value--small value--tnums" data-value-format="true" data-fit-value="true">$34562</span>
```

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

### Usetrmnl Framework v2 Base Elements

Source: https://usetrmnl.com/framework_v2/description

Documentation for core base elements in the Usetrmnl Framework v2, including screen, view, layout, title bar, columns, and mashup functionalities.

```APIDOC
Base Elements:
  Screen: https://usetrmnl.com/framework_v2/screen
  View: https://usetrmnl.com/framework_v2/view
  Layout: https://usetrmnl.com/framework_v2/layout
  Title Bar: https://usetrmnl.com/framework_v2/title_bar
  Columns: https://usetrmnl.com/framework_v2/columns
  Mashup: https://usetrmnl.com/framework_v2/mashup
```

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

### Usetrmnl Framework v2 Value Formatting

Source: https://usetrmnl.com/framework_v2/format_value

Guides on formatting values within the Usetrmnl Framework v2, covering basic usage, currency values, and regional number formats.

```APIDOC
Value Formatting:
  Basic Usage: https://usetrmnl.com/framework_v2/format_value#basic-usage
  Currency Values: https://usetrmnl.com/framework_v2/format_value#currency-values
  Regional Number Formats: https://usetrmnl.com/framework_v2/format_value#regional-number-formats
```

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

### Value Component: Small Size

Source: https://usetrmnl.com/framework_v2/value

Applies the 'value--small' class for text suitable for general body text and regular content. Includes an example with tabular numbers.

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

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

### TRMNL Framework v2 Runtime

Source: https://usetrmnl.com/framework_v2/index

Explanation of the TRMNL Framework Runtime, detailing how it applies layout, clamping, overflow, and presentation adjustments at render time for various e-reader devices.

```APIDOC
Framework Runtime:
  Description: Manages the application of layout, clamping, overflow, and presentation adjustments during the rendering process.
  Purpose: Ensures optimal display of content across different e-reader devices by dynamically applying framework utilities.
  Key Functions:
    - Layout Application: Applies grid, flexbox, and spacing utilities.
    - Content Clamping: Manages text overflow using the clamp utility.
    - Overflow Handling: Implements overflow strategies for fixed-size containers.
    - Presentation Adjustments: Applies visual enhancements like dithering, strokes, and pixel-perfect rendering.
  Device Compatibility: Optimized for devices like Amazon Kindle, Inkplate, and Kobo e-readers.
  Example Usage:
    The runtime automatically processes elements with framework classes like `.grid`, `.clamp-1`, `.overflow-hidden`, and `.pixel-perfect` to ensure correct rendering based on device capabilities and configured styles.
```

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

### Deployment Pipeline and Release Automation

Source: https://usetrmnl.com/framework_v2/overflow

Sets up automated deployment processes with CI/CD enhancements, environment promotion strategies, and rollback procedures. Measures lead time and change failure rate.

```APIDOC
Deployment Pipeline and Release Automation:
  - Set up automated deployment process
  - CI/CD enhancements
  - Environment promotion strategies
  - Rollback procedures
  - Measure lead time
  - Measure change failure rate
```

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

### Usetrmnl Framework v2 New Utilities

Source: https://usetrmnl.com/framework_v2/v2_overview

Framework v2 introduces new utilities for Aspect Ratio, Scale, and Visibility, providing enhanced control over layout and element sizing.

```html
/* Example usage of new utilities */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.scale-150 {
  transform: scale(1.5);
}

.invisible {
  visibility: hidden;
}
```

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

### Landscape Aspect Ratios

Source: https://usetrmnl.com/framework_v2/aspect_ratio

Provides examples of common landscape aspect ratios including 4:3 (Standard), 3:2 (Classic), 16:9 (Widescreen), and 21:9 (Ultra-wide) for horizontal content.

```html
<!-- Standard TV/Monitor ratio -->
<div class="aspect--4/3">
  <video src="video.mp4" />
</div>

<!-- Classic 35mm film -->
<div class="aspect--3/2">
  <img src="photo.jpg" />
</div>

<!-- HD Video/Modern displays -->
<div class="aspect--16/9">
  <iframe src="youtube.com/embed/..." />
</div>

<!-- Cinematic ultra-wide -->
<div class="aspect--21/9">
  <video src="movie.mp4" />
</div>
```

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

### Deployment Pipeline and Release Automation

Source: https://usetrmnl.com/framework_v2/clamp

Sets up automated deployment processes with CI/CD enhancements, environment promotion strategies, and rollback procedures. Measures lead time and change failure rate.

```Bash
# CI/CD Pipeline Setup
# Example using Jenkinsfile syntax

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                // Build steps
            }
        }
        stage('Test') {
            steps {
                // Test steps
            }
        }
        stage('Deploy') {
            steps {
                // Deployment steps with rollback strategy
                script {
                    try {
                        // Deploy to staging
                    } catch (e) {
                        // Rollback if deployment fails
                        error('Deployment failed, initiating rollback.')
                    }
                }
            }
        }
    }
    post {
        success {
            echo 'Deployment successful'
        }
        failure {
            echo 'Deployment failed'
        }
    }
}

# Metrics Tracking
# Example for lead time and change failure rate
LEAD_TIME_METRIC=$(calculate_lead_time)
CHANGE_FAILURE_RATE=$(calculate_change_failure_rate)
```

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

### Documentation Update and Knowledge Base Refresh

Source: https://usetrmnl.com/framework_v2/clamp

Update project documentation with recent architectural decisions, API changes, and onboarding guides. Clean up outdated sections and consolidate best practices.

```text
Documentation Update and Knowledge Base Refresh
Update project documentation with recent architectural decisions, API changes, and onboarding guides. Clean up outdated sections and consolidate best practices.
4:00 PM - 5:30 PMDocumentation
```

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

### Usetrmnl Framework v2 Basic Usage

Source: https://usetrmnl.com/framework_v2/description

Provides information on the basic usage of the Usetrmnl Framework v2, with a link to a detailed section on basic usage.

```APIDOC
On this page:
  Basic Usage: https://usetrmnl.com/framework_v2/description#basic-usage
```

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

### Value Component: XXLarge Size

Source: https://usetrmnl.com/framework_v2/value

Applies the 'value--xxlarge' class for very large display text, perfect for major headings and hero sections. Includes an example with tabular numbers.

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

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

### Value Component: XLarge Size

Source: https://usetrmnl.com/framework_v2/value

Applies the 'value--xlarge' class for prominent display text, ideal for section headers and key metrics. Includes an example with tabular numbers.

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

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

### Client Presentation and Roadmap Discussion

Source: https://usetrmnl.com/framework_v2/clamp

Quarterly review with XYZ Corp including performance metrics, feature delivery timelines, risk mitigation strategies, and next quarter initiatives. Emphasis on outcomes, demos, and a feedback capture to inform prioritization.

```text
Client Presentation and Roadmap Discussion for Strategic Accounts
Quarterly review with XYZ Corp including performance metrics, feature delivery timelines, risk mitigation strategies, and next quarter initiatives. Emphasis on outcomes, demos, and a feedback capture to inform prioritization.
2:00 PM - 3:30 PMTentative
```

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

### Usetrmnl Framework v2 Utilities

Source: https://usetrmnl.com/framework_v2/description

Provides documentation links for various utility classes in the Usetrmnl Framework v2, including styling for size, spacing, flexbox, grid, background, border, text, and images.

```APIDOC
Utilities:
  Size: https://usetrmnl.com/framework_v2/size
  Spacing: https://usetrmnl.com/framework_v2/spacing
  Gap: https://usetrmnl.com/framework_v2/gap
  Flex: https://usetrmnl.com/framework_v2/flex
  Grid: https://usetrmnl.com/framework_v2/grid
  Background: https://usetrmnl.com/framework_v2/background
  Border: https://usetrmnl.com/framework_v2/border
  Rounded: https://usetrmnl.com/framework_v2/rounded
  Visibility: https://usetrmnl.com/framework_v2/visibility
  Responsive (Beta): https://usetrmnl.com/framework_v2/responsive
  Responsive Test (Beta): https://usetrmnl.com/framework_v2/responsive_test
  Text: https://usetrmnl.com/framework_v2/text
  Image: https://usetrmnl.com/framework_v2/image
  Image Stroke: https://usetrmnl.com/framework_v2/image_stroke
  Text Stroke: https://usetrmnl.com/framework_v2/text_stroke
  Scale: https://usetrmnl.com/framework_v2/scale
  Aspect Ratio (Beta): https://usetrmnl.com/framework_v2/aspect_ratio
```

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

### Usetrmnl Framework v2 Utilities

Source: https://usetrmnl.com/framework_v2/clamp

Provides documentation for various utility classes and functions within the Usetrmnl Framework v2. This includes styling for size, spacing, flexbox, grid, backgrounds, borders, text, images, and responsiveness.

```APIDOC
Size:
  Description: Controls the dimensions of elements.
  Usage: Apply size utilities to set width and height.

Spacing:
  Description: Manages margins and paddings for elements.
  Usage: Use spacing utilities for consistent spacing.

Gap:
  Description: Defines the space between elements in flex or grid layouts.
  Usage: Apply gap utilities to create spacing in containers.

Flex:
  Description: Provides utilities for flexbox layout.
  Usage: Configure flex direction, alignment, and wrapping.

Grid:
  Description: Offers utilities for CSS Grid layout.
  Usage: Define grid columns, rows, and gaps.

Background:
  Description: Utilities for background properties like color and image.
  Usage: Set background colors, images, and repeat properties.

Border:
  Description: Tools for styling element borders.
  Usage: Customize border width, style, color, and radius.

Rounded:
  Description: Utilities for applying border-radius to elements.
  Usage: Create rounded corners with various radius values.

Visibility:
  Description: Controls the visibility of elements.
  Usage: Show or hide elements as needed.

Responsive Beta:
  Description: Features for creating responsive designs.
  Usage: Adapt layouts and styles for different screen sizes.

Responsive Test Beta:
  Description: Tools for testing responsive behavior.
  Usage: Verify how elements adapt to various viewports.

Text:
  Description: Utilities for text styling.
  Usage: Control font size, weight, color, alignment, and more.

Image:
  Description: Image-specific styling utilities.
  Usage: Adjust image dimensions, object-fit, and positioning.

Image Stroke:
  Description: Applies stroke effects to images.
  Usage: Add outlines or borders to images.

Text Stroke:
  Description: Applies stroke effects to text.
  Usage: Add outlines or borders to text elements.

Scale:
  Description: Utilities for scaling elements.
  Usage: Resize elements uniformly or non-uniformly.

Aspect Ratio Beta:
  Description: Manages element aspect ratios.
  Usage: Maintain aspect ratios for responsive images and containers.
```

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

### Orientation Toggle Example

Source: https://usetrmnl.com/framework_v2/screen

Demonstrates how to use the `screen--portrait` modifier to swap screen dimensions for portrait orientation. This change is automatically handled by the framework's layout calculations.

```html
<!-- Landscape (default) -->
<div class="screen">
  <!-- 800x480 dimensions -->
</div>

<!-- Portrait orientation -->
<div class="screen screen--portrait">
  <!-- 480x800 dimensions (swapped) -->
</div>
```

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

### Usetrmnl Framework v2 View Configurations

Source: https://usetrmnl.com/framework_v2/view

Documentation for view configurations within the Usetrmnl Framework v2, including base structure, title bar options, and screen container modifiers.

```APIDOC
APIDOC:
  Base Structure: https://usetrmnl.com/framework_v2/view#base-structure
  View with Title Bar: https://usetrmnl.com/framework_v2/view#view-with-title-bar
  View without Title Bar: https://usetrmnl.com/framework_v2/view#view-without-title-bar
  Screen Container Modifiers: https://usetrmnl.com/framework_v2/view#screen-container-modifiers
  No Bleed Modifier: https://usetrmnl.com/framework_v2/view#no-bleed-modifier
```

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

### Basic Column Layout Example

Source: https://usetrmnl.com/framework_v2/columns

Demonstrates the HTML structure for creating a basic, flexible column layout. This structure allows for an arbitrary number of columns, each capable of holding distinct 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>
```

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

### Basic Title Bar Example

Source: https://usetrmnl.com/framework_v2/title_bar

Demonstrates the base structure of a Title Bar component, including an icon and a title. This utilizes the 'title_bar' class for the container and 'image' and 'title' classes for the respective elements.

```html
<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg" />
  <span class="title">Basic Title Bar</span>
</div>
```

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

### Usetrmnl Framework v2 Utilities

Source: https://usetrmnl.com/framework_v2/enhancement_guide

Provides documentation links for various utility classes in Usetrmnl Framework v2, covering styling, layout, and responsive design.

```APIDOC
Utilities:
  Size: https://usetrmnl.com/framework_v2/size
  Spacing: https://usetrmnl.com/framework_v2/spacing
  Gap: https://usetrmnl.com/framework_v2/gap
  Flex: https://usetrmnl.com/framework_v2/flex
  Grid: https://usetrmnl.com/framework_v2/grid
  Background: https://usetrmnl.com/framework_v2/background
  Border: https://usetrmnl.com/framework_v2/border
  Rounded: https://usetrmnl.com/framework_v2/rounded
  Visibility: https://usetrmnl.com/framework_v2/visibility
  Responsive (Beta): https://usetrmnl.com/framework_v2/responsive
  Responsive Test (Beta): https://usetrmnl.com/framework_v2/responsive_test
  Text: https://usetrmnl.com/framework_v2/text
  Image: https://usetrmnl.com/framework_v2/image
  Image Stroke: https://usetrmnl.com/framework_v2/image_stroke
  Text Stroke: https://usetrmnl.com/framework_v2/text_stroke
  Scale: https://usetrmnl.com/framework_v2/scale
  Aspect Ratio (Beta): https://usetrmnl.com/framework_v2/aspect_ratio
```

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

### usetrmnl Framework v2 Utilities

Source: https://usetrmnl.com/framework_v2/framework_runtime

Documentation for various utility classes and functions in the usetrmnl framework v2, covering styling, layout, and responsive design.

```APIDOC
Size:
  Description: Controls the size of elements.
  Usage: Link to https://usetrmnl.com/framework_v2/size

Spacing:
  Description: Manages spacing properties like margin and padding.
  Usage: Link to https://usetrmnl.com/framework_v2/spacing

Gap:
  Description: Handles gap properties for layout containers.
  Usage: Link to https://usetrmnl.com/framework_v2/gap

Flex:
  Description: Provides utilities for Flexbox layouts.
  Usage: Link to https://usetrmnl.com/framework_v2/flex

Grid:
  Description: Offers utilities for CSS Grid layouts.
  Usage: Link to https://usetrmnl.com/framework_v2/grid

Background:
  Description: Utilities for background properties.
  Usage: Link to https://usetrmnl.com/framework_v2/background

Border:
  Description: Tools for managing borders.
  Usage: Link to https://usetrmnl.com/framework_v2/border

Rounded:
  Description: Utilities for creating rounded corners.
  Usage: Link to https://usetrmnl.com/framework_v2/rounded

Visibility:
  Description: Controls element visibility.
  Usage: Link to https://usetrmnl.com/framework_v2/visibility

Responsive Beta:
  Description: Beta features for responsive design.
  Usage: Link to https://usetrmnl.com/framework_v2/responsive

Responsive Test Beta:
  Description: Beta testing features for responsive design.
  Usage: Link to https://usetrmnl.com/framework_v2/responsive_test

Text:
  Description: Utilities for text styling.
  Usage: Link to https://usetrmnl.com/framework_v2/text

Image:
  Description: Image-related styling utilities.
  Usage: Link to https://usetrmnl.com/framework_v2/image

Image Stroke:
  Description: Utilities for image stroke effects.
  Usage: Link to https://usetrmnl.com/framework_v2/image_stroke

Text Stroke:
  Description: Utilities for text stroke effects.
  Usage: Link to https://usetrmnl.com/framework_v2/text_stroke

Scale:
  Description: Utilities for scaling elements.
  Usage: Link to https://usetrmnl.com/framework_v2/scale

Aspect Ratio Beta:
  Description: Beta features for aspect ratio control.
  Usage: Link to https://usetrmnl.com/framework_v2/aspect_ratio
```

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

### Backward Compatibility for Background Shades

Source: https://usetrmnl.com/framework_v2/background

Illustrates the use of deprecated background shade names (`gray-1` through `gray-7`) and their mapping to the preferred new naming convention. Shows examples of both deprecated and preferred classes.

```html
<!-- Deprecated (but still works) -->
<div class="bg--gray-1">Gray 1 (deprecated)</div>
<div class="bg--gray-2">Gray 2 (deprecated)</div>

<!-- Preferred (new naming) -->
<div class="bg--gray-10">Gray 10 (preferred)</div>
<div class="bg--gray-20">Gray 20 (preferred)</div>
```

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

### Usetrmnl Framework v2 Utilities

Source: https://usetrmnl.com/framework_v2/label

Provides documentation for various utility classes in the Usetrmnl Framework v2, including size, spacing, flexbox, grid, background, border, rounded corners, visibility, text, image, and scaling.

```APIDOC
Size:
  Description: Controls the size of elements.
  Usage: Link to /framework_v2/size

Spacing:
  Description: Manages spacing properties like margin and padding.
  Usage: Link to /framework_v2/spacing

Gap:
  Description: Defines gap properties for flex and grid layouts.
  Usage: Link to /framework_v2/gap

Flex:
  Description: Provides utilities for flexbox layouts.
  Usage: Link to /framework_v2/flex

Grid:
  Description: Offers utilities for CSS Grid layouts.
  Usage: Link to /framework_v2/grid

Background:
  Description: Utilities for background properties.
  Usage: Link to /framework_v2/background

Border:
  Description: Tools for managing borders.
  Usage: Link to /framework_v2/border

Rounded:
  Description: Utilities for creating rounded corners.
  Usage: Link to /framework_v2/rounded

Visibility:
  Description: Controls element visibility.
  Usage: Link to /framework_v2/visibility

Responsive (Beta):
  Description: Features for responsive design.
  Usage: Link to /framework_v2/responsive

Responsive Test (Beta):
  Description: Testing utilities for responsive features.
  Usage: Link to /framework_v2/responsive_test

Text:
  Description: Text styling utilities.
  Usage: Link to /framework_v2/text

Image:
  Description: Image manipulation and styling utilities.
  Usage: Link to /framework_v2/image

Image Stroke:
  Description: Utilities for applying strokes to images.
  Usage: Link to /framework_v2/image_stroke

Text Stroke:
  Description: Utilities for applying strokes to text.
  Usage: Link to /framework_v2/text_stroke

Scale:
  Description: Utilities for scaling elements.
  Usage: Link to /framework_v2/scale

Aspect Ratio (Beta):
  Description: Utilities for managing aspect ratios.
  Usage: Link to /framework_v2/aspect_ratio
```

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

### Value Component: Responsive Orientation and Size+Orientation

Source: https://usetrmnl.com/framework_v2/value

Shows how Value sizes can adapt to device orientation using 'portrait:' and can be combined with size breakpoints for precise control. Includes examples for orientation-only and size+orientation variants.

```html
<!-- Orientation only: smaller in portrait -->
<span class="value value--large portrait:value--small">Orientation Variant</span>

<!-- Size + orientation: xlarge only on md+ screens in portrait -->
<span class="value value--small md:portrait:value--xlarge value--tnums">42,000.00</span>
```

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

### Usetrmnl Framework v2 Base Elements

Source: https://usetrmnl.com/framework_v2/label

Documentation for base elements in Usetrmnl Framework v2, covering screen, view, layout, title bar, columns, and mashup.

```APIDOC
Screen:
  Description: Defines screen-level properties and layout.
  Usage: Link to /framework_v2/screen

View:
  Description: Represents a view or section within the application.
  Usage: Link to /framework_v2/view

Layout:
  Description: Utilities for managing overall page layout.
  Usage: Link to /framework_v2/layout

Title Bar:
  Description: Components for creating title bars.
  Usage: Link to /framework_v2/title_bar

Columns:
  Description: Utilities for creating column layouts.
  Usage: Link to /framework_v2/columns

Mashup:
  Description: Functionality for mashing up different components or data.
  Usage: Link to /framework_v2/mashup
```

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

### Value Component: XSmall Size

Source: https://usetrmnl.com/framework_v2/value

Applies the 'value--xsmall' class for a text size slightly larger than XXSmall, suitable for secondary information and compact interfaces. Includes an example with tabular numbers.

```html
<span class="value value--xsmall">Example</span>
<span class="value value--xsmall value--tnums">48,206.62</span>
```
Tokens:
Raw