Developer Flex-box is a component for managing arrangement and alignment of other components and elements in the interface.
Box
Box is a component for changing sizes of the elements or components and arranging indents between the them. By using it, you can set paddings and margins.
Example below shows how to implement equal margins between form components.
import React from 'react';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
const Demo = () => (
<div>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
</div>
);
export default Demo;import React from 'react';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
const Demo = () => (
<div>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
</div>
);
export default Demo;Example below shows how a component creates indents using dynamically generated classes. Thus, you can get this class generated into the component by passing it to tag.
import React from 'react';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
const Demo = () => (
<div>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
</div>
);
export default Demo;import React from 'react';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
const Demo = () => (
<div>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
<Box tag={Button} mr={2}>
Button
</Box>
</div>
);
export default Demo;Flex
Flex is a component for aligning the components. It is a wrapper over CSS-flex.
Example below shows how Flex component takes all properties of a Box component.
import React from 'react';
import { Box, Flex } from 'intergalactic/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;import React from 'react';
import { Box, Flex } from 'intergalactic/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 add a cognitive load to itself. It is wrong way.
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 the indents. It is a main denominator of our design system (scaleIndent property in API, --scale-indent in tokens), see 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 |