Page History
The Grid.
The basis for all designs within the Design System is the grid. This grid ensures that the ratios of the elements within the different devices are always the same. For this reason our DS is designed in the unit "rem". The foundation of the design system is the modified bootstrap frontend grid. The basic Interface is divided into two main parts, header and content area. The 24 Columns Grid only applies within the content area.Â
All contents such as boardlets, fluid navigation, cards and so one have a nested grid. this allows us to arrange various elements within the above examples correctly and ensure that they have the same proportions on the different boardlet sizes. distances are determined by the margin.
in this animation we show, using the dsfm interface, how the different contents behave within the breakpionts.
The Breakpoints.
The grid has 5 basic breakpoints. These breakpoints determine not only the columns, header, margin, gutter and icon size. They also determine the contents of the respective device and how they are displayed. This is necessary because the display of boardlets in high resolutions allows a generous handling of headlines, sublines, content and icons. Within small representations these contents have to be compressed or even displayed in multiple levels. Otherwise the user loses the overview in the fill or content is displayed so small that it is no longer readable. Please take a look at the breakpoint animation.
| Breakpoint | px | rem | Columns |
|---|---|---|---|
| Web max | 1584 | 99 | 24 |
| Web min | 1312 | 82 | 24 |
| Tablet Landscape | 1056 | 66 | 24 |
| Tablet Portraid | 672 | 42 | 24 |
| Mobile | 320 | 20 | 24 |
This list of breakpoints will grow steadily, as the need arises.
Currently, the following breakpoints are necessary from the point of view of the UI/UX Guild.
- Web max(1920x1080)
- Web min(1280x800)
- Tablet landscape (1024x768)
- Tablet portrait (768x1024)
- Smartphone portrait (375x667)
Details and the grid for these breakpoints can be found on this page.
