Skip to content

Layout System

Jump to bottom
curveo edited this page May 12, 2026 · 1 revision

Layout System

TesseraUI implements a CSS flexbox and grid layout engine that mirrors browser behaviour for the properties it supports.

Flex containers

Every layout element is a flex container. The two primitive directions are:

Tag Direction Java equivalent
<col> / <div> Column (vertical) TesseraPanel.column(...)
<row> Row (horizontal) TesseraPanel.row(...)

You can override the direction with CSS:

.horizontal { flex-direction: row;    }
.vertical   { flex-direction: column; }

Flex children

flex-grow / flex-shrink / flex-basis

/* Each child takes an equal share of available space */
.child { flex: 1; }

/* flex: N M B  →  grow=N  shrink=M  basis=B */
.sidebar { flex: 0 0 120px; }   /* fixed 120px, no grow/shrink */
.content { flex: 1 1 0;     }   /* fill remaining space */

When flex-basis is 0 (or the flex: N shorthand with N > 0), the child starts at zero size and grows proportionally. When it is auto, the child starts at its natural content size.

Alignment

/* Align children along the main axis */
.toolbar { justify-content: space-between; }

/* Align children along the cross axis */
.row     { align-items: center; }

/* Per-child override */
.footer-btn { align-self: flex-end; }
justify-content Effect
flex-start Pack to start (default)
center Centre
flex-end Pack to end
space-between Even gaps, no outer margin
space-around Even gaps including outer margin
align-items / align-self Effect
flex-start Align to start of cross axis
center Centre on cross axis
flex-end Align to end of cross axis
stretch Stretch to fill cross axis

margin: auto

margin-top: auto on a child pushes it to the bottom of a column (same as in CSS):

.footer { margin-top: auto; }

Wrapping

.tag-list { flex-wrap: wrap; }

Children that don't fit on one line wrap to the next.

Gap

.panel { gap: 6px; }   /* space between all children */

Padding

.card { padding: 8px; }               /* all sides */
.card { padding: 4px 8px; }           /* top/bottom  left/right */
.card { padding: 4px 8px 6px 8px; }   /* top right bottom left */

Individual sides: padding-top, padding-right, padding-bottom, padding-left.

Sizing

/* Fixed */
.button { width: 80px; height: 16px; }

/* Percentage of parent */
.half { width: 50%; }

/* calc() */
.body { width: calc(100% - 24px); }

/* Constraints */
.label { min-width: 40px; max-width: 200px; }

box-sizing

/* Width includes border and padding (like most browsers default) */
.card { box-sizing: border-box; }

/* Width = content only (default TesseraUI behaviour) */
.card { box-sizing: content-box; }

Grid layout

<grid cols="3">
  <col class="cell">A</col>
  <col class="cell">B</col>
  <col class="cell">C</col>
</grid>

Or use grid-template-columns for custom track widths:

.layout {
  grid-template-columns: 2fr 1fr;   /* 2/3 + 1/3 */
}

Supported track values: px (fixed), fr (fraction), % (percentage), auto (content width).

Absolute positioning

Remove a child from normal flow and position it relative to the parent:

.badge {
  position: absolute;
  top:   4px;
  right: 4px;
}

The parent does not need position: relative — all TesseraUI panels act as positioning contexts.

Overflow / clipping

.scroll-area { overflow: hidden; }   /* clip content to panel bounds */

Order

Override the DOM order for layout purposes:

.pinned { order: -1; }   /* placed first regardless of DOM position */

Auto-height

Containers in a column automatically grow to fit their content. In a <row>, children with no explicit height inherit the row's height. Use min-height to ensure a minimum size:

.card { min-height: 40px; }

This is especially important for animated cards in a row — see CSS Animations.

Clone this wiki locally