Bulma: a Brief intro
Choosing a Cascading Style Sheets (CSS) framework is a difficult choice for any budding developer and even so for some of the more experienced ones. Let me offer a solution, Bulma CSS. As mentioned on their website, Bulma is a free, open-source CSS Framework based on Flexbox and used by more than 200,000 developers, most notably Signal, the secure messaging app.
If you’re coming from Bootstrap you will notice a lot of similar aspects to the structure and features like the grid and helper classes. However, unlike Bootstrap, Bulma has a much easier to learn syntax. All modifiers use a prefix of ‘.is’ or ‘.has’. This makes identifying Bulma classes a breeze. To this day I still find myself having to refer regularly back to Bootstrap docs when designing a page but with Bulma after my initial read through of a doc to understand an element or component, I found that I didn’t need to refer back as often.
With the advent of the smartphone, mobile responsiveness has become an increasingly popular feature and integral to the popularity of many apps as many apps are designed to be used on the go on a mobile device. With the world using smartphones more and more these days, developers need a CSS framework that helps them display the content they need. Bulma is designed for mobile first and it shows. If you’ve tried designing a website or app for multiple device sizes you likely noticed the pain of designing for each expected breakpoint and realized how much of a pain it is. With Bulma, know this: You don’t have to worry about it (as much). For most websites the default settings for breakpoints works perfectly out of the box. Columns will automatically stack vertically, as well as child elements, and the nav menu is hidden like you would expect from a well-designed mobile app. Now sure, if you’re doing something more advanced or complicated you might have to go and make some changes, but for the average developer the basic settings will do just fine.
This is just the tip of the iceberg when it comes to Bulma’s great features but hopefully I’ve sparked some interest in you to try it out. You can check out the Bulma docs and other great features here. Make Capsule Corp proud.
