Prop 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 Prop Classes and are defined in the format -{prop}(:{value}) and -{prop}_{bp}.

This page lists all available Prop 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.

Column	Description
Property	The CSS property
Shorthand	The abbreviated form. This is the `{prop}` string in the `-{prop}:{val}` class format, and also the prop name used with Lism components.
To Class	Values that are output as Prop Utility classes
BP	Whether 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

Property	Shorthand	To Class	BP
`font`	`f`	`inherit`	-
`font-size`	`fz`	`FZ`	○
`font-family`	`ff`	`FF`	-
`font-weight`	`fw`	`FW`	-
`font-style`	`fs`	`italic`	-
`line-height`	`lh`	`LH`, `1`	-
`letter-spacing`	`lts`	`LTS`	-
`text-align`	`ta`	`center` `left` `right`	-
`text-decoration`	`td`	`none`	-
`text-transform`	`tt`	`upper` `lower`	-

↓

Examples

Example text

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

Colors

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

↓

Examples

Example text

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

Related tokens: COLOR

Spacing

Padding

Property	Shorthand	To Class	BP
`padding`	`p`	`SPACE`	○
`padding-inline`	`px`	`SPACE`	○
`padding-block`	`py`	`SPACE`	○
`padding-inline-start`	`px-s`	-	○
`padding-inline-end`	`px-e`	-	○
`padding-block-start`	`py-s`	-	○
`padding-block-end`	`py-e`	-	○
`padding-left`	`pl`	-	○
`padding-right`	`pr`	-	○
`padding-top`	`pt`	-	○
`padding-bottom`	`pb`	-	○

Margin

Property	Shorthand	To Class	BP
`margin`	`m`	`auto`, `SPACE`	○
`margin-inline`	`mx`	`auto`, `SPACE`	○
`margin-block`	`my`	`auto`, `SPACE`	○
`margin-inline-start`	`mx-s`	`auto`	○
`margin-inline-end`	`mx-e`	`auto`	○
`margin-block-start`	`my-s`	`auto`, `SPACE`	○
`margin-block-end`	`my-e`	`auto`	○
`margin-left`	`ml`	-	○
`margin-right`	`mr`	-	○
`margin-top`	`mt`	-	○
`margin-bottom`	`mb`	-	○

↓

Space Examples

Example text

リサイズ可能

<div class="-p:15 -p_sm -bd" style="--p_sm:var(--s20)">
  <p>Example text</p>
  <p class="-my-s:15 -mx:20">Example text</p>
</div>

Width & Height

Property	Shorthand	To Class	BP
`width`	`w`	`100%`, `fit`(`fit-content`)	○
`height`	`h`	`100%`, `fit`(`fit-content`)	○
`max-width`	`max-w`	`100%`	○
`max-height`	`max-h`	`100%`	○
`min-width`	`min-w`	`100%`	○
`min-height`	`min-h`	`100%`	○
`inline-size`	`sz`	-	-
`max-inline-size`	`max-sz`	`xs`,`s`,`m`,`l`,`xl`,`min`,`full`,`container`	-
`min-inline-size`	`min-sz`	-	-
`block-size`	`ysz`	-	-
`max-block-size`	`max-ysz`	-	-
`min-block-size`	`min-ysz`	-	-

Related tokens: SIZE

Displays

Prop	Shorthand	To Class	BP
`display`	`d`	`none`, `block`, `in-flex`(`inline-flex`)	○
`visibility`	`v`	`hidden`	-
`opacity`	`o`	`OPACITY`, `0`	-
`overflow`	`ov`	`auto`, `clip`, `hidden`	-
`overflow-x`	`ov-x`	`auto`, `clip`, `scroll`	-
`overflow-y`	`ov-y`	`auto`, `clip`, `scroll`	-
`aspect-ratio`	`ar`	`21/9`,`16/9`,`3/2`,`1/1`, `og`	○

Positions

Prop	Shorthand	To Class	BP
`position`	`pos`	`rel`(`relative`), `abs`(`absolute`), `static`, `fixed`, `sticky`	-
`top`	`t`	`0`,`50%`,`100%`	-
`left`	`l`	`0`,`50%`,`100%`	-
`right`	`r`	`0`,`50%`,`100%`	-
`bottom`	`b`	`0`,`50%`,`100%`	-
`z-index`	`z`	`-1`, `0`, `1`, `99`	-
`inset`	`i`	`0`	-
`inset-inline`	`i-x`	-	-
`inset-block`	`i-y`	-	-
`inset-inline-start`	`i-x-s`	-	-
`inset-inline-end`	`i-x-e`	-	-
`inset-block-start`	`i-y-s`	-	-
`inset-block-end`	`i-y-e`	-	-

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

↓

Positioning examples

リサイズ可能

<Box pos='rel' ar='3/2' lh='1' ff='mono'>
  <HTML.div pos='abs' l='0' t='0' bgc='base-2' bd p='10'>A</HTML.div>
  <HTML.div pos='abs' l='0' r='0' w='fit' mx='auto' bgc='base-2' bd p='10'>B</HTML.div>
  <HTML.div pos='abs' r='0' t='0' bgc='base-2' bd p='10'>C</HTML.div>
  <HTML.div pos='abs' l='0' t='0' b='0' h='fit' my='auto' bgc='base-2' bd p='10'>D</HTML.div>
  <HTML.div pos='abs' i='0' m='auto' w='fit' h='fit' bgc='base-2' bd p='10'>E</HTML.div>
  <HTML.div pos='abs' r='0' t='0' b='0' h='fit' my='auto' bgc='base-2' bd p='10'>F</HTML.div>
  <HTML.div pos='abs' l='0' b='0' bgc='base-2' bd p='10'>G</HTML.div>
  <HTML.div pos='abs' l='0' r='0' b='0' w='fit' mx='auto' bgc='base-2' bd p='10'>H</HTML.div>
  <HTML.div pos='abs' r='0' b='0' bgc='base-2' bd p='10'>I</HTML.div>
