CSS Projects
Responsive CSS Project
Combine tokens, fluid sizing, Grid, Flexbox, container queries, theming, and reduced-motion handling in one page. The project combines tokens, layers, fluid sizing, Grid, container queries, theming, focus treatment, content stress tests, and user preferences.
A responsive CSS project is successful when components respond to content and available space while preserving document order, keyboard access, readable type, and user settings.
The catalog project turns separate features into one system. Page-level Grid creates the broad layout, each card queries its own container, semantic tokens coordinate color schemes, and cascade layers make priority explicit. The review checklist matters as much as the initial screenshot because responsive failures usually appear in unusual content and interaction states. This topic also connects with CSS Architecture and Container Queries.
The brief
Build a tutorial catalog with a header, filter controls, and reusable cards. It must work from narrow mobile widths to wide screens, support keyboard focus, respect the active color scheme, and adapt cards to their own container.
Core stylesheet
Example
css
@layer reset, base, layout, components;
@layer base {
:root {
color-scheme: light dark;
--surface: light-dark(#fff, #111827);
--text: light-dark(#172033, #e5e7eb);
--accent: light-dark(#0369a1, #38bdf8);
}
body {
margin: 0;
font: 1rem/1.55 system-ui, sans-serif;
color: var(--text);
background: var(--surface);
}
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
}
@layer layout {
.catalog {
width: min(100% - 2rem, 75rem);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
}
.catalog__cell { container-type: inline-size; }
}
@layer components {
.card {
display: grid;
gap: 1rem;
padding: 1rem;
border: 1px solid color-mix(in oklch, currentColor, transparent 75%);
border-radius: 0.75rem;
}
@container (width >= 24rem) {
.card { grid-template-columns: 5rem 1fr; }
}
}Review checklist
- The page has no horizontal overflow at 320 CSS pixels.
- Text remains usable at 200% zoom.
- DOM order matches reading and keyboard order.
- Long titles and URLs wrap without breaking a card.
- Focus is visible in both color schemes.
- Motion is removed or reduced when requested.
- Images reserve space and use appropriate source sizes.
- The layout works with real content, not only equal-length placeholders.
Project Feature Map
| Feature | Role in the project | Key syntax |
|---|---|---|
| Design tokens | Keep color, spacing, and type decisions consistent. | Custom properties |
| Page layout | Arrange major regions responsively. | Grid and Flexbox |
| Component response | Adapt cards to their available space. | @container |
| User preferences | Respect theme and motion settings. | Preference media queries |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive CSS Project example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
@layer reset, base, layout, components;
@layer base {
:root {
color-scheme: light dark;
--surface: light-dark(#fff, #111827);
--text: light-dark(#172033, #e5e7eb);
--accent: light-dark(#0369a1, #38bdf8);
}
body {
margin: 0;
font: 1rem/1.55 system-ui, sans-serif;
color: var(--text);
background: var(--surface);
}
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
}
@layer layout {
.catalog {
width: min(100% - 2rem, 75rem);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
}
.catalog__cell { container-type: inline-size; }
}
@layer components {
.card {
display: grid;
gap: 1rem;
padding: 1rem;
border: 1px solid color-mix(in oklch, currentColor, transparent 75%);
border-radius: 0.75rem;
}
@container (width >= 24rem) {
.card { grid-template-columns: 5rem 1fr; }
}
}
</style>
</head>
<body>
<main><h1 style="width:min(100% - 2rem,75rem);margin-inline:auto">Tutorial catalog</h1><section class="catalog"><div class="catalog__cell"><article class="card"><div>CSS</div><section><h2>Cascade</h2><p>Learn why declarations win.</p><a href="#">Open lesson</a></section></article></div><div class="catalog__cell"><article class="card"><div>Grid</div><section><h2>Responsive Grid</h2><p>Build layouts around content.</p><a href="#">Open lesson</a></section></article></div></section></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Container queries | 105 | 105 | 110 | 16 |
| color-mix() | 111 | 111 | 113 | 16.2 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
The project is complete when it survives real content, keyboard use, zoom, user preferences, and narrow containers.
After the first implementation, replace every placeholder with realistic titles, descriptions, images, and validation states. Test the smallest supported width, wide screens, 200% zoom, keyboard navigation, reduced motion, both color schemes, and a browser just inside the declared support range.