Adding Bulma CSS to your React application

Why Bulma CSS?

Bulma comes packed with many great features and benefits. The great thing is, it's not an all-or-nothing framework, meaning its modularity lets you use as much or as little as you want. Here are some of the top reasons to choose Bulma:

• Bulma's built-in components are responsive by design.
• You can customize it and add your own code.
• Bulma doesn't contain JavaScript. It focuses on CSS, making it a lightweight implementation
• Bulma resets browser styles and exclusively styles based on CSS classes, meaning the HTML you compose has no effect on the styling of your page.
• Bulma has built-in support for both FontAwesome 4 and 5, giving you a lot of flexibility in icons for your site or app.

Why use Bulma with React?

Bulma's focus on components and modularity means it pairs nicely with React's component-driven architecture. Bulma can help simplify the coding process so that you can focus more on the architecture of your app rather than the hassles of writing CSS.

The mainstream implementation of Bulma in React is the react-bulma-components package. This package gives you a load of pre-built components that are ready to use. It's compatible with most React frameworks, such as Gatsby, Next.js, and Create React App.

Bulma vs Bootstrap

Bulma and Bootstrap are CSS frameworks that focus on mobile responsiveness and allow developers to build user interfaces fast and easy. As much as they have many similarities, they also have quite a few differences.

Bootstrap has a larger community and has been around longer than Bulma. As a result, more tools (like theming and plugins) are available, and more questions are answered around the internet.

While 90% of Bulma works in IE11, Bootstrap has better compatibility with this browser.Although IE11 will soon be out of support.

Bootstrap has some elements like list group, wells, or page header that Bulma doesn’t have.

Bulma has introduced some accessibility support, but Bootstrap has strong and pervasive compatibility with WCAG 2.0 guidelines.

Bulma, on the other hand, allows developers to create custom-looking applications much easier than Bootstrap. Because of its structure, Bulma allows developers to create custom styles with relative ease. With Bootstrap, you need to go the extra mile to create a custom design, leading to many Bootstrap sites looking very similar.

Getting Started

In this guide, you will be using the Create Blog with Gatsby starter as the starting point. Once you've connected the application to GitHub, you should be able to clone the project on your machine.

In the project's root folder, you will need to install all the necessary dependencies needed for the application to run properly.

Run:

npm install

Now that you have your project setup you will need to add Bulma CSS to your project.

Installing Bulma

You can install all the packages we need to use Bulma with this NPM command

npm install bulma sass gatsby-plugin-sass

or this Yarn command:

yarn add bulma sass gatsby-plugin-sass

Once it is installed, it will be added to your list of dependencies in the project.

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

In your gatsby-config.js file add the following:

plugins: [`gatsby-plugin-sass`],

You can also use Bulma by importing the file directly from jsDelivr:

@import "<https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css>"

or:

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css>">

Components in Bulma

Here's a few of what you have access to out of the box when using Bulma CSS:

Navbar: This component gives a very responsive and flexible navigation bar.

Pagination: This component paginates your content pages.

Message: This component is used for pop-up notifications which are majorly used for emphasis. For example success, warning, danger, etc.

Breadcrumb: This component is used for navigation.

Modal: This component gives a modal UI layer that consists of contents.

Menu: for vertical navigation

Tab: for horizontal navigation.

Icon: This is an icon wrapper. You can make use of fontawesome icons with this wrapper.

There are so many other components in Bulma and they can be found here.

Writing Bulma CSS

Before you start writing your styles, you will need to create a .scss file to house your styles for customization purposes.

Create a style.scss file in your src folder and insert the following code to import Bulma.

@charset "utf-8"; @import "~bulma/bulma.sass";

You will need to import your stylesheet in your App.js file.

In your App.js file add the following code:

import "<path>/style.scss"

This is all regarding configuration and setup. Now you write your CSS.

Example: Creating a button

The Button component is one of the simplest components in your Bulma arsenal.

In your app.js file add the following code:

<button className="is-success is-outlined is-rounded is-large">
    Our Button
</button>

This set of classes is responsible for changing the color, size and style of our button.

is-success: This class changes the color of the button to is-success (a shade of green).

is-outlined: This class outlines the button.

is-rounded: This class gives the button rounded corners.

is-large: This class makes the button large.

Overriding styles in Bulma

Fundamentally, Bulma has a few kinds of variables that come with it, which you can override. To override these style choices, you override these variables to suit your brand.

In style.scss, file add the following code :

$blue: #00008B; 
$primary: $blue;
$green: #008000; 
$success: $green;
$background: #ffffff; 
$weight-normal: 0.5rem;

It's not compulsory you use the same colours above. You can edit to fit your preferences.

Grid in Bulma

Bulma's grid system is one of the simplest grid systems. It is mostly used when it comes to simplifying layouts. This particular grid system is rich in features. Columns are used in Bulma to create responsive layouts. Bulma uses a 12 column layout by default, but it can also work with percentage-based and fixed-width columns.

For percentage-based columns, the class can be half, one-third, one-quarter, one-fifth, two-third, three-quarters. These values determine the size of the column based on the size of the container.

Here's an example:

<div className="container"> 
  <div className="is-one-quarter">
    25% width of the container
  </div> 
  
  <div>
    75% width of the container
  </div> 
</div>

For fixed-width columns, the class takes numerical values ranging from 1 to 12 where the values determine the size of the column based on the size of the container.

<div className="container"> 
  <div className="is-6"> 
    half width of the container
  </div> 

  <div>
    half width of the container
  </div> 
</div>

Conclusion

There's so much more to Bulma than the few you've tried in this tutorial. You can also try implementing the various components that come out of the box. For the default styles, you can also try overriding them to fit your brand specifications. Do check out Bulma documentation for further reading.

References

https://bulma.io/alternative-to-bootstrap/

https://www.gatsbyjs.com/docs/how-to/styling/bulma/

https://bulma.io/documentation/

Sanity – build remarkable experiences at scale

Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.