diff --git a/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md index fadf86295e1880a..af0e309ac0e7df0 100644 --- a/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md +++ b/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md @@ -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 + +``` + +```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: diff --git a/files/en-us/web/css/layout_cookbook/card/index.md b/files/en-us/web/css/layout_cookbook/card/index.md index 93e41b5da9b1c01..f7d1627d40d1b8c 100644 --- a/files/en-us/web/css/layout_cookbook/card/index.md +++ b/files/en-us/web/css/layout_cookbook/card/index.md @@ -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 +
+
+
+

A short heading

+
+ + Hot air balloons +
+

+ The idea of reaching the North Pole by means of balloons appears to have + been entertained many years ago. +

+
+
+ +
+
+

A short heading

+
+ + Hot air balloons +
+

Short content.

+
+
I have a footer!
+
+ +
+
+

A longer heading in this card

+
+ + Hot air balloons +
+

+ In a curious work, published in Paris in 1863 by Delaville Dedreux, + there is a suggestion for reaching the North Pole by an aerostat. +

+
+
I have a footer!
+
+
+
+

A short heading

+
+ + Hot air balloons +
+

+ The idea of reaching the North Pole by means of balloons appears to have + been entertained many years ago. +

+
+
+
+``` + +```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 diff --git a/files/en-us/web/css/layout_cookbook/center_an_element/index.md b/files/en-us/web/css/layout_cookbook/center_an_element/index.md index 20676bce20c4a78..46b1a8269eb4feb 100644 --- a/files/en-us/web/css/layout_cookbook/center_an_element/index.md +++ b/files/en-us/web/css/layout_cookbook/center_an_element/index.md @@ -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 +
+
I am centered!
+
+``` + +```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 @@ -42,11 +66,23 @@ 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; } ``` @@ -54,7 +90,7 @@ We set a height for the container to demonstrate that the inner item is indeed v ### 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. @@ -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. diff --git a/files/en-us/web/css/layout_cookbook/column_layouts/index.md b/files/en-us/web/css/layout_cookbook/column_layouts/index.md index 9f0d9dd92846523..3455596642cbd05 100644 --- a/files/en-us/web/css/layout_cookbook/column_layouts/index.md +++ b/files/en-us/web/css/layout_cookbook/column_layouts/index.md @@ -28,14 +28,43 @@ If you create columns using multi-column layout your text will remain as a conti You can control the gaps between columns with the {{cssxref("column-gap")}} or {{cssxref("gap")}} properties, and add a rule between columns using {{cssxref("column-rule")}}. -{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}} +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html live-sample___multi-column-layout-example +
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

+

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter + purslane kale. Celery potato scallion desert raisin horseradish spinach +

+
+``` + +```css live-sample___multi-column-layout-example +.container { + border: 2px solid rgb(75 70 74); + border-radius: 0.5em; + padding: 20px; + font: 1.2em sans-serif; + + column-width: 10em; + column-rule: 1px solid rgb(75 70 74); +} +``` + +{{EmbedLiveSample("multi-column-layout-example", "", "350px")}} In this example, we used the {{cssxref("column-width")}} property to set a minimum width that the columns need to be before the browser adds an additional column. The {{cssxref("columns")}} shorthand property can be used to set the `column-width` and {{cssxref("column-count")}} properties, either of which can define the maximum number of columns allowed. -> [!CALLOUT] -> -> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-multicol--download.html) - Use multicol when: - You want your text to display in newspaper-like columns. @@ -48,19 +77,97 @@ Flexbox can be used to break content into columns by setting {{cssxref("display" Margins or the `gap` property can be used to create gaps between items, but there is currently no CSS property that adds rules between flex items. -{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}} - -> [!CALLOUT] -> -> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-flexbox--download.html) +```html live-sample___columns-flexbox-example +
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter + purslane kale. Celery potato scallion desert raisin horseradish spinach + carrot soko. +

+
+``` + +```css live-sample___columns-flexbox-example +.container { + border: 2px solid rgb(75 70 74); + border-radius: 0.5em; + padding: 20px 10px; + font: 1.2em sans-serif; + + display: flex; +} + +.container > * { + padding: 10px; + border: 2px solid rgb(95 97 110); + border-radius: 0.5em; + + margin: 0 10px; + flex: 1; +} +``` + +{{EmbedLiveSample("columns-flexbox-example", "", "400px")}} To create a layout with flex items that wrap onto new rows, set the {{cssxref("flex-wrap")}} property on the container to `wrap`. Note that each flex line distributes space for that line only. Items in one line will not necessarily line up with items on other lines, as you'll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time. -{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}} - -> [!CALLOUT] -> -> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-flexbox-wrapping--download.html) +```html live-sample___columns-flexbox-wrapping-example +
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter + purslane kale. Celery potato scallion desert raisin horseradish spinach + carrot soko. +

+
+``` + +```css live-sample___columns-flexbox-wrapping-example +.container { + border: 2px solid rgb(75 70 74); + border-radius: 0.5em; + padding: 20px 10px; + width: 500px; + font: 1.2em sans-serif; + + display: flex; + flex-wrap: wrap; +} + +.container > * { + padding: 10px; + border: 2px solid rgb(95 97 110); + border-radius: 0.5em; + + margin: 0 10px; + flex: 1 1 200px; +} +``` + +{{EmbedLiveSample("columns-flexbox-wrapping-example", "", "450px")}} Use flexbox: @@ -72,11 +179,50 @@ Use flexbox: If you want a two-dimensional grid where items line up in rows _and_ columns, then you should choose CSS grid layout. Similar to how flexbox works on the direct children of the flex container, grid layout works on the direct children of the grid container. Just set {{cssxref("display", "display: grid;")}} on the container. Properties set on this container — like {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} — define how the items are distributed along rows and columns. -{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}} - -> [!CALLOUT] -> -> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-grid--download.html) +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html live-sample___grid-layout-example +
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens. +

+ +

+ Nori grape silver beet broccoli kombu beet greens fava bean potato quandong + celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens + parsnip. . +

+
+``` + +```css live-sample___grid-layout-example +.container { + border: 2px solid rgb(75 70 74); + border-radius: 0.5em; + padding: 20px; + width: 500px; + font: 1.2em sans-serif; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; +} + +.container > * { + padding: 10px; + border: 2px solid rgb(95 97 110); + border-radius: 0.5em; + margin: 0; +} +``` + +{{EmbedLiveSample("grid-layout-example", "", "450px")}} Use grid: diff --git a/files/en-us/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md b/files/en-us/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md index 196f1c457515466..81fe2a8fc731e29 100644 --- a/files/en-us/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md +++ b/files/en-us/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md @@ -18,13 +18,35 @@ _What does this pattern need to include, or what problems does it need to solve? ## Recipe -_Change the path to the example below to point to your merged example. The last parameter is the live example height, which you can change as needed._ - -{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}} - -_Change the link to point to your merged download version._ - -[Download the example](https://github.com/mdn/css-examples/blob/main/css-cookbook/center--download.html) +_Change the example code. The last parameter is the live example height, which you can change as needed. Mention that you can click "Play" in code blocks to edit the example in the MDN Playground._ + +```html live-sample___center-example +
+
I am centered!
+
+``` + +```css live-sample___center-example +.container { + border: 2px solid rgb(75 70 74); + border-radius: 0.5em; + + height: 200px; + display: flex; + align-items: center; + justify-content: center; +} + +.item { + border: 2px solid rgb(95 97 110); + border-radius: 0.5em; + padding: 20px; + + width: 10em; +} +``` + +{{EmbedLiveSample("center-example", "", "250px")}} ## Choices made diff --git a/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md b/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md index 8c705cf7cd765af..da090ca7a7dae94 100644 --- a/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md +++ b/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md @@ -14,11 +14,69 @@ Items placed on the grid should be able to align to a horizontally-centered max- ## Recipe -{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 1100)}} +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html live-sample___grid-wrapper-example +
+
+

+ This item aligns to a central “wrapper” – columns that have a maximum + width. +

+
+
+

This item aligns to the edge of the grid container.

+
+
+

+ This item aligns to the left edge of the grid container and the right edge + of the wrapper. +

+
+
+

This item aligns to the right edge of the “wrapper” columns.

+
+
+``` + +```css live-sample___grid-wrapper-example +body { + font: 1.2em sans-serif; +} +.grid { + display: grid; + grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax( + 20px, + 1fr + ); + grid-auto-rows: minmax(100px, auto); + grid-gap: 10px; +} + +.grid > * { + border: 2px solid rgb(95 97 110); + border-radius: 0.5em; + padding: 20px; +} + +.full-width { + grid-column: 1 / -1; +} + +.wrapper { + grid-column: 2 / -2; +} + +.left-edge { + grid-column: 1 / -2; +} + +.right-wrapper { + grid-column: 4 / -2; +} +``` -> [!CALLOUT] -> -> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/grid-wrapper--download.html) +{{EmbedLiveSample("grid-wrapper-example", "", "550px")}} ## Choices made diff --git a/files/en-us/web/css/layout_cookbook/list_group_with_badges/index.md b/files/en-us/web/css/layout_cookbook/list_group_with_badges/index.md index 60f0788810030fe..4fbc9f1432e75ee 100644 --- a/files/en-us/web/css/layout_cookbook/list_group_with_badges/index.md +++ b/files/en-us/web/css/layout_cookbook/list_group_with_badges/index.md @@ -16,11 +16,69 @@ The list items should be displayed with the badges. The badge should be aligned ## Recipe -{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.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/list-group-badges--download.html) +```html live-sample___list-group-badges-example + +``` + +```css live-sample___list-group-badges-example +body { + font: 1.2em / 1.5 sans-serif; + padding: 0; + margin: 1em; +} +.list-group { + list-style: none; + margin: 0; + padding: 0; + border: 1px solid #ccc; + border-radius: 0.5em; + width: 20em; +} + +.list-group li { + border-top: 1px solid #ccc; + padding: 0.5em; + display: flex; + justify-content: space-between; + align-items: center; +} + +.list-group li:first-child { + border-top: 0; +} + +.list-group .badge { + background-color: rebeccapurple; + color: #fff; + font-weight: bold; + font-size: 80%; + border-radius: 10em; + min-width: 1.5em; + padding: 0.25em; + text-align: center; +} +``` + +{{EmbedLiveSample("list-group-badges-example", "", "250px")}} ## Choices made diff --git a/files/en-us/web/css/layout_cookbook/media_objects/index.md b/files/en-us/web/css/layout_cookbook/media_objects/index.md index e4fb4c0bc693647..92c082ba8a3f781 100644 --- a/files/en-us/web/css/layout_cookbook/media_objects/index.md +++ b/files/en-us/web/css/layout_cookbook/media_objects/index.md @@ -22,11 +22,153 @@ Media Object pattern needs some or all of the following characteristics: ## The recipe -{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 2700)}} - -> [!CALLOUT] -> -> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/media-objects--download.html) +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html live-sample___media-objects-example +
+
+ Balloons +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit + lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque + porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis + condimentum. +

