Spacing Scale

EthioWDS uses a consistent spacing scale based on rem units for predictable layouts.

Spacing Scale

The spacing scale uses multiples of 0.25rem (4px) for consistency:

1 unit = 0.25rem (4px)

2 units = 0.5rem (8px)

3 units = 0.75rem (12px)

4 units = 1rem (16px)

/* Spacing scale in CSS */
  :root {
    --spacing-1: 0.25rem;  /* 4px */
    --spacing-2: 0.5rem;   /* 8px */
    --spacing-3: 0.75rem;  /* 12px */
    --spacing-4: 1rem;     /* 16px */
    --spacing-5: 1.5rem;   /* 24px */
    --spacing-6: 2rem;     /* 32px */
    --spacing-8: 3rem;     /* 48px */
  }

Usage in SCSS

Use the spacing variables in your SCSS files:

// Import EthioWDS
  @use '@abiyub/ethiowds' as *;
  
  .component {
    padding: $spacing-unit; // 1rem
    
    &-compact {
      padding: $spacing-unit * 0.5; // 0.5rem
    }
    
    &-spacious {
      padding: $spacing-unit * 2; // 2rem
    }
  }

Common Spacing Patterns

Section Spacing

3rem spacing between major sections

Component Spacing

1rem spacing between related components

Internal Spacing

1rem internal padding within components

Responsive Spacing

EthioWDS supports responsive spacing for different screen sizes:

// Mobile first approach
  .container {
    padding: 1rem; // Mobile
    
    @media (min-width: 768px) {
      padding: 2rem; // Tablet and desktop
    }
    
    @media (min-width: 1024px) {
      padding: 3rem; // Large desktop
    }
  }