ftd.desktop
The ftd.desktop
is a component in the fastn
language used to optimize the rendering of a web page for desktop devices. It is designed to work in conjunction with the ftd.mobile
component, which optimizes rendering for mobile devices.
Make sure to close your ftd.desktop
container using the end
syntax. This is mandatory.
-- end: ftd.desktop
-- ftd.desktop: ;; << A child component >> -- end: ftd.desktop
By using ftd.desktop
, fastn
takes up the variant of the properties that are specified for desktop devices only and ignore the corresponding variant for mobile devices. For instance, the properties like role
has responsive type and also type like ftd.length
has responsive
variant.
-- ftd.desktop: -- ftd.text: Hello from desktop role: $rtype padding: $res -- end: ftd.desktop -- ftd.length.responsive res: desktop.percent: 40 mobile.px: 70 -- ftd.responsive-type rtype: desktop: $dtype mobile: $mtype -- ftd.type dtype: size.px: 40 weight: 900 font-family: cursive line-height.px: 65 letter-spacing.px: 5 -- ftd.type mtype: size.px: 20 weight: 100 font-family: fantasy line-height.px: 35 letter-spacing.px: 3
Here, fastn
will automatically pick the desktop
variant for role
, i.e. desktop: $dtype
, and padding
, i.e. desktop.percent: 40
.
It’s worth noting that the above code can also be rewritten using the condition ftd.device == "desktop"
on the ftd.text
component. However, this approach is Not Recommended since it generates unoptimized code, resulting in slow and bulky rendered output with huge dependencies.
-- ftd.text: Hello from desktop if: { ftd.device == "desktop" } role: $rtype padding: $res
Once a component is specified for the desktop device using ftd.desktop
, It will continue to take up or accepts the desktop-specified components or generic components as descendants, ignoring the mobile-specified components declared using ftd.mobile
. This reduces the size of the component tree.
-- ftd.desktop: -- print-title: -- end: ftd.desktop -- component print-title: -- ftd.column: -- ftd.desktop: -- ftd.text: Hello from desktop -- end: ftd.desktop -- ftd.mobile: -- ftd.text: Hello from mobile -- end: ftd.mobile -- end: ftd.column -- end: print-title
ftd.desktop
, so the fastn
will ignore any ftd.mobile
components that come after it.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!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.