Perfecting mobile responsiveness on NeetoSite using RFS

Introduction

Responsive design has become fundamental to modern web development as users access websites from various devices with varying screen sizes. NeetoSite is a website-building tool by Neeto. We strive for a great user experience on all devices for sites built using NeetoSite.

This blog will discuss implementing responsive typography, padding, and margin using the RFS package.

At NeetoSite, users can personalize font sizes from the design page. If a user selects the largest font size (9xl) for the title, everything looks flawless on the desktop view. However, when switching to mobile, things start to look a little off. The title appears out of place, and that's because we had been using the same font size for both desktop view as well as mobile view.

Desktop view

Mobile view

Limitations of the Tailwind approach

We use Tailwind CSS to create the building blocks of NeetoSite. One way to implement responsive typography is to use Tailwind's responsive font size classes.

For example, to make the text 60px on large desktop screens, we can use the lg:text-6xl class.

1<p class="lg:text-6xl">Text</p>
Copy

Now we need to choose the font size for mobile and tablet devices. Let's say we choose 30px for mobile and 48px for tablets. We need to add additional Tailwind classes:

1<p class="text-3xl md:text-5xl lg:text-6xl">Responsive text</p>
Copy

• The text-3xl class makes text 30px on mobile.
• The md:text-5xl class will set the font size to 48px on tablet devices.

Now, let's dive into a practical example within NeetoSite. This platform provides users with the flexibility to customize font sizes for their content from the design page.

NeetoSite offers a total of 13 font size variants, each associated with its default desktop value, as shown in the table below.

For each font size variant, the challenge is to determine the optimal font sizes for tablets and mobile devices. Once we have chosen the font sizes for mobile and tablet, we need to apply the corresponding Tailwind classes, as mentioned above. It can indeed involve a substantial amount of work and effort, doesn't it?

The solution - RFS package

What is RFS?

Bootstrap’s side project RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). It's a great tool for creating responsive typography and layouts, as it automatically calculates the appropriate values based on the dimensions of the browser viewport. Nowadays, RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

Using RFS

The rfs() mixin provides shorthands for common CSS properties with unit values, such as font-size, margin, and padding. This makes it easy to use RFS to create responsive CSS.

Importantly, we don't need to worry about creating complex media queries to achieve responsive font sizes. RFS handles this for us.

For example, to set the font size of a .title class to be responsive, you would use the following Sass code.

1.title {
2  @include font-size(4rem);
3}
Copy

The above Sass code will generate the following CSS output.

1.title {
2  font-size: calc(1.525rem + 3.3vw);
3}
4
5@media (min-width: 1200px) {
6  .title {
7    font-size: 4rem;
8  }
9}
Copy

In the generated CSS, the font size is set to calc(1.525rem + 3.3vw). This formula takes a base size of 1.525rem and adds 3.3% of the viewport width (vw). As the viewport width changes, the font size dynamically adjusts to ensure optimal readability and aesthetics. If the viewport width is greater than 1200px, the built-in media query in the generated CSS sets the font size back to the user-defined value of 4rem.

Visualisation

The following visualization shows how RFS rescales font sizes based on the viewport width.

Note that every font size is generated in a combination of rem and vw units, but they are mapped to px in the graph to make it easier to understand.

The X-axis represents the viewport width in pixels. The Y-axis represents the font size in pixels. The colored lines represent the different font sizes that can be generated using RFS.

As you can see, the font sizes are scaled down as the viewport width decreases. This ensures that the text is readable on all devices, regardless of the screen size.

How we applied RFS on NeetoSite

We created custom CSS classes for each font size variants and applied RFS to them. RFS automatically calculates the appropriate values based on the browser viewport, so the font size scales down pleasingly.

1.ns-font-9xl {
2  @include font-size(4.5rem !important);
3}
4
5.ns-font-8xl {
6  @include font-size(3.75rem !important);
7}
8
9.ns-font-7xl {
10  @include font-size(3rem !important);
11}
12
13.ns-font-6xl {
14  @include font-size(2.5rem !important);
15}
16
17.ns-font-5xl {
18  @include font-size(2.25rem !important);
19}
20
21.ns-font-4xl {
22  @include font-size(2rem !important);
23}
24
25.ns-font-3xl {
26  @include font-size(1.75rem !important);
27}
28
29.ns-font-2xl {
30  @include font-size(1.5rem !important);
31}
32
33.ns-font-xl {
34  @include font-size(1.25rem !important);
35}
36
37.ns-font-lg {
38  @include font-size(1.125rem !important);
39}
40
41.ns-font-base {
42  @include font-size(1rem !important);
43}
44
45.ns-font-sm {
46  @include font-size(0.875rem !important);
47}
48
49.ns-font-xs {
50  @include font-size(0.75rem !important);
51}
Copy

Similarly we created custom CSS classes for each padding and margin variants and applied RFS to them.

RFS fluid rescaling in action

How RFS transformed NeetoSite

• Improved mobile responsiveness: With RFS, we were able to effortlessly set responsive font sizes, paddings, and margins for different screen sizes, ensuring a seamless and visually pleasing experience across devices.

• Simplified user customization: Users could continue customizing font sizes, but now with the added benefit of automatic responsiveness, eliminating the burden of setting tablet and mobile values manually.

• Enhanced readability: RFS helps ensure that the text remains readable at all screen sizes.

• Improved consistency: The use of RFS ensures that the typography, padding, and margin of all NeetoSite blocks are consistent across all devices. This is because it scales all of the padding and margin values based on the same formula.

See RFS in action

Take a look at BigBinary Academy, a place to learn coding powered by NeetoSite. Recent changes have brought about a significant improvement in mobile responsiveness. Another example of successful RFS implementation can be found at https://neetocode.com, a coding platform built by BigBinary.