bulma

Project Overview

Bulma is a modern CSS framework based on Flexbox that outputs a single CSS file with no JavaScript attached, so it pairs freely with Vue, React, or any other stack. It provides a complete grid, typography, form, and component system, with is-* and has-* modifiers for flexible state control. The Sass source is fully open, letting you customize variables and compile your own theme. Autoprefixer-processed styles keep Flexbox behavior consistent across modern browsers.

Item	Value
Type	CSS framework
Layout engine	Flexbox
Dependencies	None (no JavaScript)
License	MIT

A lightweight CSS-only framework: assemble tidy responsive pages with class names alone.

Key Features

• CSS-only output: single bulma.css works out of the box; import Sass sources to customize variables
• Flexbox grid: a column system built on flex layout with native vertical centering and equal heights
• Component library: navbar, card, message, dropdown, tabs, modal, and other common components
• Modifier syntax: is-* and has-* classes control color, size, and state with intuitive naming
• Responsive design: breakpoints from mobile to widescreen with a mobile-first approach
• Structure and behavior split: interactive components ship styles and structure only; your JS drives behavior

Target Audience

• Frontend developers
• Projects avoiding JS component libraries
• Prototype and admin panel builders
• Teams that customize Sass variables

Quick Start

1. Install via npm

   npm install bulma

2. Import the stylesheet into your project

   @import 'bulma/css/bulma.css'

3. Alternatively include the minified CSS from the jsDelivr CDN
4. Copy the class name structure of the components you need from the docs and start building

Core Advantages

• Zero JS dependency: styling fully decoupled from logic, fitting any stack
• Easy to learn: semantic class names whose effects are guessable at a glance
• Highly customizable: Sass variable driven; change a few values to re-theme

System Requirements

Item	Requirement
Browsers	Recent versions of Chrome, Edge, Firefox, Opera, Safari
Compatibility	IE 10+ partially supported
Install	npm, yarn, Bower, or CDN

Notes

• No built-in interaction: dropdowns, modals, and similar ship styles and structure only; bind events yourself
• Limited IE support: Flexbox features degrade on legacy IE versions