Skip to content

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.

tsx
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.

tsx
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 nameValue in pxValue in remValue as a multiple of 4
--spacing-05x20.1250,5
--spacing-1x40.251
--spacing-2x80.52
--spacing-3x120.753
--spacing-4x1614
--spacing-5x201.255
--spacing-6x241.56
--spacing-8x3228
--spacing-10x402.510
--spacing-14x563.514
--spacing-20x80520
--spacing-24x96624
--spacing-30x1207.530

Released under the MIT License.

Released under the MIT License.