From d91480e3c769e3cce5aca4ab83604e6cfaeb1b06 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Sep 2021 22:41:58 -0700 Subject: [PATCH] Include root.scss in all dist builds (#34773) * Remove the font-family-* override vars from Reboot build * Update Reboot docs to mention CSS variables --- .bundlewatch.config.json | 4 ++-- scss/bootstrap-grid.scss | 2 ++ scss/bootstrap-reboot.scss | 4 +--- site/content/docs/5.1/content/reboot.md | 6 ++++++ 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index e641382b80..0b51da0baf 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -10,11 +10,11 @@ }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "2 kB" + "maxSize": "2.5 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", - "maxSize": "2 kB" + "maxSize": "2.35 kB" }, { "path": "./dist/css/bootstrap-utilities.css", diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 2c68fbbf7c..72796d165e 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -18,6 +18,8 @@ $include-column-box-sizing: true !default; @import "vendor/rfs"; +@import "root"; + @import "containers"; @import "grid"; diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss index 0c4bbe589b..0b83043a42 100644 --- a/scss/bootstrap-reboot.scss +++ b/scss/bootstrap-reboot.scss @@ -8,8 +8,6 @@ @import "functions"; @import "variables"; -// Prevent the usage of custom properties since we don't add them to `:root` in reboot -$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default -$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default @import "mixins"; +@import "root"; @import "reboot"; diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index 73286c21eb..f726a6635c 100644 --- a/site/content/docs/5.1/content/reboot.md +++ b/site/content/docs/5.1/content/reboot.md @@ -18,6 +18,12 @@ Here are our guidelines and reasons for choosing what to override in Reboot: - For easier scaling across device sizes, block elements should use `rem`s for `margin`s. - Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. +## CSS variables + +Added in v5.1.1 + +With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css` to include `_root.scss` . This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more CSS variables added over time. + ## Page defaults The `` and `` elements are updated to provide better page-wide defaults. More specifically: