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

Prop Class

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

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

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

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

このページの表の見方

Section titled “このページの表の見方”

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

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

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

Typography

Section titled “Typography”
PropertyShorthandTo ClassBP
fontfinherit-
font-sizefzTYPE.FZ○
font-familyffTYPE.FF-
font-weightfwTYPE.FW-
font-stylefsitalic-
line-heightlhTYPE.LH,
1		-
letter-spacingltsTYPE.LTS-
text-aligntacenter
left
right		-
text-decorationtdnone
under		-
↓
Examples

Example text

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

writing-mode

Section titled “writing-mode”
PropertyShorthandTo ClassBP
writing-modewritingvertical⚪︎

縦書き用の値は、トークン（--writing--vertical）で管理しています。 （これにより、lang属性に合わせて変数を上書きすることで、vertical-rlかvertical-lrを切り替えることができるようにもなっています。）

↓
縦書きにする例

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。

リサイズ可能 
<div class='l--box -h -w:100% -writing:vertical' style='--h:20em'>
  <div class='l--flow has--gutter'>
    <p>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
    <p>ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy,...</p>
  </div>
</div>

Colors

Section titled “Colors”
PropertyShorthandTo ClassBP
colorcmain,accent
text,text-2,
base,
inherit
trsp(transparent)		-
background-colorbgcmain,accent
base,base-2,
text,
inherit
trsp(transparent)		-
--bdcbdcmain,accent
line,
inherit,
trsp(transparent)		-
↓
Examples

Example text 

<p class='-c:main -bgc:base-2 -bd -bdc:line -p:40'>Example text</p>

関連トークン: COLOR

Spacing

Section titled “Spacing”

Padding

Section titled “Padding”
PropertyShorthandTo ClassBP
paddingpSPACE○
padding-inlinepxSPACE○
padding-blockpySPACE○
padding-inline-startpx-s-○
padding-inline-endpx-e-○
padding-block-startpy-s-○
padding-block-endpy-e-○
padding-leftpl-○
padding-rightpr-○
padding-toppt-○
padding-bottompb-○

Margin

Section titled “Margin”
PropertyShorthandTo ClassBP
marginmauto, SPACE○
margin-inlinemxauto, SPACE○
margin-blockmyauto, SPACE○
margin-inline-startmx-sauto○
margin-inline-endmx-eauto○
margin-block-startmy-sauto, SPACE○
margin-block-endmy-eauto○
margin-leftmlauto○
margin-rightmrauto○
margin-topmtauto○
margin-bottommbauto○
↓
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:40">Example text</p>
</div>

Width & Height

Section titled “Width & Height”
PropertyShorthandTo ClassBP
widthw100%,
fit(fit-content)		○
heighth100%○
max-widthmax-w100%○
max-heightmax-h100%○
min-widthmin-w100%○
min-heightmin-h100%○
inline-sizesz--
max-inline-sizemax-szs,m,l,xl,outer,full-
min-inline-sizemin-sz--
block-sizeysz--
max-block-sizemax-ysz--
min-block-sizemin-ysz--

関連トークン: SIZE

Displays

Section titled “Displays”
PropShorthandTo ClassBP
displaydnone,
block,
in-flex(inline-flex)		○
visibilityvhidden-
opacityopOPACITY, 0-
overflowovauto, clip, hidden-
overflow-xovxauto, clip, scroll-
overflow-yovyauto, clip, scroll-
aspect-ratioar21/9,16/9,3/2,1/1,
og		○

Positions

Section titled “Positions”
PropShorthandTo ClassBP
positionposrel(relative),
abs(absolute),
static,
fixed,
sticky		-
topt0,50%,100%-
leftl0,50%,100%-
rightr0,50%,100%-
bottomb0,50%,100%-
z-indexz-1, 0, 1, 99-
inseti0-
inset-inlinei-x--
inset-blocki-y--
inset-inline-starti-x-s--
inset-inline-endi-x-e--
inset-block-starti-y-s--
inset-block-endi-y-e--

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

↓

配置の指定例

