Good quality themes should be “responsive”, they should look good on a wide variety of devices, laptops to mobiles.
FPM ships with a module fpm
, which defines a variable fpm.mobile: boolean
, which is set by FPM 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 fpm.mobile
should be used to make themes responsive.
-- import: fpm -- ftd.text heading: size: 48 size if $ft.is-mobile: 32
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 fpm.mobile
flag is large, and the code is getting hard to maintain because of too many foo if $ft.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 fpm.mobile
.
-- import: fpm -- ftd.column heading: caption title: --- heading-desktop: $title if: not $ft.is-mobile --- heading-mobile: $title if: $ft.is-mobile
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 fpm.mobile
.