UI Builder Layout System
In Lesson 4, we'll explore the crucial role of layout systems in UI Builder.
Layouts are the foundation for how containers and components are organized on a page, and they play a vital part in page customization and performance improvement.
The Enhanced Layout System
The San Diego release introduced an updated layout system that simplifies page customization and enhances performance.
With this modern layout system, if you can achieve it with CSS, you can likely accomplish it in UI Builder.
This enhanced layout system comprises the following key features:
- A Simplified Content Tree: A more straightforward structure for managing content on a page.
- Improved Styling Panel: A user-friendly panel for configuring layouts and component styling.
- Low-Code UI for Flexbox and CSS Grid Layouts: A user-friendly interface for setting up Flexbox and CSS Grid layouts.
- Updated Layouts:
Free or absolute positioning is also supported in the UI Framework by editing the layout code directly.
Flexbox Layout
Flexbox is a one-dimensional layout model designed for space distribution and alignment capabilities.
It handles layout in one dimension at a time, either as a row or column.
This one-dimensional approach makes it inherently flexible and ideal when you don't know the size of your content.
In Flexbox, the direction you specify dictates how components stack within the layout:
- Row: Content is added from left to right or right to left, depending on the browser's default language.
- Row-reverse: Content is added in reverse order of the browser's default language.
- Column: Content is added from top to bottom.
- Column-reverse: Content is added from bottom to top.
The choice of direction is essential for how your components arrange within the layout, whether horizontally or vertically.
Configuring Flexbox Layouts
In the Styles tab of the Configuration Console, you'll find various layout-related properties to configure without needing to edit CSS code directly.
These properties cover aspects like item alignment, margin and padding size, background color, and more.
If you prefer to update the CSS layout code directly, toggle the View and edit CSS button at the bottom of the Configuration Console to bring up the CSS styles code editor.
Additional Flexbox Resources
Using Flexbox layouts in UI Builder: Create a Flexbox layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance. PRODUCT DOCS
Basic concepts of Flexbox: This article gives an outline of the main features of Flexbox. MOZILLA
CSS Grid Layout
CSS Grid is a two-dimensional grid-based layout system, providing maximum control over page layout. It is particularly useful for complex layouts with multiple rows and columns.
Configuring CSS Grid Layouts is also accomplished in the Styles tab of the Configuration Console, offering similar layout-related properties as Flexbox, but with additional options like showing the grid on the stage, specifying the number of columns and rows in the grid, and defining grid flow.
Configuring CSS Grid Layouts
Within the Styles tab of the Configuration Console, most of the same layout related properties we talked about with Flexbox are also available for the CSS Grid Layout as well. However, there are additional properties such as Show grid on the stage, Grid flow, and to specify the number of Columns and Rows in the grid.
Additional CSS Grid Resources
Using CSS Grid layouts to build a page: Create a CSS Grid layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance. PRODUCT DOCS
CSS Grid Layout: This article gives an outline of the main features of CSS Grid Layout.
Upgrading to the New Layout System
If you have created pages using UI Builder within the Quebec or Rome releases, you can upgrade their legacy layout to the new layout system introduced in the San Diego release. The upgrade process is facilitated by a built-in upgrade wizard.
The high-level steps for upgrading your layout are as follows:
- Open the page you want to upgrade within UI Builder.
- Select the "Update layout" button.
- Review the new and old versions of your layout and choose to "Keep new" to complete the upgrade.
- Once your page is upgraded, you cannot revert to the old layout system.
All pages created within instances upgraded to San Diego or later will use the new layout system. For detailed information about how to upgrade layouts, use the link below to view the Upgrading layouts in UI Builder reference in Product Documentation.
Upgrading layouts in UI Builder: Learn more about how to upgrade layouts created in the Quebec and Rome releases to the new layout system available in San Diego.
Knowledge Test
Question 1: What two web layout technologies are recommended for use within UI Builder?
- 12-column/row-column layout
- CSS Grid
- CSS Flexbox Grid
- Flexbox
Question 2: The Direction property specifies what?
- The size of the space on the immediate inside of the component.
- How to space apart the components within the container.
- How you want your components to stack when added to the layout.
- How components within containers align as a group.
Question 3: You can upgrade your old page layouts to the new layout system.
- True
- False
Next
In Lesson 5, we'll explore Pages, where you'll learn more about creating and configuring pages within UI Builder.
Lesson 5: Pages
Stay tuned as we continue our journey through UI Builder, diving deeper into the world of page creation and configuration.