Utility Class

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.

/*
  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);
  }
}

↓

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

↓

Badge usage example and variable customization

BadgeBadgeBadge

Resize

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

↓

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>

/*
  ハーフレディングをトリミングするユーティリティクラス。
 */
.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 uses an exclusion approach: it applies margin adjustment to all direct children except those that shouldn’t be trimmed (:empty, figure, picture, video, button, textarea, table). The :empty pseudo-class automatically covers void elements like img, hr, br, as well as empty decorative divs (e.g. a--divider, a--spacer). If you need to exclude additional 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/a-1.jpg" />
  <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/a-1.jpg" 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--divide` & `u--cells`

u--divide displays dividing lines between children of a grid or flexbox container.
u--cells wraps each child in a border so they look like cells in a table.

.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);
}

Both are implemented using box-shadow (not actual borders), so some care is needed when using them.
u--divide applies overflow: clip internally. Be aware that descendant elements intended to overflow the container — such as tooltips or dropdowns — will be unintentionally clipped.

↓

Comparing u--divide and u--cells

divide

cells

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--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 makes it easy to show dividers between items in layouts that switch between horizontal and vertical.

↓

Example

Item

Resize

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

Adding bd to a grid with u--divide produces a calendar-like layout where empty cells are blank.

↓

With bd applied

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>

With Grid, u--cells can be used to create a table-like layout.

↓

Table-like layout using u--cells

Lorem ipsum

Dolor sit amet

Resize

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

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" bgi="linear-gradient(45deg, var(--blue), var(--pink))">
    <Text fz="5xl" fw="bold" lh="1" lts="l">
      TEXT
    </Text>
  </Box>
</Center>

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 surrounding text. Since vertical-align: middle; alone can cause misalignment, an additional translate adjustment is applied.

↓

Usage example

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; /* 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.) */
}

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`