Modern CSS

https://moderncss.dev
Admin
A collection of articles and guides providing in-depth information and tutorials on modern CSS...
Tokens:91,022
Snippets:1,104
Trust Score:9.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Complete HTML Example with Multiple Cards

Source: https://moderncss.dev/css-only-full-width-responsive-images-2-ways

This is a full HTML example demonstrating the card layout with multiple articles, each featuring a responsive background image.

```html
<main>
  <section class="card-row">
    <article class="card">
      <div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/300/500/tech)"></div>
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
    <article class="card">
      <div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/320/240/tech)"></div>
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
    <article class="card">
      <div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/400/200/tech)"></div>
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
  </section>
</main>
```

--------------------------------

### HTML Headings Example

Source: https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale

Displays example HTML headings to visualize the generated font sizes.

```html
<h1>h1: Almost before we knew it, we had left the ground.</h1>
<h2>h2: Almost before we knew it, we had left the ground.</h2>
<h3>h3: Almost before we knew it, we had left the ground.</h3>
<h4>h4: Almost before we knew it, we had left the ground.</h4>
```

--------------------------------

### Navigation Quantity and Style Queries Example

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

A consolidated example demonstrating the use of :has() for quantity queries and nested container queries with style conditions to control navigation menu display.

```css
.navigation__menu:has(:nth-child(6)) {
  --show-menu: true;
}

@container menu (40ch <= inline-size <= 60ch) {
  @container not style(--show-menu: true) {
    .navigation__menu button {
      display: none;
    }

    .navigation__menu ul {
      display: flex;
    }
  }
}
```

--------------------------------

### Basic Grid Container Setup

Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox

Initializes a grid container with a defined gap. This is the foundational step for applying grid layout.

```css
.grid {
  display: grid;
  gap: 1rem;
}
```

--------------------------------

### Combined Pagination Style Query Example

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

This example combines the custom property definition and the nested container style query for the pagination component, demonstrating a complete implementation.

```css
.pagination-container:has(li:nth-child(11)) {
  --show-label: true;
}

@container (min-width: 40ch) {
  @container style(--show-label: true) {
    .pagination-list {
      display: none;
    }

    .pagination-label {
      display: block;
    }
  }
}
```

--------------------------------

### HTML Structure for Grid Examples

Source: https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert

Provides the HTML markup for demonstrating grid auto-flow, centering, and responsive columns.

```html
<ul class="grid-auto-flow">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<div class="center">
  <span>Centered</span>
</div>

<div class="responsive-columns">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
```

--------------------------------

### Define a Layer Order for Project Styles

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

This example shows a common pattern for defining a sequence of cascade layers in a project, from reset to utilities and states.

```css
@layer reset, theme, global, layout, components, utilities, states;
```

--------------------------------

### Example Font Sizes Generated

Source: https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale

Illustrates the resulting font sizes for h1-h4 based on a 'perfectFourth' ratio (1.333).

```text
h4: 1.333rem
h3: 1.776889rem
h2: 2.368593037rem
h1: 3.1573345183rem
```

--------------------------------

### Basic CSS Style Query Example

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

Demonstrates the syntax for a CSS style query, targeting children of a container based on a custom property's value.

```css
@container style(--my-property: true) {
  /* Styles for the container's children */
}
```

--------------------------------

### Variable Width Columns with Flexbox Example

Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox

Demonstrates variable width columns using a combination of fixed and auto flex-basis, with a custom minimum width.

```html
<ul class="list-unstyled" style="--flex-min: 8rem;">
  <li class="flex">
    <strong class="flex--auto">Ice Cream</strong> <span>Butter Pecan</span>
  </li>
  <li class="flex">
    <strong class="flex--auto">Musical Artist</strong>
    <span>Justin Timberlake</span>
  </li>
  <li class="flex">
    <strong class="flex--auto">Painter</strong> <span>Vincent Van Gogh</span>
  </li>
</ul>
```

