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 The Content Limiter system automatically restricts the height of content areas based on the view type. When content exceeds the height threshold, it applies smaller typography and truncates overflowing text using the Clamp Engine to fit the available space. 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 The Aspect Ratio utility uses the native CSS aspect-ratio property to maintain consistent proportions for elements. Perfect for images, videos, and containers that need to maintain specific width-to-height ratios across different screen sizes. utility: Keep images and elements locked to consistent proportions.
- Rounded Rounded Control element rounding with predefined values The Rounded system provides consistent border radius values for creating smooth corners on elements. It offers predefined sizes, corner-specific controls, and custom values to maintain visual consistency throughout your interface. utility: Apply rounded corners to elements.
- Divider Divider Create horizontal or vertical dividers between elements The Divider element provides a simple, standalone way to create visual separations in your layouts. Dividers automatically adapt to their background color for optimal visibility across four background types: white, light, dark, and black. element: Add separators between sections of content.
- Progress Progress Display progress bars in different styles The Progress component provides visual indicators for completion status and step-based processes. Optimized for ePaper displays with bitmap patterns for 1-bit displays and solid colors for 4-bit+ displays. component: Show task or state progress with a built-in component.
- Item Item Build standardized list items and content blocks The Item component provides a flexible container for displaying content with optional metadata and indexing. It's commonly used for lists, schedules, and other content that needs consistent formatting. 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 The Table system provides structured data presentation with consistent styling and various size options. It's designed to display information in a clear, scannable format while maintaining visual hierarchy. component: New style variants, including small, large, and index tables.