| Page Properties | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Design system includes next components which are accounted as layout:
...
They are quite similar, so to understand the difference some description with examples is provided below.
...
Grid
The grid aims for visual consistency between layouts and to provide flexibility across a wide variety of designs.
...
Our design's responsive UI is based on a 12-column grid layout.
The grid system is implemented with the Grid component. It uses CSS's Flexible Box module for high flexibility.
Item widths are set in percentages, so they're always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are 6 grid breakpoints: xxs, xs, sm, md, lg, xl.
Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the breakpoint constraints.
There are two types of layout: containers and items.
Grid container
...
Grid item
...
Fluid grids use columns that scale and resize content. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically. For basic grid column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.
...
To control space between children, use the spacing prop. The spacing value can be any positive number, including decimals and any string. The prop is converted into a CSS property using the theme.spacing() helper.
Responsive values are supported by:
...
columns
...
...
direction
...
rowSpacing
...
spacing
...
all the other props of the system.
| Info |
|---|
When using a responsive columns prop, each grid item needs its corresponding breakpoint. For instance, this is not working. |
...
Container
‘Container’ component allows to wrap the content and to have that wrapper in one place, so styles won’t be copy-pasted. The Container centers your content horizontally. It's the most basic layout element.
Using this component maximum width will be limited as well as paddings. It prevents content from “sticking” to the screen.
...
A fluid container width is bounded by the maxWidth prop value.
| Info |
|---|
If the changes are needed for entire project, then it is enough to change the token in one place, the rest will be applied automatically. |
...
Section
'Section' component aims to adjust vertical spacings & color themes.
...
Semantically can be 'div' | 'article' | 'aside' | 'section', depending on what the section is used for. By default component has three themes 'dark' | 'light' | 'alt', it is also possible to add your own theme, but after own styles adding.
Component can be used within organisms that will be located on the page (the organism will be wrapped into Section component so that the color scheme and paddings are respected).
The section should not be used for small components that are part of a large organism.
| Info |
|---|
|
...