In ftd, we can make responsive pages using conditional expressions and event-handling. A responsive page ensures that the user experience is optimized, regardless of the device being used to access the page. This includes making sure that the page is easy to read and navigate, images and media are appropriately sized and scaled, and interactive elements are accessible and usable.

Using conditions

To make your page responsive, we can use `if` conditional expressions on component as well on the component attributes.

Control visibility of a component using if conditions

Using if conditions on component lets you control when the component needs to be visible and under which conditions.

Sample code using `if` condition on component

Input

-- ftd.column:
width: fill-container
color: $inherited.colors.text

-- ftd.text: This text will only show on mobile
if: { ftd.device == "mobile" }

-- ftd.text: This text will only show on desktop
if: { ftd.device != "mobile" }

-- end: ftd.column

Lang:

ftd

Output

This text will only show on desktop

Control attribute values using if conditions

We can control attribute values of a component using conditional if expressions.

Sample code to show conditional attributes

Input

-- ftd.text: This text will be visible on desktop.
text if { ftd.device == "mobile" }: This text will be visible on mobile.
color: $inherited.colors.text
border-color if { ftd.device != "mobile" }: green
border-color if { ftd.device == "mobile" }: coral

Lang:

ftd

Output

This text will be visible on desktop.

Using responsive types

In ftd, there are several attributes which support responsive type such as `ftd.responsive-length` which can be used with any attribute of type `ftd .length`.

Sample code using `ftd.responsive-length`

Input

-- ftd.responsive-length responsive-padding-length:
desktop.px: 15
mobile.px: 5

-- ftd.column:
color: $inherited.colors.text
width: fill-container

-- ftd.text: This text has responsive padding for desktop and mobile
padding.responsive: $responsive-padding-length
border-color: $red-yellow
border-width.px: 2

-- ftd.text: This is another piece of text having same responsive padding
padding.responsive: $responsive-padding-length
border-color: $red-yellow
border-width.px: 2

-- end: ftd.column

Lang:

ftd

Output

This text has responsive padding for desktop and mobile

This is another piece of text having same responsive padding

Using event handling

We can use event-handling to control how and when components are displayed.

Control visibility of a component using event-handling

Using event-handling on component lets you control when the component needs to be visible and under which conditions.

Sample code using event-handling to control component visibility

Input

-- integer $component-number: 1

-- ftd.column:
width: fill-container
color: $inherited.colors.text

-- ftd.text: This is coral component, click to show blue component
if: { component-number == 1 }
border-color: coral
border-width.px: 2
padding.px: 10
$on-click$: $ftd.set-integer($a = $component-number, v = 2)

-- ftd.text: This is blue component, click to show coral component
if: { component-number == 2 }
border-color: deepskyblue
border-width.px: 2
padding.px: 10
$on-click$: $ftd.set-integer($a = $component-number, v = 1)

-- end: ftd.column

Lang:

ftd

Output

This is coral component, click to show blue component

Control attribute values using event-handling

We can use event-handling with conditional expressions to control the behaviour of components.

Sample code using event-handling to control attribute values

Input

-- boolean $is-hovered: false

-- ftd.shadow hover-shadow:
color: $yellow-red
x-offset.px: 10
y-offset.px: 10
blur.px: 1

-- ftd.text: A quick brown fox jumps over the lazy dog
color: $inherited.colors.text
padding.px: 10
shadow if { is-hovered }: $hover-shadow
$on-mouse-enter$: $ftd.set-bool($a = $is-hovered, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $is-hovered, v = false)

Lang:

ftd

Output

A quick brown fox jumps over the lazy dog

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.