Get to Know Bulma: My Current Favorite CSS Framework

Introduction

While Bootstrap has always been a great framework and in many ways led the way for CSS frameworks to blossom, it’s good to switch it up a bit. While waiting on Bootstrap v4 to come out of beta, I went looking for other frameworks, especially flexbox based ones. Bulma to the rescue!

Bulma is built by Jeremy Thomas and is fully open source.

The modern design and layout features Bulma offers were the main reasons we chose to use it for Scotch.

Bulma provides many great features like:

• Flexbox-based: Makes creating grid items and vertically aligned things really easy.
• Responsive: Mobile first framework similar to Bootstrap
• Well documented: This sounds like a boring reason but is so very important
• Solid looking foundation: All the typography, buttons, tables, forms, and basic CSS goodies you’d expect
• Tons of components: Comes with layouts, a vertical alignment level, and media objects
• Modular: Built with Sass. Only import the features that you’ll use for your project

I’ve found that building out sites/apps with Bulma (including Scotch.io!), there is less CSS that I have to write since there are so many features built in. We make heavy use of the layout features like hero sections and cards.

Here’s a quick look at the .hero class:

https://codepen.io/sevilayha/pen/qPNNwy

The .tile class:

The awesome .button class:

The .card class:

Why Have a CSS Framework

Having a solid CSS framework as part for your project is an important foundational addition. While it’s fun to roll your own CSS foundation/framework, it is also a good option having a third-party framework like Bootstrap or Bulma. A third-party CSS framework allows for:

• Uniformity across teams of developers
• Documented features
• New features are added by the package owner or community
• A set of classes and components

Bulma Syntax

The Bulma syntax uses the is- keyword to identify modifiers on the base class. For buttons, button is the base class and there are modifiers like is-primary, is-small, and more.

Here’s a comparison of the Bootstrap versus Bulma classes. Pretty similar overall and Bulma uses the is- keyword that is pretty readable. We have a button that is-danger, is-large, is-inverted. There’s even classes for is-outlined.

<!-- bootstrap button -->
<a class="btn btn-danger btn-large">Bootstrap Button</a>

<!-- bulma button -->
<a class="button is-danger is-large is-inverted">Bootstrap Button</a>

Here’s some examples from the docs:

Bulma Docs and Favorite Features

Bulma’s main features are separated into a few main sections. We’ll look at some highlights of the Bulma framework. These are the features that convinced me to use Bulma when building Scotch.

Overview

Overview Docs

The main place to get an overview of how Bulma works and what it offers. This is mostly talking on installation and how to use Bulma if you were to import the Sass variables/files/functions.

If you wanted to bring in the entire Bulma CSS file, you can use it with:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">

You can also install using npm:

npm install bulma

Modifiers

Modifiers Docs

Shows off the main modifiers like responsive helpers to hide and show elements based on viewport size. There are also typography helpers to size, color, and align text.

Some examples:

<!-- sizing -->
<p class="is-size-1">3rem</p>
<p class="is-size-7">0.75rem</p>

<!-- responsive sizing based on viewport -->
<p class="is-size-1-mobile">large sizing < 768px</p>

<!-- change text color -->
<p class="has-text-white">White!</p>
<p class="has-text-black">Black!</p>
<p class="has-text-info">Blue!</p>
<p class="has-text-danger">Red!</p>

<!-- alignment -->
<p class="has-text-centered">In the middle!</p>
<p class="has-text-right">To the right!</p>

Columns

Columns Docs

The grid system in Bulma is easy to use and customizable. We have the ability to control the sizes, grid layout based on viewport, nesting, and even sizing the gap.

Since the grid is flexbox-based, we don’t have to set the sizing. The columns will just fill the space evenly.

https://codepen.io/sevilayha/pen/rGLLwj

You can also set sizes using the is- modifiers.

<!-- numbered sizing -->
is-1
is-6

<!-- readable sizing -->
is-one-third
is-one-quarter
is-half

<!-- responsive -->
is-one-third-desktop
is-one-half-tablet

Layout

Layout Docs

This is my favorite section of Bulma. While other frameworks will give you a lot of the basics like styling, forms, and buttons, Bulma sets itself apart by providing layout components.

These are a big reason you won’t have to write much custom CSS when writing your own apps/sites. Section, hero, and level are crucial parts to any site.

Section and Container

This is a generic section class to provide a quick divider for your site. The container class will set the correct widths for your content based on viewport sizing.

<section class="section">
<div class="container">

  <h1 class="title">My New Section!</h1>

</div>
</section>

https://codepen.io/sevilayha/pen/PJzzXM

Hero

This is my favorite feature of Bulma. Browse around Scotch and you’ll see it’s heavily used. The hero class is all over the Scotch home page, at the top of article pages, and pretty much on every page! We added the icon background to our heroes and voila, you have quickly made a site topper.

<section class="hero is-info">
<div class="hero-body">
<div class="container">

  <h1 class="title">My New Hero!</h1>

</div>
</div>
</section>

https://codepen.io/sevilayha/pen/qPNNwy

The hero layout allows us to do the following modifier classes:

• Sizing: is-small | is-medium | is-large | is-fullheight
• Colors: is-primary | is-dark | is-info | is-danger

We can even add a navbar or tabs to the inside of the hero layout.

Level

The level is a feature that allows us to vertically center elements in a row. This is made easy thanks to flexbox.

<nav class="level">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Tweets</p>
      <p class="title">3,456</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Following</p>
      <p class="title">123</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Followers</p>
      <p class="title">456K</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Likes</p>
      <p class="title">789</p>
    </div>
  </div>
</nav>

https://codepen.io/sevilayha/pen/qPNaEJ

Components

Components Docs

Bulma comes with many important components that will be used in most sites:

Cards: Versatile card that we use for our articles

Dropdowns

Menus

Messages

Modals: Well designed modals. You’ll need to write your own JS

Navbar

Panels

Tabs

All of these put together help you focus on what makes your site unique and not on writing CSS to create these often-used components.

Form and Elements

The form and elements sections aren’t as glamorous as the features mentioned above. Definitely look through them to see how the base classes of Bulma look. Here’s a few highlights out of the elements section of the docs.

• Box: A generic wrapper similar to .card
• Button
• Progress
• Tag
• Title

https://codepen.io/sevilayha/pen/wrWzPg

Extensions

On top of all the built in features of Bulma, there is an Extensions section of the docs for side projects meant to enhance Bulma’s features. These include some really useful components. Here are some highlights:

Pricing Tables

Cool Checkboxes

Calendar

Timeline

Conclusion

Overall, Bulma is a great flexbox based CSS framework that has proven itself with the constant updates and new features being added at lightning pace. The modifier is- keyword is simple to use and also very readable. The use of flexbox and easy vertical centering is a solid feature.

On top of all these great features, the layout classes that come with Bulma allow us to make sites/apps quickly. Give Bulma a try and definitely read through the docs to see all the offerings.