From: Mark Otto Date: Wed, 17 Dec 2025 00:41:53 +0000 (-0800) Subject: Remove RFS from v6 (#41938) X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=a43691bffdca1d4f3a655f0db44d7a11aab4d870;p=thirdparty%2Fbootstrap.git Remove RFS from v6 (#41938) * Unrelated: fix link * Clean up elsewhere * Remove RFS from Sass and docs * Linter errors --- diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 6f2e1cb1f1..b6f02d5b7e 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -1,7 +1,6 @@ @use "config" as *; @use "variables" as *; @use "functions" as *; -@use "vendor/rfs" as *; @use "mixins/border-radius" as *; @use "mixins/transition" as *; @use "mixins/box-shadow" as *; @@ -68,7 +67,7 @@ $accordion-button-icon: url("data:image/svg+xml, :last-child { margin-bottom: 0; @@ -48,7 +47,7 @@ .blockquote-footer { margin-top: -$blockquote-margin-y; margin-bottom: $blockquote-margin-y; - @include font-size($blockquote-footer-font-size); + font-size: $blockquote-footer-font-size; color: $blockquote-footer-color; &::before { diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss index 8f5b13a34b..d6fc0a83c1 100644 --- a/scss/forms/_check.scss +++ b/scss/forms/_check.scss @@ -2,7 +2,6 @@ @use "../colors" as *; @use "../variables" as *; @use "../functions" as *; -@use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; @use "../mixins/box-shadow" as *; @use "../mixins/color-mode" as *; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 34e7da6e79..ac8f53f0bd 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -2,7 +2,6 @@ @use "../config" as *; @use "../variables" as *; @use "../functions" as *; -@use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; @use "../mixins/box-shadow" as *; @use "../mixins/color-mode" as *; diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss index 2c6c586320..eae06858e8 100644 --- a/scss/forms/_form-text.scss +++ b/scss/forms/_form-text.scss @@ -1,6 +1,5 @@ @use "../config" as *; @use "../variables" as *; -@use "../vendor/rfs" as *; @use "form-variables" as *; // scss-docs-start form-text-variables @@ -14,7 +13,7 @@ $form-text-color: var(--#{$prefix}secondary-color) !default; @layer forms { .form-text { margin-top: $form-text-margin-top; - @include font-size($form-text-font-size); + font-size: $form-text-font-size; font-style: $form-text-font-style; font-weight: $form-text-font-weight; color: $form-text-color; diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 12a8607304..b302b81845 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -3,7 +3,6 @@ @use "../config" as *; @use "../colors" as *; @use "../variables" as *; -@use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; @use "form-variables" as *; @@ -63,7 +62,7 @@ $input-group-addon-border-color: $input-border-color !default; display: flex; align-items: center; padding: $input-group-addon-padding-y $input-group-addon-padding-x; - @include font-size($input-font-size); // Match inputs + font-size: $input-font-size; // Match inputs // font-weight: $input-group-addon-font-weight; line-height: $input-line-height; color: $input-group-addon-color; @@ -85,7 +84,7 @@ $input-group-addon-border-color: $input-border-color !default; .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: $input-padding-y-lg $input-padding-x-lg; - @include font-size($input-font-size-lg); + font-size: $input-font-size-lg; @include border-radius($input-border-radius-lg); } @@ -94,7 +93,7 @@ $input-group-addon-border-color: $input-border-color !default; .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: $input-padding-y-sm $input-padding-x-sm; - @include font-size($input-font-size-sm); + font-size: $input-font-size-sm; @include border-radius($input-border-radius-sm); } diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss index ea9b1e3fd3..72c2e9e12b 100644 --- a/scss/forms/_labels.scss +++ b/scss/forms/_labels.scss @@ -1,5 +1,4 @@ @use "../variables" as *; -@use "../vendor/rfs" as *; @use "form-variables" as *; // scss-docs-start form-label-variables @@ -14,7 +13,7 @@ $form-label-color: null !default; @layer forms { .form-label { margin-bottom: $form-label-margin-bottom; - @include font-size($form-label-font-size); + font-size: $form-label-font-size; font-style: $form-label-font-style; font-weight: $form-label-font-weight; color: $form-label-color; @@ -26,7 +25,7 @@ $form-label-color: null !default; padding-top: add($input-padding-y, $input-border-width); padding-bottom: add($input-padding-y, $input-border-width); margin-bottom: 0; // Override the `` default - @include font-size(inherit); // Override the `` default + font-size: inherit; // Override the `` default font-style: $form-label-font-style; font-weight: $form-label-font-weight; line-height: $input-line-height; @@ -36,12 +35,12 @@ $form-label-color: null !default; .col-form-label-lg { padding-top: add($input-padding-y-lg, $input-border-width); padding-bottom: add($input-padding-y-lg, $input-border-width); - @include font-size($input-font-size-lg); + font-size: $input-font-size-lg; } .col-form-label-sm { padding-top: add($input-padding-y-sm, $input-border-width); padding-bottom: add($input-padding-y-sm, $input-border-width); - @include font-size($input-font-size-sm); + font-size: $input-font-size-sm; } } diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss index d19fdbf567..c13cafd132 100644 --- a/scss/forms/_radio.scss +++ b/scss/forms/_radio.scss @@ -2,7 +2,6 @@ @use "../colors" as *; @use "../variables" as *; @use "../functions" as *; -@use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; @use "../mixins/box-shadow" as *; @use "../mixins/color-mode" as *; diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss index ccb20bc6e4..da4d91c75e 100644 --- a/scss/forms/_switch.scss +++ b/scss/forms/_switch.scss @@ -2,7 +2,6 @@ @use "../colors" as *; @use "../variables" as *; @use "../functions" as *; -@use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; @use "../mixins/box-shadow" as *; @use "../mixins/color-mode" as *; diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index c2d47d777c..e567bc97ed 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -1,7 +1,6 @@ @use "../config" as *; @use "../variables" as *; @use "../functions" as *; -@use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; @use "../mixins/box-shadow" as *; @use "form-variables" as *; @@ -44,7 +43,7 @@ display: none; width: 100%; margin-top: $form-feedback-margin-top; - @include font-size($form-feedback-font-size); + font-size: $form-feedback-font-size; font-style: $form-feedback-font-style; color: $color; } @@ -57,7 +56,7 @@ max-width: 100%; // Contain to parent when possible padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; - @include font-size($form-feedback-tooltip-font-size); + font-size: $form-feedback-tooltip-font-size; line-height: $form-feedback-tooltip-line-height; color: $tooltip-color; background-color: $tooltip-bg-color; diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index beb2dfcfc0..faee7acc82 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -28,7 +28,7 @@ display: none; width: 100%; margin-top: $form-feedback-margin-top; - @include font-size($form-feedback-font-size); + font-size: $form-feedback-font-size; font-style: $form-feedback-font-style; color: $color; } @@ -41,7 +41,7 @@ max-width: 100%; // Contain to parent when possible padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; - @include font-size($form-feedback-tooltip-font-size); + font-size: $form-feedback-tooltip-font-size; line-height: $form-feedback-tooltip-line-height; color: $tooltip-color; background-color: $tooltip-bg-color; diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 247eac8a49..bb33b4cc1b 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -3,7 +3,6 @@ @use "sass:meta"; @use "sass:string"; @use "../config" as *; -@use "../vendor/rfs" as *; // stylelint-disable scss/dollar-variable-pattern diff --git a/scss/mixins/index.scss b/scss/mixins/index.scss index ceea997102..1686d65c9c 100644 --- a/scss/mixins/index.scss +++ b/scss/mixins/index.scss @@ -2,9 +2,6 @@ // // Used in conjunction with global variables to enable certain theme features. -// Vendor -// @forward "vendor/rfs"; - // Deprecate @forward "deprecate"; diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss index da42501b1d..96f3f2b387 100644 --- a/scss/tests/mixins/_utilities.test.scss +++ b/scss/tests/mixins/_utilities.test.scss @@ -1,7 +1,6 @@ @use "../../config" as *; @use "../../variables" as *; @use "../../functions" as *; -@use "../../vendor/rfs" as *; @use "../../mixins/utilities" as *; $true-terminal-output: false; diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss index 4c38c24b3e..595948e2ba 100644 --- a/scss/utilities/_api.scss +++ b/scss/utilities/_api.scss @@ -2,7 +2,6 @@ @use "sass:meta"; @use "../config" as *; @use "../variables" as *; -@use "../vendor/rfs" as *; @use "../layout/breakpoints" as *; @use "../mixins/utilities" as *; @use "../utilities" as *; @@ -26,24 +25,6 @@ } } - // RFS rescaling - @media (min-width: $rfs-mq-value) { - @each $breakpoint in map.keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { - // Loop over each utility property - @each $key, $utility in $utilities { - // The utility can be disabled with `false`, thus check if the utility is a map first - // Only proceed if responsive media queries are enabled or if it's the base media query - @if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") { - @include generate-utility($utility, $infix, true); - } - } - } - } - } - // Print utilities @media print { diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss deleted file mode 100644 index 3d7a44eae7..0000000000 --- a/scss/vendor/_rfs.scss +++ /dev/null @@ -1,311 +0,0 @@ -@use "sass:map"; -@use "sass:math"; -@use "sass:meta"; -@use "sass:string"; - -// stylelint-disable scss/dimension-no-non-numeric-values - -// SCSS RFS mixin -// -// Automated responsive values for font sizes, paddings, margins and much more -// -// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE) - -// Configuration - -// Base value -$rfs-base-value: 1.25rem !default; -$rfs-unit: rem !default; - -@if $rfs-unit != rem and $rfs-unit != px { - @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`."; -} - -// Breakpoint at where values start decreasing if screen width is smaller -$rfs-breakpoint: 1200px !default; -$rfs-breakpoint-unit: px !default; - -@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem { - @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; -} - -// Resize values based on screen height and width -$rfs-two-dimensional: false !default; - -// Factor of decrease -$rfs-factor: 10 !default; - -@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 { - @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1."; -} - -// Mode. Possibilities: "min-media-query", "max-media-query" -$rfs-mode: min-media-query !default; - -// Generate enable or disable classes. Possibilities: false, "enable" or "disable" -$rfs-class: false !default; - -// 1 rem = $rfs-rem-value px -$rfs-rem-value: 16 !default; - -// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 -$rfs-safari-iframe-resize-bug-fix: false !default; - -// Disable RFS by setting $enable-rfs to false -$enable-rfs: true !default; - -// Cache $rfs-base-value unit -$rfs-base-value-unit: math.unit($rfs-base-value); - -// Remove px-unit from $rfs-base-value for calculations -@if $rfs-base-value-unit == px { - $rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1); -} -@else if $rfs-base-value-unit == rem { - $rfs-base-value: math.div($rfs-base-value, math.div($rfs-base-value * 0 + 1, $rfs-rem-value)); -} - -// Cache $rfs-breakpoint unit to prevent multiple calls -$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint); - -// Remove unit from $rfs-breakpoint for calculations -@if $rfs-breakpoint-unit-cache == px { - $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1); -} -@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" { - $rfs-breakpoint: math.div($rfs-breakpoint, math.div($rfs-breakpoint * 0 + 1, $rfs-rem-value)); -} - -// Calculate the media query value -$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}); -$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width); -$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height); - -// Internal mixin used to determine which media query needs to be used -@mixin _rfs-media-query { - @if $rfs-two-dimensional { - @if $rfs-mode == max-media-query { - @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { - @content; - } - } - @else { - @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { - @content; - } - } - } - @else { - @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { - @content; - } - } -} - -// Internal mixin that adds disable classes to the selector if needed. -@mixin _rfs-rule { - @if $rfs-class == disable and $rfs-mode == max-media-query { - // Adding an extra class increases specificity, which prevents the media query to override the property - &, - .disable-rfs &, - &.disable-rfs { - @content; - } - } - @else if $rfs-class == enable and $rfs-mode == min-media-query { - .enable-rfs &, - &.enable-rfs { - @content; - } - } @else { - @content; - } -} - -// Internal mixin that adds enable classes to the selector if needed. -@mixin _rfs-media-query-rule { - - @if $rfs-class == enable { - @if $rfs-mode == min-media-query { - @content; - } - - @include _rfs-media-query () { - .enable-rfs &, - &.enable-rfs { - @content; - } - } - } - @else { - @if $rfs-class == disable and $rfs-mode == min-media-query { - .disable-rfs &, - &.disable-rfs { - @content; - } - } - @include _rfs-media-query () { - @content; - } - } -} - -// Helper function to get the formatted non-responsive value -@function rfs-value($values) { - // Convert to list - $values: if(meta.type-of($values) != list, ($values,), $values); - - $val: ""; - - // Loop over each value and calculate value - @each $value in $values { - @if $value == 0 { - $val: $val + " 0"; - } - @else { - // Cache $value unit - $unit: if(meta.type-of($value) == "number", math.unit($value), false); - - @if $unit == px { - // Convert to rem if needed - $val: $val + " " + if($rfs-unit == rem, #{math.div($value, $value * 0 + $rfs-rem-value)}rem, $value); - } - @else if $unit == rem { - // Convert to px if needed - $val: $val + " " + if($rfs-unit == px, #{math.div($value, $value * 0 + 1) * $rfs-rem-value}px, $value); - } @else { - // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - $val: $val + " " + $value; - } - } - } - - // Remove first space - @return string.unquote(string.slice($val, 2)); -} - -// Helper function to get the responsive value calculated by RFS -@function rfs-fluid-value($values) { - // Convert to list - $values: if(meta.type-of($values) != list, ($values,), $values); - - $val: ""; - - // Loop over each value and calculate value - @each $value in $values { - @if $value == 0 { - $val: $val + " 0"; - } @else { - // Cache $value unit - $unit: if(meta.type-of($value) == "number", math.unit($value), false); - - // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - @if not $unit or $unit != px and $unit != rem { - $val: $val + " " + $value; - } @else { - // Remove unit from $value for calculations - $value: math.div($value, $value * 0 + if($unit == px, 1, math.div(1, $rfs-rem-value))); - - // Only add the media query if the value is greater than the minimum value - @if abs($value) <= $rfs-base-value or not $enable-rfs { - $val: $val + " " + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px); - } - @else { - // Calculate the minimum value - $value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor); - - // Calculate difference between $value and the minimum value - $value-diff: abs($value) - $value-min; - - // Base value formatting - $min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px); - - // Use negative value if needed - $min-width: if($value < 0, -$min-width, $min-width); - - // Use `vmin` if two-dimensional is enabled - $variable-unit: if($rfs-two-dimensional, vmin, vw); - - // Calculate the variable width between 0 and $rfs-breakpoint - $variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit}; - - // Return the calculated value - $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")"; - } - } - } - } - - // Remove first space - @return string.unquote(string.slice($val, 2)); -} - -// RFS mixin -@mixin rfs($values, $property: font-size) { - @if $values != null { - $val: rfs-value($values); - $fluid-val: rfs-fluid-value($values); - - // Do not print the media query if responsive & non-responsive values are the same - @if $val == $fluid-val { - #{$property}: $val; - } - @else { - @include _rfs-rule () { - #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val); - - // Include safari iframe resize fix if needed - min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null); - } - - @include _rfs-media-query-rule () { - #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val); - } - } - } -} - -// Shorthand helper mixins -@mixin font-size($value) { - @include rfs($value); -} - -@mixin padding($value) { - @include rfs($value, padding); -} - -@mixin padding-top($value) { - @include rfs($value, padding-top); -} - -@mixin padding-right($value) { - @include rfs($value, padding-right); -} - -@mixin padding-bottom($value) { - @include rfs($value, padding-bottom); -} - -@mixin padding-left($value) { - @include rfs($value, padding-left); -} - -@mixin margin($value) { - @include rfs($value, margin); -} - -@mixin margin-top($value) { - @include rfs($value, margin-top); -} - -@mixin margin-right($value) { - @include rfs($value, margin-right); -} - -@mixin margin-bottom($value) { - @include rfs($value, margin-bottom); -} - -@mixin margin-left($value) { - @include rfs($value, margin-left); -} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 2cbfc90999..58472d2b11 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -11,7 +11,6 @@ - title: JavaScript - title: Accessibility # - title: Community - # - title: RFS - title: Guides icon: map diff --git a/site/src/components/footer/Footer.astro b/site/src/components/footer/Footer.astro index d8144c280f..6290365acb 100644 --- a/site/src/components/footer/Footer.astro +++ b/site/src/components/footer/Footer.astro @@ -63,7 +63,6 @@ import { getVersionedDocsPath } from '@libs/path' Bootstrap 4
  • Icons
    • -
  • RFS
  • Examples repo
    • diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro index dedc2f630d..35ec2136b7 100644 --- a/site/src/components/home/MastHead.astro +++ b/site/src/components/home/MastHead.astro @@ -40,7 +40,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro' diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx index 5b03a89e62..33565ff6dc 100644 --- a/site/src/content/docs/content/typography.mdx +++ b/site/src/content/docs/content/typography.mdx @@ -220,7 +220,7 @@ Align terms and descriptions horizontally by using our grid system’s predefine ## Responsive font sizes -In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]([[docsref:/getting-started/rfs]]) to find out how this works. +Bootstrap uses CSS's `clamp()` function to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. ## CSS @@ -236,4 +236,4 @@ Miscellaneous typography elements covered here and in [Reboot]([[docsref:/conten ### Sass mixins -There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]([[docsref:/getting-started/rfs]]). +There are no dedicated mixins for typography. diff --git a/site/src/content/docs/customize/options.mdx b/site/src/content/docs/customize/options.mdx index ef25112e37..2c72b7fe3c 100644 --- a/site/src/content/docs/customize/options.mdx +++ b/site/src/content/docs/customize/options.mdx @@ -22,7 +22,6 @@ You can find and customize these variables for key global options in Bootstrap | `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) | | `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | | `$enable-button-pointers` | `true` (default) or `false` | Add “hand” cursor to non-disabled button elements. | -| `$enable-rfs` | `true` (default) or `false` | 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-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]([[docsref:/utilities/margin#negative-margin]]). | | `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. | diff --git a/site/src/content/docs/getting-started/rfs.mdx b/site/src/content/docs/getting-started/rfs.mdx deleted file mode 100644 index 238a46a80d..0000000000 --- a/site/src/content/docs/getting-started/rfs.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: RFS -description: Bootstrap’s resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices. -toc: true ---- - -## What is RFS? - -Bootstrap’s side project [RFS](https://github.com/twbs/rfs/tree/[[config:rfs_version]]) 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 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 Bootstrap’s `scss`. RFS can also be [installed standalone](https://github.com/twbs/rfs/tree/[[config:rfs_version]]#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`. See the example below for source Sass and compiled CSS. - -```scss -.title { - @include font-size(4rem); -} -``` - -```css -.title { - font-size: calc(1.525rem + 3.3vw); -} - -@media (min-width: 1280px) { - .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 - -When you don’t want to use the includes, there are also two 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/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 organization. More about RFS and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/[[config:rfs_version]]). diff --git a/site/src/content/docs/utilities/api.mdx b/site/src/content/docs/utilities/api.mdx index 0b3e67c012..d107d3534e 100644 --- a/site/src/content/docs/utilities/api.mdx +++ b/site/src/content/docs/utilities/api.mdx @@ -22,7 +22,6 @@ The `$utilities` map contains all our utilities and is later merged with your cu | [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. | | [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. | | [`important`](#importance) | Optional | `false` | Boolean indicating if `!important` should be added to the utility's CSS rules. | -| `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]([[docsref:/getting-started/rfs]]). | | [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. | | `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. | diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss index efb7d277aa..5ffed8e3e7 100644 --- a/site/src/scss/_ads.scss +++ b/site/src/scss/_ads.scss @@ -1,5 +1,4 @@ @use "../../../scss/layout/breakpoints" as *; -@use "../../../scss/vendor/rfs" as *; @use "../../../scss/mixins/border-radius" as *; // stylelint-disable declaration-no-important, selector-max-id @@ -15,7 +14,7 @@ padding: 15px 15px 15px 160px; margin: 1rem 0; overflow: hidden; - @include font-size(.8125rem); + font-size: .8125rem; line-height: 1.4; text-align: start; background-color: var(--bs-bg-1); diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index 67eb7f243b..3d2e09df73 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -1,6 +1,5 @@ @use "../../../scss/config" as *; @use "../../../scss/variables" as *; -@use "../../../scss/vendor/rfs" as *; @use "../../../scss/layout/breakpoints" as *; @use "../../../scss/mixins/border-radius" as *; @use "../../../scss/mixins/box-shadow" as *; diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss index 7c82a248a7..c3c04c8173 100644 --- a/site/src/scss/_content.scss +++ b/site/src/scss/_content.scss @@ -2,7 +2,6 @@ @use "../../../scss/colors" as *; @use "../../../scss/config" as *; @use "../../../scss/variables" as *; -@use "../../../scss/vendor/rfs" as *; @use "../../../scss/layout/breakpoints" as *; // @@ -63,7 +62,7 @@ max-width: 100%; margin-bottom: 1.5rem; - @include font-size(.875rem); + font-size: .875rem; @include media-breakpoint-down(lg) { &.table-bordered { @@ -125,8 +124,8 @@ } .bd-subtitle { + font-size: 1.5rem; font-weight: 300; - @include font-size(1.5rem); } .bi { diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss index dc582e78ab..2ad552d4e1 100644 --- a/site/src/scss/_masthead.scss +++ b/site/src/scss/_masthead.scss @@ -1,7 +1,6 @@ @use "../../../scss/config" as *; @use "../../../scss/colors" as *; @use "../../../scss/variables" as *; -@use "../../../scss/vendor/rfs" as *; @use "../../../scss/layout/breakpoints" as *; @use "../../../scss/mixins/border-radius" as *; @use "../../../scss/mixins/transition" as *; @@ -20,11 +19,11 @@ h1 { --bs-heading-color: var(--bs-emphasis-color); - @include font-size(4rem); + font-size: 4rem; } .lead { - @include font-size(1rem); + font-size: 1rem; font-weight: 400; color: var(--bs-secondary-color); } @@ -70,7 +69,7 @@ @include media-breakpoint-up(md) { .lead { - @include font-size(1.5rem); + font-size: 1.5rem; } } } @@ -83,12 +82,12 @@ } .lead { - @include font-size(1rem); + font-size: 1rem; } @include media-breakpoint-up(md) { .lead { - @include font-size(1.25rem); + font-size: 1.25rem; } } } diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss index 0d702a275a..56101f5c64 100644 --- a/site/src/scss/_navbar.scss +++ b/site/src/scss/_navbar.scss @@ -4,7 +4,6 @@ @use "../../../scss/mixins" as *; @use "../../../scss/variables" as *; @use "../../../scss/layout/breakpoints" as *; -@use "../../../scss/vendor/rfs" as *; :root { --bs-font-sans-serif: "Geist", sans-serif; diff --git a/site/src/scss/_placeholder-img.scss b/site/src/scss/_placeholder-img.scss index a132eb462b..3424b22083 100644 --- a/site/src/scss/_placeholder-img.scss +++ b/site/src/scss/_placeholder-img.scss @@ -1,5 +1,3 @@ -@use "../../../scss/vendor/rfs" as *; - // // Placeholder svg used in the docs. // @@ -8,12 +6,12 @@ @layer custom { .bd-placeholder-img { - @include font-size(1.125rem); + font-size: 1.125rem; user-select: none; text-anchor: middle; } .bd-placeholder-img-lg { - @include font-size(3.5rem); + font-size: 3.5rem; } } diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss index 3334f67cef..0a4e49c981 100644 --- a/site/src/scss/_toc.scss +++ b/site/src/scss/_toc.scss @@ -1,5 +1,4 @@ @use "../../../scss/layout/breakpoints" as *; -@use "../../../scss/vendor/rfs" as *; @use "../../../scss/mixins/border-radius" as *; // stylelint-disable selector-max-type, selector-no-qualifying-type