ÁD Studio

Blurring the lines between business strategy
and software engineering.

Art Direction for Gatsby sites

I have been mulling over Jen Simmon's Getting Out of Our Ruts for a while. I've noted before that it appears to me that everything online is the same, and her talk just confirms that there's been people out there saying just that for quite a while now. Even with a massive theme market, creators mimic the best sellers, because they're not going to earn a living by going out on a limb and creating something truly original. Generic wins out every time.

Clients have of course noticed, and are even asking for these rudimentary designs. They see lots of sites with those styles, and it’s causing them to ask for them too. You have to be very brave as a business owner to risk looking different. The mouth says "unique" but the wallets shout "just like everyone else".

In an effort to do something different with my site, I've been tinkering away at ways to be less predictable with it, and I ended up realising something very interesting: creating pages with different styles is hard.

That in itself isn't bad. I have to remind myself constantly that what I'm trying to do is a path followed by very few people. But by making many decisions for you, frameworks make the work needed to overrule those decisions more difficult with every level of abstraction. One-off things become hard to do, because Web development frameworks dial up convenience at the expense of flexibility and variety.

If this site is truly going to become my artistic playground, then I thought it might be helpful to share some of my crazy ideas, to sharp my skills and set the tone, feel, and artistic style for my projects. But at the same time, I don't want these experiments clashing with what I've previously posted.

Perhaps I'm alone in this. But in any case, it could be helpful to document what I found out about tweaking Gatsby for my unconventional desire to do away with consistency.

Templating

One of the parameters on Gatsby Node createPages API is component, and it's usually filled with a layout component shared across all essays. I wanted to keep that functionality by default, but also wanted it to be flexible enough to add more stuff if I wanted to.

So I did the following: I created a frontmatter variable called template.

---
title: "Art Direction for Gatsby sites"
template: artDirectionForGatsbySites
---

This variable will be used be used by the createPages if it's there, like so:

// you'll call `createPage` for each result
posts.forEach(({ node }) => {
let template = node.frontmatter.template
? node.frontmatter.template
: "defaultEssay";
let component = `./src/templates/${template}.js`;
createPage({
// This is the slug you created before
// (or `node.frontmatter.slug`)
path: node.fields.slug,
// This component will wrap our MDX content
component: path.resolve(component),
// You can use the values in this context in
// our page layout component
context: { id: node.id },
});
});

By using this new frontmatter variable, all the old posts kept being generated using the default template (in my case, it's stored in defaultEssay.js). And this new post is generated using the new artDirectionForGatsbySites.js1.

Isolated Styling

The simplest way to isolate CSS and avoid conflicting styles across your site is using CSS modules. It solves the problem of isolation not by restricting the scope of the styles, but by making sure that name collision in the styling classes never happen.

I had mixed feelings about it, since I'm not actually solving the issue, just papering over the cracks, but it does the job. Now everytime I create a new template, there's often a .module.css file associated, and I can tinker as much as I want with the end result.

Wrapping up

That's all the tricks I have. Hope they are helpful. If you follow this route, by all means, do let me know, and I'll do my best to help you. And welcome to the IndieWeb!


  1. I did a similar thing with the background color, just in case I just wanted to modify that instead of creating a whole new template just for that. It's similar enough to what I just did with templates and won't discuss it here, but if you get stuck, have a look at the source code here.