This is the Standard reference for layouts.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
display
Interactive example.
Prefixes: d. Example: d:block. It emits display:block;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (31)
block, inline, inline-block, inline-flex, inline-grid, inline-table, flex, grid, table, table-caption, table-cell, table-column,
table-column-group, table-footer-group, table-header-group, table-row, table-row-group, flow, flow-root, ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container,
list-item, contents, none, run-in, math, [inline_flow-root], $display
visibility
Interactive example.
Prefixes: vis. Example: vis:visible. It emits visibility:visible;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
visible, hidden, collapse
position
Interactive example.
Prefixes: pos. Example: pos:static. It emits position:static;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
static, fixed, absolute, relative, sticky
box-sizing
Interactive example.
Prefixes: box-sizing. Example: box-sizing:border-box. It emits box-sizing:border-box;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
border-box, content-box
float
Interactive example.
Prefixes: float. Example: float:left. It emits float:left;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
left, right, inline-start, inline-end, none
clear
Interactive example.
Prefixes: clear. Example: clear:left. It emits clear:left;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
left, right, both, inline-start, inline-end, none
z-index
Interactive example.
Prefixes: z-index. Example: z-index:auto. It emits z-index:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
auto, 1, 10, 100, -1, 5, -5, [5], $layer
anchor-name
Interactive example.
Prefixes: anchor-name. Example: anchor-name:none. It emits anchor-name:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, --anchor, --tooltip, [--anchor,_--tooltip], $anchor
anchor-scope
Interactive example.
Prefixes: anchor-scope. Example: anchor-scope:none. It emits anchor-scope:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, all, --anchor, [--anchor,_--tooltip], $scope
position-anchor
Interactive example.
Prefixes: position-anchor. Example: position-anchor:normal. It emits position-anchor:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
normal, none, auto, match-parent, --anchor, --tooltip, $anchor
position-area
Interactive example.
Prefixes: position-area. Example: position-area:center. It emits position-area:center;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (54)
center, top, bottom, left, right, span-top, span-bottom, span-left, span-right, start, end, self-start,
self-end, span-start, span-end, span-self-start, span-self-end, span-all, x-start, x-end, span-x-start, span-x-end, self-x-start, self-x-end,
span-self-x-start, span-self-x-end, y-start, y-end, span-y-start, span-y-end, self-y-start, self-y-end, span-self-y-start, span-self-y-end, block-start, block-end,
span-block-start, span-block-end, self-block-start, self-block-end, span-self-block-start, span-self-block-end, inline-start, inline-end, span-inline-start, span-inline-end, self-inline-start, self-inline-end,
span-self-inline-start, span-self-inline-end, none, [top_left], [bottom_right], $area
position-visibility
Interactive example.
Prefixes: position-vis. Example: position-vis:always. It emits position-visibility:always;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
always, anchors-valid, anchors-visible, no-overflow, [anchors-valid_no-overflow], $visibility
position-try
Interactive example.
Prefixes: position-try. Example: position-try:none. It emits position-try:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (60)
none, flip-block, flip-inline, flip-start, flip-x, flip-y, center, top, bottom, left, right, span-top,
span-bottom, span-left, span-right, start, end, self-start, self-end, span-start, span-end, span-self-start, span-self-end, span-all,
x-start, x-end, span-x-start, span-x-end, self-x-start, self-x-end, span-self-x-start, span-self-x-end, y-start, y-end, span-y-start, span-y-end,
self-y-start, self-y-end, span-self-y-start, span-self-y-end, block-start, block-end, span-block-start, span-block-end, self-block-start, self-block-end, span-self-block-start, span-self-block-end,
inline-start, inline-end, span-inline-start, span-inline-end, self-inline-start, self-inline-end, span-self-inline-start, span-self-inline-end, --fallback, [most-height_flip-block], [most-width_flip-inline,_--fallback], $try