--------------------------------

### Deconstructed Pancake Flexbox Setup

Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox

Sets up a flex container with items that wrap based on a minimum flex-basis. Useful for uniform item breakpoints.

```css
:root {
  --pancake-min: 20ch;
}

.flex-pancake {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem -0.5rem;

  > * {
    flex: 1 1 var(--pancake-min);
    margin: 0.5rem;
  }
}
```

--------------------------------

### Example HTML with Multiple Cards

Source: https://moderncss.dev/css-only-full-width-responsive-images-2-ways

This HTML demonstrates the card structure within a main section and a card row, showcasing multiple instances of the card component with different images.

```html
<main>
  <section class="card-row">
    <article class="card">
      <img class="card__img" alt="Preview of Whizzbang Widget" src="https://placeimg.com/320/240/tech" />
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
    <article class="card">
      <img class="card__img" alt="Preview of Whizzbang Widget" src="https://placeimg.com/600/300/tech" />
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
    <article class="card">
      <img class="card__img" alt="Preview of Whizzbang Widget" src="https://placeimg.com/200/400/tech" />
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
  </section>
</main>
```

--------------------------------

### HTML Structure for Button Examples

Source: https://moderncss.dev/css-button-styling-guide

Demonstrates various button and link elements styled as buttons, including default, small, and block variations, within different container structures.

```html
<div>
  <a href="javascript:;">Button Link</a>
  <a href="javascript:;" class="button">Button Link</a>
</div>

<div>
  <button role="button">Real Button</button>
  <button class="button" type="button">Real Button</button>
</div>

<div>
  <a href="javascript:;" class="button button--small">Share</a>
  <a href="javascript:;" class="button button--small">Learn More</a>
</div>

<div>
  <a href="javascript:;" class="button button--block">✨ Share on MySpace</a>
</div>

<div class="card">
  <h2>Card</h2>
  <p>A card of wonders.</p>
  <a href="javascript:;" class="button button--small button--centered">Magic</a>
</div>
```

--------------------------------

### Bootstrap Example: Three Equal Columns

Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox

Illustrates a common pattern using Bootstrap's grid system to create equal-width columns that adjust based on viewport size.

```html
<div class="container">
  <div class="row">
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
  </div>
</div>
```

--------------------------------

### Consolidated Card Stateful Styles

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

A combined example demonstrating styles for card focus, link focus, and link hover states using modern CSS selectors.

```css
.card:focus-within {
  outline: 3px solid #b77ad0;
  outline-offset: -6px;
}

.card a:is(:focus, :focus-visible) {
  outline: 1px solid transparent;
}

.card a:is(:hover, :focus-visible) {
  text-decoration: underline;
}
```

--------------------------------

### Navigation Grid Layout Setup

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

Sets up the navigation wrapper using CSS grid, allowing for flexible column sizing. The '1fr' for the menu area enables it to take up available space, crucial for container queries.

```css
.navigation {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
```

--------------------------------

### Basic Container Query Setup

Source: https://moderncss.dev/container-query-units-and-fluid-typography

Define a container with `container-type: inline-size` to enable querying its inline dimension. Child elements can then apply styles based on the container's size using `@container` rules.

```css
.container {
  container-type: inline-size;
}

@container (inline-size > 300px) {
  .container .child {
    padding: 2rem;
  }
}
```

--------------------------------

### CSS Nesting Examples

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

Demonstrates various valid CSS nesting rules including direct children, attribute selectors, and pseudo-classes/elements. Use this for structuring styles within components.

```css
.my-element {
  a {
  }
  
  & a {
  }

  :is(a, button) {
  }

  .button {
  }

  [data-type] {
  }

  + .another-element {
  }
}
```

```css
.my-element {
  [data-type] {
  }

  &[data-type] {
  }
}

/* Results in: */
.my-element [data-type] {
}
.my-element[data-type] {
}
```

```css
.my-element {
  &::before {
  }

  &:hover {
  }
}
```

