Utility Class

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

スタイル・装飾をまとめてセットするようなクラスを分類しています。

`u--cbox`

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

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

/*
  Note: Property Class より優先度が下で定義すること
  Memo: bgcの mix は transparent ではなく --base と混ぜている → 背景メディアがあるときも可読性が落ちないように + chat のように同じ背景色の装飾が一部重なっていても大丈夫なように。
*/
.u--cbox {
  --c: color-mix(in srgb, var(--text), var(--keycolor) var(--cbox-cPct, 32%));
  --bgc: color-mix(in srgb, var(--base), var(--keycolor) var(--cbox-bgPct, 4%));
  --bdc: color-mix(in srgb, transparent, var(--keycolor) var(--cbox-bdPct, 64%));
  --link-c: var(--keycolor); // --link を上書きすると、keycolorに --link が使えなくなる
  color: var(--c);
  background-color: var(--bgc);

  // 相対カラー構文をサポートしているブラウザでは、 shadowのカラーもキーカラーに寄せる
  @supports (color: oklch(from red l c h)) {
    --shc: oklch(from var(--keycolor) calc(l / 1.5) calc(c / 1.5) h / 0.1);
  }
}

↓

例

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--cbox -p:20" style="--keycolor: var(--red)">
  <p>
    Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex
    eos <b>doloribus aut dolore</b> nisi provident.
  </p>
</div>
<div class="set--var:bxsh u--cbox -bd -bdrs:20 -bxsh:20 -p:20" style="--keycolor: var(--purple)">
  <p>
    Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex
    eos <b>doloribus aut dolore</b> nisi provident.
  </p>
</div>
<div class="u--cbox -bd-x-s -p:20" style="--keycolor: var(--brand); --bdc: var(--keycolor); --bdw: 4px">
  <p>
    Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex
    eos <b>doloribus aut dolore</b> nisi provident.
  </p>
</div>

<Lism util="cbox" keycolor="blue" p="20"><p>Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.</p></Lism>
<Lism util="cbox" keycolor="red" bd p="20"><p>Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.</p></Lism>
<Lism util="cbox" keycolor="purple" bd bdc="keycolor:base:25%" p="20"><p>Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.</p></Lism>
<Lism util="cbox" keycolor="#688f04" bd-x-s bdw="4px" p="20"><p>Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.</p></Lism>

↓

バッジで利用する例と、変数によるカスタマイズ例

BadgeBadgeBadge

リサイズ

<div class="u--cbox -p:20" style="--keycolor: var(--blue)">...</div>
<div class="u--cbox -bd -p:20" style="--keycolor: var(--red)">...</div>
<div class="u--cbox -bd -p:20" style="--keycolor: var(--purple); --bdc: color-mix(in srgb, var(--keycolor) 25%, var(--base))">...</div>
<div class="u--cbox -bd-x-s -p:20" style="--keycolor: #688f04; --bdw: 4px">...</div>

<Lism layout="cluster" g="10">
  <Lism as="span" util="cbox" keycolor="orange" bd fz="s" lh="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="green" bd fz="s" lh="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="blue" bd fz="s" lh="s" py="5" px="10" bdrs="99">Badge</Lism>
</Lism>
<Lism layout="cluster" g="10" style={{'--cbox-cPct': '76%', '--cbox-bdPct': '20%'}}>
  <Lism as="span" util="cbox" keycolor="orange" bd fz="s" lh="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="green" bd fz="s" lh="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="blue" bd fz="s" lh="s" py="5" px="10" bdrs="99">Badge</Lism>
</Lism>

↓

パレットカラー一覧

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

Title Text

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

`u--trim` & `u--trimAll`

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

自身のmargin-blockを調整するだけのu--trimと、子要素のテキスト系要素の上下マージンを一括で調整するu--trimAllがあります。

↓

u--trim

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

リサイズ

<div class="l--box -bd" style="--bds: dashed">
  <p class="u--trim">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>

/*
  ハーフレディングをトリミングするユーティリティクラス。
 */
.u--trim {
  margin-block: calc(var(--hl) * -1);
}

