Reactium
Search
⌃K

Spacing

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

Notation

The class modifiers are named using the following format:
[property][side]-[breakpoint]-[size]
Modifier
Values
property
m: margin
p: padding
side
t: top r: right b: bottom l: left x: left and right y: top and bottom
breakpoint
xs, sm, md, lg, xl
size
0, 2, 4, 6, 8, 10, 12, 14, 16,
18, 20, 24, 32, 40, 48, 56,
64, 72, 80

Usage

Removing the breakpoint modifier will apply the size to all breakpoints
<div className='mt-20'>
20 pixel top padding at all breakpoints
</div>
Removing the side modifier will apply the size to all sides
<div className='p-md-20'>
20 pixel padding on all sides at the md breakpoint
</div>

Customizing

You can modify the sizes by overriding the default sass variables in your projects styles
Assign overrides before the reactium-ui.scss file has been imported into your style.scss file
// Spacing Sizes
$sizing: (0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 32, 40, 48, 56, 64, 72, 80);