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
.