// 子要素の一括トリミング
// :empty → img, hr, input, br などにもマッチ。かつ中身のない装飾 a--divider や a--spacer もこれだけで除外できる
.u--trimAll > :not(:empty, figure, picture, video, button, textarea, table) {
  margin-block: calc(var(--hl) * -1);
}

u--trimAllは除外方式で、直下の子要素のうちトリムすべきでない要素（:empty, figure, picture, video, button, textarea, table）を除いたすべての要素にマージン調整を適用します。:empty により img・hr・br などの void element や、中身のない装飾 div（a--divider / a--spacer 等）も自動で除外されます。追加で除外したい要素がある場合は、利用側で .u--trimAll > xxx { margin-block: 0 } のように個別打ち消しで対応してください。

↓

u--trimAll

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

リサイズ

<div class="l--stack u--trimAll -bd -g:30 -p:30 -bdrs:10">
  <img class="-ar:og" src="https://cdn.lism-css.com/img/a-1.jpg" />
  <p>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
  <p>
    ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます...。
  </p>
</div>

<Stack util="trimAll" bd g="30" p="30" bdrs="10">
  <Media ar="og" src="https://cdn.lism-css.com/img/a-1.jpg" alt="" inferSize />
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  <p>
    ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
  </p>
</Stack>

`u--srOnly`

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

/* For screen reader text */

