Utilitiy Class

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

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

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

リサイズ可能

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

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

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

↓

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

↓

u-trimItems

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

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

リサイズ可能

<div class='u-trimItems 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>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
  <p>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます...。</p>
</div>

`u-expandedLink`

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

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

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

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

`u-collapseGrid`

グリッド・フレックスボックス等の子要素間に区切りとなるようなボーダーを表示します。

実装としてはbox-shadowで表現していますので、少し扱いには注意が必要です。

↓

例

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>

↓

pにp='0' ov='clip'をセットすると、周囲のボーダーが見えなくなります。

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>

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

↓

bdを指定

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>

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

↓

例

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>

Gridを使って table タグのような表現もできるようになります。

↓

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

Lorem ipsum

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.

Dolor sit amet

リサイズ可能

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

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 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; // 基準をmiddleにセット
  translate: 0 calc(-1 * (0.35em - 0.5ex)); // middleの計算式を元に追加で調整。（0.5cap - 0.5ex が英文では理想。）
}

`u-scFade`

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

↓

例

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.

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.Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

<Flow p='30' 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='20'>
  <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`

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

↓

例

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.

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.

<Flow className='u-scShadow:y' p='20' 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='20' ov='auto' max-sz='s' bgc='base-2'>
  <Dummy whspace='nowrap' />
</Frame>

u-bgclipText

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

↓

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

TEXT

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

...

Utilitiy Class

u-cbox

u-trim & u-trimItems

u-expandedLink

u-hidden

u-collapseGrid

Opt-in

u-inlineCenter

u-scFade

u-scShadow

u-bgclipText

`u-cbox`

`u-trim` & `u-trimItems`

`u-expandedLink`

`u-hidden`

`u-collapseGrid`

`u-inlineCenter`

`u-scFade`

`u-scShadow`