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.

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

chore(css): Move CSS examples - Learn CSS, Building Blocks p1 #36607

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

Conversation

bsmth
Copy link
Member

@bsmth bsmth commented Nov 1, 2024

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/learn/writing-modes/simple-vertical.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}
{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}
{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1300)}}
{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/nesting.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1150)}}

Motivation

Motivation is described in the project issue.

Related issues and pull requests

@bsmth bsmth requested a review from a team as a code owner November 1, 2024 11:29
@bsmth bsmth requested review from estelle and removed request for a team November 1, 2024 11:29
@github-actions github-actions bot added Content:Learn:CSS Learning area CSS docs size/l [PR only] 501-1000 LoC changed labels Nov 1, 2024
Copy link
Member

@estelle estelle left a comment

Choose a reason for hiding this comment

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

LMostlyGTM!

Comment on lines +243 to +248
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
</div>
<div class="box logical">
<h2>Logical Properties</h2>
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
</div>
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
</div>
<div class="box logical">
<h2>Logical Properties</h2>
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
</div>
<p>A paragraph demonstrating logical properties in CSS.</p>
</div>
<div class="box logical">
<h2>Logical Properties</h2>
<p>A paragraph demonstrating logical properties in CSS.</p>
</div>

@@ -39,15 +39,27 @@ The final selectors we will look at are called combinators, because they combine

## Descendant combinator

The **descendant combinator** — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called _descendant selectors_.
The **descendant combinator** — typically represented by a single space (``) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called _descendant selectors_.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
The **descendant combinator** — typically represented by a single space (``) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called _descendant selectors_.
The **descendant combinator** — typically represented by a single space (` `) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called _descendant selectors_.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:Learn:CSS Learning area CSS docs size/l [PR only] 501-1000 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants