Relume
Log in

Community forum for knowledge and support

Updated last year

Relume's Spacing Conventions: Exploring the "xxs-md-lg" Approach

At a glance

The community member is questioning the Relume team's decision to use a naming convention of "xxs-md-lg" for their padding and margins spacing, instead of a clear numerical naming convention. They feel the "xxs" and "xxl" naming seems vague and unnecessary, and that using clear numbers would be easier to work with, especially when migrating or duplicating designs from Figma.

Another community member provides a clarification, explaining that this is a "Client-First" thing more than a Relume-specific decision, and that it's a common practice in most naming systems. The reason for this is responsiveness, where the same utility (e.g. "padding-section-large") may have different values (e.g. 6rem on desktop, 4rem on mobile).

The original community member thanks the other for the clarification.

rroman brown
·

Out of curiosity, why did the Relume team decide to title their padding and margins spacing using "xxs-md-lg"? I don't think that this naming convention is as efficient as having clear numerical naming convention. Why not just stick to the numerical naming convention? I understand the REM implementations, but still, I feel like using xxs and xxl seems vague and unnecessary. Is this just me? I feel like using clear NUMBERS are much easier to work with especially when migrating or duplicating designs from Figma rather than constanly having to go back and check what the "tiny or xxxxxxl" is.

J
r
2 comments
JJon Saxton

This is a Client-First thing more than a Relume thing. But it's common in most naming systems.

One good reason is responsiveness. Padding-section-large may be 6rem on desktop, but 4rem on mobile.

Same goes for similar utility naming for text sizes.

rroman brown

Thank you for the clarification!

Add a reply
Sign up and join the conversation on Slack