Atomic CSS library written in SCSS.
“Everything should be made as simple as possible, but no simpler.” – Albert Einstein 1
Quantum CSS is an atomic CSS library written in SCSS.
You won’t need to write any CSS rules and media queries while using Quantum CSS. Creating highly responsive UIs becomes pleasure while extension pattern provides means of controlled customization. You can create molecules with avaialble atoms using @extend
.
Here is a sample button component with rounded corners, hover and focus transition animations (which are disabled on small screens to provide better experience on touch devices):
<button class="btn btn-fb" type="button">
<!-- Content -->
</button>
.btn {
@extend .px15, .h40; // Size
@extend .bds-s, .bdw1, .bdr5; // Border style solid, border width 1px and rounded corners
@extend .trp-c, .trd200ms; // Color transitions
&-fb { @extend .bgc-fb, .c-w, .bdc-tt, .SM_bgc-dfb-hf } // Facebook
&-tw { @extend .bgc-tw, .c-w, .bdc-tt, .SM_bgc-dtw-hf } // Twitter
}
Benefits of using @extend
approach:
Highly standardized styles. Limited amount of building blocks allows you to have more order in your design.
Stylesheet compilation time errors. Build fails if unknown atoms are used.
Easy to remember class names. Atoms naming convention was heavily inspired by Emmet, and most of the time abbreviations are first letters of words that property or value names consist of.
Background
background-color
background-attachment
background-clip
background-image
background-origin
background-repeat
background-size
background-position
background-position-x
background-position-y
Border
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-radius
border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius
Flexible Box Layout
flex-direction
flex-wrap
flex-grow
flex-shrink
flex-basis
justify-content
align-items
align-content
align-self
order
Positioning
float
clear
position
top
right
bottom
left
z-index
Fonts
font-size
line-height
font-family
font-weight
font-style
font-variant
font-size-adjust
font-stretch
-webkit-font-smoothing
-moz-osx-font-smoothing
Transitions
transition-property
transition-duration
transition-timing-function
Text
letter-spacing
overflow-wrap
text-align
text-align-last
text-indent
text-decoration
text-transform
white-space
word-break
word-wrap
Lists and Counters
list-style
list-style-position
list-style-type
Box Model
box-sizing
height
width
margin
padding
overflow
overflow-x
overflow-y
-webkit-overflow-scrolling
visibility
Table
border-collapse
caption-side
empty-cells
table-layout
vertical-align
In Quantum CSS every class name consists of four parts in given order:
SM
, MD
etc.bdtc
, ws
etc.w
, 100p
, 360d
etc.hf
, h
etc.You can configure separators between each parts of class name with following variables:
$breakpoint-sep
define separator between breakpoint name and property abbreviation.
$literal-sep
and $ordinal-sep
define separators that are inserted between property name and literal value abbreviation or ordinal one respectively.
$pseudo-sep
defines separator between pseudo modifier from value abbreviation.
Aliases for commonly used values:
p
→ %
e
→ em
x
→ ex
r
→ rem
d
→ deg
t
→ turn
These aliases are used instead of full units:
Names for colors are used fo increase readability. By default, Tango palette is used for every color-related atom. You can specify your own palette overriding variables in _variables.scss
.
Greyscale | Value |
---|---|
1. White w |
#fff |
2. Grey 15% g1 |
#eeeeec |
3. Grey 30% g2 |
#d3d7cf |
4. Grey 45% g3 |
#babdb6 |
5. Grey 60% g4 |
#888a85 |
6. Grey 75% g5 |
#555753 |
7. Grey 90% g6 |
#2e3436 |
8. Black b |
#000 |
Color | Light l |
Medium | Dark d |
---|---|---|---|
9. Yellow y |
#fce94f |
#edd400 |
#c4a000 |
10. Orange o |
#fcaf3e |
#f57900 |
#ce5c00 |
11. Chocolate c |
#e9b96e |
#c17d11 |
#8f5902 |
12. Green g |
#8ae234 |
#73d216 |
#4e9a06 |
13. Navy n |
#729fcf |
#3465a4 |
#204a87 |
14. Purple p |
#ad7f8a |
#75507b |
#5c3566 |
15. Red r |
#ef2929 |
#cc0000 |
#a40000 |
CSS-literal colors:
cc
→ currentColor
t
→ transparent
i
→ inherit
Generated atom examples:
SM_bgc-dg
→ background-color: #4e9a06
Dark greenbdrc-w
→ border-right-color: white
LG_c-b
→ color: black
Some CSS properties are defined as unit-less, e.g. no unit suffix will be outputted:
One of the most powerful features of Quantum is breakpoint-based media queries.
You can configure set of pseudo-classes and pseudo-elements for which atoms are generated via $pseudos
. To emit disjunction of pseudos use comma-separated list.
$pseudos: (hf: (hover, focus));
.c-w-hf:hover,
.c-w-hf:focus {
color: white;
}
Space-separated list defines selector conjunction:
$pseudos: (eh: empty hover);
.c-w-eh:empty:hover {
color: white;
}
Combine those different list types for precise class targeting:
$pseudos: (foo: (active hover, active focus));
.c-w-foo:active:hover,
.c-w-foo:active:focus {
color: white;
}
g
As well as in Bootstrap Containers are the most basic layout element and are required when using grid system. Use g-f
to create a fixed-width centered responsive layout of columns.
While containers can be nested, most layouts do not require a nested container.
<div class="g g-f">
<!-- Fixed-width grid conteiner -->
</div>
Widths of fixed-width container are stored in $grid-widths
.
gr
Rows are horizontal groups of columns that ensure your columns are lined up properly.
<div class="g g-f">
<div class="gr">
<!-- Place columns here -->
</div>
</div>
gc
Content should be placed within columns, and only columns may be immediate children of rows.
Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So if you want three equal-width columns, you’d use SM_gc4
. You can change number of columns in grid altering $grid-col-count
.
Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Columns have horizontal padding to create the gutters between individual columns. Gutters can be configured per every breakpoint via $grid-gutters
.
<div class="g g-f">
<div class="gr">
<div class="gc12 SM_gc6">
<!-- Place content here -->
</div>
</div>
</div>
In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls.
Move columns to the right using [breakpoint_]go(0…12/1)
classes. These classes increase the left margin of a column by specified number of columns. For example, MD_go4
moved MD_gc4
over four columns.
Change the order of columns by relatively shifting them to the left with [breakpoint_]gsl(0…12/1)
or to the right with [breakpoint_]gsr(0…12/1)
classes.
<div class="g g-f">
<div class="gr">
<div class="gc12 SM_gc6 SM_go3">
<!-- Place content here -->
</div>
</div>
</div>
Values for each atom are listed in the order they are listed in generated CSS.
(1…10/2)
Range of possible values from 1
to 10
with step 2
.[breakpoint_]
and [-pseudo]
Optional breakpoint and pseudo-element or pseudo-class.{key}
and {value}
Placeholders for map key and map value.Example [breakpoint_]fw(100…900/100)
expands to fw100
, fw200
… SM_fw100
, SM_fw200
… LG_fw900
.
background-color
[breakpoint_]bgc{key}[-pseudo]
→ background-color: {value}
Specify mapping in $background-colors: (key: value)
.
background-attachment
bga-f
→ fixed
bga-s
→ scroll
background-clip
bgcp-bb
→ border-box
bgcp-pb
→ padding-box
bgcp-cb
→ content-box
bgcp-i
→ inherit
background-image
bgi-n
→ none
bgi-i
→ inherit
background-origin
bgo-bb
→ border-box
bgo-pb
→ padding-box
bgo-cb
→ content-box
background-repeat
bgr-n
→ no-repeat
bgr-x
→ repeat-x
bgr-y
→ repeat-y
bgr-s
→ space
bgr-r
→ round
background-size
bgz-a
→ auto
bgz-ct
→ contain
bgz-cv
→ cover
background-position
bgp-tc
→ top center
bgp-tl
→ top left
bgp-cr
→ center right
bgp-cc
→ center center
bgp-cl
→ center left
bgp-br
→ bottom right
bgp-bc
→ bottom center
bgp-bl
→ bottom left
background-position-x
bgpx-r
→ right
bgpx-c
→ center
bgpx-l
→ left
background-position-y
bgpy-t
→ top
bgpy-c
→ center
bgpy-b
→ bottom
fill
[breakpoint_]fi{key}[-pseudo]
→ fill: {value}
Specify mapping in $background-colors: (key: value)
.
border-color
[breakpoint_]bdc{key}[-pseudo]
→ border-color: {value}
[breakpoint_]bdxc{key}[-pseudo]
= bdlc{key}
, bdrc{key}
[breakpoint_]bdyc{key}[-pseudo]
= bdtc{key}
, bdbc{key}
[breakpoint_]bdtc{key}[-pseudo]
→ border-top-color: {value}
[breakpoint_]bdbc{key}[-pseudo]
→ border-bottom-color: {value}
[breakpoint_]bdrc{key}[-pseudo]
→ border-right-color: {value}
[breakpoint_]bdlc{key}[-pseudo]
→ border-left-color: {value}
Specify mapping in $border-colors: (key: value)
.
border-width
[breakpoint_]bdw{key}
→ border-width: {value}
[breakpoint_]bdxw{key}
= bdlw{key}
, bdrw{key}
[breakpoint_]bdyw{key}
= bdtw{key}
, bdbw{key}
[breakpoint_]bdtw{key}
→ border-top-width: {value}
[breakpoint_]bdbw{key}
→ border-bottom-width: {value}
[breakpoint_]bdrw{key}
→ border-right-width: {value}
[breakpoint_]bdlw{key}
→ border-left-width: {value}
Specify mapping in $border-widths: (key: value)
.
border-style
[breakpoint_]bds{key}
→ border-style: {value}
[breakpoint_]bdxs{key}
= bdls{key}
, bdrs{key}
[breakpoint_]bdys{key}
= bdts{key}
, bdbs{key}
[breakpoint_]bdts{key}
→ border-top-style: {value}
[breakpoint_]bdbs{key}
→ border-bottom-style: {value}
[breakpoint_]bdrs{key}
→ border-right-style: {value}
[breakpoint_]bdls{key}
→ border-left-style: {value}
Specify mapping in $border-styles: (key: value)
.
By default, all available border styles are included. Border style atoms are emitted for every breakpoint what can cause significant increase of outputted CSS file. Be sure to remove unused border styles in order to reduce file size.
border-radius
[breakpoint_]bdr{key}
→ border-radius: {value}
[breakpoint_]bdtr{key}
= bdtlr{key}
, bdtrr{key}
[breakpoint_]bdrr{key}
= bdtrr{key}
, bdbrr{key}
[breakpoint_]bdbr{key}
= bdblr{key}
, bdbrr{key}
[breakpoint_]bdlr{key}
= bdtlr{key}
, bdblr{key}
[breakpoint_]bdtrr{key}
→ border-top-right-radius: {value}
[breakpoint_]bdtlr{key}
→ border-top-left-radius: {value}
[breakpoint_]bdbrr{key}
→ border-bottom-right-radius: {value}
[breakpoint_]bdblr{key}
→ border-bottom-left-radius: {value}
Specify mapping in $border-radiuses: (key: value)
.
object-fit
of-n
→ none
of-f
→ fill
of-ct
→ contain
of-cv
→ cover
of-sd
→ scale-down
of-i
→ inherit
transform
ts-n
→ none
ts-i
→ inherit
tsr(45d…360/45d)
→ transform: rotate(45deg)
…rotate(360deg)
tsr(-45d…-360/-45d)
→ transform: rotate(-45deg)
…rotate(-360deg)
tss(0…200/25)
→ transform: scale(0)
…scale(2)
These shortcuts are available if display atom is included.
[breakpoint_]fx-r
= d-fx
, fxd-r
[breakpoint_]fx-rr
= d-fx
, fxd-rr
[breakpoint_]fx-c
= d-fx
, fxd-c
[breakpoint_]fx-cr
= d-fx
, fxd-cr
flex-direction
[breakpoint_]fxd-r
→ row
[breakpoint_]fxd-rr
→ row-reverse
[breakpoint_]fxd-c
→ column
[breakpoint_]fxd-cr
→ column-reverse
flex-wrap
[breakpoint_]fxw-n
→ nowrap
[breakpoint_]fxw-w
→ wrap
[breakpoint_]fxw-wr
→ wrap-reverse
flex-grow
[breakpoint_]fxg(0…10/1)
→ flex-grow: 0
…10
flex-shrink
[breakpoint_]fxs(0…10/1)
→ flex-shrink: 0
…10
flex-basis
[breakpoint_]fxb-a
→ auto
[breakpoint_]fxb-mac
→ max-content
[breakpoint_]fxb-mic
→ min-content
[breakpoint_]fxb-fc
→ fit-content
[breakpoint_]fxb-c
→ content
justify-content
[breakpoint_]jc-fs
→ flex-start
[breakpoint_]jc-fe
→ flex-end
[breakpoint_]jc-c
→ center
[breakpoint_]jc-sb
→ space-between
[breakpoint_]jc-sa
→ space-around
align-items
[breakpoint_]ai-fs
→ flex-start
[breakpoint_]ai-fe
→ flex-end
[breakpoint_]ai-c
→ center
[breakpoint_]ai-bs
→ baseline
[breakpoint_]ai-s
→ stretch
align-content
[breakpoint_]ac-fs
→ flex-start
[breakpoint_]ac-fe
→ flex-end
[breakpoint_]ac-c
→ center
[breakpoint_]ac-sb
→ space-between
[breakpoint_]ac-sa
→ space-around
[breakpoint_]ac-s
→ stretch
align-self
[breakpoint_]as-a
→ auto
[breakpoint_]as-fs
→ flex-start
[breakpoint_]as-fe
→ flex-end
[breakpoint_]as-c
→ center
[breakpoint_]as-b
→ baseline
[breakpoint_]as-s
→ stretch
order
[breakpoint_]ord(0…10/1)
→ order: 0
…10
float
[breakpoint_]fl-l
→ left
[breakpoint_]fl-r
→ right
[breakpoint_]fl-n
→ none
clear
cl-l
→ left
cl-r
→ right
cl-b
→ both
cl-n
→ none
position
pos-s
→ static
pos-a
→ absolute
pos-r
→ relative
pos-f
→ fixed
top
right
bottom
left
[breakpoint_]t{key}
→ top: {value}
[breakpoint_]r{key}
→ right: {value}
[breakpoint_]b{key}
→ bottom: {value}
[breakpoint_]l{key}
→ left: {value}
Specify mapping in $positions: (key: value)
.
z-index
z(0…10/1)
→ z-index: 0
…10
z-a
→ auto
z-i
→ inherit
font-size
[breakpoint_]fz-xxs
→ xx-small
[breakpoint_]fz-xs
→ x-small
[breakpoint_]fz-s
→ small
[breakpoint_]fz-m
→ medium
[breakpoint_]fz-l
→ large
[breakpoint_]fz-xl
→ x-large
[breakpoint_]fz-xxl
→ xx-large
[breakpoint_]fz-lr
→ larger
[breakpoint_]fz-sr
→ smaller
[breakpoint_]fz-i
→ inherit
[breakpoint_]fz{key}
→ font-size: {value}
Specify mapping in $font-sizes: (key: value)
.
line-height
lh-n
→ normal
lh-i
→ inherit
lh0
→ 0
lh1
→ 1
lh{key}
→ line-height: {value}
Specify mapping in $line-heights: (key: value)
.
font-family
[breakpoint_]fs-s
→ serif
[breakpoint_]fs-ss
→ sans-serif
[breakpoint_]fs-m
→ monospace
[breakpoint_]fs-c
→ cursive
[breakpoint_]fs-f
→ fantasy
[breakpoint_]fs-i
→ inherit
[breakpoint_]fs{key}
→ font-family: {value}
Specify mapping in $font-families: (key: value)
.
font-weight
[breakpoint_]fw(100…900/100)
→ font-weight: 100
…900
[breakpoint_]fw-n
→ normal
[breakpoint_]fw-b
→ bold
[breakpoint_]fw-br
→ bolder
[breakpoint_]fw-lr
→ lighter
[breakpoint_]fw-i
→ inherit
font-style
[breakpoint_]fs-n
→ normal
[breakpoint_]fs-i
→ italic
[breakpoint_]fs-o
→ oblique
font-variant
fv-cl
→ common-ligatures
fv-apc
→ all-petite-caps
fv-asc
→ all-small-caps
fv-sc
→ small-caps
fv-c
→ contextual
fv-df
→ diagonal-fractions
fv-sf
→ stacked-fractions
fv-hf
→ historical-forms
fv-hl
→ historical-ligatures
fv-i
→ inherit
fv-n
→ normal
fv-tn
→ tabular-nums
fv-pn
→ proportional-nums
fv-pw
→ proportional-width
font-size-adjust
fza-n
→ none
font-stretch
fst-n
→ normal
fst-uc
→ ultra-condensed
fst-ec
→ extra-condensed
fst-c
→ condensed
fst-sc
→ semi-condensed
fst-se
→ semi-expanded
fst-e
→ expanded
fst-ee
→ extra-expanded
fst-ue
→ ultra-expanded
-webkit-font-smoothing
wfsm-a
→ antialiased
wfsm-sa
→ subpixel-antialiased
wfsm-n
→ none
-moz-osx-font-smoothing
mfsm-a
→ auto
mfsm-g
→ grayscale
transition-property
trp-n
→ none
trp-a
→ all
transition-duration
trd(100ms…1000ms/100ms)
→ transition-duration: 100ms
…1000ms
transition-timing-function
trtf-e
→ ease
trtf-ei
→ ease-in
trtf-eo
→ ease-out
trtf-eio
→ ease-in-out
trtf-l
→ linear
trtf-ss
→ step-start
trtf-se
→ step-end
letter-spacing
ls-n
→ normal
ls-i
→ inherit
ls{key}
→ letter-spacing: {value}
Specify mapping in $letter-spacings: (key: value)
.
overflow-wrap
ovw-n
→ normal
ovw-b
→ break-word
text-align
[breakpoint_]ta-l
→ left
[breakpoint_]ta-c
→ center
[breakpoint_]ta-r
→ right
[breakpoint_]ta-j
→ justify
text-align-last
[breakpoint_]tal-l
→ left
[breakpoint_]tal-c
→ center
[breakpoint_]tal-r
→ right
[breakpoint_]tal-j
→ justify
text-indent
ti{key}
→ text-indent: {value}
Specify mapping in $text-indents: (key: value)
.
text-decoration
[breakpoint_]td-n[-pseudo]
→ none
[breakpoint_]td-u[-pseudo]
→ underline
[breakpoint_]td-o
→ overline
[breakpoint_]td-lt
→ line-through
text-transform
tt-c
→ capitalize
tt-u
→ uppercase
tt-l
→ lowercase
tt-n
→ none
tt-fw
→ full-width
white-space
[breakpoint_]ws-n
→ normal
[breakpoint_]ws-p
→ pre
[breakpoint_]ws-nw
→ nowrap
[breakpoint_]ws-pw
→ pre-wrap
[breakpoint_]ws-pl
→ pre-line
word-break
wob-n
→ normal
wob-ka
→ keep-all
wob-ba
→ break-all
word-wrap
wow-n
→ normal
wow-bw
→ break-word
list-style
lis-n
→ none
lis-i
→ inherit
list-style-position
lisp-in
→ inside
lisp-o
→ outside
lisp-i
→ inherit
list-style-type
list-n
→ none
list-d
→ disc
list-c
→ circle
list-s
→ square
list-dc
→ decimal
list-dclz
→ decimal-leading-zero
list-lr
→ lower-roman
list-ur
→ upper-roman
list-i
→ inherit
color
[breakpoint_]c{key}[-pseudo]
→ color: {value}
Specify mapping in $colors: (key: value)
.
opacity
op(0…100/1)
→ opacity: 0
…1
box-shadow
bxs{key}[-pseudo]
→ box-shadow: {value}
Specify mapping in $box-shadows: (key: value)
.
box-sizing
bxz-cb
→ content-box
bxz-bb
→ border-box
bxz-i
→ inherit
height
[breakpoint_]h{key}
→ height: {value}
[breakpoint_]mah-n
→ max-height: none
[breakpoint_]mah{key}
→ max-height: {value}
[breakpoint_]mih{key}
→ min-height: {value}
Specify mapping in $heights: (key: value)
.
width
[breakpoint_]w{key}
→ width: {value}
[breakpoint_]maw-n
→ max-width: none
[breakpoint_]maw{key}
→ max-width: {value}
[breakpoint_]miw{key}
→ min-width: {value}
Specify mapping in $widths: (key: value)
.
margin
[breakpoint_]m{key}
→ margin: {value}
[breakpoint_]mx-a
→ margin-left: auto
, margin-right: auto
[breakpoint_]mx{key}
= ml{key}
, mr{key}
[breakpoint_]my{key}
= mt{key}
, mb{key}
[breakpoint_]mt{key}
→ margin-top: {value}
[breakpoint_]mr{key}
→ margin-right: {value}
[breakpoint_]mb{key}
→ margin-bottom: {value}
[breakpoint_]ml{key}
→ margin-left: {value}
Specify mapping in $margins: (key: value)
.
padding
[breakpoint_]p{key}
→ padding: {value}
[breakpoint_]px{key}
= pl{key}
, pr{key}
[breakpoint_]py{key}
= pt{key}
, pb{key}
[breakpoint_]pt{key}
→ padding-top: {value}
[breakpoint_]pr{key}
→ padding-right: {value}
[breakpoint_]pb100p
→ padding-bottom: 100%
[breakpoint_]pb{key}
→ padding-bottom: {value}
[breakpoint_]pl{key}
→ padding-left: {value}
Specify mapping in $paddings: (key: value)
.
overflow
ov-v
→ visible
ov-h
→ hidden
ov-s
→ scroll
ov-a
→ auto
overflow-x
ovx-v
→ visible
ovx-h
→ hidden
ovx-s
→ scroll
ovx-a
→ auto
overflow-y
ovy-v
→ visible
ovy-h
→ hidden
ovy-s
→ scroll
ovy-a
→ auto
-webkit-overflow-scrolling
wovs-t
→ touch
wovs-a
→ auto
visibility
[breakpoint_]v-v
→ visible
[breakpoint_]v-h
→ hidden
[breakpoint_]v-c
→ collapse
page-break-before
pgbb-a
→ auto
pgbb-al
→ always
pgbb-av
→ avoid
pgbb-l
→ left
pgbb-r
→ right
page-break-inside
pgbi-a
→ auto
pgbi-av
→ avoid
page-break-after
pgba-a
→ auto
pgba-al
→ always
pgba-av
→ avoid
pgba-l
→ left
pgba-r
→ right
cursor
cur-a
→ auto
cur-d
→ default
cur-cm
→ context-menu
cur-h
→ help
cur-p
→ pointer
cur-ps
→ progress
cur-w
→ wait
cur-cl
→ cell
cur-c
→ crosshair
cur-t
→ text
cur-al
→ alias
cur-cp
→ copy
cur-m
→ move
cur-nd
→ no-drop
cur-na
→ not-allowed
cur-as
→ all-scroll
cur-cr
→ col-resize
cur-rr
→ row-resize
cur-nr
→ n-resize
cur-er
→ e-resize
cur-sr
→ s-resize
cur-wr
→ w-resize
cur-ner
→ ne-resize
cur-nwr
→ nw-resize
cur-ser
→ se-resize
cur-swr
→ sw-resize
cur-ewr
→ ew-resize
cur-nsr
→ ns-resize
cur-neswr
→ nesw-resize
cur-nwser
→ nwse-resize
cur-zi
→ zoom-in
cur-zo
→ zoom-out
cur-g
→ grab
cur-gr
→ grabbing
cur-n
→ none
resize
rz-n
→ none
rz-b
→ both
rz-h
→ horizontal
rz-v
→ vertical
text-overflow
tov-e
→ ellipsis
tov-c
→ clip
user-select
us-n
→ none
us-t
→ text
us-a
→ all
border-collapse
bdce-c
→ collapse
bdce-s
→ separate
bdce-i
→ inherit
caption-side
cps-t
→ top
cps-b
→ bottom
empty-cells
ec-s
→ show
ec-h
→ hide
table-layout
tbl-a
→ auto
tbl-f
→ fixed
vertical-align
va-sp
→ super
va-t
→ top
va-tt
→ text-top
va-m
→ middle
va-bs
→ baseline
va-b
→ bottom
va-tb
→ text-bottom
va-sb
→ sub
display
d-n
→ none
d-b
→ block
d-fx
→ flex
d-li
→ list-item
d-ri
→ run-in
d-i
→ inline
d-itb
→ inline-table
d-ifx
→ inline-flex
d-ib
→ inline-block
d-tb
→ table
d-tcp
→ table-caption
d-tc
→ table-column
d-tcg
→ table-column-group
d-thg
→ table-header-group
d-tfg
→ table-footer-group
d-tr
→ table-row
d-trg
→ table-row-group
d-tcl
→ table-cell
d-rb
→ ruby
d-rbb
→ ruby-base
d-rbbc
→ ruby-base-container
d-rbt
→ ruby-text
d-rbtc
→ ruby-text-container
The code is available under MIT licence.