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

Utilitiy Class

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

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

u--colbox

Section titled “u--colbox”

--keycol変数をベースに、--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--colbox -p:30' style='--keycol:var(--blue)'>...</div>
<div class='u--colbox -bd: -p:30' style='--keycol:var(--red)'>...</div>
<div class="u--colbox -bd: -bdc:mix -p:30" style="--keycol:var(--purple);--bdc1:var(--keycol);--bdc2:var(--c--base);--bdc-pct:25%">...</div>
<div class='u--colbox -bd:is -p:30' style='--keycol:#688f04;--bdw:4px;'>...</div>

u--clipText

Section titled “u--clipText”

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

.u--clipText{
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
↓
例
TEXT
リサイズ可能

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--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> を参照してください。