Web Development

Jamming with Themes in London

Written By Allan25.11.2019

Earlier this year Gatsby introduced a new concept to their ecosystem, Themes. The basic premise of a Gatsby Theme was that each Theme would more or less instantaneously provide a project with a piece of site functionality, such as a blog, shop, etc. The Theme would be able to customised to the aesthetic of the project it was being applied to via a very accessible theme file.

The Theme would be packaged into a node module, developers could add the functionality the theme provided their project with a single command and would continue to receive any updates made to the Theme by the maintainer(s) there after.

Along with their announcement came the Theme Jam - a contest encouraging the Gatsby community to build themes of their own.

There were a lot of fantastic submissions, to name a couple:

Novela by Narative, a Theme providing incredibly crisp blogging pages.
SimpleCast by Vojtěch Holík, a Theme providing a beautiful interface for podcasts.

Over the course of a weekend and a few nights after work following, Sakura and I were able to put together our own submission. We ended up being one of the two winners of the Jam! As a result, Gatsby invited us to their conference, Gatsby Days, in London to talk about the studio and our submission.

What Themes meant for our studio

Save time, save budget

The most enticing aspect of the concept of a ‘Theme’ for us was the opportunity to save time and save budget.

A Theme translated to us as an opportunity to find a piece of functionality we found ourselves building out on almost all of our projects, and then create a Theme for it once, do it really well, and never have to do it again.

More time for the ‘Schmizzle’

Schmizzle (/ˈʃmɪz(ə)l/), is a word used by some to describe those parts of a website that are a little fancy. If you ask the two of us, schmizzle is what gives a website character and makes a lasting impression on a visitor.

Though, alas, it’s difficult to justify website functionality that is falls under the category of ‘schmizzle’ to the people laying down their hard earned dollar (your clients).

However, Themes presented the opportunity to quickly spin up the more common functionality and pages of our project, hence creating time for our creative pursuits. That’s pretty schmizzle. Schmizzle.

Give some love back to the Open Source

Our business had been running on the back of Gatsby. All of our projects had used it as a framework to build our projects on, and its performance benefits and out of the box functionalities had been a competitive edge to win our clients. We’d saved countless hours of our time by pulling in packages of functionality built by the Gatsby community.

Gatsby Themes meant if we were to build polished packages of functionality we thought would be useful to our web builds, chances are they might also be to someone else. Share the love!

Our criteria for a Gatsby Theme

Commonplace functionality

Firstly, we wanted to build a Theme that could be applied to almost any web project. We'd have previously built out the functionality it would provide, and could foresee having to build it out again.

Not a creative bastion

The Theme would not provide functionality in a place where there was potential to make a creative statement and win the hearts and minds of our audience. It would save us from expending energy in a mundane part of our web projects.

Generic

The functionality provided by the Theme would not be tailored to a particular type of web project. This way it could be easily reskinned for future projects.

Gatsby Theme Legals

Based on our criteria, we converged on the idea of making a Theme that provided a template for legal documents you needed to display on your website such as a Privacy Policy or Terms and Conditions.

This was a piece of functionality we were increasingly finding we needed to include in our builds, especially with the growing prominence of government initiatives like the GDPR compelling businesses to be accountable in the data they collect and store about visitors to their site and customers.

When we had previously built pages for legal policies, they were often an afterthought at the tail-end of the project, and not given a lot of love. Creating a Theme for it presented the opportunity to design and create it with all the bells and whistles, such that reading the policy was as clear and pleasurable as possible.

Here’s a demo of the functionality we ended up with: https://gatsby-theme-legals.netlify.com/

You can apply Gatsby Theme Legals to your own projects by using the code found here: https://github.com/littleplusbig/gatsby-theme-legals-prismic

We’ve since applied it to a project too! You can see how the base Theme can be skinned to the brand of a web project (more detailed explanation of this in the video above): https://www.wagec.org.au/privacy-policy/

Epilogue: Gatsby Theme FAQs

Our war on mundane pages (using Gatsby Themes as our weapon of choice) didn’t end with legal pages. We’ve since created another Theme for another commonplace, slightly mundane page - the Frequently Asked Questions.

The demo can be found here: https://gatsby-theme-faqs.netlify.com/

The source code can be found here: https://github.com/littleplusbig/gatsby-theme-faqs-prismic

And, you can check out how we've applied it to one of our projects here: https://www.wagec.org.au/frequently-asked-questions/