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
Properties Optimization
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.
Checkout this example.
-- 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.
Checkout the **Not Recommended** version of the code above:
-- ftd.text: Hello from mobile
if: { ftd.device == "mobile" }
role: $rtype
padding: $res
Component Optimization
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.
Checkout this example.
-- 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
Here, since we used `ftd.mobile`, so the `fastn` will ignore any `ftd.desktop`
components that come after it.
Attributes
A mobile accepts the [container root attributes](ftd/container-root/).