Helpers

Purpose

The helpers/ directory contains small, single-purpose CSS classes applied directly in HTML. Unlike components, helpers are not tied to any specific UI element — they handle generic concerns like spacing, display, or layout.

Examples

_spacing.sass

Margin and padding utilities based on a consistent numeric scale.

$sizes: (1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem)

@each $key, $value in $sizes
  .mr-#{$key}
    margin-right: $value
  .mt-#{$key}
    margin-top: $value
  .gap-#{$key}
    gap: $value

<div>
  <span class="mr-2">Label</span>
  <button class="mt-4">Submit</button>
</div>

This is just a starting point. Define the classes that make sense for your project — add directions (ml, mb, pb…), adjust the scale, or extend the map with any values you need.

Note that gap belongs in _spacing.sass rather than _flex.sass or _grid.sass, since it is used by both Flexbox and Grid layouts.

_flex.sass

Flexbox shortcuts for common layout patterns.

.flex            { display: flex }
.flex-1          { flex: 1 }
.items-center    { align-items: center }
.justify-between { justify-content: space-between }

<div class="flex items-center justify-between gap-2">
  <div>Left</div>
  <div class="flex-1"></div>
  <div>Right</div>
</div>

_grid.sass

Grid layout helpers and spacing.

.grid          { display: grid }
.grid-cols-2   { grid-template-columns: repeat(2, 1fr) }
.grid-cols-3   { grid-template-columns: repeat(3, 1fr) }

<div class="grid grid-cols-3 gap-3">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</div>

Guidelines

Helpers should remain:

• Generic — not tied to a specific component or view
• Small — single-purpose, a few lines each
• Reusable — useful in multiple contexts

They should not become a full utility framework. If you find yourself writing dozens of helpers, consider whether a library like Tailwind CSS would serve you better.