Stack

Bootstrap-inspired .hstack and .vstack flex primitives. Unlike the rest of the helper directory, these ship without !important — they are layout primitives, not override utilities. Gap is read from --kc-stack-gap so a single inline custom-property override tunes spacing without reaching for a utility ladder.

How it works

.hstack is display: flex; flex-direction: row; align-items: center; gap: var(--kc-stack-gap, 0). Children sit on a single row, vertically centred, separated by the configured gap.
.vstack is display: flex; flex-direction: column; align-self: stretch; gap: var(--kc-stack-gap, 0). Children stack vertically and the column itself stretches to fill its parent's cross axis.
The gap defaults to 0. Set --kc-stack-gap inline, on a wrapping scope, or globally on :root to control spacing — no utility classes required.
For finer control over alignment, wrap, ordering, etc., reach for the flex utilities instead.

Live

.hstack — horizontal

Live

Auto-saved 2 min ago

HTML

<div class="hstack" style="--kc-stack-gap: 0.75rem;">
<button class="button is-primary">Save</button>
<button class="button">Cancel</button>
<span style="color: var(--kc-default-fg); font-size: 0.875rem;">Auto-saved 2 min ago</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-stack', 'element-button')
);

Playground

.vstack — vertical

Live

Section title

Short paragraph that demonstrates the column flow.

HTML

<div class="vstack" style="--kc-stack-gap: 0.75rem; max-width: 18rem;">
<strong>Section title</strong>
<p style="margin: 0;">Short paragraph that demonstrates the column flow.</p>
<a href="#more">Read more →</a>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-stack')
);

Playground

Markup

<!-- Horizontal stack: row, centred, gap-aware -->
<div class="hstack" style="--kc-stack-gap: 0.75rem;">
  <button class="button">Save</button>
  <button class="button is-default">Cancel</button>
</div>

<!-- Vertical stack: column, gap-aware -->
<div class="vstack" style="--kc-stack-gap: 1rem;">
  <h3>Section</h3>
  <p>Lead paragraph.</p>
  <a href="#more">Read more</a>
</div>

Variables

Variable	Default	Notes
`$hstack-selector`	`'.hstack'`	Horizontal stack class. Override to rebrand (e.g. `'.row-stack'`).
`$vstack-selector`	`'.vstack'`	Vertical stack class.
`$gap-token`	`'stack-gap'`	The trailing segment of the custom-property name read by both stacks. Default resolves to `var(--kc-stack-gap, 0)`. Rename if the token clashes with another design system.

Override example

@use '@adnap/krysalicss/helper/stack' with (
  // Use a different CSS custom property name (default: 'stack-gap'):
  $gap-token: 'space-stack',
);

Tokens consumed

Token	Used for
`--kc-stack-gap`	Read by `.hstack` and `.vstack` on their `gap` declaration. Set per-instance (inline style), per-scope (scoped rule), or globally on `:root`. Falls back to `0` when unset.