Property Class

Lismでは、主要なCSSプロパティ群に対して、それらで頻繁に使用される値やトークンを手軽にセットできるようなユーティリティクラスを用意しています。
さらに、その中でも特に重要なCSSプロパティについてはブレイクポイント指定用クラスも用意しています。

それらを Property Class と呼んでおり、-{prop}(:{value}), -{prop}_{bp} という形式で定義しています。

↓

例えば以下のようなものがあります。

.-fz\:l { font-size: var(--fz--l) }
.-fz\:xl { font-size: var(--fz--xl) }
.-ta\:center { text-align: center }
.-d\:none { display: none }
.-p\:20 { --p: var(--s20) }

.-d{display:var(--d)}
.-p,[class*="-p:"]{padding:var(--p)}
@container (min-width: 480px) {
  .-d_sm{display:var(--d_sm)}
  .-p_sm{padding:var(--p);--p:var(--p_sm)!important}
}
@container (min-width: 800px) {
  .-d_md{display:var(--d_md)}
  .-p_md{padding:var(--p);--p:var(--p_md)!important}
}

このページでは、その Property Classの一覧を紹介します。

SCSSでカスタマイズすることで、出力するクラスの種類は変更できます。

このページの表の見方

ここからはテーブル形式で、各プロパティの情報をまとめていきます。

|カラム名|説明| |---|---| |Shorthand|CSSプロパティの省略形。Propertyクラスの-{prop}:{val}の{prop}にあたる文字列です。
また、Lismコンポーネントに指定するためのプロパティ名もこの文字列です。| |Property|対応するCSSプロパティ| |To Class|Property Utility クラスとして出力される値| |BP|ブレイクポイント対応クラス（-{prop}_{bp}）のサポート状況。✔ は sm・md・lg に対応、- は非対応。|

省略形の文字列(Shorthand)は、クラスとして出力されます。また、Lismコンポーネントに指定するプロパティも、この文字列です。

Typography

|Shorthand|Property|To Class|BP| |---|---|---|---| |f|font|inherit|-| |fz|font-size|FZ|✔| |ff|font-family|FF|-| |fw|font-weight|FW|-| |fs|font-style|italic|-| |hl|line-height（ハーフレディング）|LH,
0|✔| |lh|line-height（互換）|LH,
1|-| |lts|letter-spacing|LTS|-| |ta|text-align|center
left
right|-| |td|text-decoration|none|-| |tt|text-transform|upper
lower|-|

↓

Examples

Example text

<p class="-fz:xl -fw:bold -lts:l -ta:center -tt:upper">Example text</p>

Colors

|Shorthand|Property|To Class|BP| |---|---|---|---| |c|color|brand,accent
text,text-2,
base,
inherit|-| |bgc|background-color|brand,accent
base,base-2,
text,
inherit
transparent|-| |bdc|--bdc|brand,accent
divider,
inherit,
transparent,
current|-|

↓

Examples

Example text

<p class="-c:brand -bgc:base-2 -bdc:current -bd -p:30">Example text</p>

Spacing

Padding

|Shorthand|Property|To Class|BP| |---|---|---|---| |p|padding|SPACE|✔| |px|padding-inline|SPACE|✔| |py|padding-block|SPACE|✔| |ps|padding-inline-start|-|✔| |pe|padding-inline-end|-|✔| |pbs|padding-block-start|-|✔| |pbe|padding-block-end|-|✔| |pl|padding-left|-|-| |pr|padding-right|-|-| |pt|padding-top|-|-| |pb|padding-bottom|-|-|

Margin

|Shorthand|Property|To Class|BP| |---|---|---|---| |m|margin|auto, SPACE|✔| |mx|margin-inline|auto, SPACE|✔| |my|margin-block|auto, SPACE|✔| |ms|margin-inline-start|auto|✔| |me|margin-inline-end|auto|✔| |mbs|margin-block-start|auto, SPACE|✔| |mbe|margin-block-end|auto|✔| |ml|margin-left|-|-| |mr|margin-right|-|-| |mt|margin-top|-|-| |mb|margin-bottom|-|-|

↓

Space Examples

Example text

リサイズ

<div class="-p:20 -p_sm -bd" style="--p_sm: var(--s30)">
  <p>Example text</p>
  <p class="-mbs:20 -mx:30">Example text</p>
</div>

Width & Height

|Shorthand|Property|To Class|BP| |---|---|---|---| |w|width|100%,
fit(fit-content)|✔| |h|height|100%,
fit(fit-content)|✔| |max-w|max-width|100%|✔| |max-h|max-height|100%|✔| |min-w|min-width|100%|✔| |min-h|min-height|100%|✔| |sz|inline-size|-|-| |max-sz|max-inline-size|xs,s,m,l,xl,bleed,full|-| |min-sz|min-inline-size|-|-| |bsz|block-size|-|-| |max-bsz|max-block-size|-|-| |min-bsz|min-block-size|-|-| |contentSize|--contentSize 変数のみ|s,m,l,xl|-|

