Module Class

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

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

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

コンテンツの左右にあらかじめ定義済みの余白をつけることができるクラスです。
サイト全体で統一した余白量を左右に確保するためのものとして、padding系のユーティリティとは別のクラスとして用意しています。

<div class="has--gutter">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</div>

<Lism hasGutter>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</Lism>

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

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

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

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

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

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

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

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

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

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

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

<Flow hasGutter 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>

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

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

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

• Decorator
• Divider
• Icon
• Media
• Spacer

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