Bulma — Modern CSS Framework Based on Flexbox

Introduction

Bulma is a free, open-source CSS framework built entirely on Flexbox. It provides a clean, readable class-naming system and a collection of responsive components without shipping any JavaScript, making it lightweight and framework-agnostic.

What Bulma Does

• Provides a Flexbox-based responsive column system with automatic equal-width sizing
• Includes UI components such as cards, modals, navbars, tabs, dropdowns, and pagination
• Offers form control styling for inputs, selects, textareas, checkboxes, and radio buttons
• Ships helper classes for colors, spacing, typography, and visibility across breakpoints
• Supports theming through Sass variables for colors, spacing, and component dimensions

Architecture Overview

Bulma is written entirely in Sass and compiles to a single CSS file. There is no JavaScript runtime. The framework uses a BEM-inspired class naming convention (.button.is-primary.is-large) that makes markup self-documenting. The column system is built on Flexbox with responsive modifiers for mobile, tablet, desktop, and widescreen breakpoints. Every component is a standalone Sass partial that can be imported individually.

Self-Hosting & Configuration

• Install via npm or include the compiled CSS from a CDN with a single link tag
• Import individual Sass files to include only the components you need
• Override the default theme by setting Sass variables before importing Bulma partials
• Use Bulma's responsive helpers (is-hidden-mobile, is-flex-desktop) for layout control
• Combine with any JavaScript framework since Bulma has zero JavaScript opinions

Key Features

• Zero JavaScript dependency keeps the bundle small and avoids framework lock-in
• Readable modifier classes (is-primary, is-large, is-rounded) for intuitive styling
• Fully responsive out of the box with five breakpoint tiers
• Modular Sass architecture allows importing only what you need
• Clean documentation with interactive examples for every component

Comparison with Similar Tools

• Bootstrap — includes JavaScript plugins and more components; larger bundle and opinionated JS
• Tailwind CSS — utility-only with no prebuilt components; more verbose markup
• Foundation — comparable Sass framework with JavaScript plugins; heavier and less active
• DaisyUI — Tailwind plugin with component classes; requires Tailwind as a dependency
• Skeleton CSS — much smaller boilerplate; far fewer components and no active development

FAQ

Q: Does Bulma include JavaScript components like modals or dropdowns? A: No. Bulma provides only CSS styling. You add your own JavaScript to toggle classes like is-active on interactive components.

Q: How does Bulma compare to Tailwind CSS? A: Bulma uses semantic component classes (.card, .button) while Tailwind uses low-level utilities. Bulma is faster to start with; Tailwind offers more design flexibility.

Q: Can I customize Bulma's colors? A: Yes. Override Sass variables like $primary, $link, and $info before importing Bulma to set your own color palette.

Q: Is Bulma still actively maintained? A: Yes. Bulma v1 introduced CSS custom properties and continues to receive updates from its maintainer and community.

Sources

• https://github.com/jgthms/bulma
• https://bulma.io/documentation/