Skip to content
Lism CSS

Utilitiy Class

This content is not available in your language yet.

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

機能・スタイルが決まっていて優先度を高くしたいクラスを分類しています。

u--cbox

Section titled “u--cbox”

--keycolor変数をベースに、--c, --bgc, --bdc を color-mix() で生成します。

color, background-color にそれぞれ生成された 変数がセットされますが、--bdcは変数定義のみになるため、ボーダーを表示する時は-bdクラスとの併用が必要です。

↓
CSS
↓
例

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 -bdc:mix -p:30" style="--keycolor:var(--purple);--_bdc1:var(--keycolor);--_bdc2:var(--c-base);--_mixpct-bdc:25%">...</div>
<div class='u--cbox -bd:is -p:30' style='--keycolor:#688f04;--bdw:4px;'>...</div>

u--clipText

Section titled “u--clipText”

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

.u--clipText{
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
↓
例

TEXT 

<div class="l--center">
  <div class="l--box u--clipText -bg" style="--bg:linear-gradient(45deg, var(--blue), var(--pink))">
    <p class="-fz:5xl -fw:900 -lts:l">TEXT</p>
  </div>
</div>

u--trimHL & u--trimBox

Section titled “u--trimHL & u--trimBox”

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

自身のmargin-blockを調整するためのu--trimHLと、子要素の最初と最後の要素の上下だけを調整するためのu--trimBoxがあります。

↓
CSS
↓
u--trimHL

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

リサイズ可能 
<div class="l--box -bd" style="--bds:dashed">
  <p class="u--trimHL">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
↓
u--trimBox

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

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.

リサイズ可能 
<div class="u--trimBox -bd -p:30">
  <p>...</p>
</div>

u--outerR & u--innerR

Section titled “u--outerR & u--innerR”

親要素の角丸とPaddingの値から、内側の要素の角丸を計算するユーティリティペアクラスです。 親要素(u--outerR)に p(--p), bdrs(--bdrs) の指定が必須となります。

↓
使用例
<Lism className='u--outerR' p='20' bd bxsh='20' bdrs='50'>
  <Frame className='u--innerR'>
    <Media ar='ogp' src='/img/img-4.jpg'/>
  </Frame>
</Lism>

p, bdrsはブレイクポイントで値を変えても変数管理されているため、u--innerRの角丸もレスポンシブ対応できます。

↓
使用例

Example

リサイズ可能 
<Lism p={[10, 20, 30]} bd bdw='2px' bdrs={['4',null,'5']} class='u--outerR'>
  <Lism bd p='20' class='u--innerR'>
    Example
  </Lism>
</Lism>

u--skipFlow

Section titled “u--skipFlow”

.is--flow 直下で使用すると、次に続く兄弟要素との余白量を打ち消します。
フローコンテンツの先頭に absolute な要素を配置したい場合などに活用できます。

.u--skipFlow + * {
  --mbs: 0;
}
↓
例
skipFlow…

Lorem ipsum, Example content…

Lorem ipsum, Example content…

Lorem ipsum, Example content…

<div class="is--flow -p:10">
  <div class='u--skipFlow'>skipFlow...</div>
  <p>Lorem ipsum, Example content...</p>
  <p>Lorem ipsum, Example content...</p>
  <p>Lorem ipsum, Example content...</p>
</div>

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

u--overlayLink

Section titled “u--overlayLink”

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

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