Module Class

Lism uses the following module classes.

• is--{module}: Versatile state modules that can be applied or removed across multiple types of elements.
• l--{module}: Modules that serve as the building blocks of layouts.
• a--{module}: Modules that represent the smallest units of a layout.
• c--{module}: Components with more specific roles. (Many are designed to be used in combination with other classes.)

In general, multiple module classes from different layers cannot be combined, except for State Modules. For example, .l-- and .c-- can be used together, but .l--XXX and .l--YYY, or .c--XXX and .c--YYY, should not be combined within the same element.

State Module

is--container

Applying is--container sets container-type: inline-size on the element. Since Lism CSS supports property switching via container queries, this class must be applied to any wrapper element you want to use as the container query reference.

is--wrapper

is--wrapper is a class for defining wrapper elements. You can control the width of direct child elements using --contentSize, and preset sizes can be specified with -content:{s|l}.

<div class="is--wrapper -content:s">
  <div>Contents...</div>
  <div>Contents...</div>
</div>

<Lism isWrapper='s'>
  <div>Contents...</div>
  <div>Contents...</div>
</Lism>

is--layer

Positions an element to match the size of its parent using position: absolute.

The CSS is as follows — the element is positioned with both inset: 0 and overflow: hidden applied.

.is--layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

is--linkBox

A class for making an entire box into a clickable link.

is--vertical

Using is--vertical@[sm|md] enables vertical writing mode only at that breakpoint and above. (The .set--bp class must also be applied.)

The value for vertical writing is managed via a token (--vertical-mode). (This allows switching between vertical-rl and vertical-lr by overriding the variable according to the lang attribute.)

<div class='is--vertical@sm set--bp l--flow set--gutter -py:20 -w:100% -h' style='--h:20em'>
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  <p>Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、決するための答えというより、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。</p>
</div>

<Flow setGutter py='20' w='100%' h='20em' className='is--vertical@sm set--bp'>
  <Dummy lang='ja' length='s' />
  <Dummy lang='ja' length='l' offset='3' />
</Flow>

is--side

A class applied to the side element of l--sideMain.

is--skipFlow

When used as a direct child of l--flow, this cancels the spacing between the element and the following sibling.

Layout Modules

l--flex, l--grid, l--center, and similar classes fall under Layout Modules.

• Box
• Center
• Cluster
• Columns
• Flex
• Flow
• FluidCols
• Frame
• Grid
• SideMain
• Stack
• SwitchCols

Atomic Modules

a--divider, a--spacer, a--decorator, and a--icon fall under Atomic Modules.

• Decorator
• Divider
• Icon
• Media
• Spacer

Custom Modules

c--button and c--card fall under Custom Modules.