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 - layout cookbooks #36754

Merged
merged 6 commits into from
Nov 13, 2024
Merged

chore(css): Move CSS examples - layout cookbooks #36754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
219ab95
chore(css): Move CSS examples - layout cookbooks
OnkarRuikar Nov 12, 2024
ed9d94b
remove download links and hint about 'play' button
OnkarRuikar Nov 12, 2024
49b98d7
update font and restructure code
OnkarRuikar Nov 12, 2024
34df632
Apply suggestions from code review
OnkarRuikar Nov 12, 2024
00c8965
remove download part
OnkarRuikar Nov 12, 2024
72a4f2e
Merge branch 'main' into move-css-exmamples-cookbook
bsmth Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 40 additions & 5 deletions files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,46 @@ Display the hierarchy of the site by displaying inline links, with a separator b

## Recipe

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

> [!CALLOUT]
>
> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/breadcrumb-navigation--download.html)
Click "Play" in the code blocks below to edit the example in the MDN Playground:

```html live-sample___breadcrumb-example
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved
<nav aria-label="Breadcrumb" class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Sub Category</a></li>
<li><a href="#">Type</a></li>
<li><span aria-current="page">Product</span></li>
</ul>
</nav>
```

```css live-sample___breadcrumb-example
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved
body {
font: 1.2em sans-serif;
}

.breadcrumb {
padding: 0 0.5rem;
}

.breadcrumb ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved
align-items: end;
}

.breadcrumb li:not(:last-child)::after {
display: inline-block;
margin: 0 0.25rem;
content: "→";
}
```

{{EmbedLiveSample("breadcrumb-example", "", "100px")}}

> [!NOTE]
> The example above uses a complex selector to insert content before every `li` except the last one. This could also be achieved using a complex selector targeting all `li` elements except the first:
Expand Down
120 changes: 116 additions & 4 deletions files/en-us/web/css/layout_cookbook/card/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,123 @@ The cards in the group should line up in two dimensions — both vertically and

## Recipe

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}
Click "Play" in the code blocks below to edit the example in the MDN Playground:

```html live-sample___card-example
<div class="cards">
<article class="card">
<header>
<h2>A short heading</h2>
</header>

<img
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg"
alt="Hot air balloons" />
<div class="content">
<p>
The idea of reaching the North Pole by means of balloons appears to have
been entertained many years ago.
</p>
</div>
</article>

<article class="card">
<header>
<h2>A short heading</h2>
</header>

<img
src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg"
alt="Hot air balloons" />
<div class="content">
<p>Short content.</p>
</div>
<footer>I have a footer!</footer>
</article>

<article class="card">
<header>
<h2>A longer heading in this card</h2>
</header>

<img
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg"
alt="Hot air balloons" />
<div class="content">
<p>
In a curious work, published in Paris in 1863 by Delaville Dedreux,
there is a suggestion for reaching the North Pole by an aerostat.
</p>
</div>
<footer>I have a footer!</footer>
</article>
<article class="card">
<header>
<h2>A short heading</h2>
</header>

<img
src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg"
alt="Hot air balloons" />
<div class="content">
<p>
The idea of reaching the North Pole by means of balloons appears to have
been entertained many years ago.
</p>
</div>
</article>
</div>
```

```css live-sample___card-example
body {
font: 1.2em sans-serif;
}

img {
max-width: 100%;
}

.cards {
max-width: 700px;
margin: 1em auto;

display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
grid-gap: 20px;
}

.card {
border: 1px solid #999;
border-radius: 3px;

display: grid;
grid-template-rows: max-content 200px 1fr;
}

.card img {
object-fit: cover;
width: 100%;
height: 100%;
}

.card h2 {
margin: 0;
padding: 0.5rem;
}

.card .content {
padding: 0.5rem;
}

.card footer {
background-color: #333;
color: #fff;
padding: 0.5rem;
}
```

> [!CALLOUT]
>
> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/card--download.html)
{{EmbedLiveSample("card-example", "", "950px")}}

## Choices made

Expand Down
64 changes: 56 additions & 8 deletions files/en-us/web/css/layout_cookbook/center_an_element/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,35 @@ To place an item into the center of another box horizontally and vertically.

## Recipe

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
Click "Play" in the code blocks below to edit the example in the MDN Playground:

> [!CALLOUT]
>
> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/center--download.html)
```html live-sample___center-example
<div class="container">
<div class="item">I am centered!</div>
</div>
```

```css live-sample___center-example
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}

.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;

height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
```

{{EmbedLiveSample("center-example", "", "250px")}}

## Using flexbox

Expand All @@ -42,19 +66,31 @@ div {
padding: 1em;
max-width: 75%;
}

.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}

.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;

display: flex;
align-items: center;
justify-content: center;
height: 8em;
}
```

We set a height for the container to demonstrate that the inner item is indeed vertically centered within the container.

### Result

{{ EmbedLiveSample('Using_flexbox', 400, 200) }}
{{EmbedLiveSample("Using_flexbox", "", "200px")}}

Instead of applying `align-items: center;` on the container, you can also vertically center the inner item by setting {{cssxref("align-self")}} to `center` on the inner item itself.

Expand All @@ -78,16 +114,28 @@ div {
padding: 1em;
max-width: 75%;
}

.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}

.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;

display: grid;
place-items: center;
height: 8em;
}
```

### Result

{{ EmbedLiveSample('Using_grid', 400, 200) }}
{{EmbedLiveSample("Using_grid", "", "200px")}}

Instead of applying `place-items: center;` on the container, you can achieve the same centering by setting {{cssxref("place-content", "place-content: center;")}} on the container or by applying either {{cssxref("place-self", "place-self: center")}} or {{cssxref("margin", "margin: auto;")}} on the inner item itself.

Expand Down
Loading