--------------------------------

### Using currentColor as initial-value for @property

Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property

This example shows how to set 'currentColor' as the initial value for a custom property, which is an exception to the computationally independent rule.

```css
@property --border-color {
  syntax: "<color>";
  inherits: false;
  initial-value: currentColor;
}

h2 {
  color: blue;
  border: 3px solid var(--border-color);
}
```

--------------------------------

### Pagination Style Query Setup

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

Define a custom property '--show-label' on the pagination container when it has more than 10 list items, acting as a toggle for conditional styling.

```css
.pagination-container:has(li:nth-child(11)) {
  --show-label: true;
}
```

--------------------------------

### CSS Cascade Example

Source: https://moderncss.dev/how-custom-property-values-are-computed

Demonstrates how specificity and cascade order determine the cascaded value for a property when multiple rules apply to the same element.

```css
body {
  color: #222;
}

h2 {
  color: #74e;
}

.card__title {
  color: #93b;
}
```

--------------------------------

### HTML Structure for Flexbox and Grid Demos

Source: https://moderncss.dev/equal-height-elements-flexbox-vs-grid

This HTML demonstrates the structure for both flexbox and grid layouts, including examples with a fixed number of columns per row (`col-3`).

```html
<div class="container flexbox">
  <div class="column">
    <div class="element">
      <p> Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>

    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
</div>

<div class="container grid">
  <div class="column">
    <div class="element">
      <p>Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>

    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
</div>

<div class="container flexbox col-3">
  <div class="column">
    <div class="element">
      <p>flexbox col-3: Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Soufflé tart pie lemon drops gummi bears lollipop dessert sesame snaps. Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
</div>

<div class="container grid col-3">
  <div class="column">
    <div class="element">
      <p>grid col-3: Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Soufflé tart pie lemon drops gummi bears lollipop dessert sesame snaps. Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
</div>
```

--------------------------------

### CSS Cascade Fallback Example

Source: https://moderncss.dev/how-custom-property-values-are-computed

Demonstrates how invalid property assignments fall back to cascaded values when applicable.

```css
/* Used due to the cascade */
p { color: blue }

/* Invalid as a "color", thrown out by the browser */
.card p { color: #notacolor; }
```

--------------------------------

### HTML Structure for Multiple Select

Source: https://moderncss.dev/custom-select-styles-with-pure-css

Example HTML for a multiple select input, including the 'multiple' attribute and a custom class for styling.

```html
<label for="multi-select">Multiple Select</label>
<div class="select select--multiple">
  <select id="multi-select" multiple>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
    <option value="Option 4">Option 4</option>
    <option value="Option 5">Option 5</option>
    <option value="Option length">
      Option that has too long of a value to fit
    </option>
  </select>
  <span class="focus"></span>
</div>
```

--------------------------------

### HTML Structure for Buttons and Icon Buttons

Source: https://moderncss.dev/icon-button-css-styling-guide

Demonstrates the HTML structure for various button types, including standard buttons, small buttons, real buttons, and icon-only buttons. These examples showcase the use of 'a' tags and 'button' elements with specific classes.

```HTML
<div>
  <a href="javascript:;" class="button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="button__icon">
      <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
    </svg>
    Button Link
  </a>
</div>

<div>
  <a href="javascript:;" class="button button--small"><span class="button__icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="button__icon">
        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
      </svg>
    </span>
    Button Link
  </a>
</div>

<div>
  <button class="button" type="button">Real Button <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="button__icon button__icon--end">
      <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
    </svg></button>
</div>

<div>
  <a href="javascript:;" class="button icon-button" aria-label="Icon-only Button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" class="icon-button__icon" aria-hidden="true" focusable="false">
      <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
    </svg>
  </a>
</div>
```

--------------------------------

### CSS @property for Theming with Style Queries

Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property

This example shows how @property can be used to define a theme property with a specific syntax and initial value. It then demonstrates using a container style query to apply styles based on the theme's value.

