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.