Superblocks Layouts give you the dynamic power of Flexbox and CSS grid on the web. You can build any dynamic layout while having zero frontend expertise due to the native layout controls in Superblocks.
Superblocks Layouts are useful when you want to achieve:
- A multi-column application where each column supports different layouts such as a header, body, and footer
- Responsiveness for desktop, tablet and mobile
- Dynamic component resizing dependent on the data returned
- Vertically stacked layouts within columns that arrange components vertically
- Horizontally stacked layouts within columns that arrange components horizontally
- Fixed and sticky headers to keep the header while scroll down a page
- Dynamic hiding and showing of components or columns dependent on code
Sections & Columns
The layout system is based on Sections and Columns.
- Section: Full width “rows” that divide a Page.
- Columns: Columns in a Section span the full height, dividing the space into separate areas. Choose from three layout options for these columns: fixed grid (allowing freeform placement of content), vertical stack, or horizontal stack.
By default Superblocks apps are responsive. By dividing your Sections into Columns, users can configure the columns to stack vertically on Tablet and Mobile screens automatically at breakpoints.
Dynamic Component Resizing
By default all components are fixed-height and fixed-width with drag and drop. To achieve a dynamic height or width change the property to “Fit Content”.
This will determine the height based on the data inside. For example if you take a table with 5 rows of data it’ll show those 5 and a table with 20 rows of data will be approximately 4x the height dynamically.
Vertically Stacked Layouts
A vertical stack means a layout in which elements are arranged one after the other in a vertical sequence.
- Distribution can be set to Top, Middle, Bottom, and Space Evenly
- Alignment can be set to: Left, Center, Right, and Stretch
- Spacing between components controls the vertical space between two adjacent components
- Padding controls the space between the column and inner components
Horizontally Stacked Layouts
A horizontal stack means a layout in which elements are arranged one after the other in a horizontal sequence. Horizontal stacks of columns enable control of space between components, padding, and overflow behavior.
Fixed Header Sections
Setting a section to “position:fixed” will make it sticky, this is common when building a header that you want to keep as your users scroll down the page.
Dynamic Hiding and Showing of Components
When you use a vertical stack or horizontal stack you can set component visibility and to collapse space when not visible. When a component is hidden, all others will move into place as if it’s not there, which is quite powerful when building dynamic views.