From 3ea39841c8049525e31e9f4d6300f0c60cdb42de Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Tue, 24 Jan 2023 13:33:51 +0100 Subject: Adding upstream version 5.2.3+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.2/helpers/clearfix.md | 36 ++++++++++ site/content/docs/5.2/helpers/color-background.md | 52 ++++++++++++++ site/content/docs/5.2/helpers/colored-links.md | 21 ++++++ site/content/docs/5.2/helpers/position.md | 63 +++++++++++++++++ site/content/docs/5.2/helpers/ratio.md | 81 +++++++++++++++++++++ site/content/docs/5.2/helpers/stacks.md | 85 +++++++++++++++++++++++ site/content/docs/5.2/helpers/stretched-link.md | 74 ++++++++++++++++++++ site/content/docs/5.2/helpers/text-truncation.md | 23 ++++++ site/content/docs/5.2/helpers/vertical-rule.md | 45 ++++++++++++ site/content/docs/5.2/helpers/visually-hidden.md | 29 ++++++++ 10 files changed, 509 insertions(+) create mode 100644 site/content/docs/5.2/helpers/clearfix.md create mode 100644 site/content/docs/5.2/helpers/color-background.md create mode 100644 site/content/docs/5.2/helpers/colored-links.md create mode 100644 site/content/docs/5.2/helpers/position.md create mode 100644 site/content/docs/5.2/helpers/ratio.md create mode 100644 site/content/docs/5.2/helpers/stacks.md create mode 100644 site/content/docs/5.2/helpers/stretched-link.md create mode 100644 site/content/docs/5.2/helpers/text-truncation.md create mode 100644 site/content/docs/5.2/helpers/vertical-rule.md create mode 100644 site/content/docs/5.2/helpers/visually-hidden.md (limited to 'site/content/docs/5.2/helpers') diff --git a/site/content/docs/5.2/helpers/clearfix.md b/site/content/docs/5.2/helpers/clearfix.md new file mode 100644 index 0000000..c888610 --- /dev/null +++ b/site/content/docs/5.2/helpers/clearfix.md @@ -0,0 +1,36 @@ +--- +layout: docs +title: Clearfix +description: Quickly and easily clear floated content within a container by adding a clearfix utility. +group: helpers +aliases: "/docs/5.2/helpers/" +--- + +Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin. + +Use in HTML: + +```html +
...
+``` + +The mixin source code: + +{{< scss-docs name="clearfix" file="scss/mixins/_clearfix.scss" >}} + +Use the mixin in SCSS: + +```scss +.element { + @include clearfix; +} +``` + +The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout. + +{{< example >}} +
+ + +
+{{< /example >}} diff --git a/site/content/docs/5.2/helpers/color-background.md b/site/content/docs/5.2/helpers/color-background.md new file mode 100644 index 0000000..c417484 --- /dev/null +++ b/site/content/docs/5.2/helpers/color-background.md @@ -0,0 +1,52 @@ +--- +layout: docs +title: Color & background +description: Set a background color with contrasting foreground color. +group: helpers +toc: true +added: "5.2" +--- + +## Overview + +{{< added-in "5.2.0" >}} + +Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`. + +{{< callout warning >}} +**Heads up!** There's currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities. +{{< /callout >}} + +{{< example >}} +{{< text-bg.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +
{{ .name | title }} with contrasting color
+{{- end -}} +{{< /text-bg.inline >}} +{{< /example >}} + +## With components + +Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}): + +{{< example >}} +Primary +Info +{{< /example >}} + +Or on [cards]({{< docsref "/components/card#background-and-color" >}}): + +{{< example >}} +
+
Header
+
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+{{< /example >}} diff --git a/site/content/docs/5.2/helpers/colored-links.md b/site/content/docs/5.2/helpers/colored-links.md new file mode 100644 index 0000000..e940196 --- /dev/null +++ b/site/content/docs/5.2/helpers/colored-links.md @@ -0,0 +1,21 @@ +--- +layout: docs +title: Colored links +description: Colored links with hover states +group: helpers +toc: false +--- + +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +{{ .name | title }} link +{{- end -}} +{{< /colored-links.inline >}} +{{< /example >}} + +{{< callout info >}} +Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. +{{< /callout >}} diff --git a/site/content/docs/5.2/helpers/position.md b/site/content/docs/5.2/helpers/position.md new file mode 100644 index 0000000..b4e1f71 --- /dev/null +++ b/site/content/docs/5.2/helpers/position.md @@ -0,0 +1,63 @@ +--- +layout: docs +title: Position +description: Use these helpers for quickly configuring the position of an element. +group: helpers +toc: true +--- + +## Fixed top + +Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. + +```html +
...
+``` + +## Fixed bottom + +Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. + +```html +
...
+``` + +## Sticky top + +Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. + +```html +
...
+``` + +## Responsive sticky top + +Responsive variations also exist for `.sticky-top` utility. + +```html +
Stick to the top on viewports sized SM (small) or wider
+
Stick to the top on viewports sized MD (medium) or wider
+
Stick to the top on viewports sized LG (large) or wider
+
Stick to the top on viewports sized XL (extra-large) or wider
+
Stick to the top on viewports sized XXL (extra-extra-large) or wider
+``` + +## Sticky bottom + +Position an element at the bottom of the viewport, from edge to edge, but only after you scroll past it. + +```html +
...
+``` + +## Responsive sticky bottom + +Responsive variations also exist for `.sticky-bottom` utility. + +```html +
Stick to the bottom on viewports sized SM (small) or wider
+
Stick to the bottom on viewports sized MD (medium) or wider
+
Stick to the bottom on viewports sized LG (large) or wider
+
Stick to the bottom on viewports sized XL (extra-large) or wider
+
Stick to the bottom on viewports sized XXL (extra-extra-large) or wider
+``` diff --git a/site/content/docs/5.2/helpers/ratio.md b/site/content/docs/5.2/helpers/ratio.md new file mode 100644 index 0000000..771bc07 --- /dev/null +++ b/site/content/docs/5.2/helpers/ratio.md @@ -0,0 +1,81 @@ +--- +layout: docs +title: Ratios +description: Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent. +group: helpers +toc: true +--- + +## About + +Use the ratio helper to manage the aspect ratios of external content like ` + +{{< /example >}} + +## Aspect ratios + +Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided: + +{{< example class="bd-example-ratios" >}} +
+
1x1
+
+
+
4x3
+
+
+
16x9
+
+
+
21x9
+
+{{< /example >}} + +## Custom ratios + +Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part. + +For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`. + +{{< example class="bd-example-ratios" >}} +
+
2x1
+
+{{< /example >}} + +This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint. + +```scss +.ratio-4x3 { + @include media-breakpoint-up(md) { + --bs-aspect-ratio: 50%; // 2x1 + } +} +``` + +{{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}} +
+
4x3, then 2x1
+
+{{< /example >}} + + +## Sass map + +Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use. + +{{< scss-docs name="aspect-ratios" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.2/helpers/stacks.md b/site/content/docs/5.2/helpers/stacks.md new file mode 100644 index 0000000..e1960c5 --- /dev/null +++ b/site/content/docs/5.2/helpers/stacks.md @@ -0,0 +1,85 @@ +--- +layout: docs +title: Stacks +description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. +group: helpers +toc: true +added: "5.1" +--- + +Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/). + +{{< callout warning >}} +Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap). +{{< /callout >}} + +## Vertical + +Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items. + +{{< example >}} +
+
First item
+
Second item
+
Third item
+
+{{< /example >}} + +## Horizontal + +Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items. + +{{< example >}} +
+
First item
+
Second item
+
Third item
+
+{{< /example >}} + +Using horizontal margin utilities like `.ms-auto` as spacers: + +{{< example >}} +
+
First item
+
Second item
+
Third item
+
+{{< /example >}} + +And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}): + +{{< example >}} +
+
First item
+
Second item
+
+
Third item
+
+{{< /example >}} + +## Examples + +Use `.vstack` to stack buttons and other elements: + +{{< example >}} +
+ + +
+{{< /example >}} + +Create an inline form with `.hstack`: + +{{< example >}} +
+ + +
+ +
+{{< /example >}} + +## Sass + +{{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}} diff --git a/site/content/docs/5.2/helpers/stretched-link.md b/site/content/docs/5.2/helpers/stretched-link.md new file mode 100644 index 0000000..93bffeb --- /dev/null +++ b/site/content/docs/5.2/helpers/stretched-link.md @@ -0,0 +1,74 @@ +--- +layout: docs +title: Stretched link +description: Make any HTML element or Bootstrap component clickable by "stretching" a nested link via CSS. +group: helpers +--- + +Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Please note given [how CSS `position` works](https://www.w3.org/TR/CSS21/visuren.html#propdef-position), `.stretched-link` cannot be mixed with most table elements. + +Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes. + +Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required. + +{{< example >}} +
+ {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}} +
+
Card with stretched link
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+{{< /example >}} + +Most custom components do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the parent element. + +{{< example >}} +
+ {{< placeholder width="144" height="144" class="flex-shrink-0 me-3" text="false" title="Generic placeholder image" >}} +
+
Custom component with stretched link
+

