Bootstrap RFS - Responsible Font Sizes

Bootstrap RFS automates and simplifies the adjustment of font sizes in Responsive Web Design. Using it is really quite simple.

RFS automatically calculates the appropriate values based on the dimensions of the browser viewport.

The calculation is done with calc() functions and is compiled with a mixture of rem and viewport units. This enables the responsive scaling behaviour. Now this sounds like a very complicated usage, but it is not. SCSS is a basic requirement for RFS.

Originally developed to resize fonts, RFS (short for Responsive Font Sizes) is nowadays able to rescale most CSS properties with unit values such as margin, padding, border-radius or box-shadow. At the moment I only use the Font Sizes.

Use Bootstrap RFS

On this website, I use <h1> to <h4> headings, so I created the corresponding SCSS code only for these:

h1 { @include font-size(2.1rem); }
h2 { @include font-size(1.6rem); margin-top: 2.5rem; }
h3 { @include font-size(1.4rem); margin-top: 2.0rem; }
h4 { @include font-size(1.1rem); margin-top: 2.0rem; }
p { @include font-size(1.0rem); }

That’s it, it couldn’t be easier.

The whole thing has a touch of magic and reduces your own work enormously. This and other work simplifications make the Bootstrap Toolkit so interesting. The above rem specifications refer to a min-width of 1200px. RFS uses this as the default value; this default value can also be configured.

Install Bootstrap RFS

If you have already integrated the Bootstrap SCSS and JavaScript files into your Hugo project, no further installation work is necessary. You can simply paste the SCSS code described above into one of your SCSS files.

You can also install - RFS standalone - without the full Bootstrap installation. I will describe how Bootstrap is integrated into Hugo in a later post.

Configure Bootstrap RFS

I do not want to repeat the information in the RFS documentation on the configuration here. Therefore, please - in the RFS-Doku - have a look. I have stored the $rfs-* variables in my variables.scss. The SCSS file is loaded before Bootstrap in the SCSS tree.

$rfs-base-value: 0.8rem;
$rfs-rem-value: 20;
$rfs-safari-iframe-resize-bug-fix: true;

$rfs-base-value: The option prevents the value from becoming too small on smaller screens. If the font size passed to RFS is smaller than this value, no smooth rescaling takes place.
$rfs-rem-value: The default size on my website is 20px and not 16px.

Conclusion

Bootstrap with RFS is currently released in version v5.0.2. I use it on this website and have no problems with it at the moment. At the moment, I only use RFS for <h1> to <h4>. For the HTML element <p> it didn’t work for me. For <p> I use 1.0rem. It would be nice if this would scale when the viewport is small. The minimum value of rfs-base-value is 0.8rem. So actually <p> would have to be scaled down as well. Otherwise, RFS is really a labour-saver, with quite simple use.

List of links to this post

This might also interest you