It’s hard to fully appreciate everything that goes into a website until you try to build one yourself.
From hosting to content to design to security, building and maintaining an online presence can be both incredibly rewarding and demanding. So, when something comes along that lightens the load, you can be sure the web development community will be eager to try it.
Such is the case with CSS frameworks. A CSS framework is a set of tools that make it easier to write CSS code — most have built-in libraries of HTML elements that follow design best practices and incorporate mobile-friendliness without much extra effort on your part.
In short, CSS frameworks help you build a better user interface in less time.
In this post, I’ll introduce you to Bulma, a relatively new player in the CSS framework space. We’ll explore what makes Bulma a unique framework, why you might want to try it out, and how to get started with some of its basic elements. For reasons we’ll see, Bulma is an excellent tool for beginners and experienced developers alike to style their pages, so let’s begin.
What is Bulma CSS?
Bulma is a free class-based framework for CSS. It allows developers to implement CSS on web pages more efficiently than plain CSS. First released in 2016, Bulma has gained traction among front-end developers, enough to compete with other well-known CSS frameworks like Bootstrap.
Bulma is built on Flexbox, a CSS layout model that automatically adjusts the width of a page element based on the width of its container. Flexbox requires developers to write both HTML and CSS to create elements that adhere to this model. With Bulma, Flexbox behavior and most other things can be handled with HTML classes.
Bulma CSS is also open-source — you can view its source code in Bulma’s GitHub repository — which lets developers create new functions within the framework.
Why Use Bulma CSS?
If you’ve recently picked up CSS as a language, it might seem excessive to learn a framework like Bulma on top of it. But, while CSS frameworks aren’t necessary to build a website, they can alleviate many of the challenges associated with CSS.
If you want to build a website from scratch, here are some reasons why Bulma is your friend:
Efficiency: Frameworks like Bulma save you time by implementing more involved CSS effects for you.
Simplicity: As we’ll see, Bulma is easy to add to your code. If you understand CSS classes, you can understand Bulma. Plus, Bulma doesn’t overwhelm with a deluge of options — it’s all CSS.
Consistency: Similarly, Bulma’s syntax is consistent and intuitive, so it’s easy to learn and easy to interpret if you didn’t write the code yourself.
Capability: Bulma’s library of user interface components handles most things that websites need on the front end, including headers, menus, forms, and cards. Any of these components alone requires a lot of plain CSS to implement. With Bulma, these same elements can be styled with just a few basic commands.
Modularity: Bulma comprises ~40 .sass files (Sass is a CSS extension language that Bulma uses), each of which handles a different interface component. But, you don’t have to import all of these files if you don't want to, only the ones you need. Read how here.
Responsiveness: Since Bulma is based on Flexbox, its built-in components are responsive by design — this means that elements will move and scale to fit any screen or viewport size.
These benefits have earned Bulma a strong reputation. And, with some practice, you can produce some impressive results — check out Bulma’s showcase to get a sense of what’s possible, and use your browser's inspect element tool to see how these sites are made.
Bulma vs. Bootstrap
If you’re familiar with CSS frameworks, you’re probably familiar with Bootstrap, the most popular CSS framework today. Both Bootstrap and Bulma are free, open-source, mobile-first CSS frameworks that do similar things, but they differ in popularity, capability, and complexity.
Bootstrap has been around since 2011, and has a larger user base and support community as a result. This means that you’re more likely to find solutions to advanced problems with Bootstrap than with Bulma. However, Bulma’s documentation is detailed and straightforward, and its developer community is growing.
There’s also more elements in Boostrap’s library overall, and more options for styling and implementation. You can do a lot within Bulma’s framework, but it’s worth looking into Bootstrap’s components to get a better sense of its different offerings. It should also be noted that Bulma lacks the accessibility capabilities that Bootstrap offers, but Bulma updates often and may improve accessibility in future releases.
How To Use Bulma CSS
Enough talk, let’s get coding. In this section, I’ll show you how to add Bulma to your website files, then review some of Bulma’s basic features.
How To Set Up Bulma
First, we need to get our HTML files ready to use the Bulma framework. Make sure that the following code is at the very top of all your HTML files:
Next, place the following <meta> tag in the <head> section of your HTML files to enable responsive elements:
We’ll finish with an intro to the Bulma columns class, which lets you create columns that resize based on container width and the number of columns on the page.
Columns are a integral part of website formatting, yet one of the hardest to format, especially in a way that adjusts to different window sizes. Bulma does all this work for us if we attach the columns class to a parent div and the column class to each child div.
Again, there’s a lot more you can do with columns in Bulma CSS — this is just the basics. See the columns documentation for all the possibilities.
Let Frameworks Do the Work
Learning a CSS framework on top of your existing CSS knowledge might seem like extra work in the short term. However, the more time you spend learning and practicing front-end development, the more you’ll come to appreciate the benefits of tools like Bulma.
Bulma isn’t the best CSS framework for everyone, so it’s best to evaluate other options like the aforementioned Bootstrap CSS to see which one feels more natural to your style. Whichever framework you choose, I’ll bet you it’s better than wasting hours trying to design your dream website without one.
Originally published Dec 9, 2020 7:00:00 AM, updated April 20 2022