Lism CSS
Search

Property Class

Lism provides utility classes for the major CSS properties, making it easy to set frequently used values and tokens. For particularly important CSS properties, breakpoint-specific classes are also available.

These are called Property Classes and are defined in the format -{prop}(:{value}) and -{prop}_{bp}.

This page lists all available Property Classes.

You can change which classes are output by customizing via SCSS.

How to read the tables on this page

The tables below summarize information for each property.

ColumnDescription
ShorthandThe abbreviated form of the CSS property. This is the {prop} string in the -{prop}:{val} class format, and also the prop name used with Lism components.
PropertyThe corresponding CSS property
To ClassValues that are output as Property Utility classes
BPWhether breakpoint support classes (-{prop}_{bp}) are available

The shorthand string is output as a class name. It is also the property name used with Lism components.

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		-
↓
Examples

Example text

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

Related tokens: 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--

Related tokens: 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		✔
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--

Here are some examples of positioning elements with position: absolute.

↓

Positioning examples

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

The border specification has some unique behavior. See the border page for details.

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 — This long text will not wrap and will overflow

<p class="-whspace:nowrap -ov:hidden -bd -p:10 -bgc:base-2 -max-sz:s">
  whspace: nowrap — This long text will not wrap and will overflow
</p>

© Lism CSS. All rights reserved.

TOC