From bfdfe1e9eb24438dce9f40c3da685f5ce748fe1c Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 2 Aug 2024 09:43:02 +0200 Subject: [PATCH 1/4] docs(utilities): add 'Vertical align' page (#2668) --- .../docs/0.0/utilities/vertical-align.md | 42 ++++++++++++++++++- site/data/sidebar.yml | 1 - 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/site/content/docs/0.0/utilities/vertical-align.md b/site/content/docs/0.0/utilities/vertical-align.md index 4492691a68..018ffb48a1 100644 --- a/site/content/docs/0.0/utilities/vertical-align.md +++ b/site/content/docs/0.0/utilities/vertical-align.md @@ -7,4 +7,44 @@ aliases: - "/docs/utilities/vertical-align/" --- -{{< callout-soon "page" >}} +Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements. + +Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed. + +To vertically center non-inline content (like `
`s and more), use our [flex box utilities]({{< docsref "/utilities/flex#align-items" >}}). + +With inline elements: + +{{< example >}} +baseline +top +middle +bottom +text-top +text-bottom +{{< /example >}} + +With table cells: + +{{< example >}} + + + + + + + + + + + +
baselinetopmiddlebottomtext-toptext-bottom
+{{< /example >}} + +## CSS + +### Sass utilities API + +Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-vertical-align" file="scss/_utilities.scss" >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 6a169f81e0..8e76302c84 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -246,7 +246,6 @@ - title: Text draft: true - title: Vertical align - draft: true - title: Visibility - title: Z-index draft: true From 49b7a40bf372429e5ab40d540bcce3d655a80fae Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 2 Aug 2024 10:44:02 +0200 Subject: [PATCH 2/4] docs(utilities): add 'Object fit' page (#2663) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- site/content/docs/0.0/utilities/object-fit.md | 56 ++++++++++++++++++- site/data/sidebar.yml | 1 - 2 files changed, 55 insertions(+), 2 deletions(-) diff --git a/site/content/docs/0.0/utilities/object-fit.md b/site/content/docs/0.0/utilities/object-fit.md index 17386939dc..daa13b29cd 100644 --- a/site/content/docs/0.0/utilities/object-fit.md +++ b/site/content/docs/0.0/utilities/object-fit.md @@ -8,4 +8,58 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +## How it works + +Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible. + +Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values: + +- `contain` +- `cover` +- `fill` +- `scale` (for scale-down) +- `none` + +## Examples + +Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element): + +{{< example class="d-flex overflow-auto" >}} +{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="#333" background="#bbb" >}} +{{< /example >}} + + + +## Video + +The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `