Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(css): Move CSS examples - Shapes, transforms, transition, display #36740

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

chore(css): Move CSS examples - Shapes, transforms, transition, display #36740

wants to merge 13 commits into from
+1,659 −49

Conversation

bsmth
Copy link
Member

@bsmth bsmth commented Nov 11, 2024 •
edited
Loading

Description

As part of an initiative to reduce repo maintenance & code duplication, this PR moves some external examples into content. This PR converts the following macros to live samples:

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/modules/transforms.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/transitions/js-transitions.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/display/multi-keyword/span-flex.html", '100%', 440)}}
{{EmbedGHLiveSample("css-examples/display/multi-keyword/inline-flex.html", '100%', 440)}}
{{EmbedGHLiveSample("css-examples/display/multi-keyword/multi-keyword-flex.html", '100%', 640)}}
{{EmbedGHLiveSample("css-examples/display/multi-keyword/inline-block.html", '100%', 440)}}

Motivation

Motivation is described in the project issue.

Related issues and pull requests

TODO

@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/xl [PR only] >1000 LoC changed labels Nov 11, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 11, 2024 •
edited
Loading

Preview URLs (7 pages)

(comment last updated: 2024-11-25 10:01:29)

@bsmth bsmth mentioned this pull request Nov 11, 2024
Merged
@bsmth bsmth marked this pull request as ready for review November 11, 2024 16:42
@bsmth bsmth requested a review from a team as a code owner November 11, 2024 16:42
@bsmth bsmth requested review from chrisdavidmills and removed request for a team November 11, 2024 16:42
chrisdavidmills
chrisdavidmills requested changes Nov 19, 2024
View reviewed changes
Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @bsmth! I've looked through all of these. I can verify that they (at least mostly) display correctly by running them in MDN Playground. However, they are not displaying on the preview pages, which is a bit strange.

files/en-us/web/css/css_shapes/basic_shapes/index.md
}
```

{{EmbedLiveSample("inset", "", "250px")}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hrm, I'm not sure if this is just a problem with the preview page, but the example is not rendering on the page. The references must be correct because it loads correctly in the MDN Playground.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is strange, I did notice the output box was empty occasionally on localhost, but had content on refresh, I wonder if it's a Playground problem with lazy loading / order of loading resources. Needs some investigation.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrisdavidmills this is a known issue due to changes in Playground envs, it should be resolved in the coming days.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK. In that case, I'm happy with all the additions, except where commented.

files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/from_box_values/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/shapes_from_images/index.md
img {
float: left;
shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png);
shape-image-threshold: 0.2;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one shouldn't have shape-image-threshold in it, right? It's the next example that demonstrates that property.

files/en-us/web/css/css_shapes/shapes_from_images/index.md
<div class="box">
<img
alt="A red star"
src="https://mdn.github.io/shared-assets/images/examples/star-shape.png" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look the right image. The image is supposed have a 20% opacity?

files/en-us/web/css/css_shapes/shapes_from_images/index.md

img {
float: left;
shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as the previous one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdavidmills chrisdavidmills chrisdavidmills requested changes

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
Content:CSS Cascading Style Sheets docs size/xl [PR only] >1000 LoC changed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@bsmth @chrisdavidmills