Displays

|Shorthand|Prop|To Class|BP| |---|---|---|---| |d|display|none,
block,
flex,
inline-flex,
grid,
inline-grid,
inline,
inline-block|✔| |v|visibility|hidden|-| |o|opacity|OPACITY, 0|-| |ov|overflow| auto, clip, hidden|-| |ov-x|overflow-x|auto, clip, scroll|-| |ov-y|overflow-y|auto, clip, scroll|-| |ovw|overflow-wrap|anywhere|-| |ar|aspect-ratio|21/9,16/9,3/2,1/1,
og|✔|

↓

Examples

Box

Text

<div>
  <p class="-d:inline-flex -ar:1/1 -p:20 -bgc:base-2 -bd">Box</p>
  <p class="-d:inline-flex -o:pp -px:20">Text</p>
</div>

Positions

|Shorthand|Prop|To Class|BP| |---|---|---|---| |pos|position|relative,
absolute,
static,
fixed,
sticky|✔| |t|top|0,50%,100%|-| |l|left|0,50%,100%|-| |r|right|0,50%,100%|-| |b|bottom|0,50%,100%|-| |z|z-index|-1, 0, 1, 99|-| |i|inset|0|-| |i-x|inset-inline|-|-| |i-y|inset-block|-|-| |i-s|inset-inline-start|-|-| |i-e|inset-inline-end|-|-| |i-bs|inset-block-start|-|-| |i-be|inset-block-end|-|-|

position:absoluteで要素を配置する例をいくつか紹介します。

↓

配置の指定例

リサイズ

<div class="l--box -pos:relative -ar:16/9 -hl:0 -ff:mono">
  <div class="-pos:absolute -l:0 -t:0 -bgc:base-2 -bd -p:10">A</div>
  <div class="-pos:absolute -l:0 -r:0 -w:fit -mx:auto -bgc:base-2 -bd -p:10">B</div>
  <div class="-pos:absolute -r:0 -t:0 -bgc:base-2 -bd -p:10">C</div>
  <div class="-pos:absolute -l:0 -t:0 -b:0 -h:fit -my:auto -bgc:base-2 -bd -p:10">D</div>
  <div class="-pos:absolute -i:0 -m:auto -w:fit -h:fit -bgc:base-2 -bd -p:10">E</div>
  <div class="-pos:absolute -r:0 -t:0 -b:0 -h:fit -my:auto -bgc:base-2 -bd -p:10">F</div>
  <div class="-pos:absolute -l:0 -b:0 -bgc:base-2 -bd -p:10">G</div>
  <div class="-pos:absolute -l:0 -r:0 -b:0 -w:fit -mx:auto -bgc:base-2 -bd -p:10">H</div>
  <div class="-pos:absolute -r:0 -b:0 -bgc:base-2 -bd -p:10">I</div>
</div>

<Box pos="relative" ar="16/9" hl="0" ff="mono">
  <Group pos="absolute" l="0" t="0" bgc="base-2" bd p="10">A</Group>
  <Group pos="absolute" l="0" r="0" w="fit" mx="auto" bgc="base-2" bd p="10">B</Group>
  <Group pos="absolute" r="0" t="0" bgc="base-2" bd p="10">C</Group>
  <Group pos="absolute" l="0" t="0" b="0" h="fit" my="auto" bgc="base-2" bd p="10">D</Group>
  <Group pos="absolute" i="0" m="auto" w="fit" h="fit" bgc="base-2" bd p="10">E</Group>
  <Group pos="absolute" r="0" t="0" b="0" h="fit" my="auto" bgc="base-2" bd p="10">F</Group>
  <Group pos="absolute" l="0" b="0" bgc="base-2" bd p="10">G</Group>
  <Group pos="absolute" l="0" r="0" b="0" w="fit" mx="auto" bgc="base-2" bd p="10">H</Group>
  <Group pos="absolute" r="0" b="0" bgc="base-2" bd p="10">I</Group>
</Box>

Layouts

Gap

|Shorthand|Property|To Class|BP| |---|---|---|---| |g|gap|SPACE,inherit|✔| |cg|column-gap|-|-| |rg|row-gap|-|-|

Flex

|Shorthand|Prop|To Class|BP| |---|---|---|---| |fxw|flex-wrap|wrap|✔| |fxd|flex-direction|column,
column-reverse,
row-reverse|✔| |fx|flex|1|✔| |fxsh|flex-shrink|0|-| |fxg|flex-grow|1|-| |fxb|flex-basis|-|✔|

↓

