What is rfs?

RFS is a small CSS tool that automatically adjusts font sizes and spacing values to fit different screen sizes. Instead of writing separate rules for phones, tablets, and desktops, you write a single value and RFS generates the CSS needed to make that value scale fluidly as the browser window grows or shrinks. Above a certain screen width (1200 pixels by default), values stay fixed at the size you specified. Below that, they shrink proportionally so text and layout elements do not become too large or too cramped on smaller screens. The tool works with four popular stylesheet languages: Sass, Less, Stylus, and PostCSS. In each case, you wrap the value you want to scale in a mixin or function call, and RFS handles the rest. It originally focused on font sizes, but it now works on padding, margin, border radius, box shadow, and any other CSS property that uses units. The output it produces is standard CSS using a combination of calculated values and media queries, so no special browser support is required. Any browser that handles media queries and viewport units will work. Configuration is optional. The defaults work without any adjustments, but you can change the breakpoint at which scaling kicks in, the minimum size below which values stop shrinking, how aggressively values scale, and whether to output pixels or rem units. There is also an option to control scaling with a CSS class, letting you turn it on or off for specific parts of a page. RFS is maintained under the Bootstrap organization and is licensed under MIT. It is available as an npm package and can be pulled into any project that already uses one of the supported stylesheet preprocessors.