+
+
An optional footer goes here.
+
+ +
+
+ Account +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit + lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque + porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis + condimentum. +

+
+
+
+``` + +```html hidden live-sample___media-objects-example +
+
+ Balloons +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit + lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque + porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis + condimentum. +

+
+
An optional footer goes here.
+
+ +
+ + Balloons + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit + lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque + porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis + condimentum. +

+
+ +
+ +
+ + Balloons + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. +

+
+ +
+
+
+``` + +```css live-sample___media-objects-example +body { + font: 1.2em sans-serif; +} + +img { + max-width: 100%; +} + +p { + margin: 0 0 1em 0; +} + +@media (min-width: 500px) { + .media { + display: grid; + grid-template-columns: fit-content(200px) 1fr; + grid-template-rows: 1fr auto; + grid-template-areas: + "image content" + "image footer"; + grid-gap: 20px; + margin-bottom: 4em; + } + + .media-flip { + grid-template-columns: 1fr fit-content(250px); + grid-template-areas: + "content image" + "footer image"; + } + + .img { + grid-area: image; + } + + .content { + grid-area: content; + } + + .footer { + grid-area: footer; + } +} +``` + +{{EmbedLiveSample("media-objects-example", "", "1500px")}} ## Choices made diff --git a/files/en-us/web/css/layout_cookbook/pagination/index.md b/files/en-us/web/css/layout_cookbook/pagination/index.md index 9a668cab1ee9616..6c0e8fff3663c26 100644 --- a/files/en-us/web/css/layout_cookbook/pagination/index.md +++ b/files/en-us/web/css/layout_cookbook/pagination/index.md @@ -18,11 +18,90 @@ Typically, the pagination component will be centered horizontally underneath the ## Recipe -{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}} +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html live-sample___pagination-example + +``` + +```css live-sample___pagination-example +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} + +nav { + border-top: 1px solid #eee; + margin-top: 1em; + padding-top: 0.5em; + font: 1.2em sans-serif; + + display: flex; + justify-content: center; +} + +.pagination { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +.pagination li { + margin: 0 1px; +} + +.pagination a { + display: block; + padding: 0.5em 1em; + border: 1px solid #999; + border-radius: 0.2em; + text-decoration: none; +} + +.pagination a[aria-current="page"] { + background-color: #333; + color: #fff; +} +``` -> [!CALLOUT] -> -> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/pagination--download.html) +{{EmbedLiveSample("pagination-example")}} ## Choices made diff --git a/files/en-us/web/css/layout_cookbook/split_navigation/index.md b/files/en-us/web/css/layout_cookbook/split_navigation/index.md index c17cf77522cb91e..aca2b690d0cbfc4 100644 --- a/files/en-us/web/css/layout_cookbook/split_navigation/index.md +++ b/files/en-us/web/css/layout_cookbook/split_navigation/index.md @@ -16,11 +16,40 @@ A common navigation pattern is to have one element pushed away from the others. ## Recipe -{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}} +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/split-navigation--download.html) +```html live-sample___split-navigation-example + +``` + +```css live-sample___split-navigation-example +.main-nav { + margin: 0; + padding: 0; + list-style: none; + font: 1.2em sans-serif; + + display: flex; +} + +.main-nav a { + padding: 0.5em 1em; + display: block; +} + +.push { + margin-left: auto; +} +``` + +{{EmbedLiveSample("split-navigation-example")}} ## Choices made diff --git a/files/en-us/web/css/layout_cookbook/sticky_footers/index.md b/files/en-us/web/css/layout_cookbook/sticky_footers/index.md index 48cfdff657dad77..5136bbca37a8b80 100644 --- a/files/en-us/web/css/layout_cookbook/sticky_footers/index.md +++ b/files/en-us/web/css/layout_cookbook/sticky_footers/index.md @@ -19,10 +19,59 @@ The Sticky footer pattern needs to meet the following requirements: ## The recipe -{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}} - -> [!CALLOUT] -> To take a look at the code, you can [download the full example](https://github.com/mdn/css-examples/blob/main/css-cookbook/sticky-footer--download.html). +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html live-sample___sticky-footer-example +
+
This is the header
+
+

