ModernCSS.dev

ModernCSS.dev is a website by Stephanie Eckles that hosts the series 'Modern CSS Solutions to Old CSS Problems', a collection of tutorials demonstrating modern CSS techniques, built with Eleventy.

What is ModernCSS.dev?

ModernCSS.dev is a public GitHub repository and website hosting the article series "Modern CSS Solutions to Old CSS Problems" by front-end developer Stephanie Eckles (known as @5t3ph on social media). The site's core function is educational: it provides written tutorials that show how to solve recurring CSS problems using current browser-supported techniques. The repository is built with Eleventy (11ty), a Node.js static site generator, and its content is authored in Markdown with styles written in SCSS. The GitHub repository for the project has 151 stars and is publicly available for browsing and contributions.

Key Features

• Eleventy-powered static site — The entire series site is generated with Eleventy (11ty), producing fast-loading HTML pages without a runtime JavaScript framework.
• Markdown-based articles — All tutorials are written in Markdown, which keeps the content readable and easy to edit or contribute to directly on GitHub.
• SCSS styling — The site's design is implemented with SCSS, a CSS preprocessor that adds variables, nesting, and mixins, indicating a maintainable styling approach.
• Modern CSS focus — Every article pairs an outdated CSS problem (like float-based layouts) with a modern solution using Flexbox, Grid, custom properties, or other current CSS features.
• Community feedback via GitHub Issues — Readers are encouraged to file issues on the repository to suggest new solutions or report errors, creating a collaborative improvement loop.
• Support through Buy Me a Coffee — A donation link allows readers to financially support the author's ongoing work on the series.

Who is it for?

• Web developers — Developers looking to update their CSS skills will find concrete examples of how to replace legacy techniques with current standards.
• Front-end learners — People studying CSS can use the series as a structured, example-driven guide to modern layout and styling methods.
• Design engineers — Design-focused engineers can quickly look up solutions for specific UI problems without sorting through speculation.

What can you do with ModernCSS.dev?

• Learn modern layout techniques: Read tutorials that explain how to solve centering, spacing, and responsive layout problems using Flexbox and CSS Grid.
• Modernize legacy stylesheets: Use the posts as a reference when refactoring older codebases that still rely on floats, clearfixes, or other outdated hacks.
• Find accessible styling patterns: Apply the demonstrated CSS techniques to create interfaces that are both visually polished and better for accessibility.

How does the series work?

Each post in the ModernCSS.dev series follows a consistent format: it names an old CSS problem, explains why the old approach fails, and then provides a modern solution with code examples. The content is organized as standalone articles, so developers can jump directly to the challenge they're facing. The list of available solutions is documented on the site, and new topics are suggested through GitHub issues.

FAQ

Who runs ModernCSS.dev?

ModernCSS.dev is created and maintained by Stephanie Eckles, a front-end developer and web advocate. She publishes the series as a public GitHub project and accepts donations through Buy Me a Coffee.

Is ModernCSS.dev free to read?

All of the content on ModernCSS.dev is freely accessible on the web. The repository is public, and the author accepts optional donations to support the project's ongoing development.

Can I contribute to ModernCSS.dev?

Yes. The project encourages readers to file issues on its GitHub repository for bugs, suggestions, or new solution ideas. Contributions to the content itself are made through the standard GitHub workflow.