```css
@property --theme {
  syntax: "light | dark";
  inherits: true;
  initial-value: light;
}

:root {
  --theme: dark;
}

@container style(--theme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
```

--------------------------------

### Opt-in to Browser UI Adaptation with color-scheme

Source: https://moderncss.dev/12-modern-css-one-line-upgrades

Allows the browser to adapt UI elements like form controls and scrollbars to a light or dark theme. This example prefers a dark theme.

```css
:root {
	color-scheme: dark light;
}
```

--------------------------------

### Detailed CSS for Fluid Typography Mixin

Source: https://moderncss.dev/container-query-units-and-fluid-typography

A comprehensive CSS example demonstrating fluid typography for headings, including base sizes, fluid growth values, and the application of the fluid mixin with container query support.

```css
:root {
  --h1-base: 1.75rem;
  --h2-base: 1.5rem;
  --h3-base: 1.35rem;
  --h4-base: 1.15rem;
}

h1,
.h1 {
  --font-size-base: var(--h1-base);

  font-size: var(--h1-base);
}

h2,
.h2 {
  --font-size-base: var(--h2-base);
  --font-size-fluid: 2.5cqi;

  font-size: var(--h2-base);
}

h3,
.h3 {
  --font-size-base: var(--h3-base);
  --font-size-fluid: 2.25cqi;

  font-size: var(--h3-base);
}

h4,
.h4 {
  --font-size-base: var(--h4-base);
  --font-size-fluid: 2cqi;

  font-size: var(--h4-base);
}

@supports (font-size: 1cqi) {
  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) {
    font-size: calc(var(--font-size-base) + var(--font-size-fluid, 3cqi));
  }
}
```

--------------------------------

### Setup Custom Properties for Headlines

Source: https://moderncss.dev/container-query-units-and-fluid-typography

Define base font sizes for headline levels 1-4 using custom properties. Each headline rule also updates a `--font-size` custom property for use in mixin rules.

```css
:root {
  --headline-1: 2.75rem;
  --headline-2: 2.35rem;
  --headline-3: 1.5rem;
  --headline-4: 1.15rem;
}

h1,
.h1 {
  --font-size: var(--headline-1);

  font-size: var(--headline-1);
}

h2,
.h2 {
  --font-size: var(--headline-2);

  font-size: var(--headline-2);
}

h3,
.h3 {
  --font-size: var(--headline-3);

  font-size: var(--headline-3);
}

h4,
.h4 {
  --font-size: var(--headline-4);

  font-size: var(--headline-4);
}
```

--------------------------------

### Complete CSS for Card Component and Layout

Source: https://moderncss.dev/css-only-full-width-responsive-images-2-ways

This comprehensive CSS includes basic resets, body styling for centering, and styles for the card row and individual card components. It sets up the layout and appearance for the responsive image examples.

```css
/* Learn more and about the alternate solution:
// @link https://moderncss.dev/css-only-full-width-responsive-images-2-ways/
*/

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Baloo 2", sans-serif;
  background-color: #f9f9f9;
}

main {
  padding: 2rem;
}

.card-row {
  display: grid;
  grid-gap: 2rem;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
}

.card {
  border: 1px solid #c9c9c9;
  border-radius: 7px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card__content {
  padding: 20px;
}

.card__img {
  object-fit: cover;
  height: 30vh;
}
```

--------------------------------

### Set Text Alignment for Start

Source: https://moderncss.dev/developing-for-imperfect-future-proofing-css-styles

Use the `text-align: start` logical property to ensure text aligns correctly regardless of the content's direction (LTR or RTL). This property will automatically adjust to `right` for RTL text.

```css
.comment {
  text-align: start;
}
```

--------------------------------

### CSS Specificity Example

Source: https://moderncss.dev/guide-to-advanced-css-selectors-part-one

Demonstrates how selector specificity affects the applied color. The selector with the ID has higher specificity and overrides others.

```html
<div id="specific">
  <span class="item">Item</span>
</div>
```

