Utilities for overflow and object fit #36848
Conversation
|
I could be down for these in v5.3.0. Going to play a bit more with them myself and see if we'd want to update any docs to better utilize these. Speaking of, can you take a pass at creating a docs page and/or updates for these? |
Alright @mdo, I can take a pass at the docs and update the PR. |
|
@mdo done! |
mdo
force-pushed
the
utilities-for-overflow-and-object-fit
branch
from
eb99552
to
42999b5
Compare
mdo
force-pushed
the
utilities-for-overflow-and-object-fit
branch
2 times, most recently
from
391c37b
to
98e7a83
Compare
mdo
force-pushed
the
utilities-for-overflow-and-object-fit
branch
from
d804a63
to
5e5b10b
Compare
|
Tried my hand at fixing some of the build errors, but could use some help here because I'd like to move onto other things. Looks like the docs build is failing due to the use of |
|
@mdo Updated placeholder "img" markup to address HTML Validation Errors |
|
@mdo I don't think I should be able to update the .bundlewatch.config file. |
Given the content of this PR, you can update the following corresponding values of So for example the modification for diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index cea957f5e..0fda9d5d6 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -18,7 +18,7 @@
},
{
"path": "./dist/css/bootstrap-utilities.css",
- "maxSize": "8.25 kB"
+ "maxSize": "8.5 kB"
},
{
"path": "./dist/css/bootstrap-utilities.min.css", |
- 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.
- 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.
- Now includes docs for `overflow-x` and `overflow-y` utilities
- 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
- Documentation added for the 'object-fit' util
- 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.
- Added Legibility to the img markup (example.html) - Fixed issue with example not working properly (because image closing tag no longer has "/>" )
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
mdo
force-pushed
the
utilities-for-overflow-and-object-fit
branch
from
81b52b5
to
844e108
Compare
Added "overflow-x" and "overflow-y"
Added "object-fit" utilities
<img>or<video>should be resized to fit its container.