Introduction to Bulma: A Simple and Intuitive CSS Framework

A look at the basics of Bulma, a simple framework for styling

According to its official website, Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

In this article, let’s take a look at the basics of Bulma and how to build a simple To-Do App using this CSS framework.

Why Use Bulma

Bulma adopts a mobile-first approach, which ensures that UI components would be responsive and looks great in small screens.

It is, at its core, a CSS framework similar to Tailwind CSS and Material UI, so it provides many pre-styled components without JavaScript included. Hence, according to its GitHub documentation, Bulma is “environment agnostic”, as it’s just the style layer on top of the logic. With Bulma, you can simply focus on the styles.

Bulma is very easy to install and learn. It has intuitive, readable modifiers, syntax and classes.

Getting Started

The 2 ways I recommend to use Bulma in your projects are:

1. Via npm or yarn

npm install bulma