Building a New Personal Site With Astro and Modern CSS

I’ve used Eleventy (opens in a new window) on several projects and like it a lot, but I wanted to try something different. Astro (opens in a new window) had been on my radar for a while, and I’d been playing with it on and off. It’s just something different I wanted to try.

The CSS was the real experiment

The bigger motivation was CSS. There’s a lot of stuff that’s landed in browsers over the past couple of years that I hadn’t used in production yet. This site became a playground for all of it.

A few highlights:

  • Grid and subgrid are now my default for layout. Subgrid in particular finally makes it easy to align content across nested elements without hacks or extra wrappers.

  • Container queries are the feature I’d been waiting longest for. Styling a component based on its own available space rather than the viewport is how responsive design should have always worked.

  • light-dark() is a neat little function that lets you define both color scheme values in one declaration, keeping things tidy without duplicating rules or leaning on a custom property system.

  • Anchor positioning is still relatively new, but hey, you’re probably a Webdev reading this in the Canary or Nightly build so everything is working just fine. And if you aren’t, well then you don’t know what you’re missing and everything also works just fine. Yay for progressive enhancement. Native tethering between elements without JavaScript opens up a lot of possibilities for tooltips, popovers and contextual UI.

  • View transitions to allow native transitions of elements between pages!

  • Invoker commands in combination with popovers. A proper declarative way to open dialogs, popovers and the like directly from a button without writing JavaScript for it. What a time to be alive.

  • Lots more, like corner-shape, text-box-trim, row-rule, text-wrap: pretty and CSS Shape

Why bother?

A personal site is one of the few places where you own every decision. No legacy constraints, no stakeholder sign-off, no browser support matrix dictated by a client’s analytics. If something is in baseline and works in modern browsers, I will start using it. And of course provide a graceful fallback.

I’ll write about some of these features in more detail as I go. For now, the site is live, the CSS is modern, and time will tell if Astro stays.