Trait Class

Trait Class は、要素に「役割」を宣言したり、「機能」を付与するためのクラス群です。
@layer lism-trait に属します。

is--{name}: 要素に役割・存在（〜である）を宣言するクラス
has--{name}: 要素に機能（〜を持つ）を付与するクラス

`is--*`（役割宣言）

クラス	概要
`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` 参照）

`has--*`（機能付与）

`has--transition`

専用の変数を用いて、transitionプロパティをセットします。

.has--transition {
  --duration: var(--transition-duration, 0.25s);
  --ease: ease;
  --delay: 0s;
  --transitionProps: all;
  transition: var(--duration) var(--ease) var(--delay);
  transition-property: var(--transitionProps);
}

↓

使用例

Example

<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>

活用例は hoverの解説ページを参照してください。

-hov

hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。

`has--gutter`

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

クラス名	余白量	初期値
`has--gutter`	`--gutter-size`	`var(--s30)`

.has--gutter {
  padding-inline: var(--gutter-size);
}

↓

例

Lorem ipsum content…

リサイズ

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

`has--snap`

scroll-snap-系のプロパティをCSS変数でセットできるようにします。

.has--snap {
  --snapType: both mandatory;
  --snapAlign: start;
  --snapStop: normal;
  scroll-snap-type: var(--snapType);

  & > * {
    scroll-snap-align: var(--snapAlign);
    scroll-snap-stop: var(--snapStop);
  }
}

変数	役割	初期値
`--snapType`	`scroll-snap-type` の値	`both mandatory`
`--snapAlign`	子要素の `scroll-snap-align` の値	`start`
`--snapStop`	子要素の `scroll-snap-stop` の値	`normal`

`has--mask`

--maskImg 変数と組み合わせて、自身にマスクを適用するクラスです。

.has--mask {
  --maskPos: 50%;
  --maskSize: contain;
  --maskRepeat: no-repeat;
  mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
}

変数	役割	初期値
`--maskImg`	マスク画像（SVG等）	—
`--maskPos`	マスクの位置	`50%`
`--maskSize`	マスクのサイズ	`contain`
`--maskRepeat`	マスクの繰り返し	`no-repeat`

↓

例

<div class="l--frame has--mask -ar:og" style="--maskImg:url('data:image/svg+xml,<svg viewBox=&quot;0 0 200 200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path fill=&quot;%23000000&quot; d=&quot;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&quot; /></svg>')">
  <img src="https://cdn.lism-css.com/img/u-2.jpg" width="960" height="640" alt="" loading="lazy" />
</div>

<Frame
  hasMask
  ar="og"
  style={{ '--maskImg': `url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23000000" 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 src="https://cdn.lism-css.com/img/u-2.jpg" width="960" height="640" alt="" loading="lazy" />
</Frame>

Trait Class

is--*（役割宣言）

has--*（機能付与）

has--transition

has--gutter

has--snap