Spacing

• Spacing scale
• Customize

With CodyFrame, you can create a spacing scale to maintain consistent margins, paddings, and gaps throughout your project.

Spacing scale #

CodyFrame features a default, fluid spacing scale:

:root {
  /* --space-{value}: clamp({min-value}, {dynamic-value}, {max-value}); */
  --space-4xs: 0.125rem;
  /* 2px */
  --space-3xs: 0.25rem;
  /* 4px */
  --space-2xs: 0.5rem;
  /* 8px */
  --space-xs: 0.75rem;
  /* 12px */
  --space-sm: 1rem;
  /* 16px */
  --space-md: clamp(1.5rem, calc(1.125rem + 0.78125vw), 1.75rem);
  /* 24px → 28px */
  --space-lg: clamp(2.25rem, calc(1.125rem + 2.34375vw), 3rem);
  /* 36px → 48px */
  --space-xl: clamp(3.5rem, calc(1.25rem + 4.6875vw), 5rem);
  /* 56px → 80px */
  --space-2xl: clamp(5.75rem, calc(2.375rem + 7.03125vw), 8rem);
  /* 92px → 128px */
  --space-3xl: clamp(9.25rem, calc(4.75rem + 9.375vw), 12.25rem);
  /* 148px → 196px */
  --space-4xl: clamp(15rem, calc(7.5rem + 15.625vw), 20rem);
  /* 240px → 320px */
}

The clamp function is used to set a minimum size, a preferred size that automatically changes with the viewport width, and a maximum size.

Don't worry about the calculations! Customizing the space scale is super simple using the $spacing map ↓.

In CSS, you should use a spacing variable anytime you set a spacing rule:

.header {
  padding: var(--space-sm);
  text-align: center;
}

.header__inner {
  margin-bottom: var(--space-md);
}

.header__nav {
  display: flex;
  gap: var(--space-xs);
}

The spacing variables affect all the 'spacing' utility classes (e.g., margin and padding):

<div class="margin-y-md padding-sm padding-md@lg">
  <!-- ... -->
</div>

How to customize the spacing scale #

You can edit the spacing values by passing the $spacing map to the config module in your style.scss file:

// option 1: create a static spacing scale
@use 'config' as * with (
  $spacing: (
    '4xs': '0.125rem',
    '3xs': '0.25rem',
    '2xs': '0.5rem',
    'xs': '0.75rem',
    'sm': '1rem',
    'md': '1.75rem',
    'lg': '3rem',
    'xl': '5rem',
    '2xl': '8rem',
    '3xl': '12.25rem',
    '4xl': '20rem'
  )
);

// option 2: edit the spacing variables at a specific breakpoint
// @all → initial spacing scale
// @md → update the scale at the medium breakpoint
@use 'config' as * with (
  $spacing: (
    '@all': (
      '4xs': '0.125rem',
      '3xs': '0.25rem',
      '2xs': '0.5rem',
      'xs': '0.75rem',
      'sm': '1rem',
      'md': '1.5rem',
      'lg': '2.25rem',
      'xl': '3.5rem',
      '2xl': '5.75rem',
      '3xl': '9.25rem',
      '4xl': '15rem'
    ),
    '@md': (
      '4xs': '0.125rem',
      '3xs': '0.25rem',
      '2xs': '0.5rem',
      'xs': '0.75rem',
      'sm': '1rem',
      'md': '1.75rem',
      'lg': '3rem',
      'xl': '5rem',
      '2xl': '8rem',
      '3xl': '12.25rem',
      '4xl': '20rem'
    )
  )
);

// option 3: create a fluid spacing scale
// @sm → minimum scale values
// between @sm and @lg → the scale values are automatically updated
// @lg → maximum scale values
// important: use the same unit for spacing and breakpoints
@use 'config' as * with (
  $spacing: (
    'fluid': (
      '@sm': (
        '4xs': '0.125rem',
        '3xs': '0.25rem',
        '2xs': '0.5rem',
        'xs': '0.75rem',
        'sm': '1rem',
        'md': '1.5rem',
        'lg': '2.25rem',
        'xl': '3.5rem',
        '2xl': '5.75rem',
        '3xl': '9.25rem',
        '4xl': '15rem'
      ),
      '@lg': (
        '4xs': '0.125rem',
        '3xs': '0.25rem',
        '2xs': '0.5rem',
        'xs': '0.75rem',
        'sm': '1rem',
        'md': '1.75rem',
        'lg': '3rem',
        'xl': '5rem',
        '2xl': '8rem',
        '3xl': '12.25rem',
        '4xl': '20rem'
      )
    )
  )
);