[en] Configuring Layouts in Studio
[en] Once the layouts are defined during the second stage of the design system definition (UI kit generation), the implementer must configure them in Studio.
[en] Layout templates are preconfigured in the project's Studio environment - this means that the implementer won't have to create them from scratch. Instead, they have to duplicate the pre-built templates and modify the sizes in the duplicated ones. Then, they have to make modifications according to the specifications in the Design System document.
[en] Areas have predefined names, that cannot be modified.
[en] The space of each area must be configured using the % unit of measurement.
[en] When configuring a size, the percentage unit is identified by adding the expression .0 to the right of the size number.
[en] By default, layout areas are aligned in vertical orientation. To change the orientation to horizontal, it is necessary to add a Wrapper area and change its orientation to horizontal.
[en] Since the default orientation of the layout areas is vertical, the sizes defined are applied to the area height. If a wrapper area is added to change the orientation, changes to the size of the areas within the wrapper will be applied to the width or height depending on the wrapper Orientation configuration – for example, if a wrapper 1 is added within a Header, and its orientation is Horizontal, the size of the areas within it will be applied to their width.
[en] Even if the Wrapper is added to align the areas in horizontal version, apps do not render the orientation correctly. As a result, it is necessary to configure the orientation using the CSS File, which is available for configuration in the app layout template configuration.
[en] Areas cannot overlap.