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`](/desktop/) component, which optimizes rendering for desktop devices. It is container type component. Currently, it accepts only one child.

ℹ️

mobile

Make sure to close your `ftd.mobile` container using the `end` syntax. This is mandatory. `-- end: ftd.mobile`

Usage

-- ftd.mobile:

;; << A child component >>

-- end: ftd.mobile

Lang:

ftd

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

Lang:

ftd

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:

Not Recommended

-- ftd.text: Hello from mobile
if: { ftd.device == "mobile" }
role: $rtype
padding: $res

Lang:

ftd

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

Lang:

ftd

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/).

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) 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.