Layout

Auto Layout & Widgets

Auto Layout provides a flexible container system that automatically adapts to different screen sizes to optimize the distribution and appearance of widgets such as cards.

This intelligent system ensures that the layout of widgets remains consistent and visually appealing across all device types without compromising the minimum width necessary for each widget.

Benefits of Using Auto Layout

• Consistency Across Devices: Auto Layout ensures that your application or website looks structured and uniform on all screens, from mobile phones to large desktop displays.
• Enhanced User Experience: By automatically adjusting the layout, the system provides a smooth and user-friendly experience regardless of device size or orientation.
• Ease of Maintenance: Managing the layout becomes simpler as the CSS handles most of the responsiveness and adaptability, reducing the need for extensive media query blocks or separate style sheets for different devices.

Auto Layout, combined with responsive widgets, offers a powerful solution for developers looking to create adaptable and aesthetically pleasing web applications and sites. It simplifies the design process while ensuring that end users enjoy a seamless interaction across any platform.

How Auto Layout Works

The Auto Layout framework uses a smart grid system defined by the OuterLayout. This grid system adjusts the number of columns based on the available width, ensuring that no column is narrower than a specified minimum width set in the CSS. This approach guarantees that all elements within the layout are displayed properly without being squeezed or overlapping undesirably.

The default setting in CSS

Setting --autolayout-width: 320px; as the minimum width for columns is strategic for several reasons:

• Device Compatibility: It aligns with the smallest commonly used screen width, ensuring functionality across all devices.
• Content Legibility: Provides sufficient space for content without compromising design and readability.
• Grid Flexibility: Ensures columns adapt flexibly to available space, maintaining layout integrity and responsiveness.
• Consistency and Structure: Helps maintain a uniform look across different screens, simplifying design and testing processes.

However, you may change this globally in your theme.css or locally for any module in the css file like module-example.css for that module.

Global default override

@layer theme {
    :root {
        --autolayout-width: 400px;
    }
}

Local module override

@layer theme {
    .module-example {
        & .autolayout {
            --autolayout-width: 80px;
        }
    }
}

Adaptive Widgets

Widgets within the Auto Layout are designed to be self-aware. Through the implementation of Media and Container Queries, these widgets understand the space available to them and adjust their size and layout accordingly. This means that a widget can change its form—such as showing more content or altering its layout—when more space is available.

CSS media and container queries

Assuming that --autolayout-width: 320px is defined, the

@layer widget {
    .widget-example {
        /* Basic styles for an available space of 1 column */
        @media screen and (max-width: 576px) {
            /* Styles for mobile devices */
        }
        @container (min-width: 640px) {
            /* Styles for an available space of 2 columns */
        }
        @container (min-width: 960px) {
            /* Styles for an available space of 3 columns */
        }
        @container (min-width: 1280px) {
            /* Styles for an available space of 4 columns */
        }
    }
}