```css
#specific .item {
  color: red;
}

span.item {
  color: green;
}

.item {
  color: blue;
}
```

--------------------------------

### Body Styling for Layout

Source: https://moderncss.dev/custom-select-styles-with-pure-css

Sets up the body with a minimum height, centers content using CSS Grid, and applies a font and background color. Useful for demo pages.

```css
body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-gap: 0.5rem;
  font-family: "Baloo 2", sans-serif;
  background-color: #e9f2fd;
  padding: 1rem;
}
```

--------------------------------

### Using calc() with <length-percentage> for initial-value

Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property

This snippet illustrates using calc() with viewport units within a <length-percentage> syntax for the initial-value of a @property, allowing for dynamic behavior.

```css
@property --heading-font-size {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: calc(18px + 1.5vi);
}

/* In practice, define your ideal sizing function
using `clamp()` via an assignment on `:root` */

h2 {
  font-size: var(--heading-font-size);
}
```

--------------------------------

### Define Type Ratio

Source: https://moderncss.dev/container-query-units-and-fluid-typography

Set the `--type-ratio` custom property to establish the base ratio for font size scaling. This example uses a 'perfect fourth' ratio.

```css
:root {
  /* Perfect Fourth */
  --type-ratio: 1.33;
}
```

--------------------------------

### CSS Box Model Calculation Example

Source: https://moderncss.dev/guide-to-advanced-css-selectors-part-one

Illustrates how `box-sizing: border-box` affects the calculation of an element's width. With `border-box`, the padding is included within the specified width.

```css
.box {
  width: 200px;
  padding: 10px;
}
```

--------------------------------

### Initial Fluid Typography Mixin with Clamp

Source: https://moderncss.dev/container-query-units-and-fluid-typography

Sets up a fluid font size using clamp, with a default container query unit for the preferred size. Use when you need font sizes to scale with container dimensions.

```css
@supports (font-size: 1cqi) {
  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) {
    font-size: clamp(
      /* TODO: define a minimum size */,
      var(--font-size-fluid, 5cqi),
      var(--font-size)
    );
  }
}
```

--------------------------------

### Standard Use of Custom Properties

Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property

Demonstrates the basic usage of CSS custom properties to define and apply a color.

```css
:root {
  --color-blue: blue;
}

.color-blue {
  color: var(--color-blue);
}

```

--------------------------------

### Set Scroll Margin with scroll-margin-top

Source: https://moderncss.dev/12-modern-css-one-line-upgrades

Adds an offset to an element in the context of scroll position, useful for sticky navigation. This example sets a default offset for any element with an ID.

```css
[id] {
	scroll-margin-top: 2rem;
}
```

--------------------------------

### HTML Structure for Responsive Layouts

Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox

This HTML structure sets up navigation, a main content area, and lists of cards. It includes classes for grid, flex, and flex-pancake layouts, along with inline styles for minimum sizing. Use this as a base for applying different responsive techniques.

