Portfolio site — Vanilla adapter with custom design tokens

Shipped a portfolio site for a photographer client. Used the Vanilla adapter as a starting point and added my own design tokens via CSS variables in custom.css.

The key insight: the Vanilla adapter has zero opinions about color, so you are working with a blank canvas. I set up a warm palette with --bf-accent, --bf-bg, --bf-text and the entire site transformed.

Total custom CSS: 47 lines. The rest is all BaseFrame base + Vanilla adapter defaults.

Client loves it. Site loads in 0.8 seconds on mobile.

47 lines is impressive. That's the whole point of the adapter pattern — the framework does the heavy lifting, you just tune the colors.

What's the PageSpeed score?

98 on mobile, 100 on desktop. The Vanilla adapter doesn't load any framework CSS library, so the total CSS is just base.css (18KB) + vanilla.css (12KB) + custom.css (2KB). That's 32KB total.

Compare that to a typical WordPress theme at 300-500KB of CSS before you even add plugins.