// .u--srOnly--focusable:not(:focus),
.u--srOnly:not(#_) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

`u--divide` & `u--cells`

u--divideはグリッド・フレックスボックス等の子要素間に区切り線を表示します。
u--cellsはグリッド・フレックスボックス等の子要素を囲んでテーブルのセルのように表示します。

.u--divide,
.u--cells {
  --bdw: 1px;
  --bdc: var(--divider);
  gap: var(--bdw);

  & > * {
    box-shadow: 0 0 0 var(--bdw) var(--bdc);
  }
}
/* 間の区切りだけ */
.u--divide {
  overflow: clip;
}
/* 各セルを囲む */
.u--cells {
  padding: var(--bdw);
}

実装としてはどちらもbox-shadowで表現しています。borderではないので、その点について扱いには注意が必要です。
u--divideは内部でoverflow: clipを指定しているため、子孫にツールチップやドロップダウンなど外側にはみ出す要素を配置する場合は意図せずクリップされる点に注意してください。

↓

u--divideとu--cellsの比較

divide

cells

リサイズ

<div class="l--autoColumns u--divide -bdrs:20" style="--cols:16rem">
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
</div>
<div class="l--autoColumns u--cells -bdrs:20" style="--cols:16rem">
  <div class="l--box -p:15">cells</div>
  <div class="l--box -p:15">cells</div>
  <div class="l--box -p:15">cells</div>
  <div class="l--box -p:15">cells</div>
  <div class="l--box -p:15">cells</div>
</div>

<AutoColumns util="divide" cols="16rem" bdrs="20">
  <Box p="15">divide</Box>
  <Box p="15">divide</Box>
  <Box p="15">divide</Box>
  <Box p="15">divide</Box>
  <Box p="15">divide</Box>
</AutoColumns>
<AutoColumns util="cells" cols="16rem" bdrs="20">
  <Box p="15">cells</Box>
  <Box p="15">cells</Box>
  <Box p="15">cells</Box>
  <Box p="15">cells</Box>
  <Box p="15">cells</Box>
</AutoColumns>

横並び・縦並びが変わるようなレイアウトでも、u--divideを活用すれば簡単に要素間のボーダーを表示できます。

↓

例

Item

リサイズ

<div class="l--flex u--divide -fxd:column -fxd_sm" style="--fxd_sm:row">
  <div class="-fx:1 -p:15">Item</div>
  <div class="-fx:1 -p:15">Item</div>
  <div class="-fx:1 -p:15">Item</div>
  <div class="-fx:1 -p:15">Item</div>
</div>

u--divideにbdを指定すると、要素が埋まっていないところが空白になっているカレンダーのようになる表現が可能です。

↓

bdを指定

Item

リサイズ

<div class="l--columns u--divide -cols_sm -bd -bdc:current -fz:s" style="--cols:4;--cols_sm:5">
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
</div>

<Columns util="divide" cols={["4", "5"]} bd bdc="current" fz="s">
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
  <Lism p="10">Item</Lism>
</Columns>

Gridでも u--cellsで table タグのような表現ができます。

↓

u--cellsを使ってテーブルのような表現にする

Lorem ipsum

Dolor sit amet

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

リサイズ

<Grid gtc={['2fr 3fr', '1fr 2fr']} util="cells">
  <Box p="15" bgc="base-2">A</Box>
  <Box p="15" bgc="base-2">B</Box>
  <Box p="15">Lorem ipsum</Box>
  <Box p="15">
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box p="15">Dolor sit amet</Box>
  <Box p="15">
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
    </p>
  </Box>
</Grid>

<div class="l--grid u--cells -gtc -gtc_sm -bd" style="--gtc: 2fr 3fr; --gtc_sm: 1fr 2fr">
  <div class="l--box -p:15 -bgc:base-2">A</div>
  <div class="l--box -p:15 -bgc:base-2">B</div>
  <div class="l--box -p:15">Lorem ipsum</div>
  <div class="l--box -p:15">
    <p>Lorem ipsum dolor sit, amet...</p>
  </div>
  <div class="l--box -p:15">Dolor sit amet</div>
  <div class="l--box -p:15">
    <p>Lorem ipsum dolor sit, amet...</p>
  </div>
</div>

`u--clipText`

テキストで背景をクリッピングするためのクラスです。

.u--clipText {
  // Memo: Property Class(s.-bg:`, `.-c:`) に負けないように important つけている
  background-clip: text !important;
  color: transparent !important;
}

↓

テキストで背景をクリッピング

TEXT

<Center>
  <Box util="clipText" bgr="no-repeat" bgi="linear-gradient(45deg, var(--blue), var(--pink))">
    <Text fz="5xl" fw="bold" lh="1" lts="l">
      TEXT
    </Text>
  </Box>
</Center>

<div class="l--center">
  <div class="l--box u--clipText -bgr:no-repeat" style="--bgi: linear-gradient(45deg, var(--blue), var(--pink))">
    <p class="-fz:5xl -fw:bold -lh:1 -lts:l">TEXT</p>
  </div>
</div>

Opt-in

ここからは、Lism CSS のコアCSSファイルには含まれていないが便利なユーティリティクラスの作成例をいくつか紹介します。

`u--inlineCenter`

絵文字やインラインアイコンをテキストのセンター位置に合わせて配置するためのクラスです。 vertical-align: middle;だけではずれが発生するため、追加でtranslateで調整を加えています。

↓

使用例

Lorem ipsum dolor sit amet.

Dog, and Cat.

🚀 Emoji.

Inline img icon.

<p><Icon util="inlineCenter" icon="alert" c="red" fz="xl" /> Lorem ipsum dolor sit amet.</p>
<p><Icon util="inlineCenter" as={Dog} fz="l" />Dog, and <Icon util="inlineCenter" as={Cat} fz="l"/>Cat.</p>
<p><span class="u--inlineCenter -fz:xl">🚀</span> Emoji.</p>
<p><Icon fz="2xl" util="inlineCenter" src="https://emojix.s3.ap-northeast-1.amazonaws.com/g3/svg/1f916.svg" alt="image" /> Inline img icon.</p>

.u--inlineCenter {
  vertical-align: middle; /* 基準をmiddleにセット */
  translate: 0 calc(-1 * (0.35em - 0.5ex)); /* middleの計算式を元に追加で調整。（0.5cap - 0.5ex が英文では理想。）*/
}

Utility Class

u--cbox

u--trim & u--trimAll

u--srOnly

u--divide & u--cells

u--clipText

Opt-in

u--inlineCenter

`u--cbox`

`u--trim` & `u--trimAll`

`u--srOnly`

`u--divide` & `u--cells`

`u--clipText`

`u--inlineCenter`