ftd.mobile
The ftd.mobile
is a component in the fastn
language used to optimize the rendering of a web page for mobile devices. It is designed to work in conjunction with the ftd.desktop
component, which optimizes rendering for desktop devices.
Make sure to close your ftd.mobile
container using the end
syntax. This is mandatory.
-- end: ftd.mobile
-- ftd.mobile: ;; << A child component >> -- end: ftd.mobile
By using ftd.mobile
, fastn
takes up the variant of the properties that are specified for mobile devices only and ignore the corresponding variant for desktop devices. For instance, the properties like role
has responsive type and also type like ftd.length
has responsive
variant.
-- ftd.mobile: -- ftd.text: Hello from mobile role: $rtype padding: $res -- end: ftd.mobile -- ftd.length.responsive res: mobile.percent: 40 desktop.px: 70 -- ftd.responsive-type rtype: mobile: $dtype desktop: $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 mobile
variant for role
, i.e. mobile: $dtype
, and padding
, i.e. mobile.percent: 40
.
It’s worth noting that the above code can also be rewritten using the condition ftd.device == "mobile"
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 mobile if: { ftd.device == "mobile" } role: $rtype padding: $res
Once a component is specified for the mobile device using ftd.mobile
, It will continue to take up or accepts the mobile-specified components or generic components as descendants, ignoring the desktop-specified components declared using ftd.desktop
. This reduces the size of the component tree.
-- ftd.mobile: -- print-title: -- end: ftd.mobile -- component print-title: -- ftd.column: -- ftd.mobile: -- ftd.text: Hello from mobile -- end: ftd.mobile -- ftd.desktop: -- ftd.text: Hello from desktop -- end: ftd.desktop -- end: ftd.column -- end: print-title
ftd.mobile
, so the fastn
will ignore any ftd.desktop
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.