Why Developers Love Bulma CSS

5 Reasons to Use Bulma CSS in Your Next ProjectBulma is an open-source, responsive, and lightweight CSS framework based on the Flexbox layout. As a new framework, it has already won the hearts of many developers.So, in this article, I’m going to discus…

5 Reasons to Use Bulma CSS in Your Next Project

Bulma is an open-source, responsive, and lightweight CSS framework based on the Flexbox layout. As a new framework, it has already won the hearts of many developers.

So, in this article, I’m going to discuss 5 reasons why developers love Bulma CSS.

1. Short Learning Curve

Bulma is an easy-to-learn framework with a short learning curve. Using starter templates and video tutorials on the official website, you can get a design started in minutes.

Bulma has the most readable CSS classes compared to other CSS frameworks.

It provides readable class names like .column, .button and straightforward modifiers like .success and .is-link. Need to add an extra column to your grid? Take a look at the following example to see how easy to do it with Bulma.

How to add a new column to the grid with Bulma

2. Bulma is Modular

With many traditional CSS frameworks, we have to deal with unused CSS. Fortunately, with Bulma, it’s not everything or nothing.

Bulma is a fully modular framework where you can import only what you need.

Bulma consists of 39 .sass files, which you can import individually. For example, let’s say you only want Bulma’s button styles. Then, simply import the utility dependencies and the individual .sass file as shown below;

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

3. 100% Responsive

Bulma is a mobile-first CSS framework that offers optimized site responsiveness on desktop, mobile phones, flat-panel screens of numerous sizes.

Every element in Bulma is mobile-first and optimized for vertical reading. So, in mobile;

  • The Bulma columns are stacked on top of each other.
  • The nav menu is hidden.
  • The children of the level component are stacked vertically.

Besides, you can quickly implement a horizontal layout for both columns and level components by adding the is-mobile modifier. So, you can horizontally stack columns in the mobile view, as demonstrated in the example below.

Horizontal columns in the mobile view

By default, columns are activated from the tablet size onwards. Let’s say you only want columns on the desktop. Use the is-desktop modifier on the columns container as shown below.

4. No JavaScript

Bulma provides lightweight solutions that can be easily implemented in any development environment like Angular, React, Vue, Ember, etc. The only output in Bulma is a CSS file named bulma.css. If you want to customize the variables, you can download the individual .sass source files.

Well, all of this means there’s no JavaScript in Bulma.

Bulma has sometimes been described as an ‘environment agnostic’ framework: a style layer sits on top of the logic.

5. A Massive Library of Interactive Components

Bulma provides pretty much everything you need to create your website. It provides a large variety of customizable components with 100+ functional helper classes, which you can use to alter the styles of any element.

The below example shows how to create a breadcrumb component by using few CSS classes.

<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="#">Bulma</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
</ul>
</nav>

Now let’s say you need to customize your breadcrumb by changing its default separator. There are four alternative modifiers that you can choose from: has-arrow-separator, has-bullet-separator, has-dot-separator, and has-succeeds-separator.

<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
<ul>
<li><a href="#">Bulma</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
</ul>
</nav>

Also, Bulma provides comprehensive documentation to help you with these customizations with examples and demos. Even though Bulma is not yet popular as Bootstrap, it has a highly passionate, rapidly growing community. So with the help of the community, you can bring your Bulma project to the next level.

Final Thoughts

Bulma may be a relatively new CSS framework. However, it has already proven its place in the CSS framework landscape.

And I would highly recommend trying Bulma CSS at least once. I’m pretty sure you won’t regret it.

Thank you for reading!

Build & share independent JS components with Bit

Bit is an extensible tool that lets you create truly modular applications with independently authored, versioned, and maintained components.

Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.

A React ‘card’ component independently developed and source-controlled with an auto-generated dependency tree.

Bit: The platform for the modular web

Learn More


Why Developers Love Bulma CSS was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Nethmi Wijesinghe | Sciencx (2024-03-29T02:10:31+00:00) » Why Developers Love Bulma CSS. Retrieved from https://www.scien.cx/2021/07/26/why-developers-love-bulma-css/.
MLA
" » Why Developers Love Bulma CSS." Nethmi Wijesinghe | Sciencx - Monday July 26, 2021, https://www.scien.cx/2021/07/26/why-developers-love-bulma-css/
HARVARD
Nethmi Wijesinghe | Sciencx Monday July 26, 2021 » Why Developers Love Bulma CSS., viewed 2024-03-29T02:10:31+00:00,<https://www.scien.cx/2021/07/26/why-developers-love-bulma-css/>
VANCOUVER
Nethmi Wijesinghe | Sciencx - » Why Developers Love Bulma CSS. [Internet]. [Accessed 2024-03-29T02:10:31+00:00]. Available from: https://www.scien.cx/2021/07/26/why-developers-love-bulma-css/
CHICAGO
" » Why Developers Love Bulma CSS." Nethmi Wijesinghe | Sciencx - Accessed 2024-03-29T02:10:31+00:00. https://www.scien.cx/2021/07/26/why-developers-love-bulma-css/
IEEE
" » Why Developers Love Bulma CSS." Nethmi Wijesinghe | Sciencx [Online]. Available: https://www.scien.cx/2021/07/26/why-developers-love-bulma-css/. [Accessed: 2024-03-29T02:10:31+00:00]
rf:citation
» Why Developers Love Bulma CSS | Nethmi Wijesinghe | Sciencx | https://www.scien.cx/2021/07/26/why-developers-love-bulma-css/ | 2024-03-29T02:10:31+00:00
https://github.com/addpipe/simple-recorderjs-demo