Spacing System

This guide explains the spacing system in LamaPress, including responsive spacing utilities and grid-based spacing.

Table of Contents

• Overview
• Spacing Configuration
  • Custom Spacing
  • Section Spacing
• Using Spacing
  • Responsive Spacing
  • Grid-Based Spacing
  • Section Spacing
• Spacing Utilities
  • Margin Utilities
  • Padding Utilities
• CSS Variables
• Best Practices
  • 1. Use Responsive Spacing
  • 2. Section Spacing
  • 3. Grid-Based Spacing
• Related Documentation

---

Overview

LamaPress uses a responsive spacing system that scales between mobile and desktop using CSS clamp(). Spacing utilities are available for margins, padding, and section spacing.

Spacing Configuration

Spacing is configured in tailwind/config/spacing.js:

export const customSpacing = {
  spacing: {
    xs: { min: 8, max: 12 },
    sm: { min: 12, max: 16 },
    md: { min: 16, max: 24 },
    lg: { min: 24, max: 32 },
    xl: { min: 32, max: 48 },
    '2xl': { min: 48, max: 64 },
  },
  section: {
    xs: { min: 24, max: 60 },
    sm: { min: 32, max: 80 },
    md: { min: 48, max: 120 },
    lg: { min: 64, max: 160 },
    xl: { min: 96, max: 240 },
  },
}

Custom Spacing

Standard spacing utilities (spacing-xs through spacing-2xl) scale from mobile (min) to desktop (max).

Section Spacing

Section spacing utilities (section-xs through section-xl) are larger and used for section-level spacing.

Using Spacing

Responsive Spacing

Spacing utilities automatically scale between mobile and desktop:

<div class="mb-xs">Small margin bottom</div>
<div class="mb-sm">Small margin bottom</div>
<div class="mb-md">Medium margin bottom</div>
<div class="mb-lg">Large margin bottom</div>
<div class="mb-xl">Extra large margin bottom</div>
<div class="mb-2xl">2X large margin bottom</div>

Available sizes:

• xs - 8px → 12px
• sm - 12px → 16px
• md - 16px → 24px
• lg - 24px → 32px
• xl - 32px → 48px
• 2xl - 48px → 64px

Grid-Based Spacing

Use grid-based spacing for column-aligned spacing:

<div class="mb-ll-1/12">Margin (1 column width)</div>
<div class="mb-ll-2/12">Margin (2 columns width)</div>
<div class="mb-ll-3/12">Margin (3 columns width)</div>

Format: {property}-ll-{columns}/{total-columns}

Examples:

• mb-ll-1/12 - Margin bottom (1 column on desktop)
• p-ll-2/6 - Padding (2 columns on mobile)
• mt-ll-3/12 - Margin top (3 columns on desktop)

Section Spacing

Use section spacing for section-level spacing:

<section class="py-section-xs">Small section padding</section>
<section class="py-section-sm">Small section padding</section>
<section class="py-section-md">Medium section padding</section>
<section class="py-section-lg">Large section padding</section>
<section class="py-section-xl">Extra large section padding</section>

Available sizes:

• section-xs - 24px → 60px
• section-sm - 32px → 80px
• section-md - 48px → 120px
• section-lg - 64px → 160px
• section-xl - 96px → 240px

Spacing Utilities

Margin Utilities

Use margin utilities for element spacing:

<!-- All sides -->
<div class="m-xs">Margin all sides</div>

<!-- Individual sides -->
<div class="mt-md">Margin top</div>
<div class="mr-md">Margin right</div>
<div class="mb-md">Margin bottom</div>
<div class="ml-md">Margin left</div>

<!-- Horizontal/Vertical -->
<div class="mx-lg">Margin horizontal</div>
<div class="my-lg">Margin vertical</div>

Padding Utilities

Use padding utilities for internal spacing:

<!-- All sides -->
<div class="p-xs">Padding all sides</div>

<!-- Individual sides -->
<div class="pt-md">Padding top</div>
<div class="pr-md">Padding right</div>
<div class="pb-md">Padding bottom</div>
<div class="pl-md">Padding left</div>

<!-- Horizontal/Vertical -->
<div class="px-lg">Padding horizontal</div>
<div class="py-lg">Padding vertical</div>

CSS Variables

Spacing uses CSS custom properties:

--spacing-xs: clamp(0.5rem, 0.83vw, 0.75rem);
--spacing-sm: clamp(0.75rem, 1.11vw, 1rem);
--spacing-md: clamp(1rem, 1.67vw, 1.5rem);
/* ... */
--section-xs: clamp(1.5rem, 4.17vw, 3.75rem);
--section-sm: clamp(2rem, 5.56vw, 5rem);
/* ... */

Use in custom CSS:

.custom-element {
  margin-bottom: var(--spacing-md);
  padding: var(--section-sm);
}

Best Practices

1. Use Responsive Spacing

Prefer responsive spacing utilities over fixed values:

<!-- Good -->
<div class="mb-md">Content</div>

<!-- Avoid -->
<div class="mb-4">Content</div>

2. Section Spacing

Use section spacing for section-level padding:

<!-- Good -->
<section class="py-section-md">
  <!-- Section content -->
</section>

<!-- Avoid -->
<section class="py-12 md:py-24">
  <!-- Section content -->
</section>

3. Grid-Based Spacing

Use grid-based spacing for column-aligned elements:

<!-- Good - aligns with grid -->
<div class="mb-ll-2/12">Content</div>

<!-- Use when alignment with grid is important -->

Related Documentation

• Styling Overview - Styling approach
• Grid System - Grid system
• Responsive Design - Responsive patterns

---

Next Steps:

• Review Grid System for grid utilities
• Check Responsive Design for responsive patterns
• See existing components for spacing usage examples