Spacing
Learn about spacing, and how it is handled in the Base System
1.0 Spacing
Spacing in web development is a hotly debated topic, with each system tackling it differently. Some use individual margin classes, others rely on spacing blocks with empty divs, some utilize deep nested combo-classes and others might use custom classes. There's no one-size-fits-all solution, and developers often have their own preferences.
The Base System uses a wrapper method, utilising flex-gap to provding spacing in a similiar way to Figma and their auto-layout spacing on frames. Learn in detail about the Base System approach to spacing by Reviewing our Spacing Philosophy
Browse the starting utility classes and their properties in the table below. Learn more about how spacing wrappers are used in your layouts through the structure overview page.
2.0 Spacing Classes
2.1 Spacing Vertical
Vertical spacing is the most common type of spacing required, and these simple classes can be added around elements to provide vertical spacing through the flex-gap.
| Class Name | Flex Direction | Flex Gap |
|---|---|---|
Column Tiny | Vertical | 4px |
Column X Small | Vertical | 8px |
Column Small | Vertical | 12px |
Column Regular | Vertical | 16px |
Column Large | Vertical | 24px |
Column X Large | Vertical | 32px |
{Custom} Column | Vertical | X |
If your layout requires additional styles and can't be achieved effectively with the foundation classes, simply duplicate a column class and create a custom (eg. Logo Column Small)
2.2 Spacing Horizontal
These classes can be applied to a div-block that wraps content, and provides spacing between the elements through the flex gap. The values provided below and default and can be adjusted to suit your own needs.
| Name | Flex Direction | Flex Gap |
|---|---|---|
Row Tiny | Horizontal | 4px |
Row X Small | Horizontal | 8px |
Row Small | Horizontal | 12px |
Row Regular | Horizontal | 16px |
Row Large | Horizontal | 24px |
Row X Large | Horizontal | 32px |
Row Space Between | Horizontal Between | 16px |
{Custom} Row | Horizontal | X |
3.0 General Usage
3.1 Element Type
Spacing elements use a Div Block, and are wrapped around elements that require spacing. For example, if you need to space a H1 Heading and Paragraph 16px apart, you can wrap both these elements in a single Div Block with the spacer class Column Regular
3.2 Class Naming
Class naming for spacing follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.
Sections: Default sections use descriptive names based on the top and bottom padding.
Example:
Column Large,Column Regular,Row Small
Custom Sections: Use section as a suffix to the parent category
Example:
Testmonial Column Small,Pricing Feature Row
Last updated
