From 42162546f27314b36b6c26112303666246a7b67b Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Sat, 18 Dec 2021 12:53:36 +0100 Subject: docs: A fix for CSS Variables and some proposal (#35563) * docs: Fix CSS variables sections * Minor fix for dropdowns * Minor fixes for URLs Co-authored-by: XhmikosR --- site/content/docs/5.1/components/dropdowns.md | 16 ++++----- site/content/docs/5.1/content/reboot.md | 38 ++++++++++------------ .../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 ++++----- 5 files changed, 35 insertions(+), 39 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index 2750ce540a..7f2e2d42de 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
          • diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index 63f892de27..1f69fe9c61 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. 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 5816865450..4e1fbd26d4 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 @@ direction: rtl

          - 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 64269b31c8..e74a56c764 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 @@ body_class: "bg-light"

          - 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 4ee9c60146..5a29f64086 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 `