Using the Bootstrap gem in my Ruby on Rails application (version 4.3.1) has been a game changer. Recently, I stumbled upon the responsive font size functionality known as rfs, which was introduced in version 4.3 of Bootstrap.
If you want to dive deeper into Bootstrap RFS, here are some useful resources: Bootstrap RFS Documentation and RFS Documentation from GitHub.
Despite its promising potential, I found myself struggling to find documentation on incorporating this feature using the gem. Here's what I've attempted so far:
In my app/assets/javascripts/application.js file, I included:
//= require bootstrap
I proceeded to enable rfs by adding the following snippet:
$enable-responsive-font-sizes: true;
The default font size set in $font-size-base is at 1rem (16px approximately).
Prior to discovering rfs, I typically defined different font sizes for varying screen sizes in my stylesheet like so:
body, html { font-size: 14px; font-family: Arial; }
@media screen and (min-width: 769px) and (max-width: 1239px) { body, html { font-size: 16px; } }
@media screen and (min-width: 1240px) and (max-width: 1999px) { body, html { font-size: 18px; } }
@media screen and (min-width: 2000px) { body, html { font-size: 20px; } }
Considering this new functionality, I'm uncertain about how to approach setting $font-size-base. Should it be the maximum desired font size (i.e., 20px in my case) or the minimum? My confusion stems from Bootstrap shifting towards a mobile-first approach starting from version 3. All other default values should align with my website requirements.
For more insights into Bootstrap Gem Variables, refer to: Bootstrap Gem Variables.
Implementing this new feature seems uncharted territory as of now. Nevertheless, I believe that once I grasp how $font-size-base interacts with rfs, I will be able to streamline my CSS code significantly and fully leverage the potential of Bootstrap's latest addition.