Lism CSS
検索

Property Class

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

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

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

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

このページの表の見方

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

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

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

Typography

ShorthandPropertyTo ClassBP
ffontinherit-
fzfont-sizeFZ✔
fffont-familyFF-
fwfont-weightFW-
fsfont-styleitalic-
lhline-heightLH,
1		-
ltsletter-spacingLTS-
tatext-aligncenter
left
right		-
tdtext-decorationnone-
tttext-transformupper
lower		-
↓
Examples

Example text

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

Colors

ShorthandPropertyTo ClassBP
ccolorbrand,accent
text,text-2,
base,
inherit		-
bgcbackground-colorbrand,accent
base,base-2,
text,
inherit
transparent		-
bdc--bdcbrand,accent
divider,
inherit,
transparent,
current		-
↓
Examples

Example text

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

関連トークン: COLOR

Spacing

Padding

ShorthandPropertyTo ClassBP
ppaddingSPACE✔
pxpadding-inlineSPACE✔
pypadding-blockSPACE✔
px-spadding-inline-start-✔
px-epadding-inline-end-✔
py-spadding-block-start-✔
py-epadding-block-end-✔
plpadding-left-✔
prpadding-right-✔
ptpadding-top-✔
pbpadding-bottom-✔

Margin

ShorthandPropertyTo ClassBP
mmarginauto, SPACE✔
mxmargin-inlineauto, SPACE✔
mymargin-blockauto, SPACE✔
mx-smargin-inline-startauto✔
mx-emargin-inline-endauto✔
my-smargin-block-startauto, SPACE✔
my-emargin-block-endauto✔
mlmargin-left-✔
mrmargin-right-✔
mtmargin-top-✔
mbmargin-bottom-✔
↓
Space Examples

Example text

Example text

リサイズ可能 
<div class="-p:20 -p_sm -bd" style="--p_sm: var(--s30)">
  <p>Example text</p>
  <p class="-my-s:20 -mx:30">Example text</p>
</div>

Width & Height

ShorthandPropertyTo ClassBP
wwidth100%,
fit(fit-content)		✔
hheight100%,
fit(fit-content)		✔
max-wmax-width100%✔
max-hmax-height100%✔
min-wmin-width100%✔
min-hmin-height100%✔
szinline-size--
max-szmax-inline-sizexs,s,m,l,xl,min,full,container-
min-szmin-inline-size--
yszblock-size--
max-yszmax-block-size--
min-yszmin-block-size--

関連トークン: SIZE

↓
Examples

Example text

<div class="-w:fit -h -bgc:base-2 -p:10 -bd" style="--h:5em">Example text</div>

Displays

ShorthandPropTo ClassBP
ddisplaynone,
block,
flex,
inline-flex,
grid,
inline-grid,
inline,
inline-block		✔
vvisibilityhidden-
oopacityOPACITY, 0-
ovoverflowauto, clip, hidden-
ov-xoverflow-xauto, clip, scroll-
ov-yoverflow-yauto, clip, scroll-
araspect-ratio21/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:-20 -px:20">Text</p>
</div>

Positions

ShorthandPropTo ClassBP
pospositionrelative,
absolute,
static,
fixed,
sticky		-
ttop0,50%,100%-
lleft0,50%,100%-
rright0,50%,100%-
bbottom0,50%,100%-
zz-index-1, 0, 1, 99-
iinset0-
i-xinset-inline--
i-yinset-block--
i-x-sinset-inline-start--
i-x-einset-inline-end--
i-y-sinset-block-start--
i-y-einset-block-end--

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

↓

配置の指定例

A
B
C
D
E
F
G
H
I
リサイズ可能 
<div class="l--box -pos:relative -ar:16/9 -lh:1 -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>

Layouts

Gap

ShorthandPropertyTo ClassBP
ggapSPACE,inherit✔
cgcolumn-gap-✔
rgrow-gap-✔

Flex

ShorthandPropTo ClassBP
fxwflex-wrapwrap✔
fxdflex-directioncolumn,
column-reverse,
row-reverse		✔
fxflex1✔
fxshflex-shrink0-
fxgflex-grow1-
fxbflex-basis-✔
↓
Examples
Item
Item
Item
<div class="l--flex -g:20">
  <div class="-fxg:1 -bd -p:10 -bgc:base-2">Item</div>
  <div class="-fxg:2 -bd -p:10 -bgc:base-2">Item</div>
  <div class="-fxg:1 -bd -p:10 -bgc:base-2">Item</div>
</div>

Grid

ShorthandPropTo ClassBP
gtgrid-template-✔
gtagrid-template-areas-✔
gtcgrid-template-columnssubgrid✔
gtrgrid-template-rowssubgrid✔
gafgrid-auto-flowcolumn,
row		✔
gargrid-auto-rows--
gacgrid-auto-columns--
gagrid-area1/1✔
gcgrid-column1/-1✔
grgrid-row1/-1✔
gcsgrid-column-start--
grsgrid-row-start--
gcegrid-column-end--
gregrid-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

ShorthandPropTo ClassBP
aialign-itemscenter, start, end, flex-start, flex-end, stretch✔
acalign-contentcenter, start, end, flex-start, flex-end, between✔
jijustify-itemscenter, start, end, flex-start, flex-end, stretch✔
jcjustify-contentcenter, start, end, flex-start, flex-end, between✔
aslfalign-selfcenter, start, end, stretch-
jslfjustify-selfcenter, start, end, stretch-
orderorder-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

ShorthandPropTo ClassBP
bxshbox-shadowSHADOW✔
bdrsborder-radiusRADIUS✔
↓
Examples
Box
<div class="-bxsh:20 -bdrs:20 -p:20 -bd">Box</div>

Border

ShorthandPropTo ClassBP
bdbordernone-
bdc--bdcbrand,accent
divider,
inherit,
transparent,
current		-
bds--bdsdashed,dotted,double-
bdw--bdw-✔
bd-tborder-top--
bd-rborder-right--
bd-bborder-bottom--
bd-lborder-left--
bd-xborder-inline--
bd-yborder-block--
bd-x-sborder-inline-start--
bd-x-eborder-inline-end--
bd-y-sborder-block-start--
bd-y-eborder-block-end--
↓
Examples

Box

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

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

Background

ShorthandPropTo ClassBP
bgbackground-✔
bgcbackground-colorbrand,accent
base,base-2,
text,
inherit
transparent		-
bgibackground-image--
bgrbackground-repeatno-repeat-
bgpbackground-positioncenter-
bgszbackground-sizecover,contain-

Other CSS

ShorthandPropTo ClassBP
floatfloatleft,right-
clearclearboth-
isolationisolationisolate-
ovwrapoverflow-wrapanywhere-
whspacewhite-spacenowrap-
↓
Examples

whspace: nowrap — この長いテキストは折り返さずにはみ出します

<p class="-whspace:nowrap -ov:hidden -bd -p:10 -bgc:base-2 -max-sz:s">
  whspace: nowrap — この長いテキストは折り返さずにはみ出します
</p>

© Lism CSS. All rights reserved.

目次