Space

Margins

Define margins on the fly with these utility classes that use our space variables.

Available Sizes:

None, Xs, Sm, Md, Lg

Available Positions:

Right, Left, Top, Bottom
Ends: Applies margins to the top and bottom
Sides: Applies margins to the right and left of an element
None: Applies zero margin

Class Structure:

u-space[Size][Position]

Classes:

u-spaceSidesAuto (centers element)
u-spaceNone
u-spaceXs
u-spaceSm
u-spaceMd
u-spaceLg

u-spaceTopNone
u-spaceTopXs
u-spaceTopSm
u-spaceTopMd
u-spaceTopLg

and so on...

Padding

Define padding on the fly with these utility classes that use our space variables.

Available Sizes:

None, Xs, Sm, Md, Lg

Available Positions:

Right, Left, Top, Bottom
Ends: Applies padding to the top and bottom
Sides: Applies padding to the right and left of an element
None: Applies zero margin

Class Structure:

u-pad[Size][Position]

Classes:

u-padNone
u-padXs
u-padSm
u-padMd
u-padLg

u-padTopNone
u-padTopXs
u-padTopSm
u-padTopMd
u-padTopLg

and so on...

Responsive

Use breakpoints to specifiy min screen widths for margin and padding properties.

Breakpoints: xs, sm, md and lg

eg: u-xs-spaceTop, u-sm-padBottomNone, u-lg-spaceMd