Skip to content

Commit f3bf4e2

Browse files
dipikabhpepelsbeygithub-actions[bot]
authored
chore(ia): Reorganize CSS pages - part 2 (moving layout_cookbook to how_to) (mdn#41735)
* resolving conflicts * add how-to section to the sidebar * update page types * Update files/en-us/web/css/how_to/layout_cookbook/index.md Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * Update files/en-us/web/css/how_to/layout_cookbook/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 763aab4 commit f3bf4e2

File tree

34 files changed

+264
-87
lines changed

34 files changed

+264
-87
lines changed

‎files/en-us/_redirects.txt‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12319,7 +12319,20 @@
1231912319
/en-US/docs/Web/CSS/Inheritance /en-US/docs/Web/CSS/CSS_cascade/Inheritance
1232012320
/en-US/docs/Web/CSS/Inline_formatting_context /en-US/docs/Web/CSS/CSS_inline_layout/Inline_formatting_context
1232112321
/en-US/docs/Web/CSS/Interactive /en-US/docs/Web/CSS/@media
12322-
/en-US/docs/Web/CSS/Layout_cookbook/Recipe:_Media_Objects /en-US/docs/Web/CSS/Layout_cookbook/Media_objects
12322+
/en-US/docs/Web/CSS/Layout_cookbook /en-US/docs/Web/CSS/How_to/Layout_cookbook
12323+
/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation /en-US/docs/Web/CSS/How_to/Layout_cookbook/Breadcrumb_navigation
12324+
/en-US/docs/Web/CSS/Layout_cookbook/Card /en-US/docs/Web/CSS/How_to/Layout_cookbook/Card
12325+
/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element /en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element
12326+
/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts /en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts
12327+
/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe /en-US/docs/Web/CSS/How_to/Layout_cookbook/Contribute_a_recipe
12328+
/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template /en-US/docs/Web/CSS/How_to/Layout_cookbook/Contribute_a_recipe/Cookbook_template
12329+
/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper /en-US/docs/Web/CSS/How_to/Layout_cookbook/Grid_wrapper
12330+
/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges /en-US/docs/Web/CSS/How_to/Layout_cookbook/List_group_with_badges
12331+
/en-US/docs/Web/CSS/Layout_cookbook/Media_objects /en-US/docs/Web/CSS/How_to/Layout_cookbook/Media_objects
12332+
/en-US/docs/Web/CSS/Layout_cookbook/Pagination /en-US/docs/Web/CSS/How_to/Layout_cookbook/Pagination
12333+
/en-US/docs/Web/CSS/Layout_cookbook/Recipe:_Media_Objects /en-US/docs/Web/CSS/How_to/Layout_cookbook/Media_objects
12334+
/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation /en-US/docs/Web/CSS/How_to/Layout_cookbook/Split_navigation
12335+
/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers /en-US/docs/Web/CSS/How_to/Layout_cookbook/Sticky_footers
1232312336
/en-US/docs/Web/CSS/Layout_mode /en-US/docs/Glossary/Layout_mode
1232412337
/en-US/docs/Web/CSS/List_of_Proprietary_CSS_Features /en-US/docs/Web/CSS/Reference
1232512338
/en-US/docs/Web/CSS/Media_Queries /en-US/docs/Web/CSS/CSS_media_queries

‎files/en-us/_wikihistory.json‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77542,6 +77542,70 @@
7754277542
"Wjjohnst"
7754377543
]
7754477544
},
77545+
"Web/CSS/How_to/Layout_cookbook": {
77546+
"modified": "2020-07-07T12:18:05.178Z",
77547+
"contributors": [
77548+
"wbamberg",
77549+
"mfuji09",
77550+
"mbarker84",
77551+
"StripTM",
77552+
"chrisdavidmills",
77553+
"rachelandrew"
77554+
]
77555+
},
77556+
"Web/CSS/How_to/Layout_cookbook/Breadcrumb_Navigation": {
77557+
"modified": "2020-10-15T22:10:00.746Z",
77558+
"contributors": ["chrisdavidmills", "avivmu", "wbamberg", "rachelandrew"]
77559+
},
77560+
"Web/CSS/How_to/Layout_cookbook/Card": {
77561+
"modified": "2020-10-15T22:10:22.137Z",
77562+
"contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"]
77563+
},
77564+
"Web/CSS/How_to/Layout_cookbook/Center_an_element": {
77565+
"modified": "2020-10-15T22:08:06.379Z",
77566+
"contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"]
77567+
},
77568+
"Web/CSS/How_to/Layout_cookbook/Column_layouts": {
77569+
"modified": "2020-10-15T22:08:09.073Z",
77570+
"contributors": [
77571+
"wbamberg",
77572+
"NascentSoul",
77573+
"chrisdavidmills",
77574+
"rachelandrew"
77575+
]
77576+
},
77577+
"Web/CSS/How_to/Layout_cookbook/Contribute_a_recipe": {
77578+
"modified": "2020-07-07T12:18:57.550Z",
77579+
"contributors": ["wbamberg", "jswisher", "chrisdavidmills", "rachelandrew"]
77580+
},
77581+
"Web/CSS/How_to/Layout_cookbook/Contribute_a_recipe/Cookbook_template": {
77582+
"modified": "2020-10-15T22:09:27.869Z",
77583+
"contributors": ["wbamberg", "rachelandrew", "chrisdavidmills"]
77584+
},
77585+
"Web/CSS/How_to/Layout_cookbook/Grid_wrapper": {
77586+
"modified": "2020-10-15T22:11:29.954Z",
77587+
"contributors": ["estelle", "ExE-Boss", "mbarker84", "chrisdavidmills"]
77588+
},
77589+
"Web/CSS/How_to/Layout_cookbook/List_group_with_badges": {
77590+
"modified": "2020-10-15T22:10:18.164Z",
77591+
"contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"]
77592+
},
77593+
"Web/CSS/How_to/Layout_cookbook/Media_objects": {
77594+
"modified": "2020-10-15T22:07:22.933Z",
77595+
"contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"]
77596+
},
77597+
"Web/CSS/How_to/Layout_cookbook/Pagination": {
77598+
"modified": "2020-10-15T22:10:29.413Z",
77599+
"contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"]
77600+
},
77601+
"Web/CSS/How_to/Layout_cookbook/Split_Navigation": {
77602+
"modified": "2020-10-15T22:10:03.893Z",
77603+
"contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"]
77604+
},
77605+
"Web/CSS/How_to/Layout_cookbook/Sticky_footers": {
77606+
"modified": "2020-10-15T22:08:03.870Z",
77607+
"contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"]
77608+
},
7754577609
"Web/CSS/ID_selectors": {
7754677610
"modified": "2020-12-14T11:20:33.993Z",
7754777611
"contributors": [
@@ -77630,6 +77694,69 @@
7763077694
"modified": "2020-10-15T22:08:03.870Z",
7763177695
"contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"]
7763277696
},
77697+
"Web/CSS/Mozilla_Extensions": {
77698+
"modified": "2020-08-09T13:09:17.030Z",
77699+
"contributors": [
77700+
"jswisher",
77701+
"wbamberg",
77702+
"Koavf",
77703+
"ExE-Boss",
77704+
"mfuji09",
77705+
"chrisdavidmills",
77706+
"mfluehr",
77707+
"sfoster",
77708+
"Sebastianz",
77709+
"HTMLValidator",
77710+
"Prinz_Rana",
77711+
"teoli",
77712+
"yisibl",
77713+
"SJW",
77714+
"y0ssar1an",
77715+
"fscholz",
77716+
"frankyan",
77717+
"Paul",
77718+
"Sheppy",
77719+
"ethertank",
77720+
"mkato",
77721+
"DBaron",
77722+
"tregagnon",
77723+
"Marcoos",
77724+
"Mook(as)",
77725+
"Jürgen Jeka",
77726+
"Sevenspade",
77727+
"mozjonathan",
77728+
"BijuGC",
77729+
"Ms2ger",
77730+
"Level",
77731+
"Taken",
77732+
"SamB",
77733+
"Drhowarddrfine",
77734+
"j.j.",
77735+
"MarkusStange",
77736+
"Marsf",
77737+
"Yanmorin",
77738+
"Tonymec",
77739+
"Wjjohnst",
77740+
"Turicon",
77741+
"Dao",
77742+
"Kliu0x52",
77743+
"Piro",
77744+
"Mgjbot",
77745+
"Nathymig",
77746+
"Efriedman",
77747+
"Nickolay",
77748+
"Jesse",
77749+
"BenoitL",
77750+
"Korisu",
77751+
"Pumbaa80",
77752+
"Ptak82",
77753+
"Dria",
77754+
"Enn",
77755+
"Phreed",
77756+
"Jchernandez",
77757+
"GT"
77758+
]
77759+
},
7763377760
"Web/CSS/Next-sibling_combinator": {
7763477761
"modified": "2020-10-15T21:03:44.777Z",
7763577762
"contributors": [

‎files/en-us/glossary/breadcrumb/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Breadcrumb trails enable users to be aware of their location within a website. T
1818
1919
## See also
2020

21-
- [Breadcrumb Navigation](/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation)
21+
- [Breadcrumb Navigation](/en-US/docs/Web/CSS/How_to/Layout_cookbook/Breadcrumb_navigation)
2222
- [Google Search Central: Breadcrumb Structured Data](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb)
2323
- [APG Guide: Breadcrumb Example](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)
2424
- [Understanding Success Criterion 2.4.8 | W3C Understanding WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/location)

‎files/en-us/learn_web_development/core/css_layout/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ These tutorials are not part of the learning pathway, but they are interesting n
5454

5555
## See also
5656

57-
- [CSS layout cookbook](/en-US/docs/Web/CSS/Layout_cookbook)
57+
- [CSS layout cookbook](/en-US/docs/Web/CSS/How_to/Layout_cookbook)
5858
- : The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used and the choices you can make as a developer.
5959

6060
{{NextMenu("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core")}}

‎files/en-us/learn_web_development/core/styling_basics/organizing/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ However, you do gain a lot of structure by adopting one. Since many of these sys
235235

236236
#### OOCSS
237237

238-
Most of the approaches you will encounter owe something to the concept of Object Oriented CSS (OOCSS), an approach made popular by [the work of Nicole Sullivan](https://github.com/stubbornella/oocss/wiki). The basic idea of OOCSS is to separate your CSS into reusable objects, which can be used anywhere you need on your site. The standard example of OOCSS is the pattern described as [The Media Object](/en-US/docs/Web/CSS/Layout_cookbook/Media_objects). This is a pattern with a fixed size image, video or other element on one side, and flexible content on the other. It's a pattern we see all over websites for comments, listings, and so on.
238+
Most of the approaches you will encounter owe something to the concept of Object Oriented CSS (OOCSS), an approach made popular by [the work of Nicole Sullivan](https://github.com/stubbornella/oocss/wiki). The basic idea of OOCSS is to separate your CSS into reusable objects, which can be used anywhere you need on your site. The standard example of OOCSS is the pattern described as [The Media Object](/en-US/docs/Web/CSS/How_to/Layout_cookbook/Media_objects). This is a pattern with a fixed size image, video or other element on one side, and flexible content on the other. It's a pattern we see all over websites for comments, listings, and so on.
239239

240240
If you are not taking an OOCSS approach you might create a custom CSS for the different places this pattern is used, for example, by creating two classes, one called `comment` with a bunch of rules for the component parts, and another called `list-item` with almost the same rules as the `comment` class except for some tiny differences. The differences between these two components are the list-item has a bottom border, and images in comments have a border whereas list-item images do not.
241241

‎files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ Using CSS, you can control exactly how HTML elements look in the browser, presen
6565
CSS can be used for many purposes related to the look and feel of your web page, for example:
6666

6767
- Text styling, including changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links.
68-
- Creating layouts, such as [grid layouts](/en-US/docs/Learn_web_development/Core/CSS_layout/Grids) or [multiple-column layouts](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts).
68+
- Creating layouts, such as [grid layouts](/en-US/docs/Learn_web_development/Core/CSS_layout/Grids) or [multiple-column layouts](/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts).
6969
- Special effects such as [animation](/en-US/docs/Web/CSS/CSS_animations).
7070

7171
The CSS language is organized into _modules_ that contain related functionality. For example, take a look at the MDN reference pages for the [Backgrounds and Borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module to find out what its purpose is and the properties and features it contains. In our module pages, you will also find links to _Specifications_ that define the technologies.

‎files/en-us/learn_web_development/howto/solve_css_problems/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,4 @@ This page rounds up questions and answers, and other material on the MDN site th
5555
- [Using CSS generated content](/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Generated_content)
5656

5757
> [!NOTE]
58-
> We have a cookbook dedicated to [CSS Layout solutions](/en-US/docs/Web/CSS/Layout_cookbook), with fully working examples and explanations of common layout tasks. Also check out [Practical Positioning Examples](/en-US/docs/Learn_web_development/Core/CSS_layout/Practical_positioning_examples), which shows how you can use positioning to create a tabbed info box, and a sliding hidden panel.
58+
> We have a cookbook dedicated to [CSS Layout solutions](/en-US/docs/Web/CSS/How_to/Layout_cookbook), with fully working examples and explanations of common layout tasks. Also check out [Practical Positioning Examples](/en-US/docs/Learn_web_development/Core/CSS_layout/Practical_positioning_examples), which shows how you can use positioning to create a tabbed info box, and a sliding hidden panel.

‎files/en-us/web/accessibility/aria/reference/attributes/aria-current/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,4 +88,4 @@ Usable in all roles; except for elements with the role of [`gridcell`](/en-US/do
8888

8989
- [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-selected)
9090
- {{cssxref(':local-link')}}
91-
- [Breadcrumb navigation with `aria-current`](/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation)
91+
- [Breadcrumb navigation with `aria-current`](/en-US/docs/Web/CSS/How_to/Layout_cookbook/Breadcrumb_navigation)

‎files/en-us/web/css/css_grid_layout/grid_template_areas/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ Many of the grid examples you will find online make the assumption that you will
324324

325325
### Media object example
326326

327-
As an example, we can create a "[media object](/en-US/docs/Web/CSS/Layout_cookbook/Media_objects)". This is a component with space for an image or other media on one side and content on the other. The image might be displayed on the right or left of the box.
327+
As an example, we can create a "[media object](/en-US/docs/Web/CSS/How_to/Layout_cookbook/Media_objects)". This is a component with space for an image or other media on one side and content on the other. The image might be displayed on the right or left of the box.
328328

329329
![Images showing an example media object design](4_media_objects.png)
330330

‎files/en-us/web/css/how_to/index.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: How to
3+
slug: Web/CSS/How_to
4+
page-type: listing-page
5+
sidebar: cssref
6+
---
7+
8+
This page lists how-to guides for CSS.
9+
10+
{{SubpagesWithSummaries}}

0 commit comments

Comments
 (0)