A
B
C
D
E
F
G
H
I
リサイズ可能 
<Box pos='rel' ar='3/2' lh='1'>
  <Box pos='abs' l='0' t='0' bd p='20'>A</Box>
  <Box pos='abs' l='50%' t='0' translate='-50X' bd p='20'>B</Box>
  <Box pos='abs' r='0' t='0' bd p='20'>C</Box>
  <Box pos='abs' l='0' t='50%' translate='-50Y' bd p='20'>D</Box>
  <Box pos='abs' l='50%' t='50%' translate='-50XY' bd p='20'>E</Box>
  <Box pos='abs' r='0' t='50%' translate='-50Y' bd p='20'>F</Box>
  <Box pos='abs' l='0' b='0' bd p='20'>G</Box>
  <Box pos='abs' l='50%' b='0' translate='-50X' bd p='20'>H</Box>
  <Box pos='abs' r='0' b='0' bd p='20'>I</Box>
</Box>

Layouts

Section titled “Layouts”

Gap

Section titled “Gap”
PropertyShorthandTo ClassBP
gapgSPACE,inherit○
column-gapg-x-○
row-gapg-y-○

Flex

Section titled “Flex”
PropShorthandTo ClassBP
flex-wrapfxwwrap○
flex-directionfxdcol(column),
col-r(column-reverse),
row-r(row-reverse)		○
flexfx1○
flex-shrinkfxsh0-
flex-growfxg1-
flex-basisfxb-○

Grid

Section titled “Grid”
PropShorthandTo ClassBP
grid-templategt-○
grid-template-areasgta-○
grid-template-columnsgtcsubgrid○
grid-template-rowsgtrsubgrid○
grid-auto-flowgafcol(column),
row		○
grid-auto-rowsgar--
grid-auto-columnsgac--
grid-areaga1/1○
grid-columngc1/-1○
grid-rowgr1/-1○
grid-column-startgcs--
grid-row-startgrs--
grid-column-endgce--
grid-row-endgre--

Places

Section titled “Places”
PropShorthandTo ClassBP
align-itemsaicenter, start, end, flex-s, flex-e, stretch⚪︎
align-contentaccenter, start, end, flex-s, flex-e, between⚪︎
justify-itemsjicenter, start, end, flex-s, flex-e, stretch⚪︎
justify-contentjccenter, start, end, flex-s, flex-e, between⚪︎
align-selfaslfcenter, start, end, stretch-
justify-selfjslfcenter, start, end, stretch-
orderorder-1, 0, 1-

Styling

Section titled “Styling”

Shadow

Section titled “Shadow”
PropShorthandTo ClassBP
box-shadowbxshSHADOW-

Radius

Section titled “Radius”
PropShorthandTo ClassBP
border-radiusbdrsRADIUS○

Border

Section titled “Border”
PropShorthandTo ClassBP
borderbdnone-
--bdcbdcline(--c--line), inherit-
--bdsbdsdashed,dotted,double-
--bdwbdw-○
border-topbd-t--
border-rightbd-r--
border-bottombd-b--
border-leftbd-l--
border-inlinebd-x--
border-blockbd-y--
border-inline-startbd-x-s--
border-inline-endbd-x-e--
border-block-startbd-y-s--
border-block-endbd-y-e--

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

Background

Section titled “Background”
PropShorthandTo ClassBP
backgroundbg-⚪︎
background-imagebgi--
background-positionbgpcenter-
background-sizebgszcover, contain-
background-repeatbgrno(no-repeat)-
background-attachmentbga--
background-originbgo--
background-clipbgcliptext-
background-blend-modebgblend--
↓
使用例
リサイズ可能 
<Columns g='20'>
  <Frame ar='16/9' bg='url(/img/pattern.png) center / 4rem'></Frame>
  <Frame ar='16/9' bgi='url(/img/pattern.png)' bgp='center' bgsz='4rem' bgblend='difference' bgc='white'></Frame>
</Columns>
↓
グラデーション
Gradient 
<Frame p='50' bg='linear-gradient(to top, #a8edea 0%, #fed6e3 100%)'>Gradient</Frame>
↓
テキストで背景をクリッピング

TEXT 

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

Transforms

Section titled “Transforms”
PropShorthandTo ClassBP
translatetranslate-50X,-50Y,-50XY-
rotaterotate45,-45,90,-90-
scalescale-X,-Y,-XY-

Other CSS

Section titled “Other CSS”
PropShorthandTo ClassBP
floatfloatleft,right-
clearclearboth-
isolationisolationisolate-
overflow-wrapovwrapany(anywhere)-
white-spacewhitespacenowrap-