Skip to content

Commit

Permalink
chore(css): Move CSS examples - Basic shapes, filter effects, module …
Browse files Browse the repository at this point in the history 
…template, paint API (mdn#36770)

* chore(css): Move CSS examples - ellipse basic shape

* chore(css): Move CSS examples - CSS shapes

* chore(css): Move CSS examples - circle basic shape

* chore(css): Move CSS examples - Using dynamic styling information

* chore(css): Move CSS examples - Box alignment for block, absolutely positioned, and table layouts

* chore(css): Move CSS examples - CSS paint()

* chore(css): Move CSS examples - CSS Painting API

* chore(css): Move CSS examples - Web/CSS/CSS_filter_effects

* chore(css): Move CSS examples - CSS module landing page template

* chore(css): Move CSS examples - CSS media queries walkthrough

* chore(css): Move CSS examples - CSS RWD

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/learn/css/css_layout/media_queries/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/learn/css/css_layout/media_queries/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
  • Loading branch information
@bsmth @estelle
bsmth and estelle authored Nov 15, 2024
1 parent a626007 commit ca6d4f6
Show file tree
Hide file tree
Showing 11 changed files with 942 additions and 180 deletions.
284 changes: 209 additions & 75 deletions files/en-us/learn/css/css_layout/media_queries/index.md
View file

Large diffs are not rendered by default.

259 changes: 246 additions & 13 deletions files/en-us/learn/css/css_layout/responsive_design/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,72 @@ In the example below the flex items will each take an equal amount of space in t
}
```

> [!NOTE]
> As an example, we have built a simple responsive layout above using flexbox. We use a breakpoint to switch to multiple columns when the screen grows, and limit the size of the main content with {{cssxref('max-width')}}: [example](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), [source code](https://github.com/mdn/css-examples/blob/main/learn/rwd/flex-based-rwd.html).
Here's how we could use flexbox with a media query for responsive design.

```html live-sample___flex-based-rwd
<div class="wrapper">
<div class="col1">
<p>
This layout is responsive. See what happens if you make the browser window
wider or narrow.
</p>
</div>
<div class="col2">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of
millions of people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact.
</p>
</div>
</div>
```

```css hidden live-sample___flex-based-rwd
body {
font: 1.2em / 1.5 sans-serif;
margin: 20px;
padding: 0;
background-color: #eee;
}
.wrapper {
max-width: 960px;
margin: 2em auto;
}

.col1,
.col2 {
background-color: #fff;
}
```

```css live-sample___flex-based-rwd
@media screen and (min-width: 600px) {
.wrapper {
display: flex;
}

.col1 {
flex: 1;
margin-right: 5%;
}

.col2 {
flex: 2;
}
}
```

{{EmbedLiveSample("flex-based-rwd", "", "550px")}}

Resize your screen. The layout will change when the size of the above example crosses the 600px width threshold.

### CSS grid

Expand All @@ -149,8 +213,63 @@ In CSS grid layout the `fr` unit allows the distribution of available space acro
}
```

