Spacings

Built-in scale

Shopstory comes with a built-in battle-tested spacings scale:

0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160

It provides consistency, flexibility and doesn't overload users with too many options.

Custom spacings

However, if you want to add your own custom spacings, you can do this by adding space property in shopstory/config.ts:

export const shopstoryConfig = {
  //...
  space: [
    {
      id: 'my_custom_space',
      label: 'My Custom Space',
      value: 30 // 30px custom space
    },
  ],
}

Responsive spacing tokens

Sometimes you might want to define responsive tokens. For example, if you have a unified system of spacings between content blocks that might be large on desktop and smaller on mobile you can easily achieve this with a single responsive token:

export const shopstoryConfig = {
  //...
  space: [
    {
      id: 'my_responsive_token',
      label: 'Responsive token',
      value: {
        "@xs": 80,
        "@lg": 100,
        "@xl": 300,
      },
    },
  ],
}

What about the resolution ranges that are not defined? Like @md? They always inherit value from the higher resolutions. It means that @md will have value 100 inherited from @lg. If higher resolution is not defined (like for @2xl) then it takes a value from the closest lower resolution (@xl in the example).

Allowed units

Spacing values in Shopstory can be defined in px or vw.