powered by

FTD

Best Practices for FTD coding

We recommend you should follow below best practices of FTD coding.

Always keep 1(one) line space between two components

This is wrong

-- component planning:
-- ftd.row:
margin-top.px: 26
padding-left.px: 50
width.fixed.px: 1400
height: fill-container
-- end: ftd.row:
-- end: planning

This is correct

-- component planning:

-- ftd.row:
margin-top.px: 26
padding-left.px: 50
width.fixed.px: 1400
height: fill-container

-- end: ftd.row:

-- end: planning

This is wrong

-- component planning:
-- ftd.row:
margin-top.px: 26
padding-left.px: 50
width.fixed.px: 1400
height: fill-container
-- end: ftd.row:
-- end: planning

This is correct

-- component planning:

-- ftd.row:
margin-top.px: 26
padding-left.px: 50
width.fixed.px: 1400
height: fill-container

-- end: ftd.row:

-- end: planning

Always use $inherited.colors while defining color

$inherited.colors are part of FTD color scheme system, if you use custom / hardcoded colors then color scheme for dark / light mode won’t be applied.

This is wrong

-- ftd.column:
background.solid: white

-- colms:
$colorVal: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180

This is correct

-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$colorVal: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text

This is wrong

-- ftd.column:
background.solid: white

-- colms:
$colorVal: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180

This is correct

-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$colorVal: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text

Always keep 1(one) space after : colon

This is wrong

-- end:nextbutton

-- ftd.row:
width:fill-container

-- end:ftd.column

This is correct

-- end: nextbutton

-- ftd.row:
width: fill-container

-- end: ftd.column

This is wrong

-- end:nextbutton

-- ftd.row:
width:fill-container

-- end:ftd.column

This is correct

-- end: nextbutton

-- ftd.row:
width: fill-container

-- end: ftd.column

FTD

Best Practices for FTD coding

We recommend you should follow below best practices of FTD coding.

Always keep 1(one) line space between two components

This is wrong

-- component planning:
-- ftd.row:
margin-top.px: 26
padding-left.px: 50
width.fixed.px: 1400
height: fill-container
-- end: ftd.row:
-- end: planning

This is correct

-- component planning:

-- ftd.row:
margin-top.px: 26
padding-left.px: 50
width.fixed.px: 1400
height: fill-container

-- end: ftd.row:

-- end: planning

This is wrong

-- component planning:
-- ftd.row:
margin-top.px: 26
padding-left.px: 50
width.fixed.px: 1400
height: fill-container
-- end: ftd.row:
-- end: planning

This is correct

-- component planning:

-- ftd.row:
margin-top.px: 26
padding-left.px: 50
width.fixed.px: 1400
height: fill-container

-- end: ftd.row:

-- end: planning

Always use $inherited.colors while defining color

$inherited.colors are part of FTD color scheme system, if you use custom / hardcoded colors then color scheme for dark / light mode won’t be applied.

This is wrong

-- ftd.column:
background.solid: white

-- colms:
$colorVal: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180

This is correct

-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$colorVal: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text

This is wrong

-- ftd.column:
background.solid: white

-- colms:
$colorVal: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180

This is correct

-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$colorVal: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text

Always keep 1(one) space after : colon

This is wrong

-- end:nextbutton

-- ftd.row:
width:fill-container

-- end:ftd.column

This is correct

-- end: nextbutton

-- ftd.row:
width: fill-container

-- end: ftd.column

This is wrong

-- end:nextbutton

-- ftd.row:
width:fill-container

-- end:ftd.column

This is correct

-- end: nextbutton

-- ftd.row:
width: fill-container

-- end: ftd.column