Sass Mixins
The screen mixins generate device-aware rules from the same grammar the responsive utility classes use: size, orientation, and bit depth. The scale functions wrap pixel values so custom CSS scales with the device like framework CSS does.
Screen targeting
The screen mixins scope rules to a screen's size, orientation, and bit depth: the same grammar as the responsive utility classes ( Responsive Responsive Adapt styles to the device's size class, orientation, and bit depth using variant prefixes The Responsive system adapts a layout to the device it renders on. Size-based breakpoints follow the size class each device carries, and Bit-depth variants follow its color capabilities. Combine them to control how your content appears across TRMNL's range of devices. ), for styles you author in SCSS. Load the mixins module and wrap declarations.
@use 'framework/mixins' as trmnl;
.forecast-tile {
border: 1px solid var(--black);
// 1-bit screens: thicker rule so the dithered edge stays legible.
@include trmnl.for-1bit {
border-width: 2px;
}
// md and larger screens in portrait.
@include trmnl.screen('md', 'portrait') {
padding: 20px;
}
}
A mixin wraps the current rule in the matching screen ancestor: the 1-bit block above compiles to
.trmnl .screen--1bit .forecast-tile.
-
screen($modifiers...): one to three modifiers in any order, sorted internally to size, orientation, bit depth. A size modifier is mobile-first (that size and up). Bit depth accepts'1bit'or'1'. -
screen-only($modifiers...): the same grammar with exact size targeting instead of mobile-first. -
for-sm/for-md/for-lgand their-onlyvariants: size shorthands. -
for-portrait/for-landscape: orientation shorthands. -
for-1bit/for-2bit/for-4bit: bit-depth shorthands. -
for-dark-modeandfor-dark-1bit/for-dark-2bit/for-dark-4bit: dark-mode targeting. Themed screens are exempt, matching the theme contract on Themes Themes Opt-in stylesheets that re-theme screens while preserving device-capability rendering Themes are standalone stylesheets that re-point semantic channels, component slots, and utility tokens at different palette tokens. A themed screen still renders through its device mode: dither patterns on 1-bit, palette images on limited color, solids on full color. . -
for-color-palette($id)/for-color-full: limited-palette and full-color targeting. The palette ids are'3bwr','3bwy','4bwry','6a', and'7a', each documented on Color Palettes Color Palettes Every palette a screen can carry: grayscale tiers, limited ink sets, and full color, with the class each one maps to A palette tells a screen which inks its panel can print. Four grayscale palettes map onto the bit-depth classes, five limited color palettes dither every framework token down to a fixed ink set, and screen--color-full paints every token at its actual hex on 12-bit and 24-bit displays. . -
for-density($tier): density tier targeting ('1x','2x'). -
for-combo/for-combo-up/for-triple/for-triple-up: the explicit combination helpers behindscreen()andscreen-only().
Scale functions
The scale functions wrap pixel values in the framework's scale variables, so custom CSS follows device density, Scale, and Text Scale exactly like framework CSS. Non-px and zero values pass through unchanged; lists are scaled item by item.
-
content-scaled($value): multiplies by--content-scale. Use for plugin content geometry. -
ui-scaled($value): multiplies by--ui-scale, which includes device density. Use for framework-owned component geometry. -
text-ui-scaled($value): multiplies by--text-ui-scale, which includes density, Scale, and Text Scale. Use for typography.
@use 'framework/mixins' as trmnl;
.forecast-tile {
padding: trmnl.content-scaled(10px);
// => padding: calc(10px * var(--content-scale, 1));
}Public surface
framework/mixins forwards every module the
framework compiles itself with, which is far more than it supports. Three families are public: their
names and signatures hold from one release to the next, and the docs cover them page by page.
-
Screen targeting:
screen(),screen-only(), and thefor-*shorthands listed above. -
Scale functions:
content-scaled(),ui-scaled(),text-ui-scaled(). -
Theme slots: the
framework/mixins/theme-slotsmodule, documented on Theme Slots Theme Slots Every themable surface: semantic channels, component slots, utility remaps, border lines, and the chart ramp Every surface a theme can re-point, with the mixin that sets it: semantic channels, component slots, utility remaps, border lines, and the chart ramp. Slots take token references, so each one still resolves through the device mode at render time. with the authoring contract on Authoring Themes .
Everything else the module forwards is internal. That covers the selector helpers
(scope-selector,
generate-screen-utilities), the variant
emitters (with-all-variants,
generate-triple-variants), the factorized
utility emitters, the pattern, border-level and text-paint helpers, and the
trmnl-namespace wrapper. They exist to compile
the framework's own classes and can change or disappear in any release, with no deprecation notice and no
entry in the release notes.
The same split holds inside a public module: a member the docs do not name is internal even when it sits next to one they do. The device configuration is public and documented on Custom Devices Custom Devices Device profiles and the $custom-devices configuration for custom builds Device profiles drive the compile: each entry in the device map becomes a screen--{name} class with its dimensions, density, and color depth baked in. Configure $custom-devices to add your own profiles without touching framework source. ; the whole SCSS contract is summarized on Sass API Sass API The framework SCSS source: architecture, cascade layers, and what a custom stack can build from it The Sass API is the framework's SCSS source, open since 3.2. A custom stack serves either an official released build or its own build compiled from this source; these pages document the build-your-own path. The TRMNL Platform always serves official builds. .
Where the rest lives
The class-based variants for markup are on Responsive Responsive Adapt styles to the device's size class, orientation, and bit depth using variant prefixes The Responsive system adapts a layout to the device it renders on. Size-based breakpoints follow the size class each device carries, and Bit-depth variants follow its color capabilities. Combine them to control how your content appears across TRMNL's range of devices. , and Responsive Test Responsive Test Test responsive utilities and compare SCSS mixins with CSS classes This page tests responsive utilities by comparing SCSS mixins with CSS classes across different screen conditions. Each test row shows an element styled with SCSS mixins alongside the same element styled with CSS utility classes. Both columns should look identical when the conditions are met, demonstrating that mixins and classes produce equivalent results. renders mixins and classes side by side to prove they produce the same result.
Where This Applies
These pages document the surfaces this API programs.