Color helper

Another cool feature of Fower is the color helper. you can handle color some postfix.

all color helper postfix:

  • --D{0-100}, to darken a color, eg: red200--D20
  • --L{0-100}, to lighten a color, eg: red200--L20
  • --T{0-100}, to transparentize a color, eg: red200--T20
  • --O{0-100}, to opacify a color, eg: color="rgba(0, 0, 0, 0.2)--20)"

Darken#

Use --D{0-100} postfix to darken a color.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Lighten#

Use --L{0-100} to lighten a color.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Transparentize#

Use --T{0-100} to transparentize a color.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Opacify#

Use --O{0-100} to opacify a color.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Use with pseudo#

The color helper postfix can use with pseudo postfix, Let's build a beautiful Button Component:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO