Notes

The Art and Craft of Gatsby Themes

Illustrated notes on building Gatsby themes

Planted Last tended

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
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:

A set of sketches and colour palette tests for the main illustration

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.

A 3D mockup of a house made of blocks

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

1 Backlinks

Illustrating Gatsby's Key Concepts

Illustrated notes on the key concepts of how Gatsby.js works