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.

Copygatsby-config.js: copy code to clipboard
plugins: [`gatsby-plugin-sass`],

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)

Copymystyles.scss: copy code to clipboard
@charset "utf-8";
// If need, change your variables before importing Bulma
$title-color: #ff0000;
@import "~bulma/bulma.sass";

Using Bulma

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

Replace the default contents of the index.js file.

Copyindex.js: copy code to clipboard
import React from "react"
import "./mystyles.scss"
const IndexPage = () => {
  return (
    <div className="container">
      <div className="columns">
        <div className="column">
          <h2 className="title is-2">Level 2 heading</h2>
          <p className="content">Cool content. Using Bulma!</p>
        </div>
        <div className="column is-four-fifths">
          <h2 className="title is-2">Level 2 heading</h2>
          <p className="content">This column is cool too!</p>
        </div>
      </div>
    </div>
  )
}
export default IndexPage

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

Resources

• Bulma documentation on how to use Sass