rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Move ratio helper to utility API with aspect-ratio property

Browse Source
This commit is contained in:
Mark Otto 2023-08-06 22:48:17 -07:00
parent 764bd8de14
commit 7cd1a00a05
8 changed files with 67 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_helpers.scss
View File

@ -3,7 +3,6 @@
@import "helpers/colored-links";
@import "helpers/focus-ring";
@import "helpers/icon-link";
@import "helpers/ratio";
@import "helpers/position";
@import "helpers/stacks";
@import "helpers/visually-hidden";

7
scss/_utilities.scss
View File

@ -11,6 +11,13 @@ $utilities: map-merge(
values: baseline top middle bottom text-bottom text-top
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-aspect-ratio
"aspect-ratio": (
property: aspect-ratio,
class: ratio,
values: $aspect-ratios
),
// scss-docs-end utils-aspect-ratio
// scss-docs-start utils-float
"float": (
responsive: true,

11
scss/_variables.scss
View File

@ -586,16 +586,15 @@ $transition-collapse: height .35s ease !default;
$transition-collapse-width: width .35s ease !default;
// scss-docs-end collapse-transition
// stylelint-disable function-disallowed-list
// scss-docs-start aspect-ratios
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
"auto": auto,
"4x3": 4 / 3,
"1x1": 1 / 1,
"16x9": 16 / 9,
"21x9": 21 / 9
) !default;
// scss-docs-end aspect-ratios
// stylelint-enable function-disallowed-list
// Typography
//

26
scss/helpers/_ratio.scss
View File

@ -1,26 +0,0 @@
// Credit: Nicolas Gallagher and SUIT CSS.
.ratio {
position: relative;
width: 100%;
&::before {
display: block;
padding-top: var(--#{$prefix}aspect-ratio);
content: "";
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@each $key, $ratio in $aspect-ratios {
.ratio-#{$key} {
--#{$prefix}aspect-ratio: #{$ratio};
}
}

23
site/assets/scss/_component-examples.scss
View File

@ -173,27 +173,14 @@
// Ratio helpers
.bd-example-ratios {
.ratio {
display: inline-block;
width: 10rem;
[class*="ratio"] {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
color: var(--bs-secondary-color);
background-color: var(--bs-tertiary-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
> div {
display: flex;
align-items: center;
justify-content: center;
}
}
}
.bd-example-ratios-breakpoint {
.ratio-4x3 {
width: 16rem;
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
}

81
site/content/docs/5.3/helpers/ratio.md
View File

@ -1,81 +0,0 @@
---
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 `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Styles are applied from the parent `.ratio` class directly to the child.
Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
{{< callout info >}}
**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}).
{{< /callout >}}
## Example
Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector `.ratio > *`.
{{< example >}}
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
{{< /example >}}
## Aspect ratios
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
{{< example class="bd-example-ratios" >}}
<div class="ratio ratio-1x1">
<div>1x1</div>
</div>
<div class="ratio ratio-4x3">
<div>4x3</div>
</div>
<div class="ratio ratio-16x9">
<div>16x9</div>
</div>
<div class="ratio ratio-21x9">
<div>21x9</div>
</div>
{{< /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" >}}
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
{{< /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" >}}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
{{< /example >}}
## Sass maps
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" >}}

49
site/content/docs/5.3/utilities/aspect-ratio.md Normal file
View File

@ -0,0 +1,49 @@
---
layout: docs
title: Aspect ratio
description: Use the `aspect-ratio` property to make an element maintain the aspect ratio of your choosing. Ideal for responsively handling video or slideshow embeds based on the width of the parent.
group: utilities
toc: true
---
Use the ratio utility to manage the aspect ratios of content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Customize the available aspect ratios with the Sass variable or the utility API.
{{< callout info >}}
**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}).
{{< /callout >}}
## Example
Add your ratio utility to the element you want to modify, like an `<iframe>`. Ratio utilities also pair well with any width utilities, as shown below.
{{< example >}}
<iframe class="w-100 ratio-16x9" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
{{< /example >}}
## Aspect ratios
A handful of aspect ratio classes are provided by default, generated via the utility API and the `$aspect-ratios` Sass variable.
{{< example class="bd-example-ratios d-flex flex-column align-start" >}}
<div class="ratio-auto">
<div>Auto</div>
</div>
<div class="w-25 ratio-1x1">
<div>1x1</div>
</div>
<div class="w-50 ratio-4x3">
<div>4x3</div>
</div>
<div class="w-75 ratio-16x9">
<div>16x9</div>
</div>
<div class="w-100 ratio-21x9">
<div>21x9</div>
</div>
{{< /example >}}
## Sass maps
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$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" >}}

2
site/data/sidebar.yml
View File

@ -107,7 +107,6 @@
- title: Focus ring
- title: Icon link
- title: Position
- title: Ratio
- title: Stacks
- title: Stretched link
- title: Text truncation
@ -119,6 +118,7 @@
icon_color: red
pages:
- title: API
- title: Aspect ratio
- title: Background
- title: Borders
- title: Colors