Spacing

Customizing the default spacing and sizing scale for your project.

Componentry's default spacing scale mirrors the spacing scale used by Tailwind. Out of the box this provides a wide set of values for creating cohesive layouts.

Arbitrary values

Spacing props also accept arbitrary values. Any value not found in your theme.spacing defintion will be passed through as a style.

Spacing ratio

When using arbitrary values for spacing it's common to use a ratio to help simplify consistent spacing. Componentry provides a theme.spacingRatio definition to support this. It's expected to accept any number and return a valid CSS string value.

// theme definition
module.exports.theme = {
  // Convert any arbitrary spacing value to an 8px grid
  spacingRatio: (input) => (input * 8) + 'px'
}

// 7 isn't part of the spacing scale, will be converted to 56px
<Block pt={7}>
  grid support
</Block>