Spacing
Master visual balance with Luxa CSS's fluid spacing system. Perfectly balanced for any screen size.
On this page
Luxa CSS employs a fluid spacing system that dynamically adjusts to viewport width, ensuring visual balance across all screen sizes.
Fluid spacing scale
The spacing system uses the CSS clamp() function to create a fluid scale:
| Variable | Min (px) | Calculation | Max (px) |
|---|---|---|---|
--space-01 | 12 | 11.33px + 0.2083vw | 14 |
--space-02 | 18 | 17px + 0.3125vw | 21 |
--space-03 | 24 | 22.67px + 0.4167vw | 28 |
--space-04 | 36 | 34px + 0.625vw | 42 |
--space-05 | 48 | 45.33px + 0.8333vw | 56 |
--space-06 | 72 | 68px + 1.25vw | 84 |
Usage
- Use these spacing variables for margins, padding, and other layout properties;
- Combine with the Typography system for consistent scaling throughout your design.
Benefits
- Eliminates the need for multiple breakpoints;
- Ensures consistent visual rhythm across devices;
- Simplifies responsive design implementation.
By leveraging this fluid spacing system, you can create layouts that automatically adjust to various screen sizes while maintaining visual balance and proportions.