How to make page responsive

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
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
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
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
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)
Output
A quick brown fox jumps over the lazy dog

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

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!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

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.
Copyright Β© 2023 - FifthTry.com