đź“Ź Spacing Utilities
Consistent spacing classes for margins and padding across the design system
Overview
The spacing utility classes provide a consistent way to apply margins and padding across your components. These classes use a predefined scale of spacing values that maintain visual consistency throughout your application.
Key Features
- âś… Consistent spacing scale (0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 88, 96)
- âś… Margin and padding utilities
- âś… Side-specific controls (top, bottom, left, right, x, y)
- âś… Easy-to-remember naming convention
- âś… Responsive and flexible
Property Types
There are two main property types for spacing utilities:
| Property | Description | Class Prefix |
|---|---|---|
| Margin | Adds space outside an element | ey-margin-- |
| Padding | Adds space inside an element | ey-padding-- |
Examples
<!-- Margin on all sides -->
<div class="ey-margin--40">margin 40 all</div>
<!-- Padding on all sides -->
<div class="ey-padding--40">padding 40 all</div>
Sides
Control which sides of an element receive spacing:
| Side Modifier | Description | Example Class |
|---|---|---|
__top-- |
Top side only | .ey-margin__top--32 |
__bottom-- |
Bottom side only | .ey-margin__bottom--32 |
__left-- |
Left side only | .ey-margin__left--32 |
__right-- |
Right side only | .ey-margin__right--32 |
__x-- |
Left and right | .ey-margin__x--32 |
__y-- |
Top and bottom | .ey-margin__y--32 |
Side-Specific Examples
<!-- Specific sides -->
<div class="ey-margin__top--32">Margin top 32px</div>
<div class="ey-margin__x--16">Margin left and right 16px</div>
<div class="ey-padding__y--24">Padding top and bottom 24px</div>
Spacing Scale
All spacing values follow this consistent scale:
00px
44px
88px
1212px
1616px
2424px
3232px
4040px
4848px
6464px
8080px
8888px
9696px
Rationale
This spacing scale is based on a base unit of 4px, which allows for:
- Harmonious visual rhythm
- Consistency across the design system
- Easy calculations and adjustments
- Better alignment with common screen sizes
- Flexibility for various layout needs
Margin Classes
Apply margins to create space around elements:
All Sides
<div class="ey-margin--40">margin 40 all</div>
Individual Sides
<div class="ey-margin__top--32 ey-margin__right--16 ey-margin__bottom--16 ey-margin__left--16">
margin top 32px, margin right 16px, margin bottom 16px, margin left 16px
</div>
Axis-Based
<!-- Horizontal spacing -->
<div class="ey-margin__x--16">margin left and right 16px</div>
<!-- Vertical spacing -->
<div class="ey-margin__y--24">margin top and bottom 24px</div>
Padding Classes
Apply padding to create space inside elements:
All Sides
<div class="ey-padding--40">padding 40 all</div>
Individual Sides
<div class="ey-padding__top--32 ey-padding__right--16 ey-padding__bottom--16 ey-padding__left--16">
padding top 32px, padding right 16px, padding bottom 16px, padding left 16px
</div>
Axis-Based
<!-- Horizontal padding -->
<div class="ey-padding__x--16">padding left and right 16px</div>
<!-- Vertical padding -->
<div class="ey-padding__y--24">padding top and bottom 24px</div>
Common Usage Examples
Example 1: Card Component
<div class="ey-padding--24">
<h3>Card Title</h3>
<p class="ey-margin__top--12">Card content goes here</p>
</div>
Example 2: List Items
<ul>
<li class="ey-padding__y--12 ey-padding__x--16 ey-margin__bottom--8">Item 1</li>
<li class="ey-padding__y--12 ey-padding__x--16 ey-margin__bottom--8">Item 2</li>
<li class="ey-padding__y--12 ey-padding__x--16">Item 3</li>
</ul>
Example 3: Button Groups
<div class="ey-margin__x--8">
<button class="ey-margin__right--8">Cancel</button>
<button>Submit</button>
</div>
Example 4: Section Layout
<section class="ey-padding--40 ey-margin__bottom--32">
<h2 class="ey-margin__bottom--16">Section Title</h2>
<p class="ey-margin__bottom--24">Section content...</p>
</section>