Spacing System
Fluid, responsive spacing that adapts to viewport size
What is Fluid Spacing?
BreakColorUI's spacing system uses CSS clamp() to create responsive spacing values that scale smoothly between minimum and maximum values based on viewport width. Perfect spacing on every device without breakpoints.
Why Fluid Spacing?
- • Automatically adapts to any screen size
- • Two spacing scales: Components & Sections
- • No complex breakpoint management
- • Consistent visual rhythm across devices
- • Uses modern CSS clamp() for precision
Two Spacing Scales
BreakColorUI provides two distinct spacing systems for different purposes:
Component Spacing
Smaller, precise spacing for UI elements like buttons, cards, forms, and flex/grid gaps
Section Spacing
Larger, page-level spacing for sections, hero areas, and content blocks
Component vs Section Spacing
Component Spacing (--hcl-space-comp-*)
Use for: Button padding, card internal spacing, form fields, flex/grid gaps, small UI elements
Section Spacing (--hcl-space-sec-*)
Use for: Section padding (top/bottom), content block spacing, hero sections, large layout spacing
7-Step Spacing Scale
Both component and section spacing use the same 7-step scale from extra-small to triple-extra-large:
Scale: XS → S → M → L → XL → XXL → 3XL
Each step uses fluid clamp() to scale smoothly between minimum and maximum values as the viewport changes.
Section Multiplier (1.5x)
Section spacing includes an optional multiplier (default: 1.5x) applied to all values. This ensures sections always have noticeably more breathing room than components, creating clear visual hierarchy between micro (component) and macro (section) spacing.
Configuring Spacing
Set up your spacing system in the dashboard:
Configuration Steps
- 1. Open Spacing Tab - Navigate to your project's Spacing section
- 2. Configure Component spacing - Set min/max values for each step (XS to 3XL)
- 3. Configure Section spacing - Set min/max values (typically 1.5-2x larger than components)
- 4. Adjust viewport range - Customize if needed (default: 320px to 1440px)
- 5. Set section multiplier - Fine-tune the ratio (default: 1.5x)
- 6. Save - Click save to generate CSS variables
Using Spacing Variables
Once configured, your spacing system becomes available as CSS variables:
/* Component Spacing (fluid clamp) */
--hcl-space-comp-xs
--hcl-space-comp-s
--hcl-space-comp-m
--hcl-space-comp-l
--hcl-space-comp-xl
--hcl-space-comp-xxl
--hcl-space-comp-3xl
/* Section Spacing (fluid clamp with multiplier) */
--hcl-space-sec-xs
--hcl-space-sec-s
--hcl-space-sec-m
--hcl-space-sec-l
--hcl-space-sec-xl
--hcl-space-sec-xxl
--hcl-space-sec-3xl
/* Component spacing - for UI elements */
.button {
padding: var(--hcl-space-comp-s) var(--hcl-space-comp-m);
gap: var(--hcl-space-comp-xs);
}
.card {
padding: var(--hcl-space-comp-l);
gap: var(--hcl-space-comp-m);
}
.form-field {
margin-bottom: var(--hcl-space-comp-m);
}
/* Section spacing - for page layout */
.section {
padding-top: var(--hcl-space-sec-xl);
padding-bottom: var(--hcl-space-sec-xl);
}
.hero {
padding-top: var(--hcl-space-sec-3xl);
padding-bottom: var(--hcl-space-sec-3xl);
}
.content-block {
margin-bottom: var(--hcl-space-sec-l);
}
Best Practices
Follow these guidelines for effective spacing:
Component Spacing for UI
Use for buttons, cards, forms, and UI element internal spacing
Section Spacing for Layout
Use for page sections, hero areas, and large content blocks
Maintain Hierarchy
Section spacing should always be visibly larger to create clear separation
Spacing hierarchy
Think of spacing as having two levels: micro (components) and macro (sections). This creates a natural rhythm where small UI elements feel tight and organized, while page sections feel spacious and easy to scan.
Real-World Example
Here's how component and section spacing work together in a complete page:
/* Hero section - large section spacing */
.hero {
padding-top: var(--hcl-space-sec-3xl); /* Lots of breathing room */
padding-bottom: var(--hcl-space-sec-3xl);
}
.hero-content {
gap: var(--hcl-space-comp-l); /* Components use smaller spacing */
}
/* Features section */
.features-section {
padding-top: var(--hcl-space-sec-xl);
padding-bottom: var(--hcl-space-sec-xl);
gap: var(--hcl-space-sec-m); /* Gap between section items */
}
/* Feature card - component spacing */
.feature-card {
padding: var(--hcl-space-comp-l); /* Internal padding */
gap: var(--hcl-space-comp-m); /* Gap between card elements */
}
.feature-card-icon {
margin-bottom: var(--hcl-space-comp-s);
}
/* CTA section */
.cta-section {
padding-top: var(--hcl-space-sec-xxl);
padding-bottom: var(--hcl-space-sec-xxl);
}
.cta-button {
padding: var(--hcl-space-comp-m) var(--hcl-space-comp-xl);
gap: var(--hcl-space-comp-s);
}
Visual rhythm in action
Notice how section spacing (3xl, xl, xxl) creates macro rhythm between page areas, while component spacing (l, m, s) creates micro rhythm within UI elements. This two-tier system creates professional, balanced layouts automatically.
Next Steps
With spacing configured, you're ready to set up your theme system:
Continue to Theme
Head to Theme Configuration to configure page layout, responsive breakpoints, and border radius presets.