@cryptic-css/plugin-gutter

Adds support to use predefined gutter values. This important in design systems for spacing consistency.

Supported properties#

  • padding (p)
  • padding-top (pT)
  • padding-right (pR)
  • padding-bottom (pB)
  • padding-left (pL)
  • margin (m)
  • margin-top (mT)
  • margin-right (mR)
  • margin-bottom (mB)
  • margin-left (mL)
  • grid-gap (gg)
  • grid-row-gap (grg)
  • grid-column-gap (gcg)

Usage#

import ccss from '@cryptic-css/core'
import pluginGutter from '@cryptic-css/plugin-gutter'
ccss.use(pluginGutter)
Live Editor
Result
padding: 10px;
margin-left: 5px;
margin: 5px 0 10px 15px;

Opt-out#

Sometimes you still want to use the supported props without gutter values. For such cases simply pass your value as string.

Live Editor
Result
padding-top: 50px;
margin-top: 10px;

Configuration#

The plugin introduces the option key gutter. The default value is 5. It defines the size of 1 gutter (uses the defined applyUnit core option).

The plugin is included in the ccss package pre-configured. Skip this step if you don't need custom configuration and/or CCSS instance.

import ccss from '@cryptic-css/core'
import pluginGutter from '@cryptic-css/plugin-gutter'
ccss.setOptions({
gutter: 10
})
ccss({
margin: 1 // margin: 10rem;
})
Last updated on by Pablo Henrique