+ Main page content here, add more to this text if you want to see the + footer push down. +

+
+ +
+``` + +```css live-sample___sticky-footer-example +* { + box-sizing: inherit; +} + +html { + height: 100%; + box-sizing: border-box; +} + +body { + height: 100%; + font: 1.2em sans-serif; +} + +.wrapper { + min-height: 100%; + display: grid; + grid-template-rows: auto 1fr auto; +} + +.page-header, +.page-footer { + background-color: rgb(75 70 74); + color: #fff; + padding: 20px; +} + +.page-body { + padding: 20px; +} + +.page-body p { + border: 1px solid grey; +} +``` + +{{EmbedLiveSample("stiky-footer-example", "", "400px")}} > [!NOTE] > In this example and the following one we are using a wrapper set to `min-height: 100%`. You can also achieve this for a full page by setting a {{cssxref("min-height")}} of `100vh` on the {{htmlelement("body")}} and then using it as your grid container. @@ -37,7 +86,63 @@ Grid auto-placement will place our items in source order and so the header goes You can also use flexbox to create a sticky footer. -{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}} +```html live-sample___sticky-footer-flexbox-example +
+
This is the header
+
+

+ Main page content here, add more to this text if you want to see the + footer push down. +

+
+ +
+``` + +```css live-sample___sticky-footer-flexbox-example +* { + box-sizing: border-box; +} + +html, +body { + box-sizing: border-box; + height: 100%; + padding: 0; + margin: 0; + font: 1.2em sans-serif; +} + +.wrapper { + box-sizing: border-box; + min-height: 100%; + + display: flex; + flex-direction: column; +} + +.page-header, +.page-footer { + background-color: rgb(75 70 74); + color: #fff; + padding: 20px; + + flex-grow: 0; + flex-shrink: 0; +} + +.page-body { + padding: 20px; + + flex-grow: 1; +} + +.page-body p { + border: 1px solid grey; +} +``` + +{{EmbedLiveSample("stiky-footer-flexbox-example", "", "400px")}} The flexbox example starts out in the same way, but we use `display:flex` rather than `display:grid` on the `.wrapper`; we also set `flex-direction` to `column`. Then we set our main content to `flex-grow: 1` and the other two elements to `flex-shrink: 0` — this prevents them from shrinking smaller when content fills the main area.