font-family
serif ff:s
sans-serif ff:ss
monospace ff:m
Web and interface design in the blink of an eye.
serif ff:s
sans-serif ff:ss
monospace ff:m
Huge (8rem)fs:xxl
Extra large (4rem) fs:xl
Large (2rem) fs:l
Medium (1.5rem) fs:m
Small (1rem) fs:s
Extra small (.875rem) fs:xs
0 lh:0
Zero
Extra small (1)lh:xs
Berlin
Small (1.125)lh:s
Ottawa
Medium (1.25)lh:m
Wismar
Large (1.5)lh:l
Madrid
Extra large (1.75)lh:xl
Ulm
Extra small (100/thin) fw:xs
Small (300/light) fw:s
Medium (400/normal) fw:m
Large (700/bold) fw:l
Extra large (900/ultra-bold) fw:xl
normalfs:n
italic fs:i
left ta:l
justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify
ta:j
center ta:c
right ta:r
tt:n
tt:u
td:n
td:u
td:lt
ls:xs
ls:s
ls:m
ls:l
ls:xl
ls:n
ls:d
ls:b
margin
m:0
m:xs
m:s
m:m
m:l
m:xl
margin-top
mt:0
mt:xs
mt:s
mt:m
mt:l
mt:xl
margin-right
mr:a
mr:0
mr:xs
mr:s
mr:m
mr:l
mr:xl
margin-bottom
mb:0
mb:xs
mb:s
mb:m
mb:l
mb:xl
margin-left
ml:a
ml:0
ml:xs
ml:s
ml:m
ml:l
ml:xl
p:xl
= padding:4rem
w:a
w:0
w:xs
w:s
w:m
w:l
w:xl
w:20%
w:80%
w:40%
w:60%
w:25%
w:75%
w:33%
w:66%
w:50%
w:50%
w:100%
w:25vw
w:33vw
w:50vw
w:66vw
w:75vw
w:100vw
mw:M
mw:L
mw:XL
h:a
h:0
h:xs
h:s
h:m
h:l
h:xl
h:25%
h:33%
h:50%
h:66%
h:75%
h:100%
h:25vh
h:33vh
h:50vh
h:66vh
h:75vh
h:100vh
bs:cb
bs:bb
cc:1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.cc:2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.cc:3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.cc:4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. d:b
d:i
d:ib
d:n
d:f
d:f
d:t
d:tr
d:tc
p:st
p:r
p:a
p:f
zi:xl
zi:l
zi:m
zi:s
zi:xs
va:bl
va:t
va:m
va:b
va:sup
va:sub
t:-xl
t:-l
t:-m
t:-s
t:-xs
t:0
t:xs
t:s
t:m
t:l
t:xl
r:-xl
r:-l
r:-m
r:-s
r:-xs
r:0
r:xs
r:s
r:m
r:l
r:xl
b:-xl
b:-l
b:-m
b:-s
b:-xs
b:0
b:xs
b:s
b:m
b:l
b:xl
l:-xl
l:-l
l:-m
l:-s
l:-xs
l:0
l:xs
l:s
l:m
l:l
l:xl
f:n
f:l
f:r
o:a
o:h
(hidden)o:v
ox:a
ox:h
(hidden)
ox:v
oy:a
oy:h
(hidden)oy:v
ws:n
normal normal normal normal normal normal normalws:nw
nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrapws:p
· pre · prev:v
v:h
v:h
+ v:v:h
fd:r
fd:c
fd:rr
fd:cr
fw:mw
fw:w
fw:wr
jc:fs
jc:c
jc:fe
jc:sa
jc:sb
ai:fs
ai:c
ai:fe
ai:b
ai:s
as:fs
as:c
as:fe
as:b
as:s
fg:0
fg:1
fg:2
fs:0
fs:1
fs:2
fb:20%
fb:80%
fb:40%
fb:60%
fb:25%
fb:75%
fb:33%
fb:66%
fb:50%
fb:50%
fb:100%
o:4
o:3
o:2
o:1
border-width
bw:xl
bw:l
bw:m
bw:s
bw:xs
bw:0
border-top-width
btw:xl
btw:l
btw:m
btw:s
btw:xs
btw:0
border-right-width
brw:xl
brw:l
brw:m
brw:s
brw:xs
brw:0
border-bottom-width
bbw:xl
bbw:l
bbw:m
bbw:s
bbw:xs
bbw:0
border-left-width
blw:xl
blw:l
bblw:m
blw:s
blw:xs
blw:0
bs:d
br:0
br:xs
br:s
br:m
br:l
br:xl
bbrr:0
bblr:0
btrr:0
btlr:0
brr:0
blr:0
Including hover classes: bs:m:h
Hover over the circles for a demo.
bs:xs
bs:s
bs:m
bs:l
bs:xl
c:t
c:cc
c:red
c:orange
c:yellow
c:lime
c:green
c:teal
c:cyan
c:blue
c:indigo
c:purple
c:violet
c:magenta
c:brown
c:b
c:w
c:b:xl
c:b:l
c:b:m
c:b:s
c:b:xs
c:b:xl
c:b:l
c:b:m
c:b:s
c:b:xs
c:w:xl
c:w:l
c:w:m
c:w:s
c:w:xs
c:w:xl
c:w:l
c:w:m
c:w:s
c:w:xs
bgc:t
bgc:red
bgc:orange
bgc:yellow
bgc:lime
bgc:green
bgc:teal
bgc:cyan
bgc:blue
bgc:indigo
bgc:purple
bgc:violet
bgc:magenta
bgc:brown
bgc:b
bgc:w
bgc:b:xl
bgc:b:l
bgc:b:m
bgc:b:s
bgc:b:xs
bgc:b:xxs
bgc:b:xl
bgc:b:l
bgc:b:m
bgc:b:s
bgc:b:xs
bgc:b:xxs
bgc:w:xl
bgc:w:l
bgc:w:m
bgc:w:s
bgc:w:xs
bgc:w:xl
bgc:w:l
bgc:w:m
bgc:w:s
bgc:w:xs
bc:t
bc:red
bc:orange
bc:yellow
bc:lime
bc:green
bc:teal
bc:cyan
bc:blue
bc:indigo
bc:purple
bc:violet
bc:magenta
bc:brown
bc:b
bc:w
bc:b:xl
bc:b:l
bc:b:m
bc:b:s
bc:b:xs
bc:b:xl
bc:b:l
bc:b:m
bc:b:s
bc:b:xs
bc:w:xl
bc:w:l
bc:w:m
bc:w:s
bc:w:xs
bc:w:xl
bc:w:l
bc:w:m
bc:w:s
bc:w:xs
bgi:red
bgi:orange
bgi:yellow
bgi:lime
bgi:green
bgi:teal
bgi:cyan
bgi:blue
bgi:indigo
bgi:purple
bgi:violet
bgi:magenta
bgi:brown
bgi:b
bgi:w
The black and white gradient are well suited for image overlays (to increase readabilty for text elements).
bgi:b
bgi:w
bi:red
bi:orange
bi:yellow
bi:lime
bi:green
bi:teal
bi:cyan
bi:blue
bi:indigo
bi:purple
bi:violet
bi:magenta
bi:brown
bgs:a
bgs:c
o:i
o:xl
o:l
o:m
o:s
o:xs
o:0
Hover over the circles to trigger the transitions.
t:slow
t:medium
t:fast