🌞
.
उपलब्ध नहीं है
इस दस्तावेज़ का अभी तक ⁨Hindi⁩ में अनुवाद नहीं हुआ है। आप ⁨English⁩ संस्करण देख रहे हैं।
Responsive Themes

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.

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

-- ftd.text heading:
size: 48
size if $fpm.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 fpm.mobile flag is large, and the code is getting hard to maintain because of too many foo if $fpm.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 $fpm.mobile

--- heading-mobile: $title
if: $fpm.mobile
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 fpm.mobile.