# Bulma — Modern CSS Framework Based on Flexbox

> A pure CSS framework with no JavaScript dependency that provides responsive columns, form controls, and UI components using a clean readable class syntax.

## Install

Save in your project root:

# Bulma — Modern CSS Framework Based on Flexbox

## Quick Use
```bash
npm install bulma
# or CDN
# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css">
```
```html
<div class="columns">
  <div class="column">First</div>
  <div class="column">Second</div>
</div>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/c8744dbc-3ead-11f1-9bc6-00163e2b0d79
Author: AI Open Source