Spacing

Values

A value of "auto" can be used on the x-axis for margin to horizontally a block element inside its container. "auto" can also be applied to margin-left or margin-right to align a block element to one side of its container.

React

In React, spacing is implemented as a prop that can be placed onto any component:

Responsive

You can provide the spacing props responsively. Here are some valid examples:

• paddingX={{ xs: 1, sm: 3, md: 5, lg: 7 }}

• m={{ xs: 2, lg: 7 }}

Deprecated

• "0" [deprecated]. Use 0 instead (the string value is deprecated, new value is a number)

• "s" [deprecated]. Use 1 instead

• "m" [deprecated]. Use 4 instead

• "l" [deprecated]. Use 6 instead

• "xl" [deprecated]. Use 9 instead

Examples

• <Box padding={4} /> - a Box with size-4 (16px) padding on all 4 sides

• <Box p={4} /> - same as the last, but using the short-hand notation

• <Box marginX="auto" /> - a Box with "auto" margin on the left and right (useful for centering!)

• <SomeComp margin={0} /> - zeros-out any existing margin on SomeComp

• <Box marginX={10) /> - invalid! Sizes 8-12 are only allowed on margin, padding, and vertical spacing types like marginY, paddingBottom, marginTop, etc.

• <SomeComp padding={0} /> - invalid! Size 0 is only allowed on margin-based spacing types

Vanilla

In the vanilla API, Spacing is provided via CSS classes that follow the format {property}{sides}-{size} where:

• property is either m for margin, or p for padding.

• sides is empty for all four sides, b for bottom, t for top, y for y-axis (both top and bottom), l for left, r for right, and x for x-axis (both left and right).

• size is a size number between 1 and 12; see table below.

  • For margin only, there is also a size 0, which will cancel out that margin and set it to zero. This can be useful if a component already has margin that you don't want.

  • Sizes 8 through 13 are only available for top and bottom. (If you need more horizontal spacing than size 7, use the layout grid instead.)

For instance, to put margin size 5 on the top and bottom (y-axis) of an element, use class my-5.

Responsive

You can extend the above format for providing class names that are responsive. The format is {property}{sides}-{size}-{screenSize}

screenSize can be one of the following values: sm, md & lg. xs is the default configuration and so it's not required in the screenSize.

Examples include: mt-4-sm, p-10-lg, etc.

Developer Guidelines

• All else equal, use margin instead of padding.

• All else equal, use bottom spacing instead of top spacing.

• You can use more than one of these spacing properties per element, but don't use two classes that set the same property on the same side. For instance, my={3} mt={5} is a bad idea, because they are both trying to set the top margin. But mt={3} p={5} is fine, as is my={3} mx={5}.

• In many cases, you can put any of these classes straight onto a Visage component. However, some components will have their own padding and margin, and so adding the spacing classes can cause the component to deform or behave incorrectly. It is always safer to wrap the component in a wrapper element, or wrap the component's content with a wrapper element, and put the spacing class on the wrapper instead.

  Exception: you cannot put any of these spacing classes onto grid elements; instead, put the spacing on a container inside the grid element.