...
The format is the entire area where the layout will be displayed.
Flowlines are horizontal lines that divide the various sections of a grid into parallel bands.
Columns are vertical divisions or sections that contain the content (12-column grid for desktop, 8-column grid for tablet, 4-column grid for mobile).
Rows are horizontal divisions or sections of a grid.
Modules represent spatial units formed by the intersection of rows and columns.
Zones or regions are formed by groups of nearby modules, both vertically and horizontally
The gutter is the distance between each column or row.
Margins are the space between the content and the edges of the screen.
Types
Fixed
Fluid
Devices
Web (mobile, tablet and desktop)
...
Tables
Actions
Density
Tokens
Spacing
Token | Unit multiplier | PX | REM |
|---|---|---|---|
spacing-0 | |||
spacing-1 |
Margin (references spacing)
Token | Base token | PX | REM |
|---|
Gutter references spacing
BreakpointsBreakpoints
Breakpoint | Viewport | Gutter | Columns | Margins |
|---|---|---|---|---|