chore(css): Move CSS examples - Modules, filter functions, flow layout, grid layout

[bsmth]

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/modules/animation.html", '100%', 650)}}
{{EmbedGHLiveSample("css-examples/modules/backgrounds.html", '100%', 430)}}
{{EmbedGHLiveSample("css-examples/modules/basicUI.html", '100%', 320)}}
{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/modules/compositing.html", '100%', 460)}}
{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/modules/generated_content.html", '100%',420)}}
{{EmbedGHLiveSample("css-examples/grid/docs/autoplacement.html", '100%', 1200)}}
{{EmbedGHLiveSample("css-examples/types/filterfunctions.html", '100%', '500')}}
{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}
{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}
{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}
{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

Motivation

Motivation is described in the project issue.

Related issues and pull requests

• [PROJECT] Move embedded css-examples into content mdn#597

[github-actions]

Preview URLs (12 pages)

• /en-US/docs/Web/CSS/CSS_animations
• /en-US/docs/Web/CSS/CSS_backgrounds_and_borders
• /en-US/docs/Web/CSS/CSS_basic_user_interface
• /en-US/docs/Web/CSS/CSS_box_alignment
• /en-US/docs/Web/CSS/CSS_compositing_and_blending
• /en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow
• /en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts
• /en-US/docs/Web/CSS/CSS_flow_layout
• /en-US/docs/Web/CSS/CSS_generated_content
• /en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout
• /en-US/docs/Web/CSS/Inline_formatting_context
• /en-US/docs/Web/CSS/filter-function

Flaws (8)

Note! 10 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/CSS_basic_user_interface
Title: CSS basic user interface
Flaw count: 6

• macros:
  • /en-US/docs/Web/CSS/caret does not exist
  • /en-US/docs/Web/CSS/caret-shape does not exist
  • /en-US/docs/Web/CSS/nav-down does not exist
  • /en-US/docs/Web/CSS/nav-left does not exist
  • /en-US/docs/Web/CSS/nav-right does not exist
  • and 1 more flaws omitted

---

URL: /en-US/docs/Web/CSS/CSS_backgrounds_and_borders
Title: CSS backgrounds and borders
Flaw count: 2

• macros:
  • /en-US/docs/Web/CSS/background-position-inline does not exist
  • /en-US/docs/Web/CSS/background-position-block does not exist

(comment last updated: 2024-11-14 10:41:17)

[bsmth]

Thank you!