Module Class

Lismでは、次のようなモジュールクラスを使います。

• is--{module}: 複数の種類のモジュールに対してつけ外しできるような汎用性の高い状態モジュール群。
• l--{module}: レイアウトの構成単位となるようなモジュール群。
• a--{module}: レイアウトの最小単位となるモジュール群。
• c--{module}: その他のより具体的な役割を持つコンポーネント群。（他のクラスとの組み合わせを前提にした設計になっているものが多い。）

基本的に、State Modulesを除いた各レイヤーの他モジュールクラスとの複数併用はできません。
たとえば、.l--と.c--は併用できますが、.l--XXXと.l--YYY、.c--XXXと.c--YYYは同一属性内では併用しないものとします。

State Module

is--container

is--containerを使用すると、その要素に contaner-type:inline-size を適用します。 Lism CSSではコンテナクエリでプロパティを変更できる仕様になっていますので、 コンテナクエリの判定基準としたしたいラッパー要素にこのクラスを使用しておく必要があります。

is--wrapper

is--wrapperはラッパー要素を定義するためのクラスです。
--contentSizeで直下の子要素サイズを制御でき、-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

position:absoluteで要素を親要素サイズに合わせて配置できます。

CSSは以下のようになっており、inset:0とoverflow:hiddenも指定された状態で配置されます。

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

is--linkBox

ボックス全体をリンク化するためのクラスです。

is--vertical

is--vertical@[sm|md]を使うと、そのブレイクポイント以上でのみ、縦書きモードになります。(.set--bpクラスを併用する必要があります。)

縦書き用の値は、トークン（--vertical-mode）で管理しています。 （これにより、lang属性に合わせて変数を上書きすることで、vertical-rlかvertical-lrを切り替えることができるようにもなっています。）

<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

l--sideMainのside要素に付与するクラスです。

is--skipFlow

l--flowの直下で使用すると、次に続く兄弟要素との余白量を打ち消します。

Layout Modules

l--flex , l--grid, l--centerなどがLayout Modulesにあたります。

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

Atomic Modules

a--divider, a--spacer, a--decorator, a--iconがAtom Modulesにあたります。

• Decorator
• Divider
• Icon
• Media
• Spacer

Custom Modules

c--button, c--card がCustom Modulesにあたります。