Flex-box and spacing system
Description
Flex-box is a component for arranging and aligning elements in the interface.
Box
Box is a component for setting element size, paddings and margins.
import React from 'react';
import { Box } from '@semcore/flex-box';
import Button from '@semcore/button';
const Demo = () => (
<div>
<Box tag={Button} mr={2}>
Button 1
</Box>
<Box tag={Button} mr={2}>
Button 2
</Box>
<Box tag={Button} mr={2}>
Button 3
</Box>
<Box tag={Button} mr={2}>
Button 4
</Box>
</div>
);
export default Demo;
Flex
Flex is a component for aligning elements. It's a wrapper over CSS-flex.
import React from 'react';
import { Box, Flex } from '@semcore/flex-box';
const Demo = () => {
const styleBox = {
background: 'rgba(79, 96, 213, 0.5)',
};
return (
<div>
<Flex justifyContent='space-between'>
<Box m={5} p={5} style={styleBox} />
<Box m={5} p={5} style={styleBox} />
<Box m={5} p={5} style={styleBox} />
</Flex>
<hr />
<Flex alignItems='center'>
<Box h={100} m={5} p={5} style={styleBox} />
<Box h={60} m={5} p={5} style={styleBox} />
<Box ml='auto' m={5} p={5} style={styleBox} />
</Flex>
</div>
);
};
export default Demo;
Spacing system
The spacing system helps maintain a vertical and horizontal rhythms in the interface. It makes the interface easier to use by reducing cognitive load. For example, if there are different indents in the interface everywhere, the brain will try to understand this logic and thereby increase its cognitive load.
In addition, vertical and horizontal rhythms help maintain visual hierarchy on the page, structure components and blocks according their importance to the user.
TIP
Use 4 as the multiple of all indents. It's the main denominator of our design system (scaleIndent
property in API, --scale-indent
in design tokens).
Here is a table with spacing tokens we use in our design system.
Token name | Value in px | Value in rem | Value as a multiple of 4 |
---|---|---|---|
--spacing-05x | 2 | 0.125 | 0,5 |
--spacing-1x | 4 | 0.25 | 1 |
--spacing-2x | 8 | 0.5 | 2 |
--spacing-3x | 12 | 0.75 | 3 |
--spacing-4x | 16 | 1 | 4 |
--spacing-5x | 20 | 1.25 | 5 |
--spacing-6x | 24 | 1.5 | 6 |
--spacing-8x | 32 | 2 | 8 |
--spacing-10x | 40 | 2.5 | 10 |
--spacing-14x | 56 | 3.5 | 14 |
--spacing-20x | 80 | 5 | 20 |
--spacing-24x | 96 | 6 | 24 |
--spacing-30x | 120 | 7.5 | 30 |