Spacing refers to the totality of margin and padding used to separate elements within a layout. Ferguson.com uses a specific scale and vocabulary in order to accurately articulate spacing concepts across projects and teams.
Scale
Ferguson uses a base-16 geometric progression scale which provides us a limited number of sizing options to choose from. These sizes will not cover all cases, but such moments are uncommon and rarely justify breaking the simple system.
Vocabulary
Ferguson has adopted a vocabulary of 5 key concepts in relation to Space. These are Inset, Inset-squish, Inset-stretch, Stack, and Inline.
| Inset | Inset-squish | Inset-stretch | Stack | Inline |
|---|---|---|---|---|
Inset spacing is used when all 4 padding sides of an element use equal spacing.
| Inset-squish spacing is used when the top and bottom padding is less than the left and right padding.
| Inset-stretch spacing is used when the top and bottom padding is greater than the left and right padding.
| Stack spacing refers to the vertical spacing between elements, usually applied as margin-bottom.
| Inline spacing refers to the horizontal spacing between elements.
|
