@dsfr-utils/spacing

Utility CSS classes for DSFR spacing with automatic margin/padding reset on child elements.

Installation

npm install @dsfr-utils/spacing
# or
pnpm add @dsfr-utils/spacing

Usage

Import the CSS in your project:

@import '@dsfr-utils/spacing/dsfr-spacing-utils.css';

Or in JavaScript/TypeScript:

import '@dsfr-utils/spacing/dsfr-spacing-utils.css';

Classes

Gap utilities (for flex/grid containers)

<div class="flex fr-gap-2w">
  <h1>Title</h1>  <!-- margin: 0 (reset) -->
  <p>Content</p>  <!-- margin: 0 (reset) -->
</div>

• fr-gap-{size} - Sets gap and resets child margins
• Responsive: fr-gap-sm-{size}, fr-gap-md-{size}, fr-gap-lg-{size}, fr-gap-xl-{size}

Stack utilities (vertical spacing with margin-top)

<div class="fr-stack-2w">
  <h1>Title</h1>
  <p>Content</p>  <!-- margin-top: 1rem -->
</div>

• fr-stack-{size} - Uses lobotomized owl pattern (* + *)
• Responsive: fr-stack-sm-{size}, fr-stack-md-{size}, etc.

Sizes

Uses DSFR spacing tokens:

| Size | Value | |------|-------| | 0 | 0 | | 0-5v | 0.125rem | | 1v | 0.25rem | | 1-5v | 0.375rem | | 2v / 1w | 0.5rem | | 3v | 0.75rem | | 4v / 2w | 1rem | | 6v / 3w | 1.5rem | | 8v / 4w | 2rem | | ... | ... | | 32v / 16w | 8rem |

Why?

DSFR applies default margins to typography elements (h1, p, etc.). This makes it hard to match exact mockup spacing. These utilities:

1. Apply DSFR spacing tokens
2. Reset child element margins/paddings
3. Give you precise control over layout spacing

License

MIT