Property Class

Lism provides utility 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 Utility classes | |BP| Breakpoint support classes (-{prop}_{bp}). ✔ covers sm, md, and lg, and - means unsupported. |

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 (half-leading)|LH,
0|✔| |lh|line-height (compat)|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|-|

↓

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

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>

Display

|Shorthand|Prop|To Class|BP| |---|---|---|---| |d|display|none,
block,
flex,
inline-flex,
grid,
inline-grid|✔| |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|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|-|-|

The examples below demonstrate positioning with position: absolute.

↓

Positioning examples

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>

<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="-fxg:2 -bd -p:10 -bgc:base-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|-| |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 classes and related CSS variables for border styling.

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

<Flow hasGutter py="20" w="100%" h="20em" wm={[null, '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>
</Flow>

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 classes for controlling hover behavior and transitions.