mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki Activity

Merge branch 'main' into main-lmp-dark-mode-example-context

Browse Source
This commit is contained in:
Louis-Maxime Piton
2024-07-22 17:12:38 +02:00
parent 183862c791 16d80a4ff7
commit 374c31a02c
325 changed files with 5413 additions and 12205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
site/content/docs/5.3/customize/color-modes.md
View File

@@ -4,7 +4,8 @@ title: Color modes
description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
group: customize
toc: true
added: "5.3"
added:
version: "5.3"
---
{{< callout >}}

672
site/content/docs/5.3/customize/color.md
View File

@@ -18,341 +18,343 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
{{< /callout >}}
<table class="table table-swatches">
<thead>
<tr>
<th style="width: 340px;">Description</th>
<th style="width: 200px;" class="ps-0">Swatch</th>
<th>Variables</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
{{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-primary">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-success">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-danger">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-warning">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-info">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-light">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-dark">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-swatches">
<thead>
<tr>
<th style="width: 340px;">Description</th>
<th style="width: 200px;" class="ps-0">Swatch</th>
<th>Variables</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
{{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-primary">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-success">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-danger">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-warning">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-info">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-light">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-dark">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
</td>
</tr>
</tbody>
</table>
</div>
### Using the new colors

6
site/content/docs/5.3/customize/optimize.md
View File

@@ -74,7 +74,7 @@ Whenever possible, be sure to compress all the code you serve to your visitors.
While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.
If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/articles/fcp) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes.
@@ -82,8 +82,8 @@ This ensures that the less important resources are loaded later and not blocking
If you want to learn more about this, there are already a lot of great articles about it:
- <https://web.dev/render-blocking-resources/>
- <https://web.dev/defer-non-critical-css/>
- <https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/>
- <https://web.dev/articles/defer-non-critical-css>
## Always use HTTPS

19
site/content/docs/5.3/customize/sass.md
View File

@@ -101,7 +101,7 @@ npm install -g sass
sass --watch ./scss/custom.scss ./css/custom.css
```
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install/) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
{{< callout info >}}
**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
@@ -244,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h
You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative.
{{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
In practice, you'd call the function and pass in the color and weight parameters.
@@ -256,6 +258,11 @@ In practice, you'd call the function and pass in the color and weight parameters
.custom-element-2 {
color: shade-color($danger, 30%);
}
.custom-element-3 {
color: shift-color($success, 40%);
background-color: shift-color($success, -60%);
}
```
### Color contrast
@@ -338,18 +345,18 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a
### Color schemes
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
```scss
.custom-element {
@include color-scheme(light) {
// Insert light mode styles here
}
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}
```