Split

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<div class="aparte-split" style="height: 18rem">
  <div>the chat</div>
  <div class="aparte-split__handle"></div>
  <div class="aparte-split__pane">the pane</div>
</div>

Two panes and a draggable seam. The chat in one, your pane in the

other: a preview frame, an editor, an artifact card.

The grid is the whole mechanism. --aparte-split-position is the primary pane’s size; --aparte-split-min and --aparte-split-max are clamp bounds, so the browser does the clamping and nothing in JS parses a unit — px, %, rem and ch all work. Used without <aparte-split> this is a static split: set the position from your own media query and there is no drag, which is the Canvas shape.

A pane CONTAINS a chat; a chat never contains a split.

The element wears the same class and adds the behaviour (drag, arrow keys, the APG separator’s ARIA, one pane at a time under a breakpoint); <div class="aparte-split"> is the look alone, which is what this page shows.

Classes

.aparte-split · .aparte-split--only-end · .aparte-split--only-start · .aparte-split--primary-end · .aparte-split--vertical · .aparte-split__handle · .aparte-split__pane · .aparte-split__scrim

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.