Utility Class( u--* )

This page covers the utility classes available in Lism CSS — classes that bundle a set of styles or decorations into a single class name.

`u--cbox`

Generates --c, --bgc, and --bdc from the --keycolor variable using color-mix().

color and background-color are set to the generated variables respectively, but --bdc is only defined as a variable — to display a border, use it together with the -bd class.

@use '../mixin' as mixin;

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

  color: var(--c);
  background-color: var(--bgc);

  // 相対カラー構文をサポートしているブラウザでは、 shadowのカラーもキーカラーに寄せる
  @supports (color: oklch(from red l c h)) {
    --mutedKeycolor: oklch(from var(--keycolor) l calc(c * 0.75) h);
    // --shc: color-mix(in srgb, var(--shadow), oklch(from var(--keycolor) l c h / 0.25) var(--cbox-shPct, 50%));
  }
}

↓

Example

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

Resize

<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--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 -bdc:keycolor -bd-s -p:20" style="--keycolor: var(--brand); --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="red" 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 bdrs="20" bxsh="20" set="bxsh" 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="brand" bdc="keycolor" bd-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>

↓

Badge usage example and variable customization

BadgeBadgeBadge

Resize

<div class="l--cluster -g:10">
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--red)">Badge</span>
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--green)">Badge</span>
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--blue)">Badge</span>
</div>
<div class="l--cluster -g:10" style="--cbox-cPct: 76%; --cbox-bdPct: 20%">
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--red)">Badge</span>
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--green)">Badge</span>
  <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--blue)">Badge</span>
</div>

<Lism layout="cluster" g="10">
  <Lism as="span" util="cbox" keycolor="red" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="green" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="blue" bd fz="s" hl="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="red" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="green" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
  <Lism as="span" util="cbox" keycolor="blue" bd fz="s" hl="s" py="5" px="10" bdrs="99">Badge</Lism>
</Lism>

↓

Palette color list

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`

Classes for adjusting the half-leading spacing of text.

u--trim adjusts only the element’s own margin-block, while u--trimAll trims the block margins of all text-like direct children in one go.

↓

u--trim

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

Resize

<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>

<Box bd bds="dashed">
  <Text util="trim">Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</Text>
</Box>

@use '../mixin' as mixin;

/*
  ハーフレディングをトリミングするユーティリティクラス。
  (1em - 1lh) / 2 = ハーフレディングの負値。--hl に依存しないため、hl / lh どちらのスコープでも正しくトリムされる。
 */
#{mixin.maybe_double('.u--trim')} {
  margin-block: calc((1em - 1lh) / 2);
}

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

u--trimAll applies margin adjustment to all direct children except the excluded elements (:empty, figure, picture, video, button, textarea, table). The :empty selector also excludes empty elements such as img, hr, br, and empty decorative divs (e.g. a--divider, a--spacer). To exclude other elements, add a rule like .u--trimAll > xxx { margin-block: 0 } on the consumer side.

↓

u--trimAll

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

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.

Resize

<div class="l--stack u--trimAll -bd -g:30 -p:30 -bdrs:10">
  <img class="-ar:og" src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<Stack util="trimAll" bd g="30" p="30" bdrs="10">
  <Media ar="og" src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" inferSize />
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
  <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>
</Stack>

`u--srOnly`

Visually hides an element while keeping it accessible to screen readers.

/* 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--clipText`

A class for clipping a background with text.

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

↓

Background clipped by text

TEXT

<Center>
  <Box util="clipText" bgr="no-repeat" bgi="linear-gradient(45deg, var(--blue), var(--pink))">
    <Text fz="5xl" fw="bold" hl="0" 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 -hl:0 -lts:l">TEXT</p>
  </div>
</div>

Opt-in

These utility classes are not included in the Lism CSS core stylesheet, but they are useful patterns you can add yourself.

`u--inlineCenter`

A class for aligning emoji or inline icons to the vertical center of the text. Since vertical-align: middle alone can cause misalignment, translate compensates for it.

↓

Usage example

Lorem ipsum dolor sit amet.

Dog, and Cat.

🚀 Emoji.

Inline img icon.

import { AlertIcon } from '@lism-css/icons/react';

<p><Icon util="inlineCenter" icon={AlertIcon} 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; /* Set baseline to middle */
  translate: 0 calc(-1 * (0.35em - 0.5ex)); /* Fine-tune based on the middle calculation. (0.5cap - 0.5ex is ideal for Latin text.) */
}

`u--divide` / `u--enclose`

u--divide draws dividing lines between the children of a grid or flexbox container, and u--enclose wraps each child in a frame so they look like table cells.

Both draw their lines with gap and each child’s box-shadow. Compared with border, the rendering is slightly rougher, and the lines can break in unexpected places when flex children wrap. For these reasons they are not part of the core. For dividers in layouts that switch direction, prefer switching bdw at breakpoints.

If you do use them, add them to the same @layer lism-utility as the core utility classes.

In the no-layer builds (main_no_layer.css / full_no_layer.css), the core utility classes are emitted outside @layer with doubled selectors (.u--trim.u--trim). So in those builds, remove the @layer lism-utility { ... } wrapper from the CSS below and replace .u--divide / .u--enclose with .u--divide.u--divide / .u--enclose.u--enclose.

They are not border, so border-related properties such as bds (border-style) have no effect. Set the line width with the --bdw variable.
u--divide applies overflow: clip, so descendants meant to overflow the container, such as tooltips or dropdowns, will be unintentionally clipped.

↓

Comparing u--divide and u--enclose

divide

enclose

Resize

<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--enclose -bdrs:20" style="--cols:16rem">
  <div class="l--box -p:15">enclose</div>
  <div class="l--box -p:15">enclose</div>
  <div class="l--box -p:15">enclose</div>
  <div class="l--box -p:15">enclose</div>
  <div class="l--box -p:15">enclose</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="enclose" cols="16rem" bdrs="20">
  <Box p="15">enclose</Box>
  <Box p="15">enclose</Box>
  <Box p="15">enclose</Box>
  <Box p="15">enclose</Box>
  <Box p="15">enclose</Box>
</AutoColumns>

@layer lism-utility {
  .u--divide,
  .u--enclose {
    --bdw: 1px;
    --bdc: var(--divider);
    gap: var(--bdw); /* Leave a gap as wide as the line */
  }
  .u--divide > *,
  .u--enclose > * {
    box-shadow: 0 0 0 var(--bdw) var(--bdc); /* Fill the gap with each child's shadow so it reads as a line */
  }
  /* Keep only the inner dividers (clip the outer shadows) */
  .u--divide {
    overflow: clip;
  }
  /* Frame every cell */
  .u--enclose {
    padding: var(--bdw);
  }
}

Adding bd to u--divide produces a calendar-like layout where empty cells stay blank while the grid lines remain.

↓

With bd

Item

Resize

<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>

Utility Class( u--* )

u--cbox

u--trim & u--trimAll

u--srOnly

u--clipText

Opt-in

u--inlineCenter

u--divide / u--enclose

`u--cbox`

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

`u--srOnly`

`u--clipText`

`u--inlineCenter`

`u--divide` / `u--enclose`