rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-21 13:29:00 +01:00
Code Issues Actions 10 Packages Releases Activity

Updates responsive embeds with new class names and CSS variables

Browse Source 
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
This commit is contained in:
Mark Otto 2020-09-21 14:15:15 -07:00 committed by Mark Otto
parent 5280771883
commit 18f8601d29
5 changed files with 58 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
scss/_variables.scss
View File

@ -378,22 +378,10 @@ $transition-collapse: height .35s ease !default;
// scss-docs-start embed-responsive-aspect-ratios
$embed-responsive-aspect-ratios: (
"21by9": (
x: 21,
y: 9
),
"16by9": (
x: 16,
y: 9
),
"4by3": (
x: 4,
y: 3
),
"1by1": (
x: 1,
y: 1
)
"1x1": 100%,
"4x3": 75%,
"16x9": 56.25%,
"21x9": 42.857142%
) !default;
// scss-docs-end embed-responsive-aspect-ratios

6
scss/helpers/_embed.scss
View File

@ -1,11 +1,13 @@
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
width: 100%;
&::before {
display: block;
padding-top: var(--aspect-ratio);
content: "";
}
@ -24,8 +26,6 @@
@each $key, $ratio in $embed-responsive-aspect-ratios {
.embed-responsive-#{$key} {
&::before {
padding-top: percentage(map-get($ratio, y) / map-get($ratio, x));
}
--aspect-ratio: #{$ratio};
}
}

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

@ -164,6 +164,19 @@
margin-top: .5rem;
margin-bottom: .5rem;
}
// Responsive embed helpers
.embed-responsive {
display: inline-block;
color: $gray-600;
background-color: $gray-100;
border: $border-width solid $border-color;
}
.embed-responsive-item {
display: flex;
align-items: center;
justify-content: center;
}
}
.bd-example-modal {

53
site/content/docs/5.0/helpers/embed.md
View File

@ -8,16 +8,18 @@ toc: true
## About
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements. You can also use an explicit use an explicit descendant class, `.embed-responsive-item`, when you want to match the styling for other attributes. Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you in [reboot]({{< docsref "/content/reboot" >}}).
{{< 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 `.embed-responsive` and an aspect ratio. The `.embed-responsive-item` isn't strictly required, but we encourage it.
Wrap any embed, like an `<iframe>`, in a parent element with `.embed-responsive` and an aspect ratio class. As mentioned above, the `.embed-responsive-item` isn't strictly required, but we encourage it.
{{< example >}}
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive embed-responsive-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
{{< /example >}}
@ -26,28 +28,35 @@ Wrap any embed like an `<iframe>` in a parent element with `.embed-responsive` a
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
{{< highlight html >}}
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
{{< example html >}}
<div class="embed-responsive embed-responsive-1x1" style="width: 10rem;">
<div class="embed-responsive-item">1x1</div>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
<div class="embed-responsive embed-responsive-4x3" style="width: 10rem;">
<div class="embed-responsive-item">4x3</div>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
<div class="embed-responsive embed-responsive-16x9" style="width: 10rem;">
<div class="embed-responsive-item">16x9</div>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
<div class="embed-responsive embed-responsive-21x9" style="width: 10rem;">
<div class="embed-responsive-item">21x9</div>
</div>
{{< /highlight >}}
{{< /example >}}
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` map:
## Custom ratios
Each `.embed-responsive-*` 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 `--aspect-ratio: 50%` on the `.embed-responsive`.
{{< example html >}}
<div class="embed-responsive" style="--aspect-ratio: 50%; width: 10rem;">
<div class="embed-responsive-item">2x1</div>
</div>
{{< /example >}}
## Sass map
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$embed-responsive-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
{{< scss-docs name="embed-responsive-aspect-ratios" file="scss/_variables.scss" >}}

7
site/content/docs/5.0/migration.md
View File

@ -72,6 +72,13 @@ toc: true
- Renamed `whiteList` option to `allowList`.
### Helpers
- [Responsive embed helpers]({{< docsref "/helpers/embed" >}}) have new modifier classes and include CSS variables.
- Classes have been renamed to change `by` to `x` in the aspect ratrio. For example, `.embed-responsive-16by9` is now `.responsive-16x9`.
- The `$embed-responsive-aspect-ratios` has been simplified to include the class name and the percentage as the `key: value` pair. This requires some math on your part when customizing, but ultimately makes it simpler on our end.
- CSS variables are now generated and included for each value in the Sass map. Modify the `--aspect-ratio` variable on the `.embed-responsive` to create any [custom aspect ratio]({{< docsref "/helpers/embed#custom-ratios" >}}).
---
## v5.0.0-alpha1