```html
<header>
  <h1>Dashboard</h1>
</header>
<nav>
  <span class="site-id">ACME Corp</span>
  <ul class="list-unstyled">
    <li><a href="javascript:;">Nav A</a></li>
    <li><a href="javascript:;">Nav B</a></li>
    <li><a href="javascript:;">Nav C</a></li>
  </ul>
</nav>
<main>
  <ul class="list-unstyled grid">
    <li class="card grid" style="--grid-min: 15ch;">
      <p>Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon. </p>
      <p>Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.</p>
    </li>
    <li class="card"></li>
    <li class="card"></li>
  </ul>

  <ul class="list-unstyled flex">

    <li class="card">
      <div class="flex" style="--flex-min: 18rem;">
        <p>Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon. </p>
        <p>Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.</p>
      </div>
    </li>
    <li class="card">
      <h3>Using `.flex--auto` on titles</h3>
      <ul class="list-unstyled" style="--flex-min: 8rem;">
        <li class="flex"><strong class="flex--auto">Ice Cream</strong> <span>Butter Pecan</span></li>
        <li class="flex"><strong class="flex--auto">Musical Artist</strong> <span>Justin Timberlake</span></li>
        <li class="flex"><strong class="flex--auto">Painter</strong> <span>Vincent Van Gogh</span></li>
      </ul>
    </li>
    <li class="card" style="--flex-min: 40rem;">
      <h3 class="flex">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="icon flex--auto">
          <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
        </svg>
        <span style="--flex-min: 15rem;">
          Card Header Of A Longish Nature
        </span>
      </h3>
      <ul class="list-unstyled" style="--flex-min: 15rem;">
        <li class="flex"><strong>Ice Cream</strong> <span>Butter Pecan</span></li>
        <li class="flex"><strong>Musical Artist</strong> <span>Justin Timberlake</span></li>
        <li class="flex"><strong>Painter</strong> <span>Vincent Van Gogh</span></li>
      </ul>
    </li>
  </ul>

  <ul class="list-unstyled flex-pancake">
    <li class="card">
      <div class="flex-pancake" style="--pancake-min: 15ch;">
        <p>Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon. </p>
        <p>Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.</p>
      </div>
    </li>
    <li class="card">
      <h3>Using `.flex--auto` on titles</h3>
      <ul class="list-unstyled" style="--pancake-min: 8ch;">
        <li class="flex-pancake"><strong class="flex--auto">Ice Cream</strong> <span>Butter Pecan</span></li>
        <li class="flex-pancake"><strong class="flex--auto">Musical Artist</strong> <span>Justin Timberlake</span></li>
        <li class="flex-pancake"><strong class="flex--auto">Painter</strong> <span>Vincent Van Gogh</span></li>
      </ul>
    </li>
    <li class="card">
      <h3 class="flex-pancake">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="icon flex--auto">
          <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
        </svg>
        <span style="--pancake-min: 15ch;">
          Card Header Of A Longish Nature
        </span>
      </h3>
      <ul class="list-unstyled" style="--pancake-min: 11ch;">
        <li class="flex-pancake"><strong>Ice Cream</strong> <span>Butter Pecan</span></li>
        <li class="flex-pancake"><strong>Musical Artist</strong> <span>Justin Timberlake</span></li>
        <li class="flex-pancake"><strong>Painter</strong> <span>Vincent Van Gogh</span></li>
      </ul>
    </li>
  </ul>
</main>
```

--------------------------------

### Responsive Main Element Sizing and Spacing

Source: https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max

Applies min() to cap the width of a main element and max() to ensure minimum top margin, adapting to viewport size.

```css
main {
  // Responsively cap width
  width: min(60ch, 100vw - 2rem);
  // Responsively allow a greater distance on taller viewports
  margin-top: max(8vh, 2rem);
  margin-right: auto;
  margin-left: auto;
}
```

--------------------------------

### Responsive Triangle Styles with CSS

Source: https://moderncss.dev/pure-css-shapes-3-ways

Includes general body and triangle styling, with specific styles for border, gradient, and clip-path methods to create responsive triangles.

```css
* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-content: center;
  grid-gap: 2rem;
  min-height: 100vh;
  padding: 2rem;

  @media (min-width: 40em) {
    grid-auto-flow: column;
  }
}

.triangle {
  display: grid;
  place-content: center;
  width: 30vw;
  height: 30vw;
  border: 1px dashed #777;

  &::after {
    content: "";
  }

  &::before {
    content: attr(data-type);
    position: absolute;
    padding: 0.15em 0.25em;
    background-color: #777;
    color: #fff;
  }
}

.border::after {
  border-style: solid;
  border-color: transparent;
  border-width: 3vw 0 3vw 5vw;
  border-left-color: blue;
}

$t: rgba(white, 0);

.gradient::after {
  width: 5vw;
  height: 6vw;
  background-image: linear-gradient(32deg, blue 50%, $t 50%),
    linear-gradient(148deg, blue 50%, $t 50%);
  background-position: top left, bottom left;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

// Make clip-paths easy with
// @link https://bennettfeely.com/clippy/
.clip-path::after {
  width: 5vw;
  height: 6vw;
  background-color: blue;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}


```

