docs(template): Add template for CSS module landing pages #27731

dipikabh · 2023-07-04T02:20:53Z

Description

This PR defines a template for the CSS module landing pages, such as CSS animations and CSS basic user interface.
It also updates the Page types page to add a section and link to the new template

This PR is related to the work being done via openwebdocs/project#147 by @estelle.

Motivation

To define a structure that can be used uniformly to create/update other CSS module landing pages.

Additional details

The template in this PR proposes to elevate the "x in action" section to H2 so that it is available from the in-page "In this article" TOC. If this gets accepted, I can update the module landing pages that have already been worked on.
Similarly, I can go back to check the 'done' module landing pages to see compliance with the template.

github-actions · 2023-07-04T02:22:51Z

Preview URLs

(comment last updated: 2023-07-10 19:06:09)

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md

estelle · 2023-07-06T21:07:13Z

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md

@@ -129,6 +129,27 @@ An **SVG reference page** lists all the attributes that are available on an SVG

 - [SVG element page template](/en-US/docs/MDN/Writing_guidelines/Page_structures/Page_types/SVG_element_page_template)

+## CSS module landing page
+
+Every **[CSS](/en-US/docs/Web/CSS) module** links to a specification that provides support for certain features and implementations in CSS. For example, the specification linked to the [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module describes the margin and padding properties that let you create spacing in and around a CSS box.


Suggested change

Every **[CSS](/en-US/docs/Web/CSS) module** links to a specification that provides support for certain features and implementations in CSS. For example, the specification linked to the [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module describes the margin and padding properties that let you create spacing in and around a CSS box.

Every **[CSS](/en-US/docs/Web/CSS) module** links to a specification that provides support for certain features and implementations in CSS. For example, the specification linked to the [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module describes the margin and padding properties defined in the CSS box model specification that let you create spacing in and around a CSS box.

just want to somehow say a module is a specification, with css1 and css2.X specs not included

^^^ Not quite right "the specification linked to" and "defined in the CSS box model specification" in the same sentence.

Modified the text a bit to add clarity. Is this better (efb00cd)?

Every CSS module represents a CSS specification that provides support for certain features and implementations in CSS. For example, the CSS box model module represents the specification that describes the margin and padding properties that let you create spacing in and around a CSS box.

sounds good

estelle

two suggested things to add, but approving because it's also ok as is.

hamishwillee · 2023-07-10T00:29:48Z

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md

@@ -45,7 +45,7 @@ If the work is more significant, then you should consider a few factors when pri

 If you want to get a team together to work on an update, or you just want to report or discuss some content needing an update, feel free to [file a content issue](https://github.com/mdn/content/issues) or [ask us for help](/en-US/docs/MDN/Community/Communication_channels).

-## The page-type front matter key
+## Front matter key for page types


Why? Given the important subject here is page-type?

I wanted to get rid of the "The" at the beginning of the title. Also because we're not referring to any other front matter keys, it seemed this could be made a bit generic. Reverting in d126142.

It's OK either way. I prefer it the way you reverted, but that doesn't make me right.

No worries! I value your input and didn't want to disturb the reasoning that's gone behind the page type page creation. All good. 👍

hamishwillee · 2023-07-10T00:37:35Z

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md

+A **CSS module landing page** provides an overview of the features that the module provides and lists all the properties, data types, CSS functions, and so on offered by the module. When possible, the CSS module landing page also provides a quick demonstration of what can be achieved using the properties of the module through an interactive example.
+The module landing page serves primarily as a _navigation_ page, but also functions as an at-a-glance _reference_ page for the module.
+
+Some related properties and features that belong in other modules but are closely related to the functionality offered by the module you are documenting can also be covered in a _Related concepts_ section.


Suggested change

Some related properties and features that belong in other modules but are closely related to the functionality offered by the module you are documenting can also be covered in a _Related concepts_ section.

Some related properties and features that belong in other modules, but which are closely related to the functionality offered by the module you are documenting, can also be covered in a _Related concepts_ section.

hamishwillee · 2023-07-10T00:37:43Z

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md

+A **CSS module landing page** provides an overview of the features that the module provides and lists all the properties, data types, CSS functions, and so on offered by the module. When possible, the CSS module landing page also provides a quick demonstration of what can be achieved using the properties of the module through an interactive example.
+The module landing page serves primarily as a _navigation_ page, but also functions as an at-a-glance _reference_ page for the module.
+
+Some related properties and features that belong in other modules but are closely related to the functionality offered by the module you are documenting can also be covered in a _Related concepts_ section.


Suggested change

Some related properties and features that belong in other modules but are closely related to the functionality offered by the module you are documenting can also be covered in a _Related concepts_ section.

Some related properties and features that belong in other modules, but which are closely related to the functionality offered by the module you are documenting, can also be covered in a _Related concepts_ section.

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md

.../mdn/writing_guidelines/page_structures/page_types/css_module_landing_page_template/index.md

dipikabh · 2023-07-10T19:06:00Z

Thanks a lot @estelle and @hamishwillee for reviewing these template changes. Let me know what you think of the updates based on your feedback.

hamishwillee

This is good. Estelle has already approved and noted she was happy, so merging.

dipikabh · 2023-07-12T00:21:13Z

Thanks, Hamish!

dipikabh added 2 commits July 3, 2023 11:54

creates new css template

3355799

updates page types page to link to the new template

0ea9737

dipikabh requested a review from a team as a code owner July 4, 2023 02:20

dipikabh requested review from hamishwillee and removed request for a team July 4, 2023 02:20

github-actions bot added the Content:Meta Content in the meta docs label Jul 4, 2023

dipikabh requested a review from estelle July 4, 2023 02:21

fixes prettier erros

fd39c03

sideshowbarker added the Content:CSS Cascading Style Sheets docs label Jul 4, 2023

estelle reviewed Jul 6, 2023

View reviewed changes

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md Outdated Show resolved Hide resolved

estelle reviewed Jul 6, 2023

View reviewed changes

estelle approved these changes Jul 6, 2023

View reviewed changes

github-actions bot removed the Content:CSS Cascading Style Sheets docs label Jul 10, 2023

hamishwillee reviewed Jul 10, 2023

View reviewed changes

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md Outdated Show resolved Hide resolved

hamishwillee reviewed Jul 10, 2023

View reviewed changes

.../mdn/writing_guidelines/page_structures/page_types/css_module_landing_page_template/index.md Show resolved Hide resolved

fixes review comments

efb00cd

dipikabh force-pushed the css-modland-template branch from 883de40 to efb00cd Compare July 10, 2023 18:41

dipikabh added 3 commits July 10, 2023 14:53

reverts heading

d126142

fixes review comments

372a120

fixes prettier errors

54fcea8

hamishwillee approved these changes Jul 10, 2023

View reviewed changes

hamishwillee merged commit bfdfe97 into mdn:main Jul 10, 2023

dipikabh deleted the css-modland-template branch July 12, 2023 00:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(template): Add template for CSS module landing pages #27731

docs(template): Add template for CSS module landing pages #27731

dipikabh commented Jul 4, 2023 •

edited

Loading

github-actions bot commented Jul 4, 2023 •

edited

Loading

estelle Jul 6, 2023

hamishwillee Jul 10, 2023

dipikabh Jul 10, 2023

estelle Jul 10, 2023

estelle left a comment

hamishwillee Jul 10, 2023

dipikabh Jul 10, 2023

hamishwillee Jul 10, 2023

dipikabh Jul 12, 2023

hamishwillee Jul 10, 2023

hamishwillee Jul 10, 2023

dipikabh commented Jul 10, 2023

hamishwillee left a comment

dipikabh commented Jul 12, 2023

	Every [CSS](/en-US/docs/Web/CSS) module links to a specification that provides support for certain features and implementations in CSS. For example, the specification linked to the [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module describes the margin and padding properties that let you create spacing in and around a CSS box.
	Every [CSS](/en-US/docs/Web/CSS) module links to a specification that provides support for certain features and implementations in CSS. For example, the specification linked to the [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module describes the margin and padding properties defined in the CSS box model specification that let you create spacing in and around a CSS box.

	Some related properties and features that belong in other modules but are closely related to the functionality offered by the module you are documenting can also be covered in a _Related concepts_ section.
	Some related properties and features that belong in other modules, but which are closely related to the functionality offered by the module you are documenting, can also be covered in a _Related concepts_ section.

docs(template): Add template for CSS module landing pages #27731

docs(template): Add template for CSS module landing pages #27731

Conversation

dipikabh commented Jul 4, 2023 • edited Loading

Description

Motivation

Additional details

github-actions bot commented Jul 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dipikabh commented Jul 10, 2023

hamishwillee left a comment

Choose a reason for hiding this comment

dipikabh commented Jul 12, 2023

dipikabh commented Jul 4, 2023 •

edited

Loading

github-actions bot commented Jul 4, 2023 •

edited

Loading