Bulma

Bulma is a free, open source CSS framework based on Flexbox. This guide will show you how to get started with Gatsby and Bulma.

This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the Quick Start guide, then come back.

Installation

For starters, lets install all the required packages we’re going to need.

yarn add bulma node-sass gatsby-plugin-sass

Then add the gatsby-plugin-sass in to gatsby-config.js.

Now is the time to create a scss-file that holds your simple style customisation and the import statement for bulma.

(To keep things simple, insert the file next to index.js in the pages-directory)

The last step is to import the style and use it.

Replace the default contents of the index.js file.

And that’s all there is to it! Now you can use Bulma as you normally would.