Introducing Willamette: The First First-Party Bridgetown Theme
The rumors are true: the Bridgetown Ruby Web Framework now offers a feature-filled, highly-customizable, “from the creators who brought you Bridgetown” website theme, and it’s called Willamette.
Before I walk you through all the details, some business is in order.
A huge, huge, HUGE shoutout to the Gem Fellowship! 🎉 This is a new community initiative funding open source projects built with Ruby, and Bridgetown was one of the grant winners of 2026 for working on two major outcomes: this theme, and the Bridgetown Center plugin program. It’s not hyperbole to state that Willamette as you see it today wouldn’t have been possible without this grant. So a hearty thank you to the Gem Fellowship! Check out all the other winning projects as well:
With that out of the way, on to all the juicy deets!
The Origin Story of Willamette
The idea for Willamette actually started in 2023. I was loving the new generation of CSS & web component frameworks based on open standards, and I wanted to provide some sort of base toolkit for new Bridgetown themes to use.
The first alpha of Willamette was a set of prose-centric styles designed on top of Open Props, and that version went on to power two of my publications, That HTML Blog & Fullstack Ruby. I also pulled in the Icon component from the Shoelace web components library. You could say those sites are running “Willamette 0.1”.
Over the next couple of years, I was unsure how to proceed further. Open Props v2 seemed perpetually in limbo (and it still is, plus now Open Props is being filled with Copilot slop so unfortunately I can no longer recommend it). I also really liked the CSS framework Pico.css, but after building a couple of projects using it, I found it didn’t particularly mesh well with either Open Props or Shoelace so the DX friction was a bit annoying for me.
Then in mid-2026, like a warm ray of sunlight on a breezy summer’s day, oh, thank god, here comes a border collie the long-awaited successor to Shoelace,
Whereas Shoelace was specifically a web components library, with no opinons on how the rest of the page might be styled, Web Awesome is a complete CSS framework & design system. Yes, it comes with an opinionated set of defaults right out of the box, but it also provides a robust set of design tokens you can override to make your project look like pretty much anything you want. Colors, borders, sizes, spacings, shadows, and other base styles then get applied to native HTML elements like paragraphs, lists, blockquotes, buttons, form fields, and more—living seemlessly side-by-side with a compehensive set of sophisticated UI components. It’s the complete package.
As soon as Web Awesome was released, I knew that this would be the perfect base upon which to build a fully-fledged Bridgetown theme. We could add our own opinions on top of Web Awesome, and then offer a similarly-extensive degree of flexibility & customization so any website developer can make a project their own—or stick close to the defaults to spin up a production-ready project quickly.
Willamette is for Publishers…But That’s Only the Start
Every theme has to start somewhere, conceptually. It should come as no surprise to existing Bridgetown users that we started with the framework’s sweet spot: text-based web publishing.
Willamette was designed to shine when it comes to launching a blog, an obvious use case. I was also inspired by technical themes like Astro’s Starlight theme and wanted to offer something in that eschelon for Bridgetown users. But that’s where Willamette starts, not ends.
Yes, I think Willamette is ready to roll for the “personal website”, a place you can call home on the Indie Web. And in the coming months we will continue to build out additional layouts and page templates so that Willamette is also perfect for portfolios, galleries, video streaming, e-commerce, and marketing landing pages.
A Focus on Technical Excellence
A secondary goal for Willamette was to serve as the basis for other themes, either as a true technical foundation or simply as open source inspiration. I would love to see other people build their own Bridgetown themes and offer them as free or paid options, using Willamette as a starting point in some fashion.
I’m very proud of Willamette’s automated installer. Unlike how some other themes are built in other frameworks, you don’t download a “Willamette starter site” and use that. You create a brand-new Bridgetown site like you always do, only you apply the Willamette automation which “overlays” all Willamette-specific code integrations and sets up rubygem/NPM dependencies automatically.
The reason this is so important is you are always guaranteed that when you create a new site, it’s a real new Bridgetown site. You aren’t getting some stale “starter kit” potentially years out of date. A Willamette-powered site isn’t some weird thing with its own set of conventions and -isms. It’s a Bridgetown site—with extras. And we’ve tried to build the integration points such that you can install newer versions of Willamette in the future without breaking your current site. We want you to grow with the Willamette theme over time…not be stuck on “version 1.2.3” for five years.
The automated installer also means you can install Willamette in an existing project! (Just make sure everything’s committed/backed up before you do!) In fact, I’ve already done that very thing. I created the first version of my Intuitive+ membership site using Pico CSS a couple years back, and then recently removed Pico, installed Willamette, and in just a couple of hours I had the site back up and running looking better than ever. YMMV of course (the original site’s design was fairly simple), but I honestly was floored at how straightforward this process was. If you already have a Bridgetown site/blog with a basic design, you might just want to try installing Willamette right on top of it for a significant upgrade.
Open Web Standards FTW! 🙌
Because Willamette is built on top of Web Awesome which is built on top of open web standards, the performance (and the developer ergonomics) is fantastic.
- The entire JS bundle of this site (created with Willamette of course) is
75kBcompressed. That’s a bit more than Starlight by comparison, but still modest. Guess how much Next.js’s docs site weighs?550kBcompressed. That’s over one and a half megabytes of JavaScript when executed! Just for a docs site! 🤪 - The entire CSS bundle of this site is
20kBcompressed. In case you’re wondering, that’s less than the landing page of Tailwind Plus. 😏 - And the HTML? Beautiful. 😌
We of course make liberal use of CSS Variables, as well as the new Cross-Document View Transitions API for smooth page loads as you navigate around the site.
And thanks to Bridgetown’s world-class esbuild integration, you can add additional CSS or JavaScript libraries and components to your site’s frontend with little more than an npm install. No vendor lock-in, no expensive build chains, no heavy opinionated component formats (React / Vue / Svelte / Solid / This / That / The Other Thing). It’s primarily “vanilla” HTML, CSS, and JavaScript (and a little pure Ruby 😏). That’s it.
Your Feedback is Our Fuel
I think Willamette already offers quite a lot, as you’ll discover as you browse around the rest of the documentation here, but there’s no rest for the weary. 😅 We’re committed to improving Willamette over the long-term, based on the feedback of real users…like you!
💬 Your ideas, suggestions, and contributions are absolutely vital to ensuring the future success of Willamette and the growing ecosystem of Bridgetown themes.
And of course, your donations are gladly welcomed and support the ongoing evolution and maintenance of the Willamette project.
What will you build with Willamette? Let us know in our Bridgetown community spaces, ask us questions, get inspired, and—most importantly—have fun! 😊