</Box>

<div class='l--box -pos:rel -ar:3/2 -lh:1 -ff:mono'>
  <div class='-pos:abs -l:0 -t:0 -bgc:base-2 -bd -p:10'>A</div>
  <div class='-pos:abs -l:0 -r:0 -w:fit -mx:auto -bgc:base-2 -bd -p:10'>B</div>
  <div class='-pos:abs -r:0 -t:0 -bgc:base-2 -bd -p:10'>C</div>
  <div class='-pos:abs -l:0 -t:0 -b:0 -h:fit -my:auto -bgc:base-2 -bd -p:10'>D</div>
  <div class='-pos:abs -i:0 -m:auto -w:fit -h:fit -bgc:base-2 -bd -p:10'>E</div>
  <div class='-pos:abs -r:0 -t:0 -b:0 -h:fit -my:auto -bgc:base-2 -bd -p:10'>F</div>
  <div class='-pos:abs -l:0 -b:0 -bgc:base-2 -bd -p:10'>G</div>
  <div class='-pos:abs -l:0 -r:0 -b:0 -w:fit -mx:auto -bgc:base-2 -bd -p:10'>H</div>
  <div class='-pos:abs -r:0 -b:0 -bgc:base-2 -bd -p:10'>I</div>
</div>

Layouts

Gap

Property	Shorthand	To Class	BP
`gap`	`g`	`SPACE`,`inherit`	○
`column-gap`	`g-x`	-	○
`row-gap`	`g-y`	-	○

Flex

Prop	Shorthand	To Class	BP
`flex-wrap`	`fxw`	`wrap`	○
`flex-direction`	`fxd`	`col`(`column`), `col-r`(`column-reverse`), `row-r`(`row-reverse`)	○
`flex`	`fx`	`1`	○
`flex-shrink`	`fxsh`	`0`	-
`flex-grow`	`fxg`	`1`	-
`flex-basis`	`fxb`	-	○

Grid

Prop	Shorthand	To Class	BP
`grid-template`	`gt`	-	○
`grid-template-areas`	`gta`	-	○
`grid-template-columns`	`gtc`	`subgrid`	○
`grid-template-rows`	`gtr`	`subgrid`	○
`grid-auto-flow`	`gaf`	`col`(`column`), `row`	○
`grid-auto-rows`	`gar`	-	-
`grid-auto-columns`	`gac`	-	-
`grid-area`	`ga`	`1/1`	○
`grid-column`	`gc`	`1/-1`	○
`grid-row`	`gr`	`1/-1`	○
`grid-column-start`	`gcs`	-	-
`grid-row-start`	`grs`	-	-
`grid-column-end`	`gce`	-	-
`grid-row-end`	`gre`	-	-

Places

Prop	Shorthand	To Class	BP
`align-items`	`ai`	`center`, `start`, `end`, `flex-s`, `flex-e`, `stretch`	⚪︎
`align-content`	`ac`	`center`, `start`, `end`, `flex-s`, `flex-e`, `between`	⚪︎
`justify-items`	`ji`	`center`, `start`, `end`, `flex-s`, `flex-e`, `stretch`	⚪︎
`justify-content`	`jc`	`center`, `start`, `end`, `flex-s`, `flex-e`, `between`	⚪︎
`align-self`	`aslf`	`center`, `start`, `end`, `stretch`	-
`justify-self`	`jslf`	`center`, `start`, `end`, `stretch`	-
`order`	`order`	`-1`, `0`, `1`	-

Styling

Background

Prop	Shorthand	To Class	BP
`background`	`bg`	-	⚪︎

Shadow

Prop	Shorthand	To Class	BP
`box-shadow`	`bxsh`	`SHADOW`	-

Radius

Prop	Shorthand	To Class	BP
`border-radius`	`bdrs`	`RADIUS`	○

Border

Prop	Shorthand	To Class	BP
`border`	`bd`	`none`	-
`--bdc`	`bdc`	`brand`,`accent` `divider`, `inherit`, `transparent`	-
`--bds`	`bds`	`dashed`,`dotted`,`double`	-
`--bdw`	`bdw`	-	○
`border-top`	`bd-t`	-	-
`border-right`	`bd-r`	-	-
`border-bottom`	`bd-b`	-	-
`border-left`	`bd-l`	-	-
`border-inline`	`bd-x`	-	-
`border-block`	`bd-y`	-	-
`border-inline-start`	`bd-x-s`	-	-
`border-inline-end`	`bd-x-e`	-	-
`border-block-start`	`bd-y-s`	-	-
`border-block-end`	`bd-y-e`	-	-

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

Other CSS

Prop	Shorthand	To Class	BP
`float`	`float`	`left`,`right`	-
`clear`	`clear`	`both`	-
`isolation`	`isolation`	`isolate`	-
`overflow-wrap`	`ovwrap`	`any`(`anywhere`)	-
`white-space`	`whspace`	`nowrap`	-