I’ve spent a lot of time comparing different css frameworks recently. I never liked Bootstrap because is not very flexible and not using Flexbox so I decided to find a better framework for my future project. That’s how I came across Bulma.

Bulma is a free, open source CSS framework based on Flexbox and used by more than 100,000 developers.

What I like about Bulma

  1. Designed for mobile first which means is 100% responsive.
  2. Modular and built with Sass so you can use only what you need.
  3. Built with Flexbox which makes creating grids much easier.
  4. Contains everything you need. buttons, forms, tables, typography and more.
  5. Very well documented.
  6. Great support.

If you want to implement it in a React app, you can easily create some custom React components or use react-bulma-components project which is one of the most popular implementations of the Bulma CSS framework in React.

Good to know about Bulma

The is- and has- prefixes are used to identify modifiers on the base class.

<button class="is-danger is-small">Click me</button>

<p class="is-size-1">3rem</p>

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

You can find more details about modifiers here.

Because the grid is using Flexbox, we don’t have to set any sizing for columns but if you want to then just use the modifiers available such as: is-1, is-one-quarter, is-one-half-tablet. Full list of size modifiers can be found here.

Bulma doesn’t just give you styles for different UI elements such as form items or buttons. It provides layout components so you won’t have to write much custom CSS. Here a couple of custom components available so far:

  • Container – Used to center your content horizontally.
  • Hero – An imposing hero banner to showcase something.
  • Section> – A simple container to divide your page into sections, like the one you’re currently reading.
  • Footer – A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.
  • Tile – A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids.
  • Level – A multi-purpose horizontal level, which can contain almost any other element.
  • Media Object – The famous media object prevalent in social media interfaces, but useful in any context.

Conclusion

Coming from other CSS frameworks, I found it very easy to pick up. With over 31.000 starts in Github, great support, constant updates and new features being added really fast, I think Bulma is a great option you should consider for your next project.