Module Class

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

• l--{module}: レイアウトの構成単位となるようなモジュール群。
• d--{module}: JavaScriptと組み合わせて動的な機能を持つ特殊なモジュール群。
• c--{module}: その他のより具体的な役割を持つコンポーネント群。（他のクラスとの組み合わせを前提にした設計になっているものが多い。）
• is|has--{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はコンテナ要素を定義するためのクラスです。
--contentSzで直下の子要素サイズを制御でき、-container:{s|m|l}でプリセットサイズを指定することもできます。

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

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

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

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

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

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

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

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

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

• Box
• Flow
• Frame
• Flex
• Cluster
• Stack
• WithSide
• Grid
• Center
• Columns

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

• Decorator
• Divider
• Icon
• Media
• Spacer

d--accordion, d--modal, d--tabsがDynamic Modulesにあたります。

• Accordion
• Modal
• Tabs

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