mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-28 23:59:53 +02:00
Enable RFS for font resizing
- Enable RFS - Add documentation - Disable doc font size overrides
This commit is contained in:
Martijn Cuppens
committed by
XhmikosR
XhmikosR
parent
4787347c85
commit
cd077cd599
@@ -47,7 +47,7 @@
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
padding: .125rem 1rem !important;
|
||||
margin-top: 0 !important;
|
||||
@include font-size(.875rem, true);
|
||||
@include font-size(.875rem !important);
|
||||
font-weight: 600 !important;
|
||||
color: $bd-purple-bright !important;
|
||||
border-bottom: 0 !important;
|
||||
@@ -107,7 +107,7 @@
|
||||
.algolia-docsearch-suggestion--title {
|
||||
display: block;
|
||||
margin-bottom: 0 !important;
|
||||
@include font-size(.875rem, true);
|
||||
@include font-size(.875rem !important);
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
padding: .2rem 0;
|
||||
@include font-size(.8125rem, true);
|
||||
@include font-size(.8125rem !important);
|
||||
font-weight: 400;
|
||||
line-height: 1.25 !important;
|
||||
color: $gray-600;
|
||||
@@ -126,7 +126,7 @@
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
padding: .75rem 1rem 0;
|
||||
@include font-size(.75rem, true);
|
||||
@include font-size(.75rem !important);
|
||||
line-height: 1 !important;
|
||||
color: $gray-600 !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
@@ -58,18 +58,6 @@
|
||||
//
|
||||
|
||||
.bd-content {
|
||||
> h2 {
|
||||
@include font-size($h2-font-size);
|
||||
}
|
||||
|
||||
> h3 {
|
||||
@include font-size($h3-font-size);
|
||||
}
|
||||
|
||||
> h4 {
|
||||
@include font-size($h4-font-size);
|
||||
}
|
||||
|
||||
> h2:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@@ -11,8 +11,3 @@ $bd-warning: #f0ad4e;
|
||||
$bd-danger: #d9534f;
|
||||
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
|
||||
$sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
|
||||
|
||||
// Enable responsive font sizes for font sizes defined in the docs
|
||||
// The weird if test is made as a workaround to prevent a false fusv error.
|
||||
//
|
||||
$enable-responsive-font-sizes: if($enable-responsive-font-sizes, true, true);
|
||||
|
||||
@@ -102,7 +102,7 @@ Use the included utility classes to recreate the small secondary heading text fr
|
||||
|
||||
## Display headings
|
||||
|
||||
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
|
||||
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
|
||||
@@ -272,6 +272,4 @@ Align terms and descriptions horizontally by using our grid system's predefined
|
||||
|
||||
## Responsive font sizes
|
||||
|
||||
Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the `$enable-responsive-font-sizes` Sass variable to `true` and recompiling Bootstrap.
|
||||
|
||||
To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal `font-size` properties. Responsive font sizes will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs).
|
||||
In Bootstrap `v5`, 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]({{< docsref "/getting-started/rfs" >}}) page to find out how this works.
|
||||
|
||||
86
site/content/docs/4.3/getting-started/rfs.md
Normal file
86
site/content/docs/4.3/getting-started/rfs.md
Normal file
@@ -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).
|
||||
@@ -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`. |
|
||||
|
||||
|
||||
@@ -59,7 +59,7 @@ Changes to any layout tools and our grid system.
|
||||
|
||||
Changes to Reboot, typography, tables, and more.
|
||||
|
||||
- **Todo:** Make RFS enabled by default
|
||||
- [RFS](https://github.com/twbs/rfs) enabled for automated font size rescaling. [See #29152](https://github.com/twbs/bootstrap/pull/29152)
|
||||
- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
|
||||
- Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
|
||||
- Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
# - title: Best practices # TODO: Write this content
|
||||
- title: Webpack
|
||||
- title: Accessibility
|
||||
- title: RFS
|
||||
|
||||
- title: Layout
|
||||
pages:
|
||||
|
||||
Reference in New Issue
Block a user