Today, in this blog we will see how fastn allows the use of user-defined
custom breakpoints. Although currently we can only modify the
default breakpoint when using
ftd.document.How to Define a Custom Breakpoint?
To define a custom breakpoint, you will need to define the
breakpoint attribute
of ftd.document to specify your custom breakpoint width beyond/below
which the browser will render the contents in desktop/mobile mode.Defining Custom Breakpoint
By default, fastn defines the breakpoint width to 768px in case
no user-defined breakpoint is specified. Let's say you want to define a
custom breakpoint (let's say 800px) for your page. You can do this using
the
breakpoint
attribute of ftd.document. Here is how we can define it.Sample Usage
-- ftd.document:
breakpoint: 800
-- ftd.text: Desktop Text
color: blue
text if { ftd.device == "mobile" }: Mobile Text
-- end: ftd.document
index.ftd
Lang:
ftd
In the above example, the browser will show
Mobile text when the browser width
is equal or below 800px and show Desktop text when the browser width is above 800px.
And this is how we can define custom breakpoints for our fastn documents.
