Utilitiy Class

ユーティリティクラスを紹介します。

機能・スタイルが決まっていて優先度を高くしたいクラスを分類しています。

`u--colored`

--keycolor変数をベースに、--c, --bgc, --bdc を color-mix() で生成します。

color, background-color にそれぞれ生成された変数がセットされますが、--bdcは変数定義のみになるため、ボーダーを表示する時は-bd:クラスとの併用が必要です。

↓

例

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

リサイズ可能

<div class='u--colored -p:30' style='--keycolor:var(--blue)'>...</div>
<div class='u--colored -bd: -p:30' style='--keycolor:var(--red)'>...</div>
<div class='u--colored -bd:is -bdc:keycolor -p:30' style='--keycolor:#688f04;--bdw:4px'>...</div>

<Lism className='u--colored' keycolor='blue' p='30'><Dummy length='codes' /></Lism>
<Lism className='u--colored' keycolor='red' bd p='30'><Dummy length='codes' /></Lism>
<Lism className='u--colored' keycolor='#688f04' bd='is' bdc='keycolor' bdw='4px' p='30'><Dummy length='codes' /></Lism>

`u--trimHL`

テキストのハーフレディング分の余白を調整するためのクラスです。

↓

例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能

.u--trimHL {
  > :where(p, h1, h2, h3, h4, h5, h6):first-child {
    margin-block-start: calc(var(--herfLeading) * -1);
  }
  > :where(p, h1, h2, h3, h4, h5, h6):last-child {
    margin-block-end: calc(var(--herfLeading) * -1);
  }
}

`u--hidden`

要素を視覚的に隠すことができるクラスです。
スクリーンリーダー用のテキストなどに利用してください。

.u--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}