Spacing#

Bumbag uses two types of scales for its spacing system: the 8px major scale and the 4px minor scale.

You can either use the scales directly, or use a pre-defined set of scales (e.g. sm, md, lg).

Using the scales directly#

The 8px major scale (recommended)#

The 8px major scale is most commonly used for positional spacing. Like margins & paddings between components on a layout.

Bumbag also exports a utility function called space to help you with calculating the scale values.

Note: It is recommended to try stick to the 8px scale unless you need more precision. In that case, use the 4px minor scale.

Usage via style props#

<FieldStack spacing="major-1">
  <FieldStack orientation="horizontal" spacing="major-2">
    <InputField label="First name" />
    <InputField label="Last name" />
  </FieldStack>
  <Button palette="primary">Save</Button>
</FieldStack>

Usage via themeable components#

With applyTheme

import { Button, applyTheme } from 'bumbag';
const SaveButton = applyTheme(Button, {
  styles: {
    base: {
      marginTop: 'major-2'
    }
  }
});
<SaveButton>Save</SaveButton>

With styled

import { Button, styled, space } from 'bumbag';
const SaveButton = styled(Button)`
  margin-top: ${space(2, 'major')}rem;
`;
<SaveButton>Save</SaveButton>

The 4px minor scale#

The 4px minor scale is most commonly used for precise spacing (margins & paddings) of atomic components (e.g. the inner padding of a checkbox).

Usage via style props#

<Button paddingX="minor-2">Save</Button>

Usage via themeable components#

With applyTheme

import { Button, applyTheme } from 'bumbag';
const SaveButton = applyTheme(Button, {
  styles: {
    base: {
      padding: 'major-2'
    }
  }
});
<SaveButton>Save</SaveButton>

With styled

import { Button, styled, space } from 'bumbag';
const SaveButton = styled(Button)`
  padding: ${space(2, 'major')}rem;
`;
<SaveButton>Save</SaveButton>

Using a pre-defined set#

Bumbag has the ability for you to specify your own pre-defined set of spacings. Pre-defined spacings can be used when you want to restrict the user to a set of sizes.

Bumbag has the following pre-defined attributes set by default:

Usage via style props#

<Button paddingX="xl">Save</Button>

Usage via themeable components#

With applyTheme

import { Button, applyTheme } from 'bumbag';
const SaveButton = applyTheme(Button, {
  styles: {
    base: {
      padding: 'xl'
    }
  }
});
<SaveButton>Save</SaveButton>

With styled

import { Button, styled, space } from 'bumbag';
const SaveButton = styled(Button)`
  padding: ${space('xl')}rem;
`;
<SaveButton>Save</SaveButton>

Theming#

Schema#

{
  spacing: {
    minorUnit: number // default = 4,
    majorUnit: number // default = 8,
    // Plus your own pre-defined set...
    [key: string]: number
    // e.g. sm: space(2, 'major')
  }
}