Skip to content

Commit

Permalink
Merge branch 'main' into css-examples-web-css-4
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsmth
bsmth authored Nov 13, 2024
2 parents 9b6785a + 507825f commit 84d31c9
Show file tree
Hide file tree
Showing 11 changed files with 904 additions and 70 deletions.
45 changes: 40 additions & 5 deletions files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md
View file
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
<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
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;
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
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
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

0 comments on commit 84d31c9

Please sign in to comment.