I've been using Bootstrap for a long time for personal projects or just to mock something up. Bootstrap is great. It has great library of most of everything you would need along with great documentation. Because it is so popular, it's also got a lot of support. We are currently on Bootstrap v4.4.1. Version 3 came out in 2013. Seven years ago as of this writing!
There are plenty of other front-end frameworks out there. However late to the game I am, Bulma hooked me.
You read that correctly, it is only CSS; no javascript. No javascript means it integrates much easier to any JS environment! So matter if you're into Angular, ReactJS, VueJS, or something else, getting going with Bulma is super easy!
You have the option to import a single minified CSS file or just the ones you need by importing any of the 39 .sass
files
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>
Bulma's syntax uses the is-
keyword for modifiers for the base classes. For example, for the button
base class, color can be modified by adding is-primary
or is-info
. It can also modify the size by adding is-small
or is-large
.
Here's a comparison between Bootstrap and Bulma
<!-- bootstrap button -->
<a class="btn btn-primary btn-large">My Button</a>
<!-- bulma button -->
<a class="button is-primary is-large">My Button</a>
This syntax allows you to easily remember how to modify elements and understand what the classes are actually doing.
Solid information with solid examples makes learning Bulma a breeze
There are so many great things to talk about, that it doesn't make sense for me to list them all out here. At the time of this writing, Bulma is only on v0.8.0. It's already got so much support from the community.
If you're looking for a simple and clean CSS framework without a lot of bloat, give Bulma a try.