Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Raymond <29353783+MadeByRaymond@users.noreply.github.com>2022-10-06 23:14:11 +0300
committerGitHub <noreply@github.com>2022-10-06 23:14:11 +0300
commit708a3a0e398f6c01f00283941cd6a4aca9f66322 (patch)
tree670259873a273bd674045dea3b841ab21ac6dac5
parent4822984e19e6241284eff213297b6532773ac5f8 (diff)
Utilities for overflow and object fit (#36848)
* Added "overflow-x" and "overflow-y" - Having the same properties as overflow but for just the x and y axises - Usecase being I want my y axis to be scrollable but not my x axis - E.g a card with a vertical list of items. * Added "object-fit" utilities - The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. - A responsive alternative to using background-img for a resizable fill/fit image. * Updated documantation for the overflow utilities - Now includes docs for `overflow-x` and `overflow-y` utilities * Placeholder shortcode updated - Can now choose to render an img tag or svg - The image contains a base64 svg generated within the template - example shortcode updated to detect, replace and render preview of 'img' tags as well * New documentaion for Object Fit added - Documentation added for the 'object-fit' util * Updated spell checks issues * Update object-fit.md * Update overflow.md * Update object-fit.md * Updated markup to address HTML Validation Errors - error: Bad value for attribute "src" on element "img": Illegal character in scheme data: space is not allowed. - info warning: Self-closing tag syntax in text/html documents is widely discouraged; it's unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you're using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool. * Updated Fix - Added Legibility to the img markup (example.html) - Fixed issue with example not working properly (because image closing tag no longer has "/>" ) * update values by step of 0.25 in bundlewatch.config The following values in .bundlewatch.config.json have been updated: - ./dist/css/bootstrap-utilities.css - ./dist/css/bootstrap-utilities.min.css - ./dist/css/bootstrap.css - ./dist/css/bootstrap.min.css Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng> Co-authored-by: Mark Otto <otto@github.com>
-rw-r--r--.bundlewatch.config.json8
-rw-r--r--scss/_utilities.scss22
-rw-r--r--site/content/docs/5.2/utilities/object-fit.md61
-rw-r--r--site/content/docs/5.2/utilities/overflow.md59
-rw-r--r--site/data/sidebar.yml1
-rw-r--r--site/layouts/shortcodes/example.html4
-rw-r--r--site/layouts/shortcodes/placeholder.html24
7 files changed, 168 insertions, 11 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index cea957f5eb..8c390c6e0e 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -18,19 +18,19 @@
},
{
"path": "./dist/css/bootstrap-utilities.css",
- "maxSize": "8.25 kB"
+ "maxSize": "8.5 kB"
},
{
"path": "./dist/css/bootstrap-utilities.min.css",
- "maxSize": "7.5 kB"
+ "maxSize": "7.75 kB"
},
{
"path": "./dist/css/bootstrap.css",
- "maxSize": "29.25 kB"
+ "maxSize": "29.5 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
- "maxSize": "27.25 kB"
+ "maxSize": "27.5 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 715c611c22..7a597046b3 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -22,6 +22,20 @@ $utilities: map-merge(
)
),
// scss-docs-end utils-float
+ // Object Fit utilities
+ // scss-docs-start utils-object-fit
+ "object-fit": (
+ responsive: true,
+ property: object-fit,
+ values: (
+ contain: contain,
+ cover: cover,
+ fill: fill,
+ scale: scale-down,
+ none: none,
+ )
+ ),
+ // scss-docs-end utils-object-fit
// Opacity utilities
// scss-docs-start utils-opacity
"opacity": (
@@ -40,6 +54,14 @@ $utilities: map-merge(
property: overflow,
values: auto hidden visible scroll,
),
+ "overflow-x": (
+ property: overflow-x,
+ values: auto hidden visible scroll,
+ ),
+ "overflow-y": (
+ property: overflow-y,
+ values: auto hidden visible scroll,
+ ),
// scss-docs-end utils-overflow
// scss-docs-start utils-display
"display": (
diff --git a/site/content/docs/5.2/utilities/object-fit.md b/site/content/docs/5.2/utilities/object-fit.md
new file mode 100644
index 0000000000..4d6c476eb7
--- /dev/null
+++ b/site/content/docs/5.2/utilities/object-fit.md
@@ -0,0 +1,61 @@
+---
+layout: docs
+title: Object fit
+description: Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
+group: utilities
+toc: true
+---
+
+## How it works
+
+Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `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 rounded" text="Object fit contain" markup="img" >}}
+{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" >}}
+{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" >}}
+{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" >}}
+{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" >}}
+{{< /example >}}
+
+## Responsive
+
+Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
+
+{{< example class="d-flex overflow-auto" >}}
+{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" >}}
+{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" >}}
+{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" >}}
+{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" >}}
+{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" >}}
+{{< /example >}}
+
+## Video
+
+The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `<video>` elements.
+
+```html
+<video src="..." class="object-fit-contain" autoplay></video>
+<video src="..." class="object-fit-cover" autoplay></video>
+<video src="..." class="object-fit-fill" autoplay></video>
+<video src="..." class="object-fit-scale" autoplay></video>
+<video src="..." class="object-fit-none" autoplay></video>
+```
+
+## Utilities API
+
+Object fit 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-object-fit" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.2/utilities/overflow.md b/site/content/docs/5.2/utilities/overflow.md
index a36374cd55..005210d886 100644
--- a/site/content/docs/5.2/utilities/overflow.md
+++ b/site/content/docs/5.2/utilities/overflow.md
@@ -3,8 +3,11 @@ layout: docs
title: Overflow
description: Use these shorthand utilities for quickly configuring how content overflows an element.
group: utilities
+toc: true
---
+## Overflow
+
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
<div class="bd-example d-md-flex">
@@ -29,6 +32,62 @@ Adjust the `overflow` property on the fly with four default values and classes.
<div class="overflow-scroll">...</div>
```
+### `overflow-x`
+
+Adjust the `overflow-x` property to affect the overflow of content horizontally.
+
+<div class="bd-example d-md-flex">
+ <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
+ <div><code>.overflow-x-auto</code> example on an element</div>
+ <div> with set width and height dimensions.</div>
+ </div>
+ <div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+ <div><code>.overflow-x-hidden</code> example</div>
+ <div>on an element with set width and height dimensions.</div>
+ </div>
+ <div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+ <div><code>.overflow-x-visible</code> example </div>
+ <div>on an element with set width and height dimensions.</div>
+ </div>
+ <div class="overflow-x-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+ <div><code>.overflow-x-scroll</code> example on an element</div>
+ <div> with set width and height dimensions.</div>
+ </div>
+</div>
+
+```html
+<div class="overflow-x-auto">...</div>
+<div class="overflow-x-hidden">...</div>
+<div class="overflow-x-visible">...</div>
+<div class="overflow-x-scroll">...</div>
+```
+
+### `overflow-y`
+
+Adjust the `overflow-y` property to affect the overflow of content vertically.
+
+<div class="bd-example d-md-flex">
+ <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+ <code>.overflow-y-auto</code> example on an element with set width and height dimensions.
+ </div>
+ <div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+ <code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
+ </div>
+ <div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+ <code>.overflow-y-visible</code> example on an element with set width and height dimensions.
+ </div>
+ <div class="overflow-y-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+ <code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
+ </div>
+</div>
+
+```html
+<div class="overflow-y-auto">...</div>
+<div class="overflow-y-hidden">...</div>
+<div class="overflow-y-visible">...</div>
+<div class="overflow-y-scroll">...</div>
+```
+
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
## Sass
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 2b7fddfd4f..c35631add4 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -123,6 +123,7 @@
- title: Flex
- title: Float
- title: Interactions
+ - title: Object fit
- title: Opacity
- title: Overflow
- title: Position
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index c6dcddbe0d..122dc1a156 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -17,6 +17,7 @@
{{- $show_markup := .Get "show_markup" | default true -}}
{{- $show_preview := .Get "show_preview" | default true -}}
{{- $input := .Inner -}}
+{{- $content := .Inner -}}
<div class="bd-example-snippet bd-code-snippet">
{{- if eq $show_preview true -}}
@@ -40,7 +41,8 @@
</div>
{{- end -}}
- {{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
+ {{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
+ {{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- end -}}
diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index c267bf4a75..9c915bcd6f 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -4,11 +4,12 @@
`args` are all optional and can be one of the following:
* title: Used in the SVG `title` tag - default: "Placeholder"
* text: The text to show in the image - default: "width x height"
- * class: Class to add to the `svg` - default: "bd-placeholder-img"
+ * class: Class to add to the `svg` or `img` - default: "bd-placeholder-img"
* color: The text color (foreground) - default: "#dee2e6"
* background: The background color - default: "#868e96"
* width: default: "100%"
* height: default: "180px"
+ * markup: If it should render `svg` or `img` tags - default: "svg"
*/ -}}
{{- $grays := $.Site.Data.grays -}}
@@ -26,8 +27,19 @@
{{- $show_title := not (eq $title "false") -}}
{{- $show_text := not (eq $text "false") -}}
-<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
- {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
- <rect width="100%" height="100%" fill="{{ $background }}"/>
- {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
-</svg>
+{{- $markup := .Get "markup" | default "svg" -}}
+
+
+{{- if eq $markup "img" -}}
+ <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
+ {{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}}
+ %3Crect%20width='100%25'%20height='100%25'%20fill='%23dee2e6'%3E%3C/rect%3E
+ {{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='%23868e96'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
+ %3C/svg%3E">
+{{- else -}}
+ <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
+ {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
+ <rect width="100%" height="100%" fill="{{ $background }}"/>
+ {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
+ </svg>
+{{- end -}}