Layout ~ Spacing
image
Precise and consistent spacing

White space is the most important design element, yet the average CSS file is full of one-off pixel pushing. Silva uses a step system for padding and margins in any direction, or all directions. Across breakpoints or per breakpoint. Declare the amount of steps and their values once, and use them anywhere.

Padding

To create space inside an element, use any of the predefined padding values. This scale of numbers can be used in any direction.

All directions, across breakpoints:

{classprefix}_padding--{a|b|c|d|e|f|g|h|i}

All directions, per breakpoint:

{classprefix}_padding--{a|b|c|d|e|f|g|h|i}@{breakpoint}

One direction, per breakpoint:

{classprefix}_padding-{top|bottom|left|right}--{a|b|c|d|e|f|g|h|i}@{breakpoint}

a b c d e f g h i
Margin

To create space outside an element, use any of the predefined margin values. This scale of numbers can be used in any direction.

All directions, across breakpoints:

{classprefix}_margin--{a|b|c|d|e|f|g|h|i}

All directions, per breakpoint:

{classprefix}_margin--{a|b|c|d|e|f|g|h|i}@{breakpoint}

One direction, per breakpoint:

{classprefix}_margin-{top|bottom|left|right}--{a|b|c|d|e|f|g|h|i}@{breakpoint}

a b c d e f g h i