blink | docs

Typography

font-family

serif ff:s

sans-serif ff:ss

monospace ff:m

font-size

The default font-size is set to 1rem in the base stylesheet.

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

line-height

The default document line-height is set to 1.5 in the base stylesheet.

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

font-weight

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

font-style

normalfs:n

italic fs:i

text-align

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

text-transform

none tt:n

uppercase tt:u

text-decoration

~~none~~td:n

underline td:u

line-through td:lt

letter-spacing

Extra small (-.125em)ls:xs

Small (-.0625em)ls:s

Medium (normal)ls:m

Large (.125em)ls:l

Extra large (.25em)ls:xl

list-style

none ls:n
none

dash ls:d
dash

bullet ls:b
bullet

Layout

margin

`margin`

m:0

Extra small (.25rem)

m:xs

Small (.5rem)

m:s

Medium (1rem)

m:m

Large (2rem)

m:l

Extra Large (4rem)

m:xl

`margin-top`

mt:0

Extra small (.25rem)

mt:xs

Small (.5rem)

mt:s

Medium (1rem)

mt:m

Large (2rem)

mt:l

Extra Large (4rem)

mt:xl

`margin-right`

auto

mr:a

mr:0

Extra small (.25rem)

mr:xs

Small (.5rem)

mr:s

Medium (1rem)

mr:m

Large (2rem)

mr:l

Extra Large (4rem)

mr:xl

`margin-bottom`

mb:0

Extra small (.25rem)

mb:xs

Small (.5rem)

mb:s

Medium (1rem)

mb:m

Large (2rem)

mb:l

Extra Large (4rem)

mb:xl

`margin-left`

auto

ml:a

ml:0

Extra small (.25rem)

ml:xs

Small (.5rem)

ml:s

Medium (1rem)

ml:m

Large (2rem)

ml:l

Extra Large (4rem)

ml:xl

padding

Similar to the margin module: p:xl= padding:4rem

width

auto

w:a

(0 – see source code) w:0

Extra small (1rem)

w:xs

Small (2rem)

w:s

Medium (4rem)

w:m

Large (8rem)

w:l

Extra large (16rem)

w:xl

20% (⅕)w:20%

80% (⅘)w:80%

40% (⅖)w:40%

60% (⅗)w:60%

25% (¼)w:25%

75% (¾)w:75%

33.3333% (⅓)w:33%

66.6666% (⅔)w:66%

50% (½)w:50%

100%w:100%

25vw (¼)

w:25vw

33.3333vw (⅓)

w:33vw

50vw (½)

w:50vw

66.6666vw (⅔)

w:66vw

75vw (¾)

w:75vw

100vw

w:100vw

max-width

Medium breakpoint (default: 40rem) mw:M

Large breakpoint (default: 80rem) mw:L

Extra large breakpoint (default: 120rem) mw:XL

height

auto

h:a

(0 – see source code) h:0

Extra small (1rem)

h:xs

Small (2rem)

h:s

Medium(4rem)

h:m

Large (8rem)

h:l

Extra Large (16rem)

h:xl

25% (¼)

h:25%

33.3333% (⅓)

h:33%

50% (½)

h:50%

66.666% (⅔)

h:66%

75% (¾)

h:75%

100%

h:100%

25vh (¼)

h:25vh

33.3333vh (⅓)

h:33vh

50vh (½)

h:50vh

66.666vh (⅔)

h:66vh

75vh (¾)

h:75vh

100vh

h:100vh

box-sizing

content-box

bs:cb

border-box

bs:bb

Box Sizing explained

column-count

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

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

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

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

display

block d:b

inline

d:i

inline-block (added a fixed height)

d:ib

none

(none – see source code)d:n

flex

(added flex-grow: 1)

d:f

inline-

flex

d:f

table d:t

table-row d:tr

table-cell d:tc

position

static p:st (p:s = padding: small)

relative p:r

absolute p:a

(fixed – see source code)p:f

z-index

Extra large (200) zi:xl

Large (100) zi:l

Medium (0) zi:m

Small (-100) zi:s

Extra small (-200) zi:xs

vertical-align

baseline (default)va:bl

topva:t

middleva:m

bottomva:b

superva:sup

subva:sub

top

Neg. extra large (-8rem) t:-xl

Neg. large (-4rem) t:-l

Neg. medium (-2rem) t:-m

Neg. small (-1rem) t:-s

Neg. extra small (-.5rem) t:-xs

0 t:0

Extra small (.5rem) t:xs

Small (1rem) t:s

Medium (2rem) t:m

Large (4rem) t:l

Extra large (8rem) t:xl

right

Neg. extra large (-8rem) r:-xl

Neg. large (-4rem) r:-l

Neg. medium (-2rem) r:-m

Neg. small (-1rem) r:-s

Neg. extra small (-.5rem) r:-xs

0 r:0

Extra small (.5rem) r:xs

Small (1rem) r:s

Medium (2rem) r:m

Large (4rem) r:l

Extra Large (8rem) r:xl

bottom

Neg. extra large (-8rem) b:-xl

Neg. large (-4rem) b:-l

