Layout State

This content is not available in your language yet.

Lismでは、レイアウトを組む上で特定の役割を持ち、複数のモジュールに対してつけ外しできるような汎用性の高いセレクタを Layout State として分類しています。

`is--flow`

Lismでは、メインコンテンツ間の余白を管理するためのクラスとして、.is--flow を用意しています。

.is--flow系の直下では、コンテンツの間隔が margin-block-start で管理されます。

クラス名	余白量
`.is--flow`	`var(--flowM, var(--flowM-m))`
`.is--flow.-flow:s`	`--flowM-s` (`--s20`)
`.is--flow.-flow:m`	`--flowM-m` (`--s40`)

見出しタグのみ、--flowM-h (1em) が加算され、余白が広くなるようになっています。

↓

is--flow

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

Heading

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。

Lorem ipsum, LIST content…
Lorem ipsum, LIST content…
Lorem ipsum, LIST content…

<div class="is--flow">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <h2>Heading</h2>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</div>

↓

-flow:sを併用する

Heading

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

Lorem ipsum, LIST content…
Lorem ipsum, LIST content…
Lorem ipsum, LIST content…

<div class="is--flow -flow:s">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <h2>Heading</h2>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</div>

任意の余白量をセットしたい場合は、--flowM変数で指定します。

↓

任意の値をセットする

Contents…

<div class="is--flow" style="--flowM:10px">
  <p>Contents...</p>
  <p>Contents...</p>
  <p>Contents...</p>
</div>

is--flowは--flowMが未定義であれば--flowM-mがセットされますが、ネストされていると親の値を継承されることに注意してください。

is--flow をネストする時の注意点

`is--container`

is--containerはコンテナ要素を定義するためのクラスです。
また、--contentSizeで直下の子要素サイズを制御でき、-container:{s|m|l}でプリセットサイズを指定することもできます。

-container:{s|m|l}を使用すると、--contentSizeだけではなく .is--wideの幅（.--wideSize）も同時に調整されます。

クラス名	コンテンツ幅 (`--contentSize`)
`is--container`	`100%`
`-container:s`	`--size-s`
`-container:m`	`--size-m`
`-container:l`	`--size-l`

↓

例

Contents…

リサイズ可能

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

.is--container に任意の値をセットする方法

s, m, l 以外の値をセットしたい場合は、--contentSize変数を指定します。

↓

is—container に任意の値をセットする

Contents…

リサイズ可能

<div class="is--container" style="--contentSize:20rem">
  <div>Contents...</div>
  <div>Contents...</div>
</div>

DEMO

is--container関連の挙動を確認できるデモページを用意しています。
ぜひ広い画面でご確認ください。

大きい画面で見る

`is--{wide|fullwide|overwide}`

コンテンツサイズの制御クラスを3種類用意しています。

クラス名	説明
`is--wide`	`.-container:{s\|m\|l}`クラス直下では、コンテンツ幅よりも1段階広いサイズになります.
`is--fullwide`	`.has--gutter`の直下でも、親要素のサイズいっぱいに広がります。
`is--overwide`	直前のコンテナ要素が呼び出された位置を基準としたコンテナ幅（`100cqw`）まで広がります。（`@propetry`を使っています。）

これらのクラスの挙動についても、別ページで確認できます。

大きい画面で見る

`is--layer`

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

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

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

活用例は <Layer> を参照してください。

`is--linkBox`

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

活用例は <LinkBox> を参照してください。

`has--gutter`

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

クラス名	余白量	初期値
`has--gutter`	`--gutter`	`--s40`

↓

例

Lorem ipsum content…

リサイズ可能

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