Mixins / foldkit-mixins/layout

Layout

namespace · packages/mixins/src/layout.ts:295

const Layout = {
  stack,
  intrinsic,
  cluster,
  split,
  sidebar,
  aside,
  switcher,
  reel,
  center,
  frame,
  pad,
  autoGrid,
}

In the guides

Members

Layout.stack

function · packages/mixins/src/layout.ts:56

stack(options?: StackOptions): StyleValue

A vertical stack that owns its children's block rhythm.

Layout.intrinsic

const · packages/mixins/src/layout.ts:40

intrinsic: StyleValue

A child of stack that keeps its intrinsic width instead of the stack's full-width default. The stack's child rule excludes this piece's class.

Layout.cluster

function · packages/mixins/src/layout.ts:79

cluster(options?: ClusterOptions): StyleValue

Items that wrap onto new lines: tags, toolbar buttons, metadata.

Layout.split

function · packages/mixins/src/layout.ts:104

split(options?: SplitOptions): StyleValue

Two columns above a breakpoint, one below.

function · packages/mixins/src/layout.ts:141

sidebar(options?: SidebarOptions): StyleValue

A sidebar beside content that wraps under it when the content would get less than contentMin. Flex math, no query, so it needs no containment.

Layout.aside

const · packages/mixins/src/layout.ts:122

aside: StyleValue

The aside of a sidebar: composed by the child that is the sidebar. The other children are the content.

Layout.switcher

function · packages/mixins/src/layout.ts:161

switcher(options?: SwitcherOptions): StyleValue

A row that becomes a stack when narrower than threshold. Flex math, no query.

Layout.reel

function · packages/mixins/src/layout.ts:191

reel(options?: ReelOptions): StyleValue

A horizontally scrolling row.

Layout.center

function · packages/mixins/src/layout.ts:224

center(options?: CenterOptions): StyleValue

Content centered inline with a maximum measure and gutters.

Layout.frame

function · packages/mixins/src/layout.ts:245

frame(options?: FrameOptions): StyleValue

A media frame with a fixed aspect ratio; an img or video child covers it.

Layout.pad

function · packages/mixins/src/layout.ts:264

pad(options?: PadOptions): StyleValue

Consistent padding from the space tokens.

Layout.autoGrid

function · packages/mixins/src/layout.ts:281

autoGrid(options?: AutoGridOptions): StyleValue

A grid that fits as many minItemSize columns as the width allows.