This site runs best with JavaScript enabled.

The Art and Craft of Gatsby Themes

Last tended Jan 02, 2020
Web Development

More illustrated notes, this time on Gatsby themes.

They're one of the newer features in Gatsby.js – little building blocks of site functionality you can mix n' match n' share on NPM.

Chris Biscardi made an extensive course on egghead on how to build your own.

Composable Gatsby Themes

This whole site is built in Gatsby so I'm always trying to level up my understanding of how it works under the hood. Makes it easier to play.

Building composable gatsby theme title
Gatsby themes let you break a site into reusable chunks of functionality
Yarn workspaces are ideal for developing gatsby themes. It lets us have multiple packages in a single repo
We're building 3 themes here - marketing, shopify, and blog

I also made the course illustration for this one:

My process for making these usually sticks to Procreate, Adobe Illustrator, and Photoshop You can read more here on what tools and hardware I use, but I experimented with some 3D rendering in Cinema 4D for this one. Certainly sped up the process a bit, though made the final look a little more stiff than usual. Trade offs.

Want more illustrated notes on web development?

Take a look at Speaking the GraphQL Query Language, The JAMStack, Gatsby & Contentful, or the Essential Web Security Tactics

Want to share?

Join the newsletter

For weekly notes on visual thinking, ethical technology, and cultural anthropology.

Maggie Appleton © 2021