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:

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 vs 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.

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.

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](http://bulma.io/documentation/elements/box/ ""): A generic wrapper similar to ```.card```

[Button](http://bulma.io/documentation/elements/button/ "")

[Progress](http://bulma.io/documentation/elements/progress/ "")

[Tag](http://bulma.io/documentation/elements/tag/ "")

[Title](http://bulma.io/documentation/elements/title/ "")

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:

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.