Screen
The Screen component is the outermost container that defines the device dimensions and provides global settings for your content.
Base Structure
The Screen component serves as the root container for all content. It establishes the viewport dimensions, padding, and provides CSS variables that cascade throughout the framework.
Default Screen
The base screen class creates a container with default dimensions (800x480px landscape).
It includes padding controlled by the --gap variable.
<div class="screen">
<div class="view view--full">
<div class="layout">
<!-- Your content here -->
</div>
</div>
</div>Orientation
Screens can be displayed in landscape (default) or portrait orientation. Use the orientation toggle in the navigation bar to preview how your content adapts to different orientations.
Orientation Toggle
The screen--portrait modifier swaps the width and height dimensions.
All layout calculations automatically adjust to the new dimensions. Try toggling the orientation using the button in the navigation bar above.
<!-- Landscape (default) -->
<div class="screen">
<!-- 800x480 dimensions -->
</div>
<!-- Portrait orientation -->
<div class="screen screen--portrait">
<!-- 480x800 dimensions (swapped) -->
</div>Device Variants
The Screen component supports device-specific configurations that adjust dimensions, scaling, and color depth. These variants ensure content displays correctly across different TRMNL devices.
Available Devices
Each device variant sets specific dimensions and scaling factors. Combine with orientation and bit-depth modifiers for complete control. Use the device selector in the navigation bar to switch between devices.
<!-- Original TRMNL -->
<div class="screen screen--og screen--1bit">
<!-- 800x480, 1-bit depth -->
</div>
<!-- TRMNL V2 -->
<div class="screen screen--v2 screen--4bit">
<!-- 1040x780, 4-bit depth -->
</div>
<!-- Amazon Kindle 2024 -->
<div class="screen screen--amazon_kindle_2024 screen--4bit">
<!-- 718x540, 4-bit depth -->
</div>
<!-- Combined modifiers -->
<div class="screen screen--v2 screen--portrait screen--4bit">
<!-- All modifiers work together -->
</div>Modifiers
Screen modifiers provide additional control over display properties and behavior.
No Bleed
The screen--no-bleed modifier removes default padding,
allowing content to extend to the screen edges. This is useful for full-bleed backgrounds or edge-to-edge layouts.
Dark Mode
The screen--dark-mode modifier inverts the display colors,
with special handling for images to maintain their original appearance. Toggle dark mode using the button in the navigation bar.
<!-- No bleed modifier -->
<div class="screen screen--no-bleed">
<!-- Content extends to edges -->
</div>
<!-- Dark mode -->
<div class="screen screen--dark-mode">
<!-- Colors are inverted, images preserved -->
</div>
<!-- Combined modifiers -->
<div class="screen screen--v2 screen--portrait screen--no-bleed screen--dark-mode">
<!-- All modifiers work together -->
</div>CSS Variables
The Screen component provides CSS variables that cascade throughout the framework. These variables automatically recalculate when device variants or orientation modifiers are applied.
| Variable | Description | Default Value |
|---|---|---|
--screen-w |
Screen width | 800px |
--screen-h |
Screen height | 480px |
--full-w |
Full width minus padding | calc(--screen-w - --gap * 2) |
--full-h |
Full height minus padding | calc(--screen-h - --gap * 2) |
--ui-scale |
UI scaling factor | 1 |
--gap-scale |
Gap scaling factor | 1 |
--color-depth |
Display color depth (bits) | 1 |