avatar example

fix size image

rounded image

responsive size image

1 / 1

1 / 2

1 / 4

1 / 8

border use

border position

round

top

right

bottom

left

border color

border color 1-100 b--black-[1-100]

round b--black-10

round b--black-20

round b--black-30

round b--black-40

round b--black-50

round b--black-60

round b--black-70

round b--black-80

round b--black-90

round b--black-100

column use

column position

col-1

col-2

col-4

col-6

col-12

column offset use

col-offset-[1-12]

col-4 col-offset-4

col-4

col-2 col-offset-2

col-2

col-4 col-offset-2

col-5 col-offset-2

col-4 col-offset-1

display use

here is inline blocktest

inline

here is inline block, dib=display: inline-block

inline-block

here is inline block, db=display: block

display block width: 49%; display block width: 49%; display block width: 49%; display block width: 49%;

margin use

margin top = mt[1-8]

mt1=margin-top: $space * 1; ($space default is 8px)

mt2=margin-top: $space * 2; ($space default is 8px)

mt4=margin-top: $space * 4; ($space default is 8px)

mt8=margin-top: $space * 8; ($space default is 8px)

margin left = ml[1-8]

ml1=margin-bottom: $space * 1; ($space default is 8px)

ml2=margin-bottom: $space * 2; ($space default is 8px)

ml4=margin-bottom: $space * 4; ($space default is 8px)

ml8=margin-bottom: $space * 8; ($space default is 8px)

padding use

padding top = pt[1-8]

pt1=padding-top: $space * 1; ($space default is 8px)

pt2=padding-top: $space * 2; ($space default is 8px)

pt4=padding-top: $space * 4; ($space default is 8px)

pt8=padding-top: $space * 8; ($space default is 8px)

padding left = pl[1-8]

pl1=padding-left: $space * 1; ($space default is 8px)

pl2=padding-left: $space * 2; ($space default is 8px)

pl4=padding-left: $space * 4; ($space default is 8px)

pl8=padding-left: $space * 8; ($space default is 8px)

position use

here is position relative

position right:0 par0 top: 0 part0

avatar example

fix size image

rounded image

responsive size image

1 / 1

1 / 2

1 / 4

1 / 8

border use

border position

border color

border color 1-100 b--black-[1-100]

column use

column position

column offset use

col-offset-[1-12]

display use

here is inline blocktest

here is inline block, dib=display: inline-block

here is inline block, db=display: block

margin use

margin top = mt[1-8]

margin left = ml[1-8]

padding use

padding top = pt[1-8]

padding left = pl[1-8]

position use

position use

here is position relative

type use

here is h6 text

here is h5 text

here is h4 text

here is h3 text

here is h2 text

here is h1 text