Sass Mixins
The screen mixins let your own SCSS target the same conditions the responsive utilities do: device size, orientation, and bit depth. The scale functions wrap pixel values so your CSS scales with the device the way framework CSS does.
Screen Targeting
Load the mixins module and wrap declarations. Each wrapped block applies only on screens that match, using 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. ). Your build needs the framework source on the load path; see Compiling the Framework Compiling the Framework Compile plugins.css and the theme stylesheets from source with Dart Sass Compile the framework from source with Dart Sass: one entrypoint, one load path, plus a stylesheet per theme. The result is the same plugins.css the release pipeline produces. You only need a source build when a released one is not enough, for modified source or custom device profiles. .
@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. 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 Visually customize any plugin with a drop-in stylesheet that recolors the whole screen Themes are a simple way to visually customize any TRMNL plugin. A theme adjusts the framework's colors (backgrounds, text, borders, chart colors) without touching plugin markup, and gracefully adapts to every supported device, from 1-bit ePaper to 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. Grayscale panels pick from four grayscale palettes, and five limited color palettes dither every framework color down to the panel's fixed inks. On 12-bit and 24-bit panels, screen--color-full paints every color exactly as defined. . -
for-density($tier): density tier targeting ('1x','2x'). -
for-combo/for-combo-up/for-triple/for-triple-up: target an exact combination directly.for-combotakes two modifiers,for-tripletakes three, and the-upvariants are mobile-first;screen()andscreen-only()call these for you.
Scale Functions
Each function wraps a pixel value in one of the framework's scale variables. 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 geometry that should scale like the framework's own components. -
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 part of a screen a theme can recolor, from whole-screen colors down to single components, utilities, borders, and chart series This page lists every slot: each part of a screen a theme can recolor, and the mixin that sets it. A slot takes a framework token, not a raw color, so whatever you map still renders correctly on every device. with the authoring contract on Authoring Themes .
Everything else the module forwards is internal: the selector helpers
(scope-selector,
generate-screen-utilities) and the variant
emitters (with-all-variants,
generate-triple-variants). The internal set
also includes the shared 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 Every device the compile knows about becomes a screen--{name} class, with its dimensions, density, and color depth baked in. Add your own panels through $custom-devices 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. These pages cover the build-your-own path: compiling from source, adding device profiles, and using the mixins in your own SCSS. A custom stack can also skip the build entirely and serve an official released build, which is what the TRMNL Platform always does. .
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.