From 2c81701396f990bbf8d40541f9c8c1b156cbdbf5 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 17 Dec 2021 09:57:12 +0100 Subject: [PATCH 1/4] docs: Fix CSS variables sections --- site/content/docs/5.1/content/reboot.md | 38 +++++++++++-------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index 63f892de27c0..a652f0154b47 100644 --- a/site/content/docs/5.1/content/reboot.md +++ b/site/content/docs/5.1/content/reboot.md @@ -22,7 +22,23 @@ Here are our guidelines and reasons for choosing what to override in Reboot: 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. +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]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.** + +For example, consider these `:root` CSS variables for common `` styles: + +{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}} + +In practice, those variables are then applied in Reboot like so: + +{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}} + +Which allows you to make real-time customizations however you like: + +```html + + + +``` ## Page defaults @@ -62,26 +78,6 @@ Note that because the font stack includes emoji fonts, many common symbol/dingba This `font-family` is applied to the `` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap. -## CSS variables - -As Bootstrap 5 continues to mature, more and more styles will be built with [CSS variables]({{< docsref "/customize/css-variables" >}}) as a means to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.** - -For example, consider these `:root` CSS variables for common `` styles: - -{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}} - -In practice, those variables are then applied in Reboot like so: - -{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}} - -Which allows you to make real-time customizations however you like: - -```html - - - -``` - ## Headings and paragraphs All heading elements—e.g., `

`—and `

` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. From e98756b835e89bda230ff081f2709f107e529793 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 17 Dec 2021 11:17:28 +0100 Subject: [PATCH 2/4] Minor fix for dropdowns --- site/content/docs/5.1/components/dropdowns.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index 2750ce540ab0..7f2e2d42ded1 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -459,14 +459,14 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. ``` -### Dropright +### Dropend Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element.

  • Action
    • @@ -481,7 +481,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the Split dropend
    • Action
      • @@ -497,7 +497,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
        @@ -510,7 +510,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the Split dropend
          @@ -518,14 +518,14 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
      ``` -### Dropleft +### Dropstart Trigger dropdown menus at the left of the elements by adding `.dropstart` to the parent element.
      • Action
        • @@ -538,7 +538,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
        • Action
          • From fa41478877a6b2d2bfcc29f59374d6713beb5102 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 17 Dec 2021 12:09:31 +0100 Subject: [PATCH 3/4] Minor fixes for URLs --- .../docs/5.1/examples/cheatsheet-rtl/index.html | 2 +- .../docs/5.1/examples/cheatsheet/index.html | 2 +- site/content/docs/5.1/migration.md | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html index 581686545070..4e1fbd26d4f9 100644 --- a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html @@ -12,7 +12,7 @@

          - Bootstrap + Bootstrap ورقة الغش

          }}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html index 64269b31c83e..e74a56c76420 100644 --- a/site/content/docs/5.1/examples/cheatsheet/index.html +++ b/site/content/docs/5.1/examples/cheatsheet/index.html @@ -11,7 +11,7 @@

          - Bootstrap + Bootstrap Cheatsheet

          }}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md index 4ee9c6014669..5a29f6408605 100644 --- a/site/content/docs/5.1/migration.md +++ b/site/content/docs/5.1/migration.md @@ -78,10 +78,10 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa ## Documentation changes - Redesigned homepage, docs layout, and footer. -- Added [new Parcel guide](https://getbootstrap.com/docs/5.1/getting-started/parcel/). -- Added [new Customize section](https://getbootstrap.com/docs/5.1/customize/overview/), replacing [v4's Theming page](https://getbootstrap.com/docs/4.6/getting-started/theming/), with new details on Sass, global configuration options, color schemes, CSS variables, and more. -- Reorganized all form documentation into [new Forms section](https://getbootstrap.com/docs/5.1/forms/overview/), breaking apart the content into more focused pages. -- Similarly, updated [the Layout section](https://getbootstrap.com/docs/5.1/layout/breakpoints/), to flesh out grid content more clearly. +- Added [new Parcel guide]({{< docsref "/getting-started/parcel" >}}). +- Added [new Customize section]({{< docsref "/customize/overview" >}}), replacing [v4's Theming page](https://getbootstrap.com/docs/4.6/getting-started/theming/), with new details on Sass, global configuration options, color schemes, CSS variables, and more. +- Reorganized all form documentation into [new Forms section]({{< docsref "/forms/overview" >}}), breaking apart the content into more focused pages. +- Similarly, updated [the Layout section]({{< docsref "/layout/breakpoints" >}}), to flesh out grid content more clearly. - Renamed "Navs" component page to "Navs & Tabs". - Renamed "Checks" page to "Checks & radios". - Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions. @@ -140,7 +140,7 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa - **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints. - **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities. - - Added new [gutter class](https://getbootstrap.com/docs/5.1/layout/gutters/) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters. + - Added new [gutter class]({{< docsref "/layout/gutters" >}}) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters. - Breaking Renamed `.no-gutters` to `.g-0` to match new gutter utilities. - Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior. @@ -251,9 +251,9 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa ### Buttons -- Breaking **[Toggle buttons](https://getbootstrap.com/docs/5.1/forms/checks-radios/#toggle-buttons), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the ``, and pair it with any `.btn` classes on the `