Layout State

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

`is--flow`

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

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

クラス名	余白量	初期値
`.is--flow`	`--flowGap`	`--s40`
`.is--flow.-flow:s`	`--flowGap--s`	`--s30`

見出しタグのみ、--flowGapが--flowGap--hに上書きされ、余白が広くなるようになっています。
-flow:sクラスを併用すると、余白が少し狭くなります。さらにこの時、見出しタグも同じ余白量になります。

↓

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">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <h2>Heading</h2>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</div>

`.is--skipFlow`

次に続く兄弟要素との余白量を打ち消します。フローコンテンツの先頭に absolute な要素を配置したい場合などに活用できます。

`is--container`

is--containerはコンテナ要素を定義するためのクラスです。
-container:{s|m|l}のいずれかでサイズを指定することで、子要素のコンテンツサイズを制御することもできます。

クラス名	コンテンツ幅	初期値
`is--container`	`--item-size`	`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>

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

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

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

↓

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

Contents…

リサイズ可能

<div class="is--container" style="--item-size: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> を参照してください。

`is--hiddenLink`, `is--overlayLink`

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>

`has--mask`

--mask-img変数と組み合わせて、自身にmaskを適用します。

.has--mask{
  mask: var(--mask-img) no-repeat 50% / contain;
}

Lism ComponentsではhasMaskプロパティに指定した文字列が--mask-imgとして出力されるようになっています。（この時、<svg>を渡すと、base64へエンコードされます。

↓

例

<Media src='/img/img-3.jpg' alt='' ar='16/9' width='960' height='640' loading='lazy' hasMask='<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="#FF0066" d="M170.4,25.7c16.1,14.2,23.2,38.5,24.8,61.7c1.7,23.3-1.8,45.5-12.9,62.3c-11,16.9-29.3,28.6-48.8,34.5 c-19.4,5.9-40,6.1-59.5,0.4c-19.5-5.6-37.9-17.4-51.7-34.9c-14-17.5-23.2-40.8-18-60.2c5-19.4,24.5-34.7,43.5-48.4 s37.6-25.7,59.5-29.7C129.1,7.3,154.2,11.4,170.4,25.7z" /></svg>' />

<img class="has--mask -ar:16/9" style="--mask-img:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjRkYwMDY2IiBkPSJNMTcwLjQsMjUuN2MxNi4xLDE0LjIsMjMuMiwzOC41LDI0LjgsNjEuN2MxLjcsMjMuMy0xLjgsNDUuNS0xMi45LDYyLjNjLTExLDE2LjktMjkuMywyOC42LTQ4LjgsMzQuNSBjLTE5LjQsNS45LTQwLDYuMS01OS41LDAuNGMtMTkuNS01LjYtMzcuOS0xNy40LTUxLjctMzQuOWMtMTQtMTcuNS0yMy4yLTQwLjgtMTgtNjAuMmM1LTE5LjQsMjQuNS0zNC43LDQzLjUtNDguNCBzMzcuNi0yNS43LDU5LjUtMjkuN0MxMjkuMSw3LjMsMTU0LjIsMTEuNCwxNzAuNCwyNS43eiIgLz48L3N2Zz4=)" src="/img/img-3.jpg" width="960" height="640" loading="lazy">

`has--delimiter`

子要素の間にデリミタを疑似要素で出力します。

.has--delimiter {
  > * + *::before {
    content: var(--delimiter, ' / ');
    color: var(--delimiter-c, currentColor);
    white-space: pre;
  }
}

↓

has--delimiter

ContentContentContent

<div class='l--flex l--flex--cluster has--delimiter'>
  <span>Content</span>
  <span>Content</span>
  <span>Content</span>
</div>

↓

カスタマイズ例

ContentContentContent

<div class='l--flex l--flex--cluster has--delimiter -g:20' style="--delimiter-c:var(--blue);--delimiter:'>>'">
  <span className='-d:if -ai:c -g:i'>Content</span>
  <span className='-d:if -ai:c -g:i'>Content</span>
  <span className='-d:if -ai:c -g:i'>Content</span>
</div>

<Flex variant='cluster' hasDelimiter='>>' gap='20' style={{'--delimiter-c': 'var(--blue)'}}>
  <span className='-d:if -ai:c -g:i'>Content</span>
  <span className='-d:if -ai:c -g:i'>Content</span>
  <span className='-d:if -ai:c -g:i'>Content</span>
</Flex>

`has--divider`

子要素の間にボーダーを表示します。デフォルトではborder-block-endで線が描画されます。

ボーダーの色や太さは、-bd:クラスと同じく--bdwや--bdc変数で変更できます。

↓

has--divider

Content

<div class="l--box has--divider">
  <div class="-p:20">Content</div>
  <div class="-p:20">Content</div>
  <div class="-p:20">Content</div>
</div>

--isRow変数が1の時、区切り線はborder-inline-endで描画されます。
また、l--flexと併用された時、--isRow変数は1にセットされるようにもなっています。

↓

l--flexで使用する

Content

<div class="l--flex has--divider">
  <div class="-px:20">Content</div>
  <div class="-px:20">Content</div>
  <div class="-px:20">Content</div>
</div>

--isRowと flex-direction をクエリで切り替えるようなクラスを作っておくと、以下のように方向を切り替えることもできます。

↓

--isRowで方向を管理する.-fxd:c2r@smを作る

Content

リサイズ可能

.-fxd\:c2r\@sm {
  --isRow: 0;
  flex-direction: column;
}

@container (min-width: 480px) {
  .-fxd\:c2r\@sm {
    --isRow: 1;
    flex-direction: row;
  }
}

`.re--sh`

.re--sh クラスを指定した要素で、シャドウを構成する各CSS変数が再定義されます。

変数を上書きすることでシャドウの色味などを調整することが可能です。

↓

シャドウの上書き例

Default

Box

Custom

Box

<div class="re--sh l--flex -g:40" style="--sh-hsl:200 50% 50%;--sh-a:20%">
  <div class="l--box -bxsh:1 -p:40 -bdrs:3">Box</div>
  <div class="l--box -bxsh:4 -p:40 -bdrs:3">Box</div>
</div>

`.re--style`

基本的なスタイルがリセットされます。 buttun要素などをスタイリングする際に便利です。

↓

例

default:

reset:

<div>
  reset: <button className='re--style'>Button</button>
</div>

補足

コンテンツのサイズ制御について

ページのコンテンツエリアが次のような構造をしているとします。

<main>
  <article>
    ...コンテンツ...
  </article>
</main>

ここで、例えばarticle内のコンテンツ幅を800pxにしたい時を考えてみてください。

主に、次の①か②の選択肢があると思います。

/* ① コンテナ自身(コンテンツの親要素)の幅を制御する */
article{
  max-width: 800px;
}

/* ② 各コンテンツ（コンテナの直下要素）の幅を制御する */
article > * {
  max-width: 800px;
  margin-inline: auto;
}

どちらも一長一短ありますが、とくに理由がなければ①を採用することが多いのではないでしょうか。

しかし、Lismでは ② の方法を推奨しています。

この②のアプローチに対応するためのコンテンツ制御クラスが、-container:クラスです。また、②を前提としてis--wideやis--fullwideクラスは設計されています。

これはなぜかというと、① のアプローチをベースにした場合、途中で全幅サイズで表示したいコンテンツを作る場合の処理が複雑になってしまうためです。

↓

こういうやつ

コンテンツ…

全幅コンテンツ

コンテンツ…

②であれば、基本のCSSはmax-width:100%だけでOKで、少しの例外処理を加えれば済みます。

しかし①では、次のようなCSSになってしまいます。

.fullwide{
  max-width: 100vw;
  left: calc(50% - 50vw);
}

/* その他環境を考慮したCSS... */

これだけみるとそこまで複雑ではないように見えますが、vwではスクロールバーの幅が考慮されないという問題点があったり、汎用性を考慮するとCSSがどんどん複雑化していきます。

ただし、@propertyが有効なブラウザでは①の問題点もほぼ解消されるようになってきました。

そこで、Lismでは、is--overwide を用意しています。

①のようなアプローチを採用するには、is--containerにmax-widthを指定して運用し、全幅コンテンツに対してis--overwideクラスを使用てください。

↓

例

…コンテンツ…

全幅コンテンツ

…コンテンツ…

<Box hasGutter>
  <Container maxW='30rem' py='40' bd='u:guide' bdc='blue'>
    <Box bd='u:guide' py='10'>...コンテンツ...</Box>
    <Box isOverwide hasGutter bgc='gray:20%' py='20'>全幅コンテンツ</Box>
    <Box bd='u:guide' py='10'>...コンテンツ...</Box>
  </Container>
</Box>

Layout State

is--flow

Heading

Heading

.is--skipFlow

is--container

DEMO

is--wide|fullwide|overwide

is--layer

is--linkBox

is--hiddenLink, is--overlayLink

has--gutter

has--mask

has--delimiter

has--divider

.re--sh

.re--style

補足

コンテンツのサイズ制御について

`is--flow`

`.is--skipFlow`

`is--container`

`is--wide|fullwide|overwide`

`is--layer`

`is--linkBox`

`is--hiddenLink`, `is--overlayLink`

`has--gutter`

`has--mask`

`has--delimiter`

`has--divider`

`.re--sh`

`.re--style`