Examples

Item

<div class="l--flex -g:20">
  <div class="-fxg:1 -bd -p:10 -bgc:base-2">Item</div>
  <div class="-bd -p:10 -bgc:base-2" style="flex-grow: 2">Item</div>
  <div class="-fxg:1 -bd -p:10 -bgc:base-2">Item</div>
</div>

Grid

|Shorthand|Prop|To Class|BP| |---|---|---|---| |gt|grid-template|-|✔| |gta|grid-template-areas|-|✔| |gtc|grid-template-columns|subgrid|✔| |gtr|grid-template-rows|subgrid|✔| |gaf|grid-auto-flow|column,
row|✔| |gar|grid-auto-rows|-|-| |gac|grid-auto-columns|-|-| |ga|grid-area|1/1|✔| |gc|grid-column|1/-1|✔| |gr|grid-row|1/-1|✔| |gcs|grid-column-start|-|-| |grs|grid-row-start|-|-| |gce|grid-column-end|-|-| |gre|grid-row-end|-|-|

↓

Examples

Item A

Item B

Item C

<div class="l--grid -g:20 -gtc" style="--gtc: repeat(2, 1fr)">
  <div class="-gc:1/-1 -bd -p:10 -bgc:base-2">Item A</div>
  <div class="-bd -p:10 -bgc:base-2">Item B</div>
  <div class="-bd -p:10 -bgc:base-2">Item C</div>
</div>

Places

|Shorthand|Prop|To Class|BP| |---|---|---|---| |ai|align-items|center, start, end, flex-start, flex-end, stretch|✔| |ac|align-content|center, start, end, flex-start, flex-end, between|✔| |ji|justify-items|center, start, end, flex-start, flex-end, stretch|✔| |jc|justify-content|center, start, end, flex-start, flex-end, between|✔| |aslf|align-self|center, start, end, stretch|-| |jslf|justify-self|center, start, end, stretch|-| |order|order|-1, 0, 1|✔|

↓

Examples

Item 1

Item 2

<div class="l--flex -jc:between">
  <div class="-bd -p:10 -bgc:base-2">Item 1</div>
  <div class="-bd -p:10 -bgc:base-2">Item 2</div>
</div>

Styling

Shadow & Radius

|Shorthand|Prop|To Class|BP| |---|---|---|---| |bxsh|box-shadow|SHADOW|✔| |bdrs|border-radius|RADIUS|✔|

↓

Examples

Box

<div class="-bxsh:20 -bdrs:20 -p:20 -bd">Box</div>

Border

|Shorthand|Prop|To Class|BP| |---|---|---|---| |bd|border|none|-| |bdc|--bdc|brand,accent
divider,
inherit,
transparent,
current|-| |bds|--bds|dashed,dotted,double|-| |bdw|--bdw|-|✔| |bd-t|border-top|-|-| |bd-r|border-right|-|-| |bd-b|border-bottom|-|-| |bd-l|border-left|-|-| |bd-x|border-inline|-|-| |bd-y|border-block|-|-| |bd-s|border-inline-start|-|-| |bd-e|border-inline-end|-|-| |bd-bs|border-block-start|-|-| |bd-be|border-block-end|-|-|

↓

Examples

Box

<div class="-bd -bdc:current -bds:dashed -p:20" style="--bdw:2px"><p>Box</p></div>

borderに関する仕様は少し特殊になっていますので、詳しくはborderページをご覧ください。

-bd

ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。

Background

|Shorthand|Prop|To Class|BP| |---|---|---|---| |bg|background|-|-| |bgc|background-color|brand,accent
base,base-2,
text,
inherit
transparent|-| |bgi|background-image|-|-| |bgr|background-repeat|no-repeat|-| |bgp|background-position|center|-| |bgsz|background-size|cover,contain|-|

Other Properties

|Shorthand|Prop|To Class|BP| |---|---|---|---| |float|float|left,right|-| |clear|clear|both|-| |iso|isolation|isolate|-| |wm|writing-mode|vertical-rl|✔| |whs|white-space|nowrap|-|

↓

Examples: smサイズ以上で縦書きにする例

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

Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

リサイズ

<div class="l--flow has--gutter -py:20 -w:100% -h -wm_sm" style="--h: 20em; --wm_sm: vertical-rl">
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  <p>
    Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、決するための答えというより、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。
  </p>
</div>

<Flow hasGutter py="20" w="100%" h="20em" wm={[null, 'vertical-rl']}>
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  <p>
    Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。
  </p>
</Flow>

hover

Lismでは、:hover時のスタイルは-hov:で始まるPropertyクラスで定義します。

ただし、-hov系クラスは通常のPropertyクラスと比べて少し特殊な仕組みで動作します。

詳しくはhoverページをご覧ください。

-hov

hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。