V2 Enhancement Guide
Framework v2 introduces new engines, utilities, and prefixes that let you build layouts that are both adaptive and responsive. Your existing work will continue to work, but by using these enhancements you can create layouts that adjust to device size, orientation, and bit depth.
1. Upgrade Your Engines
One of the most impactful enhancements is updating how you use the framework’s engines. These changes make layouts flexible across devices of varying sizes.
- Overflow Overflow Handle column items overflow The Overflow engine automatically lays out items into up to N columns and adds an "and X more" label when content exceeds the available height. It also applies text clamping per-column width and handles grouped headers without leaving orphaned headings. engine: Remove hard-coded values and let the engine calculate available space automatically. Layouts then adapt cleanly to different screen sizes without manual tuning.
- Content Limiter Content Limiter Change font size when content overflows to fit within the container Content areas are capped in height by the view type they sit in. Past that threshold the limiter steps typography down and the Clamp engine truncates the first block that still overflows. engine: Do the same - drop fixed values and allow the engine to determine available space dynamically.
- Table Overflow Table Overflow Handle table rows overflow When a table has more rows than can fit within the available vertical space, it constrains its height and appends a trailing "and X more" row to indicate the hidden entries. engine: For tables, use the new engine that applies the same logic and automatically adds an “&x more” row when needed.
2. Apply Responsive Prefixes
All layouts in v1 were effectively fixed to a single device frame. With Framework v2, you can extend them using responsive prefixes in three key ways: display size, bit depth, and orientation.
Display size
Use size prefixes to define how layouts adapt to small, medium, or large screens. For example, you might render six items in a single row on a small device, but two rows of three items on a larger display. Prefixes can be applied to grids, flex utilities, spacing, and more.
Bit depth
Apply bit-depth prefixes to take advantage of devices with higher grayscale capabilities. For example, you can use a subtle gray shade on 4-bit devices while still defining a simpler fallback for 1- or 2-bit displays.
Orientation
Orientation prefixes let you prepare your layouts for devices that may be used in landscape or portrait mode. You can adjust grids, flex directions, or spacing rules so the same plugin works cleanly in both orientations.
3. Use the New Utilities and Styling Options
Framework v2 comes with new utilities, elements, and components that expand your design options:
- Aspect Ratio Aspect Ratio Maintain consistent proportions for elements regardless of their content Hold an element to a fixed width-to-height ratio. The utilities set the native CSS aspect-ratio property, so images, charts, and containers keep their proportions at any screen size. utility: Keep images and elements locked to consistent proportions.
- Rounded Rounded Control element rounding with predefined values Utility classes for corner radius. Predefined sizes, per-corner control, and arbitrary pixel values. utility: Apply rounded corners to elements.
- Divider Divider Create horizontal or vertical dividers between elements The Divider element provides a simple, standalone shorthand for horizontal and vertical separators. It uses the same border-level rendering pipeline as the Border utility and defaults to level 6. element: Add separators between sections of content.
- Progress Progress Display progress bars in different styles Progress bars and step dots for completion state. The fill renders as a bitmap pattern on 1-bit displays and as a solid color on 4-bit+ displays. component: Show task or state progress with a built-in component.
- Item Item Build standardized list items and content blocks A row for lists, schedules, and other repeating content, with optional meta text, an index, or an icon. Stack items in a Layout and let the Overflow engine handle the ones that do not fit. component: Now supports meta-emphasis classes, making it easy to highlight or de-emphasize items.
- Table Table Create data tables optimized for 1-bit rendering Tabular data with optional row indexes. Five size variants, and the Overflow and Clamp engines drop rows and truncate cells that do not fit the space available. component: New style variants, including small, large, and index tables.