Lism CSS
Docs
Search

Property Class( -* )

Lism provides classes for the most common CSS properties, letting you apply frequently used values and tokens with a single class.
For the most critical properties, responsive breakpoint variants are available too.

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

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

This page lists all available Property Classes.

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

Reading the Tables

Each table covers one group of properties.

Column Description
Shorthand The 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.
Property The corresponding CSS property
To Class Values that are output as Property Classes
BP Breakpoint support classes (-{prop}_{bp}). ✔ covers sm, md, and lg, and - means unsupported.

The shorthand string itself is what gets output as the class name.

Typography

Shorthand Property To Class BP
f font inherit -
fz font-size FZ ✔
ff font-family FF -
fw font-weight FW,
100–900		 -
fs font-style italic -
hl line-height (half-leading) HL,
0		 ✔
lh line-height (ratio) LH,
1		 -
lts letter-spacing LTS -
ta text-align center
left
right		 -
td text-decoration none -
tt text-transform uppercase
lowercase		 -
↓
Examples

Example text

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

Colors

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

current is shorthand for currentColor (the element’s text color).

keycolor outputs a class that references the --keycolor variable (e.g. .-c\:keycolor { --c: var(--keycolor) }).

In full.css, every semantic and palette color token is also output as a class (such as -bgc:red), in addition to the values listed above.

↓
Examples

Example text

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

Related tokens: COLOR

Spacing

Padding

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

Margin

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

Prefer logical direction properties (ps, mbs, etc.), which follow the writing direction, over physical direction ones (pl, mt, etc.).

↓
Space Examples

Example text

Example text

Resize 
<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 variable only s,m,l,xl -

Related tokens: SIZE

↓
Examples

Example text

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

The full and bleed classes of max-sz behave slightly differently from the others: they expand relative to the width of the parent element or is--container. See the max-sz page for details.

-max-sz

How to use the -max-sz class for controlling the maximum width of content.

Display

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

Position

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

The examples below demonstrate positioning with position: absolute.

↓

Positioning examples

A
B
C
D
E
F
G
H
I
Resize 
<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>

Layouts

Gap

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

Flex

Shorthand Property To Class BP
fxf flex-flow - -
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
Item
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 Property 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 Property 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 ✔
pi place-items center, start, end -
pc place-content center, start, end -
aslf align-self center, start, end, stretch -
jslf justify-self center, start, end, stretch -
pslf place-self center, start, end -
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 Property To Class BP
bxsh box-shadow 0, SHADOW ✔
bdrs border-radius 0, RADIUS,
inner		 ✔
bdrs-tl border-top-left-radius - -
bdrs-tr border-top-right-radius - -
bdrs-br border-bottom-right-radius - -
bdrs-bl border-bottom-left-radius - -
bdrs-ss border-start-start-radius - -
bdrs-se border-start-end-radius - -
bdrs-es border-end-start-radius - -
bdrs-ee border-end-end-radius - -
↓
Examples
Box
<div class="-bxsh:20 -bdrs:20 -p:20 -bd">Box</div>

Border

Shorthand Property To Class BP
bd border none -
bdc --bdc brand,accent
divider,
keycolor,
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>

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

-bd

How to use the -bd Property Class and related CSS variables for border styling.

Background

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

Other Properties

Shorthand Property To Class BP
float float left,right -
clear clear both -
iso isolation isolate -
wm writing-mode vertical-rl ✔
whs white-space nowrap -
↓
Examples: vertical writing at sm size and above

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

Resize 
<div class="l--flow has--gutter -py:20 -w:100% -h -wm_sm" style="--h: 20em; --wm_sm: vertical-rl">
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
  <p>
    Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
  </p>
</div>

hover

In Lism, hover styles use Property Classes prefixed with -hov:. These work a little differently from regular Property Classes.

See the hover page for details.

-hov

How to use the -hov Property Class for controlling hover behavior and transitions.

© 2026 Lism CSS.