Bulma

Bulma is a relatively new entrant to the battleground of CSS frameworks and has made a name for itself in a short time. Its attractiveness lies in a strict, CSS-only approach (there are no JavaScript components) and elegant defaults, which is something many developers with a good eye for design have a problem with when working with Bootstrap.

Much of Bulma’s momentum comes from high adoption rates with the Laravel (a PHP web framework, in case you didn’t know) community, which I’m sure is pretty much what helped Vue.js rise to the heights of popularity among JavaScript frameworks.

Why choose the Bulma CSS Framework

There are many reasons to like Bulma and use it for your next project:

Quite popular: Okay, it’s not more popular than Bootstrap, but it is more popular than Foundation. As of this writing, Bulma has 30k+ stars on Github, which is around 3k+ stars more than Foundations. Of course, the number of Github stars is no metric of merit, but it does say that the community approves of Bulma. Extremely readable classes: Bulma, for me, has the most readable CSS classes of all the frameworks I’ve tried. There’s also a ridiculously powerful and simple system for creating Metro-style grids called tiles (just look at the code in the second half of the screenshot and tell me you’re not impressed!). Flat learning curve: Bulma is highly modular and was created to solve the practical, everyday problems that smaller teams and individual developers come across. You’ll find that Bulma is very easy to learn, though I think a decent background in CSS is always good for an idea of what might be happening under the hood. This will help you when you want to override the default behavior.

Elegant: Well, look at Bulma’s default Hero section below.

Bulma has a small but extremely passionate community, so if you want to do away with all the fluff and yet want to come up with elegant-looking UIs in record time, Bulma is the way to go. Bulma has a separate section for Bootstrap developers to convince them to and help them migrate.

Reference


development