FULL REVIEW / Sass framework/EST. 2016

Bulma
review file

Pure CSS, no JavaScript.

Bulma is strongest when sass framework is the right foundation and the team values visual control over a generic UI grab bag.

Visit Bulma → Read docs GitHub

TypeSass framework

LicenseMIT

Stars49.5k

Downloads210K / wk

01 / Best for

Teams that want fast visual iteration
Custom brands that should not look like a stock component library
Projects where bundle size and CSS control matter

02 / Avoid if

You need complex accessible widgets out of the box
Your team wants a complete product UI vocabulary on day one

§ 03

Decision dossier

FULL FILE

A Sass-based framework with a column-first grid and a small, opinionated set of components. Quiet, dependable, no surprises.

Editorial note: outbound links may become affiliate or referral links. Rankings stay based on product fit, not commissions.

Author: Jeremy Thomas
Released: 2016
Pricing model: Open-source core; commercial ecosystem varies
Frameworks: Any HTML stack
Tags: css / sass framework / mit
Repository: 49.5k stars
Freshness: Tracked from jgthms/bulma and bulma
Sponsorship: Sponsor this category

§ AI

AI coding fit

84/100

Vibe coding verdict

Bulma gives AI coding agents a sass framework foundation for landing-page, marketing-site, prototype, custom-brand-system. Ask the agent to follow the docs, reuse the kit's primitives, and keep spacing, states, and accessibility consistent.

Best AI tools: cursor / claude code / bolt / replit / windsurf
Best AI use cases: landing page / marketing site / prototype / custom brand system
MCP / agent context: Strong: utility and token names are easy for coding agents to apply from prompt context.
Install command: npm install bulma

Copy prompt for AI builders

Paste one of these prompts into Cursor, Claude Code, v0, Lovable, Bolt, or Replit to steer the generated UI toward this kit instead of a generic app shell.

Build a {{type}} with Bulma. Use the official Bulma patterns, include responsive states, accessible navigation, polished empty/loading/error states, and explain any setup steps.

In Cursor, use Bulma as the UI foundation for this build.

Build a {{type}} with Bulma. Use the official Bulma patterns, include responsive states, accessible navigation, polished empty/loading/error states, and explain any setup steps.

Work file-by-file, explain the component structure, and keep the result aligned with Bulma conventions instead of inventing a generic app shell.

In Claude Code, inspect the existing app first, then implement the UI with Bulma.

Build a {{type}} with Bulma. Use the official Bulma patterns, include responsive states, accessible navigation, polished empty/loading/error states, and explain any setup steps.

Make the smallest coherent changes, preserve routing and tests, and add or update tests for the generated UI behavior.

Generate a polished Bulma-style interface for this product goal.

Build a {{type}} with Bulma. Use the official Bulma patterns, include responsive states, accessible navigation, polished empty/loading/error states, and explain any setup steps.

Return production-ready components with clear hierarchy, responsive states, empty states, and reusable sections.

Build this app screen using Bulma as the design system.

Build a {{type}} with Bulma. Use the official Bulma patterns, include responsive states, accessible navigation, polished empty/loading/error states, and explain any setup steps.

Prioritize a shippable first pass: navigation, responsive layout, realistic content, form states, and obvious next actions.

Textareas stay selectable without JavaScript. The copy buttons progressively enhance supported browsers.

AI strengths

Bulma gives agents clear styling vocabulary close to the generated markup.
Works across many stacks without locking the prompt to one React component API.
Useful for fast visual iteration and brand-specific refinement prompts.

AI cautions

Pair CSS utilities with accessible primitives for complex interactions.
Watch for repetitive class soup and ask the agent to extract reusable components.

What to ask the AI for

Create a responsive {{type}} with Bulma styling conventions.
Use consistent spacing, color tokens, hover states, and dark-mode-ready classes.
Extract repeated sections into reusable components after the first screen is working.

Freshness

Weekly source checks

We keep automated signals separate from human-written verdicts. GitHub, npm, homepage, and docs checks can flag stale facts without rewriting this review.

Sponsor this category

Commercial disclosure

Sponsored placements are labeled. Editorial ranking is not for sale.

View sponsorship options →

04 / ACCESSIBILITY

Can teams ship responsibly?

CSS-first systems do not solve interaction accessibility by themselves; pair with tested primitives for menus, dialogs, and comboboxes.

05 / THEMING

Can it become your brand?

Excellent for custom visual systems because tokens and utility rules stay close to markup.

§ 06

Compare before you commit

Open comparison table

ALT 1 CSS framework

EST. 2011

Bootstrap

The original component grid.

168k

★ Stars

Components

AI fit

MIT

License

by Bootstrap Team Open file →

ALT 2 Utility-first CSS

EST. 2017

Tailwind CSS

Style by composition. No class names to invent.

82.4k

★ Stars

—

Components

100

AI fit

MIT

License

by Tailwind Labs Open file →

ALT 3 Tailwind plugin

EST. 2020

daisyUI

Component classes for Tailwind.

32.9k

★ Stars

Components

AI fit

MIT

License

by Pouya Saadeghi Open file →

Bulma review file

Decision dossier

AI coding fit

Generic prompt

Cursor variant

Claude Code variant

v0 variant

Lovable/Bolt variant

Weekly source checks

Commercial disclosure

Can teams ship responsibly?

Can it become your brand?

Compare before you commit

Bootstrap

Tailwind CSS

daisyUI

Bulma
review file