Halstack provides multiple components to achieve layout consistency and an easy way to arrange elements in the UI. The application layout is the base that wraps any application built with Halstack. In addition, all of the components listed below can be used within each other to create a wide variety of standard layouts:
The grid provides the foundation for consistently positioning elements onscreen. The 8x Grid is the geometric foundation of all the visual elements of Halstack Design System components and spacing. It provides structure and guidance for all creative decision-making.
Breakpoints define resolutions at which screen components adjust to offer an optimal user experience across screen sizes and devices. We've defined five different breakpoints to accommodate multiple web, tablet, and mobile screen resolutions:
Breakpoint | px | rem |
---|---|---|
xsmall | 320 | 20 |
small | 480 | 30 |
medium | 720 | 45 |
large | 1056 | 66 |
x-large | 1440 | 90 |
The image below illustrates how we've used data on the most popular screen resolutions by device over the past few years to help define each breakpoint.
Columns, gutters, and margins make up the responsive layout grid following these breakpoints. Depending on resolution and screen size of a device, column numbers and the values of the margins and gutters adjust to accommodate all screen elements in the most optimal manner.
The following table describes the columns, margins, and gutter at each of the different breakpoints:
Breakpoint | Columns | Gutter (recommended) 1 | Margin (min)2 |
---|---|---|---|
xsmall | 4 | 16 / small | 24 |
small | 4 | 16 / small | 24 |
medium | 4 | 24 / medium | 48 |
large | 8 | 16 / small | 56 |
x-large | 8 | 24 / medium | 56 |
gutter
prop in the layout components can be used (ideally multiples of 8) although we recommend to stick to the values provided. auto
value.