Custom Devices

$devices in framework/config/_devices.scss defines every device profile the framework ships. The map is generated from the platform's device registry (db/data/framework_devices.yml), so it is not edited by hand.

Each entry becomes a screen--<name> class carrying the device's dimensions and rendering variables. Screen shows how the class is used in markup. Every profile carries the same schema:

Custom stacks add device profiles without touching framework source: configure $custom-devices where you load the framework. Everything the framework generates per device includes your profile, so a configured device behaves exactly like a built-in one.

// my-build.scss
@use 'framework' with (
    $custom-devices: (
        'my-panel': (
            'screen-w': 1024px,
            'screen-h': 758px,
            'pixel-ratio': 1.0,
            'dither-pixel-ratio': 1.0,
            'ui-scale': 1.0,
            'color-depth': 2,
            'density-tier': '1x',
            'gap-scale': 1.0,
            'size': 'lg'
        )
    )
);

<div class="screen screen--my-panel">
  <div class="view view--full">...</div>
</div>

Profiles are validated at compile time: a missing key or an invalid size or density-tier fails the build with a named error. An entry that reuses a built-in device name overrides that device. Compile as usual; see Compiling the Framework .

• A screen--<name> class setting the device variables (--screen-w, --pixel-ratio, --color-depth, ...).
• The size behavior of its size class, and the typography tier of its density-tier. See Scale for how density and scale compose.
• The per-device utility rules, like high-DPI outline dots for profiles with a dither-pixel-ratio of 2 and up.

The JavaScript runtime reads the same variables at render time; see Framework Runtime .

The map ships a generic byod_custom profile, so even a released build has a bring-your-own-device class. Apply screen--byod_custom for a quick start without compiling anything, then graduate to $custom-devices when you need your panel's exact dimensions and depth.