All examples

All examples

Examples to go with the workshop Let's dive into Modern CSS with Hidde de Vries.

Building blocks

Examples

  1. Custom properties - A button with custom properties

  2. Layers - Explicit CSS architecture

  3. Layers - Easier to override third parties

  4. Nesting - Real world nesting opportunities

  5. Container queries - Container queries

Exercises

  1. 101 - Practice specificity

  2. Has - Form feedback with :has()

  3. Custom properties - Financial data

  4. Container queries - Two styles of newsletter signup

Tooltips & toggletips

Examples

  1. Tooltips - Icon button with tooltip

  2. Toggletips - Toggletip with popover

  3. Anchor positioning - Tic tac toe

  4. Anchor positioning - Position try fallbacks

Exercises

  1. Toggletips - Image with alt badge

Selects

Examples

  1. Standard select - Bread selector

  2. Custom selects - Bread selector upgraded

Exercises

Layouts & positioning

Examples

  1. Flexbox - Flexbox example: aligning across main axis

  2. Flexbox - Flexbox example: gaps

  3. Flexbox - Flexbox example: aligning across cross axis

  4. Grid Layout - Grid Layout example 1

  5. Subgrid - Cards in subgrid

  6. Text balance - Text balance

Exercises

  1. Flexbox - Exercise: form layout

  2. Grid Layout - Grid Layout exercise

  3. Flexbox - Exercise: center the cat

Transitions & animations

Examples

  1. View transitions - Books to details

  2. Animation - Animating popover

Exercises