Layout utilities

tier 2 — classes

The flex arrangements that would otherwise be an inline style="display:flex; gap:8px". Everything here puts children in a line or a stack and decides how they share the space.

Arranging a page is a grid These arrange the children of one element. To place panels on a page — a dashboard, a main column with an aside — use Grid and layout.

Rows and columns

.sedna-row, .sedna-row-wrap and .sedna-col are the three arrangements, each with the same 8px gap. .sedna-push is an empty span that eats the remaining space, so everything after it sits at the far end.

ORD-4182 Awaiting stock

.sedna-col stacks its children with the same 8px gap.

.sedna-row-wrap breaks onto a second line when the row runs out

<div class="sedna-col sedna-gap-2">
    <div class="sedna-row sedna-w-full" style="border:1px solid var(--border); padding:10px">
        <strong class="text-mono">ORD-4182</strong>
        <span class="badge badge-warn">Awaiting stock</span>
        <span class="sedna-push"></span>
        <button class="btn btn-sm" type="button">Open</button>
        <button class="btn btn-sm btn-primary" type="button">Dispatch</button>
    </div>
    <div class="sedna-col" style="border:1px solid var(--border); padding:10px; max-width:260px">
        <span>.sedna-col stacks its children</span>
        <span class="text-muted">with the same 8px gap.</span>
    </div>
    <div class="sedna-row-wrap" style="border:1px solid var(--border); padding:10px; max-width:260px">
        <span class="badge">.sedna-row-wrap</span>
        <span class="badge">breaks onto</span>
        <span class="badge">a second line</span>
        <span class="badge">when the row runs out</span>
    </div>
</div>

Alignment

.sedna-start, .sedna-center, .sedna-end and .sedna-baseline — which lines two different type sizes up on the line they are written on rather than the middle of their boxes — set the cross axis; .sedna-between sets the main one. .sedna-wrap lets a .sedna-row break without turning it into a .sedna-row-wrap.

sedna-start Two lines,top-aligned.

sedna-center Two lines,centred on the cross axis.

sedna-baseline Large and small, on one baseline.

sedna-end Two lines,bottom-aligned.

sedna-between pushed apart

sedna-wrap onto a second line when needed

<div class="sedna-col sedna-gap-2">
    <div class="sedna-row sedna-start" style="border:1px dashed var(--border); padding:8px">
        <span class="badge">sedna-start</span>
        <span class="sedna-col sedna-gap-0"><span>Two lines,</span><span>top-aligned.</span></span>
    </div>
    <div class="sedna-row sedna-center" style="border:1px dashed var(--border); padding:8px">
        <span class="badge">sedna-center</span>
        <span class="sedna-col sedna-gap-0"><span>Two lines,</span><span>centred on the cross axis.</span></span>
    </div>
    <div class="sedna-row sedna-baseline" style="border:1px dashed var(--border); padding:8px">
        <span class="badge">sedna-baseline</span>
        <span class="text-lg">Large</span>
        <span class="text-sm">and small, on one baseline.</span>
    </div>
    <div class="sedna-row sedna-end" style="border:1px dashed var(--border); padding:8px">
        <span class="badge">sedna-end</span>
        <span class="sedna-col sedna-gap-0"><span>Two lines,</span><span>bottom-aligned.</span></span>
    </div>
    <div class="sedna-row sedna-between" style="border:1px dashed var(--border); padding:8px">
        <span class="badge">sedna-between</span>
        <span class="text-muted">pushed apart</span>
    </div>
    <div class="sedna-row sedna-wrap" style="max-width:260px; border:1px dashed var(--border); padding:8px">
        <span class="badge">sedna-wrap</span>
        <span class="badge">onto</span>
        <span class="badge">a second</span>
        <span class="badge">line</span>
        <span class="badge">when needed</span>
    </div>
</div>

Placement

.sedna-justify-center and .sedna-justify-end gather the children in the middle or at the far end of the main axis. .sedna-self-start, .sedna-self-center, .sedna-self-end and .sedna-self-stretch move one child against the rest — a button that must not stretch to the height of the panel beside it. .sedna-place-center puts its content in the middle of the box on both axes: a spinner in an empty panel, a message in a blank tile.

sedna-justify-center

sedna-justify-end

sedna-self-start sedna-self-center sedna-self-end sedna-self-stretch

sedna-place-center

<div class="sedna-col sedna-gap-2">
    <div class="sedna-row sedna-justify-center" style="border:1px dashed var(--border); padding:8px">
        <span class="badge">sedna-justify-center</span>
        <button class="btn btn-sm" type="button">Cancel</button>
    </div>
    <div class="sedna-row sedna-justify-end" style="border:1px dashed var(--border); padding:8px">
        <span class="badge">sedna-justify-end</span>
        <button class="btn btn-sm" type="button">Export</button>
    </div>
    <div class="sedna-row" style="border:1px dashed var(--border); padding:8px; min-height:96px">
        <span class="badge sedna-self-start">sedna-self-start</span>
        <span class="badge sedna-self-center">sedna-self-center</span>
        <span class="badge sedna-self-end">sedna-self-end</span>
        <span class="badge sedna-self-stretch">sedna-self-stretch</span>
    </div>
    <div class="sedna-place-center" style="border:1px dashed var(--border); min-height:120px">
        <span class="sedna-col sedna-center">
            <span class="spinner"></span>
            <span class="badge">sedna-place-center</span>
        </span>
    </div>
</div>

Sizing

.sedna-fill takes the remaining space and sets min-width: 0, without which .text-truncate inside one never shows its ellipsis. .sedna-shrink-0 is its opposite, for the avatar and the badge that must keep their size, and .sedna-w-full is a full-width block.

Form controls are width: 100%, and these are the way out. .sedna-w-fit makes a control as wide as its value — a status in a table cell, a page-number box. .sedna-w takes a width from --sedna-w, with .sedna-w--sm, .sedna-w--md and .sedna-w--lg as 8/12/18rem, so a short filter needs no inline width. They are in the utilities layer, which is why they win over a component rule without !important.

JW A very long single line that has to be cut rather than push the badge out of the row sedna-fill

<div class="sedna-col sedna-gap-2" style="max-width:420px">
    <div class="sedna-row" style="border:1px dashed var(--border); padding:8px">
        <span class="avatar avatar-sm sedna-shrink-0">JW</span>
        <span class="sedna-fill text-truncate">
            A very long single line that has to be cut rather than push the badge out of the row
        </span>
        <span class="badge sedna-shrink-0">sedna-fill</span>
    </div>
    <div style="border:1px dashed var(--border); padding:8px">
        <button class="btn sedna-w-full">sedna-w-full</button>
    </div>
</div>

Dividers

.sedna-divider-top and .sedna-divider-bottom are a hairline between rows without an <hr>. Use them on a stack the library has no component for; a real list of records is a .list, which draws its own.

A row with .sedna-divider-bottom 1

and another 2

.sedna-divider-top closes the set 3

<div class="sedna-col sedna-gap-0" style="max-width:420px">
    <div class="sedna-row sedna-divider-bottom" style="padding:8px 0">
        <span class="sedna-fill">A row with .sedna-divider-bottom</span>
        <span class="badge">1</span>
    </div>
    <div class="sedna-row sedna-divider-bottom" style="padding:8px 0">
        <span class="sedna-fill">and another</span>
        <span class="badge">2</span>
    </div>
    <div class="sedna-row sedna-divider-top" style="padding:8px 0">
        <span class="sedna-fill">.sedna-divider-top closes the set</span>
        <span class="badge">3</span>
    </div>
</div>