--------------------------------

### Initialize Level Size Variable

Source: https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale

Initialize a variable to hold the current heading level's font size, starting with the base font size. This variable will be updated within the loop.

```scss
$level-size: $type-base-size;
```

--------------------------------

### Define Adaptive Padding with clamp()

Source: https://moderncss.dev/contextual-spacing-for-intrinsic-web-design

Use clamp() with percentages and rem units to create responsive padding values that adapt to the element's inline size. This provides a more flexible alternative to fixed pixel values.

```css
:root {
  --padding-sm: clamp(1rem,    3%, 1.5rem);
  --padding-md: clamp(1.5rem,  6%,   3rem);
  --padding-lg: clamp(3rem,   12%,   6rem);
}
```

--------------------------------

### HTML Structure for Footer Demo

Source: https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid

Basic HTML structure including header, main content, and footer elements.

```html
<header>
  <h1>Hello World</h1>
</header>
<main>
  <p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
</main>
<footer>
  <p>&copy; ACME</p>
</footer>
```

--------------------------------

### HTML Structure for Radio Buttons

Source: https://moderncss.dev/pure-css-custom-styled-radio-buttons

Two common HTML structures for radio buttons: input wrapped in label, or input and label as siblings using `for` attribute. The example uses the input-wrapped-in-label approach.

```html
<label>
  <input type="radio" name="radio" />
  Radio label text
</label>
```

```html
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Radio label text</label>
```

```html
<label class="form-control">
  <input type="radio" name="radio" />
  Radio
</label>

<label class="form-control">
  <input type="radio" name="radio" />
  Radio - checked
</label>
```

--------------------------------

### Fluid Typography using cqi

Source: https://moderncss.dev/container-query-units-and-fluid-typography

Use `clamp()` with `cqi` units to create fluid font sizes that respond to container dimensions. This example sets a fluid font size for an element with the class `fluid-type`.

```css
.fluid-type {
  font-size: clamp(1rem, 4cqi, 3rem);
}
```

--------------------------------

### Basic Navigation Container Styles

Source: https://moderncss.dev/css-only-accessible-dropdown-navigation-menu

Sets up the main navigation container as a grid and removes default list styles. This forms the foundation for the navigation structure.

```css
nav {
  background-color: #eee;
  padding: 0 1rem;
  display: grid;
  place-items: center;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;

    li {
      padding: 0;
    }
  }
}
```

--------------------------------

### Label Grid Layout

Source: https://moderncss.dev/pure-css-custom-checkbox-style

Configures the label to use CSS grid layout, enabling alignment of the input and label text with a defined gap. This setup is crucial for positioning the custom checkbox relative to its text.

```css
.form-control {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}
```

--------------------------------

### Responsive Container Width with Min()

Source: https://moderncss.dev/contextual-spacing-for-intrinsic-web-design

Create a responsive container that adjusts its width based on viewport size and a maximum character width. Margin auto centers the container.

```css
.container {
  width: min(100vw - 3rem, 80ch);
  margin-inline: auto;
}
```

--------------------------------

### Basic Content HTML Structure

Source: https://moderncss.dev/pure-css-smooth-scroll-back-to-top

Sets up the semantic HTML for a page, including a header with an ID for the top anchor and a 'back to top' link.

```html
<header id="top">Title</header>
<main>
  <article>
    <!-- long form content here -->
  </article>
  <!-- Back to Top link -->
  <div class="back-to-top-wrapper">
    <a href="#top" class="back-to-top-link" aria-label="Scroll to Top">🔝</a>
  </div>
</main>
```

--------------------------------

### Show Link List and Hide Menu Button

Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture

