Enable RFS for font resizing

- Enable RFS
- Add documentation
- Disable doc font size overrides

2 files changed, 87 insertions, 1 deletions

diff --git a/site/content/docs/4.3/getting-started/rfs.md b/site/content/docs/4.3/getting-started/rfs.md
new file mode 100644
index 000000000..744b79cfa
--- /dev/null
+++ b/site/content/docs/4.3/getting-started/rfs.md
@@ -0,0 +1,86 @@
+---
+layout: docs
+title: RFS
+description: Bootstrap's resizing engine.
+group: getting-started
+toc: true
+---
+
+## What is RFS?
+
+Bootstrap's side project [RFS](https://github.com/twbs/rfs) is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling basically every value for any css property with units, like `margin`, `padding`, `border-radius` or even `box-shadow`.
+
+The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior.
+
+## Using RFS
+
+The mixins are included in Bootstrap and are available once you include Bootstraps' `scss`. RFS can also be installed [standalone](https://github.com/twbs/rfs#installation) if needed.
+
+### Using the mixins
+
+The `rfs()` mixin has shorthands for `font-size`, `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom` and `padding-left` which can be used like this:
+
+```scss
+.title {
+  @include font-size(4rem);
+}
+```
+
+which outputs the following CSS:
+
+```css
+.title {
+  font-size: calc(1.525rem + 3.3vw);
+}
+
+@media (max-width: 1200px) {
+  .title {
+    font-size: 4rem;
+  }
+}
+```
+
+Any other property can be passed to the `rfs()` mixin like this:
+
+```scss
+.selector {
+  @include rfs(4rem, border-radius);
+}
+```
+
+`!important` can also just be added to whatever value you want:
+
+```scss
+.selector {
+  @include padding(2.5rem !important);
+}
+```
+
+### Using the functions
+
+- `rfs-value()` converts a value into a `rem` value if a `px` value is passed, in other cases it returns the same result.
+- `rfs-fluid-value()` returns the fluid version of a value if the property needs rescaling.
+
+In this example we use one of Bootstrap's built-in [responsive breakpoint mixins]({{< docsref "/layout/overview#responsive-breakpoints" >}}) to only apply styling below the `lg` breakpoint.
+
+```scss
+.selector {
+  @include media-breakpoint-down(lg) {
+     padding: rfs-fluid-value(2rem);
+     font-size: rfs-fluid-value(1.125rem);
+  }
+}
+```
+
+```css
+@media (max-width: 991.98px) {
+  .selector {
+    padding: calc(1.325rem + 0.9vw);
+    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
+  }
+}
+```
+
+## Extended documentation
+
+RFS is a separate project under the Bootstrap organisation. More about RFS and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs).
diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index 0c5ad09ab..7c764afed 100644
--- a/site/content/docs/4.3/getting-started/theming.md
+++ b/site/content/docs/4.3/getting-started/theming.md
@@ -270,7 +270,7 @@ You can find and customize these variables for key global options in Bootstrap's
 | `$enable-grid-classes`                       | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
 | `$enable-caret`                              | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
 | `$enable-pointer-cursor-for-buttons`         | `true` (default) or `false`        | Add "hand" cursor to non-disabled button elements. |
-| `$enable-responsive-font-sizes`              | `true` or `false` (default)        | Enables [responsive font sizes]({{< docsref "/content/typography#responsive-font-sizes" >}}). |
+| `$enable-rfs`                                | `true` or `false` (default)        | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
 | `$enable-validation-icons`                   | `true` (default) or `false`        | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
 | `$enable-deprecation-messages`               | `true` or `false` (default)        | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |