Fluid Spacing

BreakMade’s Fluid Spacing System provides 24 responsive spacing variables (–s1 to –s72) plus 8 section spacing variables (–ss-*) that automatically scale between viewport sizes using CSS clamp(). Say goodbye to media queries for spacing - your layouts adapt smoothly across all screen sizes.

How Fluid Spacing Works

Instead of fixed pixel values, BreakMade spacing uses CSS clamp() to create values that:

Have a minimum size (for small screens)
Scale fluidly based on viewport width
Cap at a maximum size (for large screens)

/* Example: --s32 */
clamp(64px, calc(4rem + ((1vw - 3.6px) * 5.9259)), 128px)

This means:

On small screens: 64px
On large screens: 128px
In between: Scales proportionally

Available Spacing Variables

Standard Spacing (–s1 to –s72)

Variable	Min	Max	Common Use
`--s1`	4px	4px	Micro spacing (fixed)
`--s2`	8px	8px	Tight gaps (fixed)
`--s3`	8px	12px	Extra small
`--s4`	10px	16px	Small padding
`--s5`	12px	20px	Small gaps
`--s6`	14px	24px	Element gaps
`--s7`	14px	28px	Medium small
`--s8`	16px	32px	Default spacing
`--s9`	18px	36px	Medium gaps
`--s10`	20px	40px	Component padding
`--s12`	24px	48px	Card padding
`--s14`	28px	56px	Medium padding
`--s16`	32px	64px	Section padding (sm)
`--s20`	40px	80px	Section padding (md)
`--s24`	48px	96px	Section padding (lg)
`--s28`	56px	112px	Large padding
`--s32`	64px	128px	Hero spacing
`--s36`	72px	144px	Major gaps
`--s40`	80px	160px	Major sections
`--s44`	88px	176px	Large gaps
`--s48`	96px	192px	Page sections
`--s56`	112px	224px	Feature sections
`--s64`	128px	256px	Hero sections
`--s72`	144px	288px	Maximum spacing

Section Spacing (–ss-*)

For larger layout spacing:

Variable	Min	Max	Use Case
`--ss-none`	0px	0px	No spacing
`--ss-xxs`	10px	20px	Minimal section gap
`--ss-xs`	20px	40px	Extra small section gap
`--ss-sm`	32px	64px	Small section gap
`--ss-md`	40px	80px	Medium section gap
`--ss-lg`	64px	128px	Large section gap
`--ss-xl`	80px	160px	Extra large section gap
`--ss-xxl`	128px	256px	Maximum section gap

Using Spacing in Breakdance

In Spacing Fields

Most Breakdance spacing fields accept CSS variables:

Click on a padding, margin, or gap field
Enter the variable: var(--s8)
The spacing applies and scales responsively

Examples

Section Padding:

Top: var(--s32)
Bottom: var(--s32)
Left: var(--s8)
Right: var(--s8)

Element Gap:

Gap: var(--s4)

Card Padding:

Padding: var(--s6)

In Custom CSS

.my-section {
  padding: var(--s24) var(--s8);
}

.my-card {
  padding: var(--s6);
  margin-bottom: var(--s4);
}

.my-grid {
  gap: var(--s6);
}

Spacing Scale Logic

The spacing scale follows a logical progression:

Base-4 Foundation

Most values are multiples of 4:

s4 = 4 unit base
s8 = 8 units
s12 = 12 units
s16 = 16 units

Fluid Calculation

Each variable uses this formula:

clamp(minPx, calc(baseRem + ((1vw - 3.6px) * multiplier)), maxPx)

Where:

minPx: Minimum value at smallest viewport
baseRem: Base rem value for calculation
1vw - 3.6px: Viewport-relative adjustment
multiplier: How aggressively it scales
maxPx: Maximum value at largest viewport

Common Patterns

Hero Section

.hero {
  padding-top: var(--s64);
  padding-bottom: var(--s48);
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  margin-bottom: var(--s6);
}

.hero p {
  margin-bottom: var(--s8);
}

Card Grid

.card-grid {
  display: grid;
  gap: var(--s6);
  padding: var(--s8);
}

.card {
  padding: var(--s6);
}

.card-title {
  margin-bottom: var(--s2);
}

.card-content {
  margin-bottom: var(--s4);
}

Content Sections

.content-section {
  padding: var(--s32) var(--s8);
}

.content-section + .content-section {
  padding-top: 0;
}

.section-header {
  margin-bottom: var(--s12);
}

.nav {
  padding: var(--s4) var(--s8);
}

.nav-links {
  gap: var(--s6);
}

.nav-link {
  padding: var(--s2) var(--s4);
}

Responsive Design Without Media Queries

The beauty of fluid spacing is eliminating spacing-related media queries:

Traditional Approach (Avoid)

/* Old way - lots of breakpoints */
.section {
  padding: 24px 16px;
}

@media (min-width: 768px) {
  .section {
    padding: 48px 24px;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 64px 32px;
  }
}

BreakMade Approach (Recommended)

/* New way - one line */
.section {
  padding: var(--s32) var(--s8);
}

The spacing automatically adapts to all viewport sizes!

Choosing the Right Variable

Quick Reference

Need	Variable
Tiny gap	`--s1` or `--s2`
Small padding	`--s4`
Default gap	`--s6` or `--s8`
Component padding	`--s8` or `--s12`
Section padding	`--s24` or `--s32`
Hero spacing	`--s48` or `--s64`

Rule of Thumb

Inline elements: s2-s4
Block elements: s4-s8
Components: s6-s16
Sections: s16-s48
Major sections: s32-s72

Combining with Other Features

With Colors

.feature-card {
  padding: var(--s6);
  background: var(--primary-surface);
  border: 1px solid var(--primary-border);
}

With Typography

Typography presets work great with fluid spacing:

.content h2 {
  margin-top: var(--s12);
  margin-bottom: var(--s4);
}

.content p {
  margin-bottom: var(--s4);
}

Best Practices

Consistency

Use spacing variables consistently:

Pick 4-5 variables for your project
Document your choices
Stick to them throughout

Semantic Usage

Choose variables based on purpose, not just size:

--s8 for default component gaps
--s16 for standard section padding
--s32 for major section breaks

Don’t Over-Complicate

You don’t need to use every variable. A typical project might only use:

--s2, --s4, --s8, --s16, --s32, --s64

Troubleshooting

Variable Not Working

Ensure BreakMade CSS is enabled
Check for typos in variable name
Verify the field accepts CSS variables
Clear browser cache

Spacing Too Large/Small

The fluid system is designed for typical viewport ranges (360px - 1920px). If your design needs differ:

Use custom CSS with your own clamp() values
Or combine variables: calc(var(--s8) + var(--s4))

Breakdance Field Limitations

Some Breakdance fields may not accept CSS variables. In these cases:

Use the Custom CSS panel instead
Apply classes with your spacing

CSS Variables Reference - Complete spacing variable list
Color Palette System - Color system
Design Sets - How spacing integrates with design sets