powered by
LOGO

Responsive Themes

Good quality themes should be “responsive”, they should look good on a wide variety of devices, laptops to mobiles.

FASTN ships with a module fastn, which defines a variable fastn.mobile: boolean, which is set by FASTN tooling to the right value. We actually decide if it is mobile or not based on “viewport width”, if it below certain threshold it is considered mobile.

In future we will also make more variables available, like viewport width itself, the user-agent and so on. But for now fastn.mobile should be used to make themes responsive.

Using Different Styles For Mobile And Desktop
The common use case is to use a different style for mobile and desktop:

-- import: fastn

-- ftd.text heading:
size: 48
size if { ds.is-mobile }: 32
Say we want our headings to have a font size of 48px on desktop, but only 32px on mobile, this is how we would set it up.

Different Components For Mobile And Desktop
Sometimes this is not enough, maybe you want to have two column presentation on desktop and single column on mobile. Or maybe the amount of changes you are doing based on fastn.mobile flag is large, and the code is getting hard to maintain because of too many foo if $ds.is-mobile: value calls.

In such cases it is recommended to have two different components, and create a wrapper component that will call the device specific component based on fastn.mobile.

-- import: fastn

-- ftd.column heading:
caption title:

-- heading-desktop: $title
if: { !ds.is-mobile }

-- heading-mobile: $title
if: { ds.is-mobile }

-- end: heading
Say have already created two components, heading-desktop and heading-mobile, each optimized for the desktop and mobile respectively. We do not want authors to know this fact that a single component can not be used for both. So we create a wrapper component that calls the desktop and mobile versions based on fastn.mobile.
LOGO

Responsive Themes

Good quality themes should be “responsive”, they should look good on a wide variety of devices, laptops to mobiles.

FASTN ships with a module fastn, which defines a variable fastn.mobile: boolean, which is set by FASTN tooling to the right value. We actually decide if it is mobile or not based on “viewport width”, if it below certain threshold it is considered mobile.

In future we will also make more variables available, like viewport width itself, the user-agent and so on. But for now fastn.mobile should be used to make themes responsive.

Using Different Styles For Mobile And Desktop
The common use case is to use a different style for mobile and desktop:

-- import: fastn

-- ftd.text heading:
size: 48
size if { ds.is-mobile }: 32
Say we want our headings to have a font size of 48px on desktop, but only 32px on mobile, this is how we would set it up.

Different Components For Mobile And Desktop
Sometimes this is not enough, maybe you want to have two column presentation on desktop and single column on mobile. Or maybe the amount of changes you are doing based on fastn.mobile flag is large, and the code is getting hard to maintain because of too many foo if $ds.is-mobile: value calls.

In such cases it is recommended to have two different components, and create a wrapper component that will call the device specific component based on fastn.mobile.

-- import: fastn

-- ftd.column heading:
caption title:

-- heading-desktop: $title
if: { !ds.is-mobile }

-- heading-mobile: $title
if: { ds.is-mobile }

-- end: heading
Say have already created two components, heading-desktop and heading-mobile, each optimized for the desktop and mobile respectively. We do not want authors to know this fact that a single component can not be used for both. So we create a wrapper component that calls the desktop and mobile versions based on fastn.mobile.