Enhancement Guide
This guide explains how to enhance plugins with Framework v2.0’s expanded responsive capabilities. For a quick migration checklist, see the Upgrade Guide.
What changed in Framework v2.0
Bit-depth variants (1-bit, 2-bit, 4-bit)
Write a safe default that looks great on 1-bit displays, then layer enhancements for richer devices using `2bit:` and `4bit:` prefixes. Common use cases include deeper background shades, enabling additional structure, or revealing supplementary content only when contrast permits.
- Background layering: `bg--gray-20 2bit:bg--gray-35 4bit:bg--gray-50`
- Conditional visibility: `hidden 4bit:block`
- Legibility on patterns: use Text Stroke and Image Stroke
See Visibility and Background.
Automatic bit‑depth adaptation (Background, Border, Text)
The Background, Border, and Text utilities are automatically responsive to device bit‑depth. The applied shade adapts to the device’s capabilities so your default looks balanced on 1‑bit, 2‑bit, and 4‑bit displays.
- Defaults are safe: a single token (e.g., `bg--gray-30`, `border--h-4`, `text--gray-45`) renders appropriately across devices.
- You can still take control using responsive prefixes to tune behavior for size, orientation, and bit‑depth (e.g., `md:portrait:2bit:bg--gray-40`, `4bit:text--gray-35`).
Orientation variants (portrait, landscape)
Adjust density and flow based on device orientation without branching your markup. Apply orientation prefixes to any class to tune structure, alignment, and spacing.
- Columns: `portrait:grid--cols-2 landscape:grid--cols-4`
- Direction: `portrait:flex--col landscape:flex--row`
- Spacing: `portrait:gap--small landscape:gap--space-between`
See Responsive and Layout.
Responsive breakpoints (sm, md, lg, xl)
Use size breakpoints to scale complexity and density. Combine with orientation and bit-depth for precise control, keeping your default minimal and layering enhancements for larger screens.
- Progressive layout: `sm:flex md:grid lg:portrait:grid--cols-4`
- Composed conditions: `md:portrait:2bit:gap--medium`, `lg:4bit:rounded--medium`
See Responsive and Responsive Test.
Utilities and elements added in v2
- New utilities: Aspect Ratio, Scale, Visibility.
- New elements/components: Divider (element), Progress (component).
- Palette expansion: Background/Text now support
gray-10…gray-75; legacygray-1..7remain for compatibility. - Border redesign: new full‑spectrum scale; see Border for upgrade notes.