This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.

+ Go somewhere +
+
+{{< /example >}} + +{{< example >}} +
+
+ {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}} +
+
+
Columns with stretched link
+

Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.

+ Go somewhere +
+
+{{< /example >}} + +## Identifying the containing block + +If the stretched link doesn't seem to work, the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block) will probably be the cause. The following CSS properties will make an element the containing block: + +- A `position` value other than `static` +- A `transform` or `perspective` value other than `none` +- A `will-change` value of `transform` or `perspective` +- A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox) + +{{< example >}} +
+ {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}} +
+
Card with stretched links
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+

+ Stretched link will not work here, because position: relative is added to the link +

+

+ This stretched link will only be spread over the p-tag, because a transform is applied to it. +

+
+
+{{< /example >}} diff --git a/site/content/docs/5.2/helpers/text-truncation.md b/site/content/docs/5.2/helpers/text-truncation.md new file mode 100644 index 0000000..799f205 --- /dev/null +++ b/site/content/docs/5.2/helpers/text-truncation.md @@ -0,0 +1,23 @@ +--- +layout: docs +title: Text truncation +description: Truncate long strings of text with an ellipsis. +group: helpers +toc: false +--- + +For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.** + +{{< example >}} + +
+
+ This text is quite long, and will be truncated once displayed. +
+
+ + + + This text is quite long, and will be truncated once displayed. + +{{< /example >}} diff --git a/site/content/docs/5.2/helpers/vertical-rule.md b/site/content/docs/5.2/helpers/vertical-rule.md new file mode 100644 index 0000000..b734f61 --- /dev/null +++ b/site/content/docs/5.2/helpers/vertical-rule.md @@ -0,0 +1,45 @@ +--- +layout: docs +title: Vertical rule +description: Use the custom vertical rule helper to create vertical dividers like the `
` element. +group: helpers +toc: true +added: "5.1" +--- + +## How it works + +Vertical rules are inspired by the `
` element, allowing you to create vertical dividers in common layouts. They're styled just like `
` elements: + +- They're `1px` wide +- They have `min-height` of `1em` +- Their color is set via `currentColor` and `opacity` + +Customize them with additional styles as needed. + +## Example + +{{< example >}} +
+{{< /example >}} + +Vertical rules scale their height in flex layouts: + +{{< example >}} +
+
+
+{{< /example >}} + +## With stacks + +They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}): + +{{< example >}} +
+
First item
+
Second item
+
+
Third item
+
+{{< /example >}} diff --git a/site/content/docs/5.2/helpers/visually-hidden.md b/site/content/docs/5.2/helpers/visually-hidden.md new file mode 100644 index 0000000..1124065 --- /dev/null +++ b/site/content/docs/5.2/helpers/visually-hidden.md @@ -0,0 +1,29 @@ +--- +layout: docs +title: Visually hidden +description: Use these helpers to visually hide elements but keep them accessible to assistive technologies. +group: helpers +aliases: "/docs/5.2/helpers/screen-readers/" +--- + +Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus. + +{{< example >}} + +Skip to main content +
A container with a focusable element.
+{{< /example >}} + +Both `visually-hidden` and `visually-hidden-focusable` can also be used as mixins. + +```scss +// Usage as a mixin + +.visually-hidden-title { + @include visually-hidden; +} + +.skip-navigation { + @include visually-hidden-focusable; +} +``` -- cgit v1.2.3