Framework

Framework — also referred to as CSS framework — is a presentation attribute for organizing layouts. It offers adaptability for rearranging and resizing framework content to generate dynamic, receptive designs. Please be aware that as framework is a display option, it serves as a directive.

In this session, you will discover:

1. How to establish and adjust a framework
2. How to position content in a framework
3. How to shift, extend, and align framework content
4. How to craft a responsive framework

How to establish and adjust a framework

In order to establish a framework, introduce an element that supports a framework (for instance, a segment, div block, etc.) to the workspace from the Add panel. Subsequently, choose that element, navigate to Style panel > Layout > Display, and opt for Framework.

You have the ability to edit the framework directly in the Style panel or in framework edit mode. To enter framework edit mode, press the “wrench” icon next to the Columns and Rows fields, or select the framework on the workspace and click the “grid edit” icon. To exit framework edit mode, click Done on the workspace overlay or click the “close” icon in Framework settings.

Incorporate columns and rows

To include new columns and rows in a framework, proceed to Style panel > Layout > Display and utilize the “increase” button on the corresponding columns and rows fields. You can also:

• Insert a numerical value into the columns and rows fields
• Access framework edit mode and tap the “plus” icon in Style panel > Framework settings
• Launch framework edit mode and tap the “plus” icon on the workspace

Replicate and eliminate columns and rows

There are three methods to remove columns and rows:

• Employ the “decrease” button on the columns and rows fields
• Access framework edit mode, hover over a column or row in Style panel > Framework settings, and hit the “trash” icon
• Access framework edit mode, click or right-click on the column or row header on the workspace, and select Delete

There are two methods to duplicate columns and rows in framework edit mode. You can hover over a column or row in Style panel > Framework settings and select the “duplicate” icon, or right-click on the column or row header on the workspace and select Duplicate.

Reorganize columns and rows

You can rearrange columns and rows in framework edit mode. Hover over the row or column you wish to move, then drag the handle that appears on the left side to the desired position.

Modify spaces between columns and rows

Spaces enable you to specify the distance between columns and rows without the need to add margin or padding. To adjust the gap size between columns and rows, head to Style panel > Layout > Gap and input a value.

By default, margins between columns and rows are synchronized. This indicates that if you modify the gap size for columns, the gap size for rows automatically adapts to the same value. To independently alter the gap between columns and rows, click the “lock” icon to unlock them.

Insider tip: To quickly expand or reduce gap sizes, slide the Gap lever or press Option (on Mac) or Alt (on Windows) and shift your mouse left or right over the columns or rows field. 

Adjust column and row sizes

You can modify the proportions of grid columns and rows in framework edit mode by selecting and dragging the column or row header to the desired size on the workspace. You can also specify a custom size for columns or rows by clicking a row or column header.

Framework sizing

You can utilize standard units (for example, px, em, rem) when determining framework sizes, or you can utilize FR units. The FR unit symbolizes a fraction of the available space in the framework. You employ it to delineate the length of rows and columns akin to a percentage or pixel unit, but, distinct from fixed percentages or pixel units, the FR unit automatically computes row and column space while considering gaps.

You can also set min/max values to guarantee that your rows and columns do not reduce below a specified minimum value or extend beyond a stipulated maximum value. For instance, if you wish your rows to maintain a minimum height of 200px, you can set the minimum value to 200px and the maximum value to auto. Subsequently, the row will expand based on the content within and will never reduce below 200px.

How to position content in a framework

You can insert various child elements (for example, headings, images, div blocks, etc.) within a framework. By default, each new framework child will fill an individual framework cell and occupy the next available cell from left to right. If there are no more vacant cells in a row, a new row will be created to accommodate the new framework children.

Vary the flow direction of framework content

You have the option to alter the direction of framework children in Style panel > Direction. Here, you can choose horizontal, which arranges children from left to right, or vertical, which arranges children from top to bottom.

Place Content Manually within a Grid

To position content manually in a grid, simply hold down the Shift key while dragging the element into the grid. You can also modify the position setting of an existing grid child to manual. To achieve this, choose the grid child, navigate to the Style panel > Grid child > Position, and change it to Manual.

Grid children placed manually will remain in their assigned grid cells whereas grid children positioned automatically will adjust to accommodate new grid children by moving to the next cell.

How to Nest Various Elements in a Grid Cell

