@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)
column-gap (cg)
gap (gp)
row-gap (rg)
flex-gap (fgp)

Usage#

import ccss from '@cryptic-css/core'
import pluginGutter from '@cryptic-css/plugin-gutter'

ccss.use(pluginGutter)

Live Editor

ccss({
    p: 2,
    marginLeft: true,
    margin: [1, 0, 2, 3]
})

ccss({
    p: 2,
    marginLeft: true,
    margin: [1, 0, 2, 3]
})

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

ccss({
    paddingTop: 10,
    marginTop: '10'
})

ccss({
    paddingTop: 10,
    marginTop: '10'
})

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;
})