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.


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

yarn add bulma sass gatsby-plugin-sass

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

File for styles

Now is the time to create a SCSS file that holds your simple style customization and the import statement for Bulma.

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

Using Bulma

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.


Edit this page on GitHub