Utility Class

This page introduces the utility classes available in Lism CSS.

These classes are categorized as classes that apply a set of styles or decorations together.

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

↓

Example

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='u--cbox set--shadow -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 className='u--cbox' keycolor='blue' p='20'><Dummy length='codes' /></Lism>
<Lism className='u--cbox' keycolor='red' bd p='20'><Dummy length='codes' /></Lism>
<Lism className='u--cbox' keycolor='purple' bd bdc='keycolor:base:25%' p='20'><Dummy length='codes' /></Lism>
<Lism className='u--cbox' keycolor='#688f04' bd-x-s bdw='4px' p='20'><Dummy length='codes' /></Lism>

↓

Badge usage example and variable customization

Badge Badge Badge

リサイズ可能

<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' className='u--cbox' keycolor='orange' bd fz='s' lh='s' py='5' px='10' bdrs='99'>Badge</Lism>
  <Lism as='span' className='u--cbox' keycolor='green' bd fz='s' lh='s' py='5' px='10' bdrs='99'>Badge</Lism>
  <Lism as='span' className='u--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' className='u--cbox' keycolor='orange' bd fz='s' lh='s' py='5' px='10' bdrs='99'>Badge</Lism>
  <Lism as='span' className='u--cbox' keycolor='green' bd fz='s' lh='s' py='5' px='10' bdrs='99'>Badge</Lism>
  <Lism as='span' className='u--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--trimChildren`

Classes for adjusting the half-leading spacing of text.

u--trim adjusts only the element’s own margin-block, while u--trimChildren adjusts the top and bottom margins of all child elements.

↓

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>

Margin adjustment is disabled for img, figure, and table elements inside u--trimChildren.

↓

u--trimChildren

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

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

リサイズ可能

<div class='u--trimChildren l--stack -bd -g:30 -p:30 -bdrs:10'>
  <img class='a--media -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>

`u--expandedLink`

A class for extending the clickable area to the parent element.

Primarily used together with is--linkBox to expand an inner link to cover the entire box.

See <LinkBox> for usage examples.

`u--srOnly`

A class for visually hiding an element. Use it for screen reader text and similar content.

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

`u--collapseGrid`

Displays dividing borders between children of a grid or flexbox container.

Implemented using box-shadow, so some care is needed when using it.

↓

Example

Grid Item

リサイズ可能

<Grid layout='fluidCols' className='u--collapseGrid' cols='12rem' bdrs='20'>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
</Grid>

↓

Setting p='0' and ov='clip' on the parent hides the outer border.

Grid Item

リサイズ可能

<Grid layout='fluidCols' className='u--collapseGrid' cols='12rem'>
  <Box p='15'><Dummy /></Box>
  <Box p='15'><Dummy /></Box>
  <Box p='15'><Dummy /></Box>
  <Box p='15'><Dummy /></Box>
  <Box p='15'><Dummy /></Box>
  <Box p='15'><Dummy /></Box>
  <Box p='15'><Dummy /></Box>
</Grid>

Adding bd to the parent grid in that state makes it possible to create a calendar-like layout where borders are not shown in empty cells.

↓

With bd applied

Grid Item

リサイズ可能

<Grid layout='fluidCols' className='u--collapseGrid' cols='10rem' ov='clip' p='0' bd>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
  <Box p='15'>Grid Item</Box>
</Grid>

This utility class also makes it easy to display borders between items in a flexbox layout that switches between horizontal and vertical arrangements.

↓

Example

Box

リサイズ可能

<Flex fxd={['column','row']} className='u--collapseGrid'>
  <Box fx='1' p='15'>Box</Box>
  <Box fx='1' p='15'>Box</Box>
  <Box fx='1' p='15'>Box</Box>
  <Box fx='1' p='15'>Box</Box>
</Flex>

You can also achieve a table-like layout using Grid.

↓

Table-like layout using u--collapseGrid

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']} className='u--collapseGrid'>
  <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'><Dummy /></Box>
  <Box p='15'>Dolor sit amet</Box>
  <Box p='15'><Dummy length='l'/></Box>
</Grid>

<div class='l--grid u--collapseGrid -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--snap`

Allows scroll-snap- properties to be set via CSS variables.

`u--clipText`

A class for clipping a background with text.

↓

Background clipped by text

TEXT

<Center>
  <Box className='u--clipText' bgi='linear-gradient(45deg, var(--blue), var(--pink))'>
    <HTML.p fz='5xl' fw='bold' lh='1' lts='l'>TEXT</HTML.p>
  </Box>
</Center>

...

Opt-in

The following are examples of useful utility classes that are not included in the Lism CSS core CSS file.

`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 className='u--inlineCenter' icon='alert' c='red' fz='xl' /> Lorem ipsum dolor sit amet.</p>
<p><Icon className='u--inlineCenter' as={Dog} fz='l' />Dog, and <Icon className='u--inlineCenter' as={Cat} fz='l'/>Cat.</p>
<p><span class='u--inlineCenter -fz:xl'>🚀</span> Emoji.</p>
<p><Icon fz='2xl' className='u--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--trimChildren

u--expandedLink

u--srOnly

u--collapseGrid

u--snap

u--clipText

Opt-in

u--inlineCenter

`u--cbox`

`u--trim` & `u--trimChildren`

`u--expandedLink`

`u--srOnly`

`u--collapseGrid`

`u--snap`

`u--clipText`

`u--inlineCenter`