RFS

CoreUI’s resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.

🤖 Looking for the LLM-optimized version?View llm.md

What is RFS?

Bootstrap’s side projectRFS 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 most CSS properties with unit values likemargin,padding,border-radius, or evenbox-shadow.

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled intocalc() functions with a mix ofrem and viewport units to enable the responsive scaling behavior.

Using RFS

The mixins are included in CoreUI and are available once you include CoreUI’sscss. RFS can also beinstalled standalone if needed.

Using the mixins

Therfs() mixin has shorthands forfont-size,margin,margin-top,margin-right,margin-bottom,margin-left,padding,padding-top,padding-right,padding-bottom, andpadding-left. See the example below for source Sass and compiled CSS.

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

.title{font-size:calc(1.525rem+3.3vw);}@media(min-width:1200px){.title{font-size:4rem;}}

Any other property can be passed to therfs() mixin like this:

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

!important can also just be added to whatever value you want:

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

Using the functions

When you don’t want to use the includes, there are also two functions:

• rfs-value() converts a value into arem value if apx 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 CoreUI for Bootstrap built-inresponsive breakpoint mixins to only apply styling below thelg breakpoint.

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

@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 organization. More about RFS and its configuration can be found on itsGitHub repository.