powered by

Best Practices for ftd/fastn

We recommend following best practices.
Keep 1 line space between two sections
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
Prefer use $inherited.colors
$inherited.colors are part of fastn design system. If you use custom / hardcoded colors then switching color schemes will not affect your component, and website maintainers using your component will have a great experience.
This is wrong
-- ftd.column:
background.solid: white

-- colms:
$color-value: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180
This is correct
-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$color-value: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text
This is wrong
-- ftd.column:
background.solid: white

-- colms:
$color-value: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180
This is correct
-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$color-value: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text
Always keep 1 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

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.

Best Practices for ftd/fastn

We recommend following best practices.
Keep 1 line space between two sections
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
Prefer use $inherited.colors
$inherited.colors are part of fastn design system. If you use custom / hardcoded colors then switching color schemes will not affect your component, and website maintainers using your component will have a great experience.
This is wrong
-- ftd.column:
background.solid: white

-- colms:
$color-value: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180
This is correct
-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$color-value: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text
This is wrong
-- ftd.column:
background.solid: white

-- colms:
$color-value: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180
This is correct
-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$color-value: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text
Always keep 1 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

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.