> [!NOTE]
> The grid layout version is even simpler as we can define the columns on the .wrapper: [example](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), [source code](https://github.com/mdn/css-examples/blob/main/learn/rwd/grid-based-rwd.html).
Here's how we could use grid layout with a media query for responsive design.

```html live-sample___grid-based-rwd
<div class="wrapper">
<div class="col1">
<p>
This layout is responsive. See what happens if you make the browser window
wider or narrow.
</p>
</div>
<div class="col2">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of
millions of people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact.
</p>
</div>
</div>
```

```css hidden live-sample___grid-based-rwd
body {
font: 1.2em / 1.5 sans-serif;
margin: 20px;
padding: 0;
background-color: #eee;
}
.wrapper {
max-width: 960px;
margin: 2em auto;
}

.col1,
.col2 {
background-color: #fff;
}
```

```css live-sample___grid-based-rwd
@media screen and (min-width: 600px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 5%;
}
}
```

{{EmbedLiveSample("grid-based-rwd", "", "550px")}}

## Responsive images/media

Expand Down Expand Up @@ -206,16 +325,77 @@ h1 {

We have edited our responsive grid example above to also include responsive type using the method outlined. You can see how the heading switches sizes as the layout goes to the two column version.

On mobile the heading is smaller:
On mobile the heading is smaller, but on desktop, we see the larger heading size:

```html live-sample___type-rwd
<div class="wrapper">
<div class="col1">
<p>
This layout is responsive. See what happens if you make the browser window
wider or narrow.
</p>
</div>
<div class="col2">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of
millions of people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact.
</p>
</div>
</div>
```

![A stacked layout with a small heading size.](mdn-rwd-font-mobile.png)
```css live-sample___type-rwd
html {
font-size: 1em;
}

body {
font:
1.2em Helvetica,
Arial,
sans-serif;
margin: 20px;
padding: 0;
background-color: #eee;
}
.wrapper {
max-width: 960px;
margin: 2em auto;
}

h1 {
font-size: 2rem;
margin: 0;
}

On desktop, however, we see the larger heading size:
.col1,
.col2 {
background-color: #fff;
}

@media screen and (min-width: 600px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 5%;
}

![A two column layout with a large heading.](mdn-rwd-font-desktop.png)
h1 {
font-size: 4rem;
}
}
```

> [!NOTE]
> See this example in action: [example](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [source code](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-rwd.html).
{{EmbedLiveSample("type-rwd", "", "550px")}}

As this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. They can be used to tweak any element to make it more usable or attractive at alternate screen sizes.

Expand All @@ -235,14 +415,67 @@ There is a solution, and it involves using [`calc()`](/en-US/docs/Web/CSS/calc).

```css
h1 {
font-size: calc(1.5rem + 3vw);
font-size: calc(1.5rem + 4vw);
}
```

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

> [!NOTE]
> See an example of this in action: [example](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [source code](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-vw.html).
```html live-sample___type-vw
<div class="wrapper">
<div class="col1">
<h1>Watch my size!</h1>
<p>
This layout is responsive. See what happens if you make the browser window
wider or narrow.
</p>
</div>
<div class="col2">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
</div>
</div>
```

```css live-sample___type-vw
body {
font: 1.2em / 1.5 sans-serif;
margin: 20px;
padding: 0;
background-color: #eee;
}

.wrapper {
max-width: 960px;
margin: 2em auto;
}

h1 {
font-size: calc(1.5rem + 4vw);
margin: 0;
}

.col1,
.col2 {
background-color: #fff;
}

@media screen and (min-width: 600px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 5%;
}
}
```

{{EmbedLiveSample("type-vw", "", "550px")}}

## The viewport meta tag

Expand Down
17 changes: 10 additions & 7 deletions ...guidelines/page_structures/page_types/css_module_landing_page_template/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,21 @@ page-type: mdn-writing-guide
> This will be formatted as `Web/CSS/CSS_NameOfTheModule`.
> For example, the slug for the [grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module landing page is `Web/CSS/CSS_grid_layout`.
> - **page-type**
> - : The `page-type` value for CSS module landing pages is `css-module`.
> - : The `page-type` value for CSS module landing pages is always `css-module`.
> - **spec-urls**
>
> - : The `spec-urls` value is a URL of the specification. In case there is more than one version of the specification that is relevant, present them in a bulleted list. For example, the value for `spec-urls` key for the [filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module landing page is:
>
> ```plain
> - `https://drafts.fxtf.org/filter-effects-2/`
> - `https://drafts.fxtf.org/filter-effects-1/`
> - https://drafts.fxtf.org/filter-effects-2/
> - https://drafts.fxtf.org/filter-effects-1/
> ```
>
> ---
>
> **Top-of-page macros**
>
> The `\{{CSSRef}}` macro call appears at the top of the content section (immediately below the page front matter).
> The `\{{CSSRef}}` macro call appears at the top of the content section (immediately after the page front matter).
> This macro must be present on every CSS module landing page. It generates a suitable CSS sidebar, depending on the tags included on the page.
> Remove the `\{{MDNSidebar}}` macro when you use this template.
>
Expand All @@ -62,10 +62,13 @@ This should ideally be one or two short sentences.
## NameOfTheModule in action
In this section, include an interactive example of the module that helps to demonstrate the usefulness or the power of various properties provided by this module. The purpose of this section is to demonstrate a few use cases and to create interest and curiosity in the mind of the readers learning about this module.
In this section, include an example that helps demonstrate the usefulness or the power of various properties provided by this module.
The purpose of this section is to demonstrate a few use cases and to create interest and curiosity in the mind of the readers learning about this module.
Provide a short description of how readers can interact with the example. Don't go into a lot of detail to explain the example, and don't include code snippets. Add a link to the source code for the example in the [`css-examples`](https://github.com/mdn/css-examples/tree/main/modules) repository. For example, for the filter effects module interactive example, you would say:
"To see the code for this example, [view the source on GitHub](https://github.com/mdn/css-examples/blob/main/modules/filters.html)."
Provide a short description of how readers can interact with the example.
Don't go into a lot of detail to explain the example, and don't include code snippets.
Add a live sample that demonstrates the feature using `\{{EmbedLiveSample}}` (see [Live examples](/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples) documentation for more information).
## Reference
Expand Down
39 changes: 17 additions & 22 deletions files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,27 @@ To get to the `style` objects from the `document`, you can use the {{domxref("Do

## Modify a stylesheet rule with CSSOM

In this example the background of the page is set to red using CSS. The JavaScript then accesses the property using the CSSOM and changes the background to blue.
In this example the background of the page is set to `red` using CSS. The JavaScript then accesses the property using the CSSOM and changes the background to `cornflowerblue`.

```html
<html lang="en">
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style>
body {
background-color: red;
}
</style>
<script>
const stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].style.backgroundColor = "aqua";
</script>
</head>
<body>
The stylesheet declaration for the body's background color is modified via
JavaScript.
</body>
</html>
```html live-sample___modify-rule
<p>The stylesheet declaration for the body is modified via JavaScript.</p>
```

### Result
```css live-sample___modify-rule
body {
background-color: red;
font: 1.2em / 1.5 sans-serif;
color: white;
padding: 1em;
}
```

```js live-sample___modify-rule
const stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor = "cornflowerblue";
```

{{EmbedGHLiveSample("css-examples/cssom/modify-rule.html", '100%', 120)}}
{{EmbedLiveSample("modify-rule")}}

The list of properties available in the DOM from the `style` property is given on the [DOM CSS Properties List](/en-US/docs/Web/CSS/Reference) page.

Expand Down
Loading

0 comments on commit ca6d4f6

Please sign in to comment.