Bulma - CSS Framework That Actually Makes Sense

I've shipped Bulma in production for like 3 years now. First CSS framework that didn't make me want to throw my laptop out the window. After years of Bootstrap's bullshit, Bulma actually works like you'd expect it to.

CSS-Only Means No JavaScript Bullshit

Unlike Bootstrap's jQuery dependency hell or Foundation's JS requirements, Bulma ships as pure CSS. No version conflicts when your project already uses React, Vue, or whatever. Learned this the hard way when Bootstrap modals broke our entire checkout flow during a React upgrade. The modal backdrop started preventing form submissions, throwing null property errors in production. Spent half the night debugging this shit, missed our go-live, PM was not happy.

At least with Bulma's 191KB minified, you get everything in one file - no additional JS bundles to break your shit. Bootstrap needs separate JS files for components to even work.

Flexbox Grid That Actually Works

Bulma's grid system is built on Flexbox from day one, not retrofitted like Bootstrap's mess. Want equal-height columns? Just add .column - no fighting with CSS tricks or JavaScript hacks.

Finally ditched Bootstrap after one too many Friday afternoons fighting .col-md-4 offset-md-2 math that somehow never added up to 12. Nested columns would randomly collapse on iPad Pro, breaking our mobile checkout. Spent hours in DevTools trying to figure out why 4 + 2 + 6 equaled 13 in Bootstrap's parallel universe. Bulma's auto-sizing columns saved me from ever doing that math again.

<!-- This just works, no math required -->
<div class=\"columns\">
  <div class=\"column\">Auto width</div>
  <div class=\"column\">Auto width</div>
  <div class=\"column\">Auto width</div>
</div>

Version 1.0 Finally Fixed Dark Mode

The v1.0 release added CSS Variables and native dark mode. Before this, dark mode required third-party solutions or custom Sass overrides that broke with every update.

Now you just add data-theme=\"dark\" and everything works. The CSS Variables approach means you can customize themes at runtime without recompiling Sass - something Bootstrap still can't do properly.

Class Names That Make Sense

Bulma uses readable modifiers like .is-primary, .is-large, .has-text-centered instead of Bootstrap's .btn-primary, .btn-lg cryptic abbreviations. When you come back to code 6 months later, you actually understand what .is-loading does without checking documentation.

The component naming is consistent across the entire framework. Every component follows the same pattern: base class + modifier. No wondering why buttons use .btn but cards use .card (looking at you, Bootstrap).

Real Performance in Production

I've deployed Bulma sites serving 100K+ users with load times under 800ms on Cloudflare. The CSS-only approach eliminates Bootstrap's JavaScript bundle that adds like 60KB and requires Popper.js. Tree-shaking gets you down to around 50KB when you only import what you actually use (buttons, navbar, grid - skip the kitchen sink).

The modular Sass structure lets you import only what you need:

// Only import what you actually use
@import \"bulma/sass/utilities/_all\";
@import \"bulma/sass/base/_all\";
@import \"bulma/sass/elements/button\";
@import \"bulma/sass/components/navbar\";

This beats including entire frameworks when you only need a grid system and buttons.

Installation: The Reality Check

npm - The Right Way (Usually)

npm install bulma

Works fine until 3am when you get this gem: Error: Expected \";\" at line 1, column 1. Turns out v1.0+ requires Dart Sass, not the old node-sass everyone still has. The error message is completely useless - just upgrade or spend your night debugging Sass parser errors:

npm uninstall node-sass
npm install sass --save-dev

Learned this the hard way migrating from v0.9.4. Two hours of build errors before I finally checked Stack Overflow. The changelog mentions it buried in bullet point #47, but who reads those anyway?

CDN - For When You Don't Give a Shit About Customization

<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css\">

Perfect for prototypes or when your PM wants "just make it look decent quickly." You get zero customization beyond CSS variable overrides, but it works in 30 seconds. The jsdelivr CDN is reliable - I've never had it go down.

Version Gotchas That Will Bite You

v0.9 to v1.0 Migration \"Nightmare\"

The HTML stays the same (thank fuck), but if you customized anything with Sass variables, prepare for pain. Some variables got renamed, and the CSS Variables system changes how theming works.

Here's what broke during my migration (took me like 8 hours instead of the "quick 30 minutes" I promised the PM):

• Custom $primary color threw "Error: Color: undefined is not a color" with zero context about which variable broke
• Import paths changed - @import \"~/bulma\" became @use \"bulma/sass\" but the migration docs glossed over this
• Dark mode variables got completely renamed - spent 2 hours grep-ing the old $dark-* variables that no longer exist
• Windows builds failed with path separator bullshit while Linux worked fine (obviously)

Budget like 4-6 hours for a complex project migration. The official migration guide helps, but doesn't cover edge cases.

Framework Integration Reality

React - Just Use the Classes

Forget wrapper libraries like Bloomer - half are unmaintained. Just use Bulma classes directly in JSX:

// This works fine, no wrapper needed
function MyButton({ loading, children }) {
  return (
    <button className={`button is-primary ${loading ? 'is-loading' : ''}`}>
      {children}
    </button>
  );
}

React Bulma Components is actively maintained if you want abstractions, but adds dependency weight.

Vue - Buefy is Dead, Long Live Buefy

Buefy was the go-to Vue integration, but development stalled. Check commit dates before depending on it. For new projects, use raw Bulma classes with Vue's class binding:

<template>
  <button :class=\"['button', 'is-primary', { 'is-loading': loading }]\">
    {{ text }}
  </button>
</template>

Angular - Good Luck

@angular-bulma exists but has minimal adoption. Most Angular devs just import the CSS and use classes directly. Works fine, but you lose some type safety.

Customization: CSS Variables vs Sass Drama

CSS Variables (v1.0+) - Finally Got This Right

v1.0+ finally got CSS Variables working properly:

:root {
  --bulma-primary-h: 204deg; /* HSL format is weird but works */
  --bulma-primary-s: 71%;
  --bulma-primary-l: 53%;
}

Runtime theming without Sass recompilation bullshit. Perfect for when your PM decides they want user-selectable themes at 3am. The HSL format takes getting used to, but color.adobe.com saves you from the math.

Sass Override - The Old Reliable

@use \"bulma/sass\" with (
  $primary: #3b82f6,
  $family-primary: '\"Inter\", sans-serif'
);

Still works, still powerful. Use this when you need compile-time customization or complex theme logic. Just remember - you're locked into build-time changes.

Performance: Bundle Size Reality Check

Full Bulma CSS is 191KB minified. Sounds big until you compare:

• Bootstrap: 163KB + like 60KB JS = 220KB+ total
• Tailwind: 10KB-3MB depending on your cleanup game

Selective Sass importing can get you to ~50KB if you only need basics:

@import \"bulma/sass/utilities/_all\";
@import \"bulma/sass/base/_all\";
@import \"bulma/sass/elements/button\";
@import \"bulma/sass/elements/title\";
@import \"bulma/sass/components/navbar\";

PurgeCSS works well with Bulma if you're not customizing heavily. Saved me like 60% bundle size on a recent project.