RFS

What is RFS?

RFS (Responsive Font Sizes) is a small Sass library that produces fluid CSS values — values that scale smoothly between a minimum and maximum based on the viewport width. Despite the name, RFS handles any unit-bearing CSS property: font-size, margin, padding, border-radius, even box-shadow.

The compiled output uses calc() plus a mix of rem and viewport units, so the responsive scaling happens entirely in CSS without media queries breaking the curve into steps.

Chassis CSS uses RFS internally for its type scale and spacing. The mixins are bundled in the framework, available wherever Chassis Sass is imported. RFS can also be installed standalone if you want to use it outside Chassis.

Toggling RFS

RFS is on by default. To disable it across Chassis, set $enable-rfs: false before importing the framework:

$enable-rfs: false;
@import "@chassis-ui/css/scss/chassis";

When disabled, every RFS mixin emits the static value — the fluid scaling drops out and you're left with the design-time token value.

Using the mixins

The rfs() mixin has shorthand wrappers for the most common CSS properties — font-size, margin, margin-top (and the other three sides), padding, padding-top (and the other three sides):

.title {
  @include font-size(4rem);
}

Compiles to:

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

For any other property, pass it as the second argument to rfs():

.selector {
  @include rfs(4rem, border-radius);
}

!important works as expected on the value:

.selector {
  @include padding(2.5rem !important);
}

Using the functions

When you'd rather not include a mixin (for example, inside an existing media query), the two RFS functions return values directly:

• rfs-value() — converts a px value into rem; pass-through for other units.
• rfs-fluid-value() — returns the fluid calc() form of a value if RFS would resize it; pass-through otherwise.

The example below uses rfs-fluid-value() inside a media-breakpoint-down block to apply fluid scaling only below the lg breakpoint:

.selector {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

Compiles to:

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* small enough; RFS leaves it alone */
  }
}

Values below RFS's lower threshold are returned unchanged — the engine only rescales values that would actually benefit from it.

Further reading

RFS is maintained as a separate project under the same upstream organization. For configuration options (breakpoint, base font size, factor, two-dimensional scaling), see the RFS GitHub repository.