Primitive Class
Lism では、レイアウトを組み立てる小さな積み木として Primitive クラス を提供しています。
is--{name}: 要素に静的な構造的特性 (trait) を与える Trait Primitive。l--{name}: レイアウトの構成単位となる Layout Primitive。a--{name}: レイアウトの最小単位となる Atomic Primitive。
これらを組み合わせることで複雑なレイアウトを構築でき、c-- で始まる Component Class はこれらの Primitive を組み合わせて作られた具体的な UI 部品として位置付けられます。
Primitive クラスはバリエーション（--outline 等）や子要素クラス（_header 等）を持たない、単体で機能するクラスです。BEM 構造を持つのは c-- の Component Class のみです。
併用ルール
| 組み合わせ | 可否 | 備考 |
|---|---|---|
l-- × l-- | NG | 同カテゴリの併用は不可 |
a-- × a-- | NG | 同カテゴリの併用は不可 |
is-- × is-- | OK | Trait は複数併用できる |
l-- × is-- | OK | |
a-- × is-- | OK | |
l-- × a-- | 非推奨 | 役割的には同居しない想定 |
l-- × c-- | OK | 例: c--nav l--flex |
a-- × c-- | OK |
Trait Primitives
要素に対して汎用的につけ外しできる、静的な構造的特性を表す Primitive 群です。
| クラス | 概要 |
|---|---|
is--container | コンテナクエリの基準要素を定義する |
is--wrapper | コンテンツ幅を制御するラッパー要素 |
is--layer | 親要素に重ねるオーバーレイレイヤー |
is--boxLink | ボックス全体をリンク化する |
is--coverLink | 親要素全体に広がるクリック領域を持つリンク（→ is--boxLink 参照） |
is--side | l--sideMain の side 要素用（→ l--sideMain 参照） |
is--skipFlow | l--flow 内で次の兄弟との余白を打ち消す（→ l--flow 参照） |
Layout Primitives
レイアウトの構成単位となる Primitive 群です。
| クラス | 概要 |
|---|---|
l--box | コンテンツをグループ化するシンプルな Primitive |
l--flow | 子要素間の余白を自動管理する flow-root Primitive |
l--frame | 直下のメディア要素を自身のサイズに合わせて表示 |
l--flex | Flexbox でコンテンツを配置 |
l--cluster | 横方向に並べて自動折り返し |
l--stack | 要素を縦方向に配置 |
l--sideMain | サイドとメインの 2 カラムレイアウト |
l--grid | CSS Grid でコンテンツを配置 |
l--tileGrid | 均等な行列グリッド（タイル型レイアウト） |
l--center | 上下左右中央揃えで配置 |
l--columns | ブレイクポイントごとに列数を指定するカラムレイアウト |
l--fluidCols | カラム幅に応じて自動折り返す段組みレイアウト |
l--switchCols | 複数列と 1 列を自動切り替え |
Atomic Primitives
レイアウトの最小単位となる Primitive 群です。
| クラス | 概要 |
|---|---|
a--decorator | 装飾用の空要素 |
a--divider | コンテンツ間の区切り線 |
a--icon | SVG アイコンを出力 |
a--spacer | 要素間にスペースを確保する空要素 |