コンテンツにスキップ
Lism CSS

Utilitiy Class

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

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

u-cbox

Section titled “u-cbox”

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

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

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

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

u-trim & u-trimItems

Section titled “u-trim & u-trimItems”

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

自身のmargin-blockを調整するだけのu-trimと、子要素全ての上下マージンを調整するためのu-trimItemsがあります。

↓
u-trim

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能 
<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-trimItems内のimg, figure, tableに対してはマージンの調節を無効化しています。

↓
u-trimItems

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。

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

u-itemDivider

Section titled “u-itemDivider”

グリッド・フレックスボックス等の子要素間に区切りとなるようなボーダーを表示します。
（実装としてはbox-shadowで表現していますので、少し扱いに注意が必要です。）

↓
例

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

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

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

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

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

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

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

リサイズ可能 
<Grid gtc='liquid' className='u-itemDivider' cols='12rem' bdc='line'>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
</Grid>
↓
pにvar(--bdw)をセットすると、clipされた周囲のボーダーも見えるようになります。

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

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

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

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

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

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

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

リサイズ可能 
<Grid gtc='liquid' className='u-itemDivider' cols='12rem' bdc='line'>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'><Dummy /></Box>
</Grid>

親グリッドにbdを指定すると、要素が埋まっていないところだけボーダーを表示しないカレンダーのような表現が可能です。

↓
bdを指定

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能 
<Grid gtc='liquid' className='u-itemDivider' cols='10rem' ov='clip' p='0' bd bdc='line' bdrs='20'>
  <Box p='20'><Dummy length='s'/></Box>
  <Box p='20'><Dummy length='s'/></Box>
  <Box p='20'><Dummy length='s'/></Box>
  <Box p='20'><Dummy length='s'/></Box>
  <Box p='20'><Dummy length='s'/></Box>
  <Box p='20'><Dummy length='s'/></Box>
</Grid>

Flexboxで横並び・縦並びが変わるようなレイアウトでも、このユーティリティクラスを活用すれば簡単に要素感のボーダーを表示できます。

↓
例
Box
Box
Box
Box
リサイズ可能 
<Flex fxd={['column','row']} bd className='u-itemDivider'>
  <Box fx='1' p='20'>Box</Box>
  <Box fx='1' p='20'>Box</Box>
  <Box fx='1' p='20'>Box</Box>
  <Box fx='1' p='20'>Box</Box>
</Flex>
Section titled “u-expandedLink”

クリック範囲を親要素に広げるためのクラスです。

主にis--linkBoxと併用して、内部のリンクをボックス全体に広げるために使用します。

活用例は <LinkBox> を参照してください。

u-hidden

Section titled “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;
}

Opt-in

Section titled “Opt-in”

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

u-inlineCenter

Section titled “u-inlineCenter”

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

↓
使用例

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

Section titled “u-scFade”

スクロール可能な方向を示すためにコンテンツをフェードさせるためのクラスです。

↓
例

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

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima. 

<Flow p='40' ar='2/1' bgc='base-2' ov='auto' className='u-scFade:y'>
  <Dummy />
  <Dummy length='l' />
  <Dummy tag='img' />
  <Dummy length='xl' />
</Flow>
<Divider />
<Flex className='u-scFade:x set-snap' ov='auto' g='30'>
  <Frame ar='16/9' fxsh='0' w='40%'>
    <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' />
  </Frame>
  <Frame ar='16/9' fxsh='0' w='40%'>
    <img src='https://cdn.lism-css.com/img/a-2.jpg' alt='' />
  </Frame>
  <Frame ar='16/9' fxsh='0' w='40%'>
    <img src='https://cdn.lism-css.com/img/a-3.jpg' alt='' />
  </Frame>
  <Frame ar='16/9' fxsh='0' w='40%'>
    <img src='https://cdn.lism-css.com/img/a-4.jpg' alt='' />
  </Frame>
  <Frame ar='16/9' fxsh='0' w='40%'>
    <img src='https://cdn.lism-css.com/img/a-5.jpg' alt='' />
  </Frame>
</Flex>

u-scShadow

Section titled “u-scShadow”

スクロール可能な方向を示すためにshadowを内側に表示させるためのクラスです。
(insetなシャドウでスクロールヒントを表現しているため、内側コンテンツに背景色がついていたり、画像の場合は影が隠れてしまうことには注意が必要です。)

↓
例

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

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

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

<Flow className='u-scShadow:y' p='30' ar='2/1' ov='auto' max-sz='s' bgc='base-2'>
  <Dummy />
  <Dummy length='l' />
  <Dummy tag='img' />
  <Dummy length='xl' />
</Flow>
<Frame className='u-scShadow:x' p='30' ov='auto' max-sz='s' bgc='base-2'>
  <Dummy whitespace='nowrap' />
</Frame>