Lism CSS
Search

Lism

A general-purpose component that accepts a wide variety of props aligned with the Lism CSS design system. When no props are specified, it simply renders a <div>.

Nearly all components distributed by Lism are based on this <Lism> component.

↓
Output example of <Lism>
Lism content 
<Lism　p='20' fw='bold' c='blue' bgc='base-2' bdrs='20'>Lism content</Lism>

Import

import { Lism } from 'lism-css/react';

Lism Props

The props specific to Lism CSS that <Lism> accepts are called Lism Props.

lismClass

Specifies the primary class name for the current component. This class is output with a relatively high priority in the <Lism> class processing order.

↓
Example
<Lism p='10' lismClass='c--myComponent'>Lorem ipsum texts...</Lism>


↓


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

variant

Outputs a variation class for lismClass. When multiple classes are specified in lismClass, the variation class is applied to the first class.

↓
Example
<Lism lismClass='c--myComponent' variant='secondary'>Lorem ipsum texts...</Lism>


↓


<div class="c--myComponent c--myComponent--secondary">Lorem ipsum texts...</div>

layout

Specifies a layout module. For example, setting layout='flow' outputs the .l--flow class.

↓
Example
<Lism layout='flow'>Lorem ipsum texts...</Lism>


↓


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

as , exProps

as specifies the HTML tag or external component to render. Defaults to div.

↓
Example of specifying an HTML tag
<Lism as='p' fz='l'>Lorem ipsum texts...</Lism>


↓


<p class="-fz:l">Lorem ipsum texts...</p>

By specifying an external component, you can have <Lism> render as a different external component.

↓
Example: rendering Lism’s <Media> component using Next.js’s <Image>
import Image from 'next/image';


<Media as={Image} src='...' bxsh='20' bdrs='20' />

Lism props are first processed to generate class and style, which are then passed to the component specified by as. This is useful when you want to use Lism Props on non-Lism components.

Additionally, exProps accepts props that you want to skip Lism Props processing for.

This is handy when a prop name of the external component specified via as conflicts with a Lism Prop name, and you want to explicitly mark it as belonging to the external component.

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

By doing this, the Lism Icon component processes p and fz, while the external component Hoge reliably receives size. (In this particular example, exProps is not strictly necessary since Lism does not currently process size, but explicitly marking external component props ensures no future conflicts.)

State Props

A set of props corresponding to State Modules classes.

PropOutput class
isWrapper(='{s|l}').is--wrapper+(.-contentSize:{s|l})
isLayer.is--layer
isLinkBox.is--linkBox
setGutter.set--gutter

CSS Props

Major CSS properties can be specified on components using shorthand notation. For example, font-size can be written as fz, and padding as p.

When a value corresponding to a Prop Class is specified, Lism outputs a utility class as shown below.

↓
Example
<Lism fz='l' p='15'>contents</Lism>


// ↓ Output HTML
<div class="-fz:l -p:15">contents</div>

For keyword values that correspond to a CSS property (rather than token values), the class is output regardless of whether the value is abbreviated or not.

Example: the -pos:rel class for position:relative is output with either of the following:

<Lism pos='relative'>...</Lism>
<Lism pos='rel'>...</Lism>


// ↓ Both produce the following output


<div class="-pos:rel">...</div>

When a value with no corresponding Prop Class is specified

When a value that cannot be converted to a utility class is specified, it is output in one of the following ways:

  1. Output directly as an inline style attribute.
  2. Output as a combination of -{prop} class and --{prop} CSS variable.
  3. Output only as --{prop} (special case).
↓
Example 1: simple inline style output
<Lism o='0.75'>contents</Lism>
↓
<div style="opacity:0.75">contents</div>
↓
Example 2: class and CSS variable combined output
<Lism fz='20px'>contents</Lism>
// ↓ output
<div class="-fz" style="--fz:20px">contents</div>

Major properties that support breakpoint switching use this -{prop} & --{prop} pattern.

↓
Example 3: variable-only output
<Lism bd bdc="#000" bdw="2px">...</Lism>


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

Notes

Responsive Syntax

CSS Props available in Lism can be output in a responsive format.

There are two ways to write this:

  1. Specify values in order using an array (base → sm → md → …)
  2. Specify breakpoints directly using an object

Both produce the same HTML output: a pair of utility class and CSS variable (-{prop}_{bp} & --{prop}_{bp}).

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

To skip intermediate breakpoints, write it as follows:

↓
Example 2: specifying only the @md value
<Lism p={[null, null, '40']}>...</Lism>

Whether a value actually changes at a breakpoint depends on whether that property supports responsive behavior. Check the BP (short for breakpoint) column in Prop Class to see which properties are supported.

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

Force output as a utility class with :

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

<Lism p=':hoge'>...</Lism>


↓


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

Add a custom utility class in your CSS and use it as needed.

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

Using className='-p:hoge' also works, but passing it as a CSS Prop via : ensures consistent output ordering.

Outputting only the .-{prop} class

Specifying "-" or true for a CSS Prop outputs only the .-{prop} class without a CSS variable.

↓
Example
<Lism p='-' bdrs>contents</Lism>
↓
<div class="-p -bdrs">contents</div>

This is useful when you want to define the variable value in CSS, or when you want to inherit the same variable from a parent element.

Token resolution per property

How tokens are handled varies per property when a matching token exists:

  • If there is a dedicated class for that token, that class is output.
    • Example: fz='l' outputs the -fz:l class.
  • If a corresponding token exists but is not registered as a class, the CSS variable is output as an inline style.
    • Example: c='red' outputs class="-c" and style="--c:var(--red)".

© Lism CSS. All rights reserved.

Contents