مرحبا بالعالم!

- -- cgit v1.2.3 From 96dcc150d5d61d0dddae678c3f28830206c338b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20Nie=C3=9Fen?= Date: Mon, 15 Nov 2021 11:52:06 +0100 Subject: Fix typo in vertical alignment of table cells (#35348) --- site/content/docs/5.1/content/tables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/content') diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md index 6f6e025dc..c1f6293b4 100644 --- a/site/content/docs/5.1/content/tables.md +++ b/site/content/docs/5.1/content/tables.md @@ -252,7 +252,7 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` ## Vertical alignment -Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. +Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `

` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.

-- cgit v1.2.3 From 9f099d3e4f6fe5b0c5454d2462cc22d06b6f4a1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 15 Nov 2021 03:03:48 -0800 Subject: Move reassigned Sass maps for colors to another stylesheet (#34942) --- site/content/docs/5.1/customize/sass.md | 11 +++++-- site/content/docs/5.1/migration.md | 46 +++++++++++++++++++++++++++ site/content/docs/5.1/utilities/background.md | 4 +-- site/content/docs/5.1/utilities/colors.md | 4 +-- 4 files changed, 58 insertions(+), 7 deletions(-) (limited to 'site/content') diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.1/customize/sass.md index e00d1eeae..154ab69dc 100644 --- a/site/content/docs/5.1/customize/sass.md +++ b/site/content/docs/5.1/customize/sass.md @@ -59,10 +59,15 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two // 3. Include remainder of required Bootstrap stylesheets @import "../node_modules/bootstrap/scss/variables"; + +// 4. Include any default map overrides here + +// 5. Include remainder of required parts +@import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; -// 4. Include any optional Bootstrap CSS as needed +// 6. Optionally include any other parts as needed @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @@ -71,10 +76,10 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; -// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` +// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "../node_modules/bootstrap/scss/utilities/api"; -// 6. Add additional custom code here +// 8. Add additional custom code here ``` With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point. diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md index 10d4a4421..522e8551b 100644 --- a/site/content/docs/5.1/migration.md +++ b/site/content/docs/5.1/migration.md @@ -9,6 +9,52 @@ toc: true ## v5.2.0 +### New `_maps.scss` + +Bootstrap v5.2.0 introduced a new Sass file, `_maps.scss`, that pulled out several Sass maps from `_variables.scss` to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to `$theme-colors` were not being applied to other theme maps that relied on `$theme-colors`, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been _used_, it cannot be updated. + +This is why variable customizations in Bootstrap have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before the defaults get used. The following maps have been moved to the new `_maps.scss`: + +- `$theme-colors-rgb` +- `$utilities-colors` +- `$utilities-text` +- `$utilities-text-colors` +- `$utilities-bg` +- `$utilities-bg-colors` +- `$negative-spacers` +- `$gutters` + +Your custom Bootstrap CSS builds should now look something like this with a separate maps import. + +```diff + // Functions come first + @import "functions"; + + // Optional variable overrides here ++ $custom-color: #df711b; ++ $custom-theme-colors: ( ++ "custom": $custom-color ++ ); + + // Variables come next + @import "variables"; + ++ // Optional Sass map overrides here ++ $theme-colors: map-merge($theme-colors, $custom-theme-colors); ++ ++ // Followed by our default maps ++ @import "maps"; ++ + // Rest of our imports + @import "mixins"; + @import "utilities"; + @import "root"; + @import "reboot"; + // etc +``` + +### Key changes + - **Introduced new `$enable-container-classes` option.** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`. ## Dependencies diff --git a/site/content/docs/5.1/utilities/background.md b/site/content/docs/5.1/utilities/background.md index 61c27365b..b6f7a8bdf 100644 --- a/site/content/docs/5.1/utilities/background.md +++ b/site/content/docs/5.1/utilities/background.md @@ -103,11 +103,11 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen RGB colors are generated from a separate Sass map: -{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} And background color opacities build on that with their own map that's consumed by the utilities API: -{{< scss-docs name="utilities-bg-colors" file="scss/_variables.scss" >}} +{{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}} ### Mixins diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md index 60462070b..95752ed64 100644 --- a/site/content/docs/5.1/utilities/colors.md +++ b/site/content/docs/5.1/utilities/colors.md @@ -100,11 +100,11 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen RGB colors are generated from a separate Sass map: -{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} And color opacities build on that with their own map that's consumed by the utilities API: -{{< scss-docs name="utilities-text-colors" file="scss/_variables.scss" >}} +{{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}} ### Utilities API -- cgit v1.2.3 From 7edad9453ca1dda82577f1c97954bb037d5b4150 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 23 Nov 2021 09:06:33 +0100 Subject: Add missing scss/maps imports (#35373) Co-authored-by: XhmikosR --- site/content/docs/5.1/customize/color.md | 1 + site/content/docs/5.1/customize/sass.md | 2 ++ site/content/docs/5.1/utilities/api.md | 5 +++++ 3 files changed, 8 insertions(+) (limited to 'site/content') diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md index 63e5d19e6..785179bb8 100644 --- a/site/content/docs/5.1/customize/color.md +++ b/site/content/docs/5.1/customize/color.md @@ -122,6 +122,7 @@ Here's an example that generates text color utilities (e.g., `.text-purple-500`) ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.1/customize/sass.md index 154ab69dc..53562e1f9 100644 --- a/site/content/docs/5.1/customize/sass.md +++ b/site/content/docs/5.1/customize/sass.md @@ -104,6 +104,7 @@ $body-color: #111; // Required @import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; @@ -165,6 +166,7 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw // Required @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; diff --git a/site/content/docs/5.1/utilities/api.md b/site/content/docs/5.1/utilities/api.md index 5098c4327..af8de6561 100644 --- a/site/content/docs/5.1/utilities/api.md +++ b/site/content/docs/5.1/utilities/api.md @@ -363,6 +363,7 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities/api"; @@ -387,6 +388,7 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities/api"; @@ -414,6 +416,7 @@ You can enable responsive classes for an existing set of utilities that are not ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities/api"; @@ -467,6 +470,7 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities/api"; @@ -488,6 +492,7 @@ Remove any of the default utilities by setting the group key to `null`. For exam ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities/api"; -- cgit v1.2.3 From 1ee058adf5ed5fb5d008ee1567fbf0e34cb82ff0 Mon Sep 17 00:00:00 2001 From: Neeraj Kumar Das Date: Tue, 23 Nov 2021 19:45:46 +0530 Subject: Make footer examples responsive to mobile screens (#35365) --- site/content/docs/5.1/examples/footers/index.html | 26 +++++++++++------------ 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'site/content') diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.1/examples/footers/index.html index b26909574..efa26b92d 100644 --- a/site/content/docs/5.1/examples/footers/index.html +++ b/site/content/docs/5.1/examples/footers/index.html @@ -48,7 +48,7 @@ body_class: "" - © {{< year >}} Company, Inc + © {{< year >}} Company, Inc

مرحبا بالعالم!

مرحبًا بالعالم!

Offcanvas top

Offcanvas top

Offcanvas right

Offcanvas right

Mixed: mobile and desktop

Subscribe to our newsletter