mirror of
https://github.com/twbs/bootstrap.git
synced 2025-12-28 05:33:57 +00:00
Move ratio from helpers to utilties (#41684)
* Convert .ratio helper to new .ratio utility * Fix up * Fix links for now, even though they'll be deleted
This commit is contained in:
Mark Otto
Mark Otto
parent
a3f251e38a
commit
91f28cfc38
@ -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";
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -588,10 +588,11 @@ $transition-collapse-width: width .35s ease !default;
|
||||
|
||||
// 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,
|
||||
"1x1": #{"1 / 1"},
|
||||
"4x3": #{"4 / 3"},
|
||||
"16x9": #{"16 / 9"},
|
||||
"21x9": #{"21 / 9"}
|
||||
) !default;
|
||||
// scss-docs-end aspect-ratios
|
||||
|
||||
|
||||
@ -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};
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
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.
|
||||
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>
|
||||
**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 code={`<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
|
||||
</div>`} />
|
||||
|
||||
## Aspect ratios
|
||||
|
||||
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
|
||||
|
||||
<Example class="bd-example-ratios" code={`<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>`} />
|
||||
|
||||
## 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" code={`<div class="ratio" style="--bs-aspect-ratio: 50%;">
|
||||
<div>2x1</div>
|
||||
</div>`} />
|
||||
|
||||
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" code={`<div class="ratio ratio-4x3">
|
||||
<div>4x3, then 2x1</div>
|
||||
</div>`} />
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
<ScssDocs name="aspect-ratios" file="scss/_variables.scss" />
|
||||
@ -709,11 +709,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
|
||||
|
||||
### Helpers
|
||||
|
||||
- <span class="badge text-bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]([[docsref:/helpers/ratio]])** with new class names and improved behaviors, as well as a helpful CSS variable.
|
||||
- <span class="badge text-bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]([[docsref:/utilities/aspect-ratio]])** with new class names and improved behaviors, as well as a helpful CSS variable.
|
||||
- Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
|
||||
- We’ve dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
|
||||
- The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
|
||||
- CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]([[docsref:/helpers/ratio#custom-ratios]]).
|
||||
- CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]([[docsref:/utilities/aspect-ratio#custom-ratios]]).
|
||||
|
||||
- <span class="badge text-bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]([[docsref:/helpers/visually-hidden]]).**
|
||||
- Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
|
||||
|
||||
72
site/src/content/docs/utilities/aspect-ratio.mdx
Normal file
72
site/src/content/docs/utilities/aspect-ratio.mdx
Normal file
@ -0,0 +1,72 @@
|
||||
---
|
||||
title: Aspect ratio
|
||||
description: Make elements maintain specific aspect ratios. Perfect for handling videos, slideshow embeds, and more based on the width of the parent.
|
||||
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>
|
||||
**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>`, `<video>`, or less semantic elements like `<div>`. Ratio utilities also pair well with any width utilities, as shown below. Customize the available aspect ratios with the Sass variable or the utility API.
|
||||
|
||||
Heads up—you can omit `frameborder="0"` on your `<iframe>`s as that is overridden for you in [Reboot]([[docsref:/content/reboot]]).
|
||||
|
||||
<Example code={`<iframe class="w-100 ratio-16x9" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>`} />
|
||||
|
||||
Swap the `.ratio-*` class for a different aspect ratio.
|
||||
|
||||
<Example class="bd-example-ratios" code={`<div class="ratio-auto">
|
||||
<div>Auto</div>
|
||||
</div>
|
||||
<div class="w-25 ratio-1x1">
|
||||
<div>1×1</div>
|
||||
</div>
|
||||
<div class="w-50 ratio-4x3">
|
||||
<div>4×3</div>
|
||||
</div>
|
||||
<div class="w-75 ratio-16x9">
|
||||
<div>16×9</div>
|
||||
</div>
|
||||
<div class="w-100 ratio-21x9">
|
||||
<div>21×9</div>
|
||||
</div>`} />
|
||||
|
||||
|
||||
{/*
|
||||
## Custom ratios
|
||||
|
||||
mdo-do: do we bring these back?
|
||||
|
||||
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" code={`<div class="ratio" style="--bs-aspect-ratio: 50%;">
|
||||
<div>2x1</div>
|
||||
</div>`} />
|
||||
|
||||
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" code={`<div class="ratio ratio-4x3">
|
||||
<div>4x3, then 2x1</div>
|
||||
</div>`} />
|
||||
*/}
|
||||
|
||||
## Sass map
|
||||
|
||||
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.
|
||||
|
||||
<ScssDocs name="aspect-ratios" file="scss/_variables.scss" />
|
||||
@ -173,29 +173,18 @@
|
||||
|
||||
// Ratio helpers
|
||||
.bd-example-ratios {
|
||||
.ratio {
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
[class*="ratio"] {
|
||||
display: 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;
|
||||
}
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
}
|
||||
.bd-example-ratios-breakpoint {
|
||||
.ratio-4x3 {
|
||||
width: 16rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
--bs-aspect-ratio: 50%; // 2x1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-offcanvas {
|
||||
.offcanvas {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user