You can insert multiple elements into a single grid cell by nesting elements within the grid child. To accomplish this, start by adding a structural element (like a div block) to the grid as the direct grid child. Once you’ve added the structural element as the grid child, you can include other elements within the div block by holding down Command (on Mac) or Control (on Windows) and dragging the elements into the grid cell. Alternatively, you can select the structural element and use quick find to add extra elements.

Replicate Content in a Grid

You have two options to duplicate a grid child to reuse the same content in multiple grid cells:

• Hold down Option (on Mac) or Alt (on Windows) and drag the content to duplicate and relocate it to a new grid cell
• Copy the content, then select the grid and paste the content

Managing Movement, Spanning, and Alignment of Content in a Grid

Once you’ve positioned your content within a grid, you can customize the design of that content. You can adjust the content’s location by moving it to different cells, make it span across multiple cells, and even align the content within the grid.

Repositioning Grid Children

To move content within the grid, select and drag the grid child to the desired position on the canvas or within the Navigator.

Arrange the Order of Grid Children

You can also set the order of grid children by selecting the grid child and navigating to the Style panel > Grid child > Order.

Aligning Content in a Grid

To change the alignment for all grid children, select the grid and go to the Style panel > Layout > Align. Use the alignment box (the 3 x 3 grid) to quickly align grid content. The controls for the X and Y axes correspond to the values set within the alignment box. Learn more about utilizing the alignment box.

To adjust the alignment of a specific grid child, choose the grid child and navigate to the Style panel > Grid child. From there, you can set the alignment or justification for the grid child under Align and Justify.

Extending Grid Children

To extend an automatically placed grid child across multiple grid cells, select the grid child, proceed to the Style panel > Grid child > Position, and specify the number of columns and rows that the grid child should span.

To stretch a manually positioned grid child, select the grid child, access the Style panel > Grid child > Position, and indicate the starting and ending columns and rows for the grid child.

Secure Grid Child Placement

Negative values enable you to position grid children with respect to the end of the grid — they refer to cells from right to left or bottom to top.

Negative grid child positioning can be beneficial if:

• You want to maintain the position of your navbar between the first column and the last column rather than respanning it with each new column addition
• You wish to keep your footer at the bottom row of the grid irrespective of how many rows are added — position your footer in row -1/-1
• You aim to keep the main content section consistently centered in your grid with equal columns on each side — set the “end” value to match the negative equivalent of the “start” value (e.g., 3/-3). This ensures that the child remains centered even if columns are removed on smaller breakpoints.

Reset Grid Child Configurations

Grid child settings are specific to the selected element and are not stored with the class. Altered settings reflected by pink labels in the Style panel only apply to the selected element at the current breakpoint. These settings cascade down to lower breakpoints and are denoted by orange labels. If you override an inherited (i.e., orange) setting on a smaller breakpoint, the indicator will revert to pink.

To eliminate any applied grid child settings, click on the pink label of the setting and then select Reset.

Overlap among Grid Children

Grid children with manual positioning will automatically overlap when they intersect within the same cell(s). You can manage the stacking order of these overlapping elements by readjusting them in the Navigator or by modifying their positioning and z-index settings.

Fill Unoccupied Grid Cells

When grid children are spanned, empty cells may remain in the grid. To automatically populate these cells with content, navigate to the Style panel > Layout > Direction and select the “dense” icon.

Note: Activating the “dense” setting tries to accommodate grid children in empty cells of your grid. However, this may pose accessibility issues as it affects only the display of items, not their actual position on the page.

Creating a Responsive Grid Design

To ensure that your grid design adapts to various screen sizes, you can either manually remove columns on smaller breakpoints or enable auto-fit to generate columns and rows automatically to suit smaller screens.

Customize Grid Layout Responsively

To guarantee that your grid design is responsive across all devices, adjust the number of columns as necessary for smaller breakpoints.

If altering columns on smaller breakpoints is not feasible:

• Try changing your grid Direction to Row
• Verify that there are no manually positioned grid children within those columns
• Confirm that there are no child elements spanning those columns

Implement Auto-Fit

Auto-fit is a powerful feature of grids that automatically repeats and wraps columns to ensure responsiveness across all screen sizes without needing adjustments for each breakpoint.

To activate auto-fit, maintain only one column and row in your grid. Switch to grid edit mode, click on the column header, specify the minimum and maximum dimensions for the column, and enable Auto-fit. Additional columns will be generated and repeated automatically to distribute content responsively within your grid.