Adopting Bulma to Bring Some Style to a React Web App

A Noob Meets Web Apps, Episode 3

In previous episode I fetched and splashed some data from server to client React app. Now it’s time to get some style and visuals.

Introducing Bulma

Bulma is a free, open source CSS framework based on Flexbox.

First of all, let’s install Bulma with bloomer — a set of companion React components:

$ npm install --save bloomer bulma 
$ npm install --save-dev node-sass

Remove App.css and rename index.css to index.scss.Then update accordingly import statements in App.tsx and index.tsx.

You can substitute variables before to load Bulma and you should import only what you really need. Our first index.scss will look like this:

A new shiny cell

Let’s rewrite our poll cell inside src/app/features/poll/cell.tsx:

We can do much better. For example we can use Bulma to style text, with Title and Subtitle:

Bulma has even special treatment for images: substitute <img> with <Image> component and create a new CSS class called aspect-fit in order to crop, not to stretch loaded image:

Now we will encapsulate informations inside a card.

Cells are ok but margins between choices have to be corrected. So we create app/features/polls/choice.scss and app/features/polls/cell.scss to declare a couple of CSS classes.

Bottom up: layout cells disposition

We will adopt columns to layout cells in polls/component.tsx:

While at mobile sizes nothing changes, Bulma will make layout responsive at greater widths.

We can go another level up and give some padding to polls list using Bulma’s section and container in app/App.tsx:

Padding is reduced for section class on mobile devices for aesthetic purposes.