Neg. medium (-2rem) b:-m

Neg. small (-1rem) b:-s

Neg. extra small (-.5rem) b:-xs

0 b:0

Extra small (.5rem) b:xs

Small (1rem) b:s

Medium (2rem) b:m

Large (4rem) b:l

Extra large (8rem) b:xl

left

Neg. extra large (-8rem) l:-xl

Neg. large (-4rem) l:-l

Neg. medium (-2rem) l:-m

Neg. small (-1rem) l:-s

Neg. extra small (-.5rem) l:-xs

0 l:0

Extra small (.5rem) l:xs

Small (1rem) l:s

Medium (2rem) l:m

Large (4rem) l:l

Extra large (8rem) l:xl

float

nonef:n

leftf:l

rightf:r

overflow

autoo:a

hiddeno:h(hidden)

visibleo:v

overflow-x

autoox:a

hiddenox:h(hidden)

visibleox:v

overflow-y

autooy:a

hiddenoy:h(hidden)

visibleoy:v

white-space

normal ws:nnormal normal normal normal normal normal normal

nowrap ws:nwnowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap

pre ws:p · pre · pre

visibility

visible v:v

hidden v:h (hidden – see source code)

visible on hover v:h+ v:v:h (visible on hover – see source code)

Flexbox

flex-direction

row fd:r

column fd:c

row-reverse fd:rr

column-reverse fd:cr

flex-wrap

nowrap (default) fw:mw

wrap fw:w

wrap-reverse fw:wr

justify-content

flex-start jc:fs

center jc:c

flex-end jc:fe

space-around jc:sa

space-between jc:sb

align-items

flex-start ai:fs

flex-start

center ai:c

center

flex-end ai:fe

flex-end

baseline ai:b

baseline

stretch ai:s

stretch

align-self

flex-start as:fs

center as:c

flex-end as:fe

baseline as:b

stretch as:s

flex-grow

0 fg:0

1 fg:1

2 fg:2

View this demo on a larger screen, to show the effect.

flex-shrink

0 fs:0

1 fs:1

2 fs:2

flex-basis

20% (⅕)fb:20%

80% (⅘)fb:80%

40% (⅖)fb:40%

60% (⅗)fb:60%

25% (¼)fb:25%

75% (¾)fb:75%

33.3333% (⅓)fb:33%

66.6666% (⅔)fb:66%

50% (½)fb:50%

100%fb:100%

order

o:4

o:3

o:2

o:1

Theming

border-width

`border-width`

Extra large (1rem)bw:xl

Large (.5rem)bw:l

Medium (.25rem)bw:m

Small (.125rem)bw:s

Extra Small (.0625rem)bw:xs

0 bw:0

`border-top-width`

Extra largebtw:xl

Largebtw:l

Mediumbtw:m

Smallbtw:s

Extra smallbtw:xs

0 btw:0

`border-right-width`

Extra largebrw:xl

Largebrw:l

Mediumbrw:m

Smallbrw:s

Extra smallbrw:xs

0 brw:0

`border-bottom-width`

Extra largebbw:xl

Largebbw:l

Mediumbbw:m

Smallbbw:s

Extra smallbbw:xs

0 bbw:0

`border-left-width`

Extra largeblw:xl

Largeblw:l

Mediumbblw:m

Smallblw:s

Extra smallblw:xs

0 blw:0

border-style

solid

No extra markup necessary, just set the border-width.

dotted

bs:d

border-radius

0br:0

Extra small (.25rem)br:xs

Small (.5rem)br:s

Medium (1rem)br:m

Large (2rem)br:l

Extra large (100%)br:xl

border-bottom-right-radius, border-bottom-left-radius,
border-top-right-radius, border-top-left-radius

0 bbrr:0

0 bblr:0

0 btrr:0

0 btlr:0

border-top-right-radius + border-bottom-right-radius (right),
border-top-left-radius + border-bottom-left-radius (left)

0 brr:0

0 blr:0

box-shadow

Including hover classes: bs:m:h
Hover over the circles for a demo.

Extra smallbs:xs

Smallbs:s

Mediumbs:m

Largebs:l

Extra largebs:xl

color

transparent (applied to border)
c:t

currentColor (inherites color from parent element)
c:cc

red
c:red

orange
c:orange

yellow
c:yellow

lime
c:lime

green
c:green

teal
c:teal

cyan
c:cyan

blue
c:blue

indigo
c:indigo

purple
c:purple

violet
c:violet

magenta
c:magenta

brown
c:brown

black
c:b

white
c:w

Shades of black

black XL (.875)
c:b:xl

black L (.75)
c:b:l

black M (.5)
c:b:m

black S (.25)
c:b:s

black XS (.125)
c:b:xs

Shades of black (on red background)

black XL (.875)
c:b:xl

black L (.75)
c:b:l

black M (.5)
c:b:m

black S (.25)
c:b:s

black XS (.125)
c:b:xs

Shades of white (on black background)

white XL (.875)
c:w:xl

white L (.75)
c:w:l

white M (.5)
c:w:m

white S (.25)
c:w:s

white XS (.125)
c:w:xs

