Lism Props

The props specific to Lism CSS that <Lism>-family components accept are called Lism Props.

as

Specifies the HTML tag or external component to render. Defaults to div.

<Lism as="p">Lorem ipsum texts...</Lism>

↓

<p>Lorem ipsum texts...</p>

By passing an external component, you can have <Lism> delegate rendering to that component.

import Image from 'next/image';

<Media as={Image} src="..." p="20" bd />

Lism Props (p and bd in the example above) are processed first to produce className and style, which are then forwarded to the component specified by as. This lets you apply Lism Props to non-Lism components.

className

The standard prop for attaching class names to a component. Use it for c-- base classes (Component Class) or any other external styles.

<Lism p="10" className="c--myComponent">Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent -p:10">Lorem ipsum texts...</div>

set / util

set specifies Set Class entries (set--{value}),
util specifies Utility Class entries (u--{value}).

<Lism set="bxsh" util="cbox">...</Lism>

↓

<div class="set--bxsh u--cbox">...</div>

Multiple values

Both props accept space-separated values.

<Lism set="hov" hasTransition util="cbox trim">...</Lism>

Excluding with - prefix

Prefix a value with - to exclude that identifier. Use this to remove a class that has been applied internally by a component.

{/* Exclude set="plain" (set--plain) that MyButton applies by default */}
<MyButton set="-plain">...</MyButton>

{/* Exclude u--trim and add u--cbox */}
<MyCallout util="-trim cbox">...</MyCallout>

layout / atomic

layout and atomic are props for specifying Layout Primitive classes (l--*) and Atomic Primitive classes (a--*), respectively.

For example, specifying layout='flow' outputs the l--flow class, and specifying atomic='divider' outputs the a--divider class.

<Lism layout="flow">Lorem ipsum texts...</Lism>
<Lism atomic="divider" />

↓

<div class="l--flow">Lorem ipsum texts...</div>
<div class="a--divider"></div>

Trait Props

Props corresponding to Trait Classes (is--* / has--*).

| Prop | Output class | Purpose | |---|---|---| | isWrapper(='{s\|m\|l\|xl}') | is--wrapper + -contentSize:{s\|m\|l\|xl} | Content width restriction | | isLayer | is--layer | Absolute positioned layer (inset:0) | | isBoxLink | is--boxLink | Make entire box clickable | | isCoverLink | is--coverLink | Link with a clickable area covering the parent element | | isContainer | is--container | Container query target | | isSide | is--side | Side element | | isSkipFlow | is--skipFlow | Skip Flow spacing | | hasTransition | has--transition | Sets transition properties via CSS variables | | hasGutter | has--gutter | Reserves a unified horizontal gutter (--gutter / --gutter--base) | | hasSnap | has--snap | Sets scroll-snap-* properties via CSS variables | | hasMask | has--mask | Sets mask property via CSS variables |

For an overview of Trait Classes, see the following.

CSS Props

Props corresponding to Property Class (-{prop}:{value}).

Use the same shortened CSS property names as the {prop} part (e.g., font-size → fz, padding → p).

The output format is determined by the value specified via prop={value}:

| Value | Output format | Example | |------|------|-----| | Token / preset value | -{prop}:{value} class | fz='l' → -fz:l | | true | -{prop} class only (no variable) | bd → -bd | | Value starting with : | Forced utility class | p=':hoge' → -p:hoge | | Other values (BP-supported) | -{prop} class + --{prop} variable | fz='20px' → -fz + --fz:20px | | Other values (BP-unsupported) | Direct style attribute output | o='0.7' → opacity:0.7 | | Other values (variable-only) | --{prop} variable only | bdw='2px' → --bdw:2px |

Code examples

<Lism fz="l" p="20">...</Lism>
// → <div class="-fz:l -p:20">...</div>

<Lism c="red">...</Lism>
// → <div class="-c" style="--c:var(--red)">...</div>

<Lism p bdrs>contents</Lism>
// → <div class="-p -bdrs">contents</div>

Use this to define the variable value in CSS or to inherit it from a parent element.

<Lism bd bdc="#000" bdw="2px">...</Lism>
// → <div class="-bd" style="--bdc:#000;--bdw:2px">...</div>

<Lism fz="20px">contents</Lism>
// → <div class="-fz" style="--fz:20px">contents</div>

<Lism o="0.75">contents</Lism>
// → <div style="opacity:0.75">contents</div>

Class output with :

Even if no corresponding Property Class exists, prefixing a value with : will output the string after it as a class name.

<Lism p=":hoge">...</Lism>
// → <div class="-p:hoge">...</div>

Define the class in your CSS and use it wherever needed.

.-p\:hoge {
  /* ... your styles ... */
}

Passing : on its own

If you pass just : without any string after it, only the -{prop} class is output, exactly as if you had passed true.

<Lism bd=":">...</Lism>
// → <div class="-bd">...</div>

This is handy when you want to enable a prop like bd (one that can be toggled on with true) from a path that cannot pass a boolean, such as text input.

Responsive syntax

BP-supported properties can specify values per breakpoint (sm, md) using arrays or objects.

<Lism p={['20', '30', '5rem']}>...</Lism>

<div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:5rem">
  ...
</div>

<Lism p={[null, null, '40']}>...</Lism>

<div class="-p_md" style="--p_md:var(--s40)">
  ...
</div>

For properties that do not support responsive behavior by default (i.e., no CSS is provided), you can add support via SCSS customization.

exProps

Pass an object containing any props you want to bypass Lism Props processing for.

Use this when a prop name of the external component specified via as conflicts with a Lism Prop name and you need to explicitly mark it as belonging to the external component.

<Icon as={Hoge} exProps={{ size: '1em' }} p="10" fz="l">
  ...
</Icon>

This way, the Lism Icon component processes p and fz, while the external component Hoge reliably receives size. (In this example, exProps is not strictly required since Lism does not currently process size, but explicitly marking external component props prevents future conflicts.)

Class output order

The class attribute generated by <Lism> is output in the following order:

[className (including c--)] [a--] [l--] [set--] [is-- / has--] [u--] [-]

| # | Prop | Example | |---|---|---| | 1 | User-defined class (className / class) | c--box, z--header, hoge | | 2 | atomic | a--icon, a--divider | | 3 | layout | l--flex, l--columns | | 4 | set | set--hov | | 5 | isXxxx / hasXxxx (Trait) | is--wrapper, is--layer, has--transition | | 6 | util | u--cbox, u--trim | | 7 | prop={value} | -p:20, -bgc:base-2, -hov:-c |