Primitive Class

Lism provides Primitive classes as small building blocks for composing layouts.

• is--{name}: Trait Primitives that apply a static structural trait to an element.
• l--{name}: Layout Primitives that serve as the building blocks of layouts.
• a--{name}: Atomic Primitives that represent the smallest units of a layout.

By combining these, you can build complex layouts. The c-- prefixed Component Class represents concrete UI parts composed from these Primitives.

Combination Rules

Combination	Allowed	Notes
l-- × l--	NG	Same category cannot be combined
a-- × a--	NG	Same category cannot be combined
is-- × is--	OK	Multiple Traits can be combined
l-- × is--	OK
a-- × is--	OK
l-- × a--	Discouraged	Not intended to coexist
l-- × c--	OK	e.g. c--nav l--flex
a-- × c--	OK

Trait Primitives

Primitives that represent static structural traits that can be toggled on any element.

Class	Description
is--container	Defines the reference element for container queries
is--wrapper	Wrapper element that controls content width
is--layer	Overlay layer positioned over a parent element
is--boxLink	Makes the entire box a clickable link
is--vertical	Applies vertical writing mode
is--coverLink	A link with a clickable area covering the entire parent element (→ see is--boxLink)
is--side	For the side element of l--sideMain (→ see l--sideMain)
is--skipFlow	Cancels spacing with the next sibling inside l--flow (→ see l--flow)

Layout Primitives

Primitives that serve as the building blocks of layouts.

Class	Description
l--box	Simple primitive for grouping content
l--flow	Flow-root primitive that auto-manages spacing between children
l--frame	Fits child media to its own size
l--flex	Lays out content using Flexbox
l--cluster	Arranges items horizontally with automatic wrapping
l--stack	Arranges elements vertically
l--sideMain	Two-column layout with side and main areas
l--grid	Lays out content using CSS Grid
l--tileGrid	Uniform row-column grid (tile layout)
l--center	Centers content both horizontally and vertically
l--columns	Column layout with breakpoint-based column counts
l--fluidCols	Fluid columns that wrap based on column width
l--switchCols	Automatically switches between multi-column and single-column

Atomic Primitives

Primitives that represent the smallest units of a layout.

Class	Description
a--decorator	Empty element for decoration
a--divider	Divider line between content
a--icon	Outputs an SVG icon
a--spacer	Empty element for spacing between elements