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

↓

Here are some 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	Whether breakpoint support classes (`-{prop}_{bp}`) are available

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`	-
`lh`	`line-height`	`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`	✔
`px-s`	`padding-inline-start`	-	✔
`px-e`	`padding-inline-end`	-	✔
`py-s`	`padding-block-start`	-	✔
`py-e`	`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`	✔
`mx-s`	`margin-inline-start`	`auto`	✔
`mx-e`	`margin-inline-end`	`auto`	✔
`my-s`	`margin-block-start`	`auto`, `SPACE`	✔
`my-e`	`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="-my-s: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`	-	-

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-x-s`	`inset-inline-start`	-	-
`i-x-e`	`inset-inline-end`	-	-
`i-y-s`	`inset-block-start`	-	-
`i-y-e`	`inset-block-end`	-	-

The examples below demonstrate positioning with position: absolute.

↓

Positioning examples

Resize

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

<Box pos="relative" ar="16/9" lh="1" 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-x-s`	`border-inline-start`	-	-
`bd-x-e`	`border-inline-end`	-	-
`bd-y-s`	`border-block-start`	-	-
`bd-y-e`	`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.