diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..afc63ba1
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,15 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 00000000..f1b0b948
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,9 @@
+# This file is used to request PR reviews from the appropriate team.
+#
+# Order is important; the last matching pattern takes precedence.
+# Each rule is more specific than the previous rules.
+# For more information, see:
+# https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners
+
+# Default
+* @mdn/core-yari-content
diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
new file mode 100644
index 00000000..5640bef1
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -0,0 +1,36 @@
+name: "Issue report"
+description: Report an unexpected problem or unintended behavior.
+labels: ["needs triage"]
+body:
+ - type: markdown
+ attributes:
+ value: |
+ ### Before you start
+
+ **Want to fix the problem yourself?** This project is open source and we welcome fixes and improvements from the community!
+
+ ↩ Check the project [CONTRIBUTING.md](../blob/main/CONTRIBUTING.md) guide to see how to get started.
+
+ ---
+ - type: textarea
+ id: problem
+ attributes:
+ label: What was incorrect, unhelpful, or incomplete?
+ validations:
+ required: true
+ - type: textarea
+ id: expected
+ attributes:
+ label: What did you expect to see?
+ validations:
+ required: true
+ - type: textarea
+ id: references
+ attributes:
+ label: Do you have any supporting links, references, or citations?
+ description: Link to information that helps us confirm your issue.
+ - type: textarea
+ id: more-info
+ attributes:
+ label: Do you have anything more you want to share?
+ description: For example, steps to reproduce, screenshots, screen recordings, or sample code.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 00000000..5cd3f68e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+ - name: MDN GitHub Discussions
+ url: https://github.com/orgs/mdn/discussions
+ about: Does the issue involve a lot of pages, or are you not sure how it can be split into actionable tasks? Consider starting a discussion first.
+ - name: MDN Web Docs on Discourse
+ url: https://discourse.mozilla.org/c/mdn/learn/250
+ about: Need help with assessments on MDN Web Docs? We have a support community for this purpose on Discourse.
+ - name: Help with code
+ url: https://stackoverflow.com/
+ about: If you are stuck and need help with code, StackOverflow is a great resource.
diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE
new file mode 100644
index 00000000..d85c3d5c
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE
@@ -0,0 +1,21 @@
+
+
+**Description:**
+
+
+
+**Motivation:**
+
+
+
+**Additional details:**
+
+
+
+**Related issues and pull requests:**
+
+
+
+
+
+
diff --git a/.github/workflows/idle-issues.yml b/.github/workflows/idle-issues.yml
new file mode 100644
index 00000000..0daf455a
--- /dev/null
+++ b/.github/workflows/idle-issues.yml
@@ -0,0 +1,10 @@
+name: "Mark issues and pull requests as idle"
+on:
+ schedule:
+ - cron: "49 11,23 * * *"
+
+jobs:
+ idle:
+ uses: mdn/workflows/.github/workflows/idle.yml@main
+ with:
+ target-repo: "mdn/css-examples"
diff --git a/.github/workflows/lock-closed.yml b/.github/workflows/lock-closed.yml
new file mode 100644
index 00000000..33c6a521
--- /dev/null
+++ b/.github/workflows/lock-closed.yml
@@ -0,0 +1,10 @@
+name: "Lock old issues and pull requests"
+on:
+ schedule:
+ - cron: "0 9 1 * *"
+
+jobs:
+ lock:
+ uses: mdn/workflows/.github/workflows/lock-closed.yml@main
+ with:
+ target-repo: "mdn/css-examples"
diff --git a/.github/workflows/new-issues.yml b/.github/workflows/new-issues.yml
new file mode 100644
index 00000000..373f82ca
--- /dev/null
+++ b/.github/workflows/new-issues.yml
@@ -0,0 +1,17 @@
+name: "Mark new issues with needs-triage label"
+
+on:
+ issues:
+ types:
+ - reopened
+ - opened
+
+jobs:
+ label-new-issues:
+ runs-on: ubuntu-latest
+ steps:
+ - name: initial labelling
+ uses: andymckay/labeler@master
+ with:
+ add-labels: "needs triage"
+ ignore-if-assigned: true
diff --git a/.github/workflows/pr-merge-conflicts.yml b/.github/workflows/pr-merge-conflicts.yml
new file mode 100644
index 00000000..f94b9feb
--- /dev/null
+++ b/.github/workflows/pr-merge-conflicts.yml
@@ -0,0 +1,14 @@
+name: "Label PRs with conflicts"
+
+on:
+ push:
+ pull_request_target:
+ types: [synchronize]
+
+jobs:
+ label-merge-conflicts:
+ uses: mdn/workflows/.github/workflows/pr-rebase-needed.yml@main
+ with:
+ target-repo: "mdn/css-examples"
+ secrets:
+ GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.markdownlint-cli2.jsonc b/.markdownlint-cli2.jsonc
new file mode 100644
index 00000000..3395ac2b
--- /dev/null
+++ b/.markdownlint-cli2.jsonc
@@ -0,0 +1,12 @@
+{
+ "config": {
+ "extends": "./.markdownlint.jsonc"
+ },
+ "ignores": [
+ "node_modules",
+ ".git",
+ ".github",
+ "tests",
+ "editable-samples/codemirror"
+ ]
+}
diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc
new file mode 100644
index 00000000..4431899c
--- /dev/null
+++ b/.markdownlint.jsonc
@@ -0,0 +1,8 @@
+// This file defines our configuration for Markdownlint. See
+// https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md
+// for more details on each rule.
+
+{
+ "first-line-heading": false,
+ "line-length": false
+}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..6ca2a321
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+editable-samples/codemirror/**/*
+editable-samples-2/js/
+.markdownlint*
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..9c1044f6
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+ "bracketSameLine": true
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 00000000..f65a45cd
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,60 @@
+# Contribution guide
+
+This repository accompany various CSS documentation pages on [MDN Web Docs](https://developer.mozilla.org).
+This document will help you get started with contributions!
+
+## Types of contribution
+
+> [!NOTE]
+> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks.
+> These methods are simpler to maintain as the code lives beside the rest of the content.
+> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.
+
+There are many ways you can help improve this repository! For example:
+
+- **Write a new example.** If you would like to add a new example, make sure this feature is supported by a stable version of modern browsers.
+- **Improve an existing example.** You could make improvements or add some other changes which would make example more helpful to the users.
+- **Fix a bug:** we have a list of [issues](https://github.com/mdn/css-examples/issues), or maybe you found your own.
+
+## Getting started
+
+You will need to have Git and GitHub set up to be able to contribute.
+
+### Set up Git and GitHub
+
+For more information on setting up Git on your machine, [read this article](https://help.github.com/articles/set-up-git/).
+With the above dependencies satisfied, [create your new account on GitHub](https://github.com/join).
+
+Next up, you need to fork and clone the repo to be able to contribute to it.
+You can [learn about forking on GitHub](https://help.github.com/articles/fork-a-repo).
+Once you have your own fork, [clone it to your local machine](https://help.github.com/articles/cloning-a-repository/).
+
+### Serving
+
+You should serve your example locally to see the results before submitting your changes.
+There are a few different ways to do this depending on your preferred tooling methods.
+See [Running a simple local HTTP server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#running_a_simple_local_http_server) for information on setting up a server.
+
+```bash
+cd my-cool-example
+python3 -m http.server
+```
+
+### Open a pull request
+
+Once you're satisfied, the final step is to [submit your pull request](https://help.github.com/articles/creating-a-pull-request/).
+You can find more information about submitting pull requests in our [Community guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) docs.
+
+### Including your example on MDN
+
+After your pull request is reviewed and merged, you can link to your example from MDN Web Docs.
+For example, the demo is referenced in MDN content like so:
+
+```markdown
+See more examples on the [demo page](https://mdn.github.io/css-examples/counter-style-demo/).
+```
+
+## Thank you
+
+Thanks a lot for your contribution!
+If you'd like to ask questions or get in touch, feel free to drop by in [Discord](https://developer.mozilla.org/discord) or say hello in one of [our communication channels](https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels).
diff --git a/README.md b/README.md
index 6c994e91..fb5301d0 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,11 @@
# css-examples
-This repository contains examples of CSS usage.
+Code examples that accompany various MDN CSS documentation pages.
+
+> [!NOTE]
+> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks.
+> These methods are simpler to maintain as the code lives beside the rest of the content.
+> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.
The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the steps() timing function available for CSS animations and transitions, and the new frames() timing function. [Run the example live](http://mdn.github.io/css-examples/animation-frames-timing-function/). You can also find versions that show the same timing function [used with transitions](http://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html), and used with the [Web Animations API](http://mdn.github.io/css-examples/animation-frames-timing-function/index-waa.html).
@@ -10,10 +15,24 @@ The "moz-context-properties" directory contains a demo for the [-moz-context-pro
The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.
-The "object-fit-basics" directory contains a simple page demonstrating typical usage of different object-fit and object-position values. [Run example live](http://mdn.github.io/css-examples/object-fit-basics/).
+The "object-fit-basics" directory contains a simple page demonstrating typical usage of different `object-fit` and `object-position` values. [Run example live](http://mdn.github.io/css-examples/object-fit-basics/).
-The "object-fit-gallery" directory contains a fun image gallery that uses object-fit to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/).
+The "object-fit-gallery" directory contains a fun image gallery that uses `object-fit` to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/).
-The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different overscroll-behavior values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/).
+The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different `overscroll-behavior` values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/).
The "tools" directory contains various tools for working with CSS, including a [color picker](http://mdn.github.io/css-examples/tools/color-picker/) and a [box shadow generator](http://mdn.github.io/css-examples/tools/box-shadow-generator/).
+
+## Contribute to MDN Web Docs
+
+You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work.
+The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community.
+
+To find out how to get started, see the [CONTRIBUTING.md](CONTRIBUTING.md) document in this repository.
+By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our [Code of Conduct](CODE_OF_CONDUCT.md).
+
+## Get in touch
+
+You can communicate with the MDN Web Docs team and community using the [communication channels][].
+
+[communication channels]: https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels
diff --git a/assets/styles.css b/assets/styles.css
index 11945fee..f46d5bc4 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1,10 +1,10 @@
/* Some default styling for cookbook examples */
/*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/backdrop/index.html b/backdrop/index.html
index 2d9d8474..61df9a65 100644
--- a/backdrop/index.html
+++ b/backdrop/index.html
@@ -20,8 +20,7 @@
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
- width="620"
- >
+ width="620">
Sorry, your browser doesn't support embedded videos. Time to upgrade!
diff --git a/backdrop/script.js b/backdrop/script.js
index 404a2958..3f99bd9b 100644
--- a/backdrop/script.js
+++ b/backdrop/script.js
@@ -36,7 +36,7 @@ function toggleFullscreen() {
if (!document.fullscreenElement) {
elem
.requestFullscreen()
- .then({})
+ .then(() => {})
.catch((err) => {
alert(
`Error attempting to enable full-screen mode: ${err.message} (${err.name})`,
diff --git a/backdrop/styles.css b/backdrop/styles.css
index 11945fee..f46d5bc4 100644
--- a/backdrop/styles.css
+++ b/backdrop/styles.css
@@ -1,10 +1,10 @@
/* Some default styling for cookbook examples */
/*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html
index b1d9394a..0f2aca8a 100644
--- a/box-alignment/flexbox/auto-margins.html
+++ b/box-alignment/flexbox/auto-margins.html
@@ -61,14 +61,14 @@
.box {
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
.box > * {
padding: 20px;
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
diff --git a/css-cookbook/columns-flexbox.html b/css-cookbook/columns-flexbox.html
index cbcd6c5a..f1921840 100644
--- a/css-cookbook/columns-flexbox.html
+++ b/css-cookbook/columns-flexbox.html
@@ -11,14 +11,14 @@
diff --git a/css-cookbook/columns-grid--download.html b/css-cookbook/columns-grid--download.html
index 91349f2d..be9b851e 100644
--- a/css-cookbook/columns-grid--download.html
+++ b/css-cookbook/columns-grid--download.html
@@ -21,7 +21,7 @@
}
.container {
- border: 2px solid rgb(75, 70, 74);
+ border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
padding: 20px;
width: 500px;
@@ -32,7 +32,7 @@
.container > * {
padding: 10px;
- border: 2px solid rgb(95, 97, 110);
+ border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
margin: 0;
}
diff --git a/css-cookbook/columns-grid.html b/css-cookbook/columns-grid.html
index ffbc7af1..75ec4044 100644
--- a/css-cookbook/columns-grid.html
+++ b/css-cookbook/columns-grid.html
@@ -11,7 +11,7 @@
diff --git a/css-cookbook/columns-multicol.html b/css-cookbook/columns-multicol.html
index e8bea1af..b6794a8d 100644
--- a/css-cookbook/columns-multicol.html
+++ b/css-cookbook/columns-multicol.html
@@ -11,7 +11,7 @@
@@ -51,7 +51,7 @@
diff --git a/css-cookbook/grid-wrapper--download.html b/css-cookbook/grid-wrapper--download.html
index 7c5706a0..95dfc3f0 100644
--- a/css-cookbook/grid-wrapper--download.html
+++ b/css-cookbook/grid-wrapper--download.html
@@ -31,7 +31,7 @@
}
.grid > * {
- border: 2px solid rgb(95, 97, 110);
+ border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
}
diff --git a/css-cookbook/grid-wrapper.html b/css-cookbook/grid-wrapper.html
index 166418bb..62802904 100644
--- a/css-cookbook/grid-wrapper.html
+++ b/css-cookbook/grid-wrapper.html
@@ -17,7 +17,7 @@
}
.grid > * {
- border: 2px solid rgb(95, 97, 110);
+ border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
}
diff --git a/css-cookbook/list-group-badges.html b/css-cookbook/list-group-badges.html
index 88bc6dae..fb0a441f 100644
--- a/css-cookbook/list-group-badges.html
+++ b/css-cookbook/list-group-badges.html
@@ -72,7 +72,8 @@
display: flex;
justify-content: space-between;
align-items: center;
-}
+}
+}
+}
-
+}
+}
+}
+}
+}
+}
+
- London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snowflakes—gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers. Foot passengers, jostling one another's umbrellas in a general infection of ill temper, and losing their foot-hold at street-corners, where tens of thousands of other foot passengers have been slipping and sliding since the day broke (if this day ever broke), adding new deposits to the crust upon crust of mud, sticking at those points tenaciously to the pavement, and accumulating at compound interest.
+ London. Michaelmas term lately over, and the Lord Chancellor sitting in
+ Lincoln's Inn Hall. Implacable November weather. As much mud in the
+ streets as if the waters had but newly retired from the face of the
+ earth, and it would not be wonderful to meet a Megalosaurus, forty feet
+ long or so, waddling like an elephantine lizard up Holborn Hill. Smoke
+ lowering down from chimney-pots, making a soft black drizzle, with
+ flakes of soot in it as big as full-grown snowflakes—gone into mourning,
+ one might imagine, for the death of the sun. Dogs, undistinguishable in
+ mire. Horses, scarcely better; splashed to their very blinkers. Foot
+ passengers, jostling one another's umbrellas in a general infection of
+ ill temper, and losing their foot-hold at street-corners, where tens of
+ thousands of other foot passengers have been slipping and sliding since
+ the day broke (if this day ever broke), adding new deposits to the crust
+ upon crust of mud, sticking at those points tenaciously to the pavement,
+ and accumulating at compound interest.
-
+
-
-
-
+