Spacing
Control margin and padding using these utilities.
Classes are based on a scale system (similar to Tailwind).
Responsive variants are supported with -sm, -md, -lg suffixes.
Responsive Usage: Classes are mobile-first. The default applies to all screens (xs).
For larger screens use
-sm-, -md-, -lg- suffixes.
Scale Mapping
| Scale | Rem | Pixels |
|---|---|---|
| 0 | 0 | 0px |
| 1 | 0.25 | 4px |
| 2 | 0.5 | 8px |
| 3 | 0.75 | 12px |
| 4 | 1 | 16px |
| 5 | 1.25 | 20px |
| 6 | 1.5 | 24px |
| 7 | 1.75 | 28px |
| 8 | 2 | 32px |
| 9 | 2.25 | 36px |
| 10 | 2.5 | 40px |
| 11 | 2.75 | 44px |
| 12 | 3 | 48px |
Margin Classes
| Class | Description |
|---|---|
.fo-m-3 | Margin 0.75 Rem (12px all sides) |
.fo-mt-4 | Margin top 1 Rem (16px) |
.fo-mr-4 | Margin right 1 Rem (16px) |
.fo-mt-7 | Margin top 1.75 Rem (28px) |
.fo-mb-4 | Margin bottom 1 Rem (16px) |
.fo-ml-4 | Margin left 1 Rem (16px) |
.fo-m-8 | Margin 2 Rem (32px all sides) |
.fo-ml-10 | Margin left 2.5 Rem (40px) |
.fo-mr-5 | Margin right 1.25 Rem (20px) |
.fo-mx-5 | Horizontal margin (left/right) 1.25 Rem (20px) |
.fo-my-5 | Vertical margin (top/bottom) 1.25 Rem (20px) |
.fo-mt-6 | Margin top 1.5 Rem (24px) |
.fo-m-9 | Margin 2.25 Rem (36px all sides) |
Padding Classes
| Class | Description |
|---|---|
.fo-p-3 | Padding 0.75 Rem (12px all sides) |
.fo-pt-4 | Padding top 1 Rem (16px) |
.fo-pr-4 | Padding right 1 Rem (16px) |
.fo-pt-7 | Padding top 1.75 Rem (28px) |
.fo-pb-4 | Padding bottom 1 Rem (16px) |
.fo-pl-4 | Padding left 1 Rem (16px) |
.fo-p-8 | Padding 2 Rem (32px all sides) |
.fo-pl-10 | Padding left 2.5 Rem (40px) |
.fo-pr-5 | Padding right 1.25 Rem (20px) |
.fo-px-5 | Horizontal padding (left/right) 1.25 Rem (20px) |
.fo-py-5 | Vertical padding (top/bottom) 1.25 Rem (20px) |
.fo-pt-6 | Padding top 1.5 Rem (24px) |
.fo-p-9 | Padding 2.25 Rem (36px all sides) |
Responsive Usage
Add breakpoint suffix (-sm, -md, -lg)
to apply spacing from that breakpoint and up.
.fo-my-md-3→ margin-top & margin-bottom 0.75 Rem (12px) on medium screens and up.fo-px-lg-5→ padding-left & padding-right 1.25 Rem (20px) on large screens and up
Examples