Properties

Deft only supports a subset of CSS properties and property values. The following is the list of supported properties and value types.

Property	Property Type
color	<color>
font-size	<length>
font-family	<string>
font-weight	thin | extra-light | light | normal | medium | semi-bold | bold | extra-bold | black | extra-black | <number>
font-style	normal | italic
line-height	<length> | <percent> | <number>

Background

Property	Property Type
background-color	<color>

Border

Property	Property Type
border-top-width	<length> | <percent>
border-right-width	<length> | <percent>
border-bottom-width	<length> | <percent>
border-left-width	<length> | <percent>
border-top-color	<color>
border-right-color	<color>
border-bottom-color	<color>
border-left-color	<color>
border-top-left-radius	<length>
border-top-right-radius	<length>
border-bottom-right-radius	<length>
border-bottom-left-radius	<length>
border-top	<length> <color>
border-right	<length> <color>
border-bottom	<length> <color>
border-left	<length> <color>
border	<length> <color>

Layout

Property	Property Type
display	none| flex
position	static | relative | absolute
flex	number
flex-basis	<length> | <percent>
flex-grow	number
flex-shrink	number
align-self	auto | flex-start | center | flex-end | stretch | baseline | space-between | space-around | space-evenly
direction	ltr | rtl
justify-content	flex-start | center | flex-end | space-between | space-around | space-evenly
flex-direction	column | row | column-reverse | row-reverse
align-content	auto | flex-start | center | flex-end | stretch | baseline | space-between | space-around | space-evenly
align-items	auto | flex-start | center | flex-end | stretch | baseline | space-between | space-around | space-evenly
flex-wrap	no-wrap | wrap | wrap-reverse
column-gap	<length>
row-gap	<length>
top	<length> | <percent>
right	<length> | <percent>
bottom	<length> | <percent>
left	<length> | <percent>

Size

Property	Property Type
width	<length> | <percent>
height	<length> | <percent>
max-width	<length> | <percent>
max-height	<length> | <percent>
min-width	<length> | <percent>
min-height	<length> | <percent>

Margin & Padding

Property	Property Type
margin-top	<length> | <percent>
margin-right	<length> | <percent>
margin-bottom	<length> | <percent>
margin-left	<length> | <percent>
margin	<length> | <percent>
padding-top	<length> | <percent>
padding-right	<length> | <percent>
padding-bottom	<length> | <percent>
padding-left	<length> | <percent>
padding	<length> | <percent>

Transform

Property	Property Type
transform	<transform>

Animation

Property	Property Type
animation-name	<string>
animation-duration	number
animation-iteration-count	number