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;

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;

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;

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