Shades of white (on red background)

white XL (.875)
c:w:xl

white L (.75)
c:w:l

white M (.5)
c:w:m

white S (.25)
c:w:s

white XS (.125)
c:w:xs

background-color

transparent
bgc:t

red
bgc:red

orange
bgc:orange

yellow
bgc:yellow

lime
bgc:lime

green
bgc:green

teal
bgc:teal

cyan
bgc:cyan

blue
bgc:blue

indigo
bgc:indigo

purple
bgc:purple

violet
bgc:violet

magenta
bgc:magenta

brown
bgc:brown

black
bgc:b

white
bgc:w

Shades of black

black XL (.875)
bgc:b:xl

black L (.75)
bgc:b:l

black M (.5)
bgc:b:m

black S (.25)
bgc:b:s

black XS (.125)
bgc:b:xs

black XXS (.0625)
bgc:b:xxs

Shades of black (on red background)

black XL (.875)
bgc:b:xl

black L (.75)
bgc:b:l

black M (.5)
bgc:b:m

black S (.25)
bgc:b:s

black XS (.125)
bgc:b:xs

black XXS (.0625)
bgc:b:xxs

Shades of white (on black background)

white XL (.875)
bgc:w:xl

white L (.75)
bgc:w:l

white M (.5)
bgc:w:m

white S (.25)
bgc:w:s

white XS (.125)
bgc:w:xs

Shades of white (on red background)

white XL (.875)
bgc:w:xl

white L (.75)
bgc:w:l

white M (.5)
bgc:w:m

white S (.25)
bgc:w:s

white XS (.125)
bgc:w:xs

border-color

transparent
bc:t

red
bc:red

orange
bc:orange

yellow
bc:yellow

lime
bc:lime

green
bc:green

teal
bc:teal

cyan
bc:cyan

blue
bc:blue

indigo
bc:indigo

purple
bc:purple

violet
bc:violet

magenta
bc:magenta

brown
bc:brown

black
bc:b

white
bc:w

Shades of black

black XL (.875)
bc:b:xl

black L (.75)
bc:b:l

black M (.5)
bc:b:m

black S (.25)
bc:b:s

black XS (.125)
bc:b:xs

Shades of black (on red background)

black XL (.875)
bc:b:xl

black L (.75)
bc:b:l

black M (.5)
bc:b:m

black S (.25)
bc:b:s

black XS (.125)
bc:b:xs

Shades of white (on black background)

white XL (.875)
bc:w:xl

white L (.75)
bc:w:l

white M (.5)
bc:w:m

white S (.25)
bc:w:s

white XS (.125)
bc:w:xs

Shades of white (on red background)

white XL (.875)
bc:w:xl

white L (.75)
bc:w:l

white M (.5)
bc:w:m

white S (.25)
bc:w:s

white XS (.125)
bc:w:xs

background-image

red
bgi:red

orange
bgi:orange

yellow
bgi:yellow

lime
bgi:lime

green
bgi:green

teal
bgi:teal

cyan
bgi:cyan

blue
bgi:blue

indigo
bgi:indigo

purple
bgi:purple

violet
bgi:violet

magenta
bgi:magenta

brown
bgi:brown

black
bgi:b

white
bgi:w

The black and white gradient are well suited for image overlays (to increase readabilty for text elements).

black
bgi:b

white
bgi:w

border-image

red
bi:red

orange
bi:orange

yellow
bi:yellow

lime
bi:lime

green
bi:green

teal
bi:teal

cyan
bi:cyan

blue
bi:blue

indigo
bi:indigo

purple
bi:purple

violet
bi:violet

magenta
bi:magenta

brown
bi:brown

background-size

auto
bgs:a

cover
bgs:c

opacity

initial o:i

Extra large (.875) o:xl

Large (.75) o:l

Medium (.5) o:m

Small (.25) o:s

Extra small (.125) o:xs

0 o:0

transition

Hover over the circles to trigger the transitions.

Slow (1s)t:slow

Medium (.5s)t:medium

Fast (.25s)t:fast

margin

margin-top

margin-right

margin-bottom

margin-left

border-width

border-top-width

border-right-width

border-bottom-width

border-left-width

border-radius

border-bottom-right-radius, border-bottom-left-radius, border-top-right-radius, border-top-left-radius

border-top-right-radius + border-bottom-right-radius (right), border-top-left-radius + border-bottom-left-radius (left)

Shades of black

Shades of black (on red background)

Shades of white (on black background)

Shades of white (on red background)

Shades of black

Shades of black (on red background)

Shades of white (on black background)

Shades of white (on red background)

Shades of black

Shades of black (on red background)

Shades of white (on black background)

Shades of white (on red background)

`margin`

`margin-top`

`margin-right`

`margin-bottom`

`margin-left`

`border-width`

`border-top-width`

`border-right-width`

`border-bottom-width`

`border-left-width`

border-bottom-right-radius, border-bottom-left-radius,
border-top-right-radius, border-top-left-radius

border-top-right-radius + border-bottom-right-radius (right),
border-top-left-radius + border-bottom-left-radius (left)