Uses a container query on the 'menu' container to display the link list and hide the 'Menu' button when the inline size reaches 60 characters. This adapts the navigation for larger spaces.

```css
@container menu (inline-size >= 60ch) {
  .navigation__menu button {
    display: none;
  }

  .navigation__menu ul {
    display: flex;
  }
}
```

--------------------------------

### Using @supports for initial-value fallback

Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property

This demonstrates how to use @supports to conditionally define an initial-value for a @property based on browser support for a specific feature.

```css
@supports ([property|feature]) {
  /* Feature is supported, use for initial-value */
}

@supports not ([property|feature]) {
  /* Feature unsupported, use alternate for initial-value */
}
```

--------------------------------

### Fluid Typography with Clamp and Container Query Units

Source: https://moderncss.dev/container-query-units-and-fluid-typography

Implements fluid typography using `clamp()` with container query units (`cqi`) and CSS variables for dynamic font sizing based on container dimensions. This approach ensures text scales smoothly within its container.

```css
font-size: clamp(
  max(var(--body-font-size), var(--_font-min)),
  var(--_font-min) + 1cqi,
  var(--font-size)
);
}
```

--------------------------------

### Apply Button Size and Spacing

Source: https://moderncss.dev/css-button-styling-guide

Sets padding, minimum width, and minimum height for buttons. Uses relative units for responsive sizing and ensures adequate touch target size.

```css
a.button,
button.button {
  // ... existing styles
  padding: 0.25em 0.75em;
  min-width: 10ch;
  min-height: 44px;
}
```

--------------------------------

### Adjusting Font Size Ratio with Calc

Source: https://moderncss.dev/container-query-units-and-fluid-typography

Demonstrates how to adjust the base font size for a specific level using `calc()` and CSS variables. This is useful for fine-tuning the type scale ratio when it might be too close to the body copy size.

```css
--font-size-4: calc((var(--body-font-size) + 0.25rem) * var(--type-ratio));
```

--------------------------------

### Define a list of valid colors for --color-blue

Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property

This example shows how to use a list of custom idents within the syntax descriptor of @property to restrict the --color-blue custom property to accept only 'blue', 'cyan', or 'dodgerblue'. Invalid values will fall back to the initial-value.

```css
@property --color-blue {
  syntax: "blue | cyan | dodgerblue";
  inherits: true;
  initial-value: blue;
}

.color-blue {
  color: var(--color-blue);
}

.demo p {
  --color-blue: dodgerblue;
}

```

--------------------------------

### CSS Grid Techniques Implementation

Source: https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert

Implements CSS Grid for auto-flow columns, content centering, and responsive column layouts using `repeat(auto-fit, minmax(...))`.

```css
:root {
  --grid-col-breakpoint: 10rem;
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1rem;

  list-style: none;
  margin: 0;
  padding: 0;

  li {
    outline: 1px dashed red;
  }
}

.center {
  display: grid;
  place-content: center;

  width: 90vw;
  height: 30vh;
  outline: 1px dashed blue;
}

.responsive-columns {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--grid-col-breakpoint), 1fr)
  );
  grid-gap: 1rem;

  width: 90vw;

  span {
    outline: 1px dashed green;
  }
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Baloo 2", sans-serif;
  font-size: 3rem;
}
```

--------------------------------

### Base Gallery Styles

Source: https://moderncss.dev/responsive-image-gallery-with-animated-captions

Initial CSS to remove list styles, set up the gallery as a grid container, and ensure images fit within their grid columns.

```css
.gallery {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
  gap: 1rem;
}

.gallery img {
  display: block;
  width: 100%;
}
```

--------------------------------

### Fit-Content with Prefixed Properties

Source: https://moderncss.dev/testing-feature-support-for-modern-css

Demonstrates using `width: fit-content` with vendor prefixes (`-webkit-`, `-moz-`) for broader compatibility. The unprefixed version is listed last to be used when supported.

```css
.example {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
```
Tokens:
Raw