How this Bulma track works
- Real Bulma in the playground — CSS loads from CDN; layouts and components work without a framework JavaScript bundle.
- Original lesson copy — we explain patterns and trade-offs in our own words; use official docs as reference, not a script to paste.
- Prerequisites — finish HTML and CSS (especially flexbox). Compare with Bootstrap or Tailwind when you want a second opinionated stack.
Bulma is CSS-only: dropdowns and modals need your own JS (or a tiny helper). This track focuses on markup, modifiers, and responsive columns first.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
Bulma is a modern, CSS-only framework built on flexbox. Instead of inventing every layout and component from scratch, you compose pages from predictable class names—columns, button is-primary, hero—with no JavaScript bundle required for styling to work.
How this track differs from plain CSS
If you completed CSS, you already know selectors, flexbox, and the box model. Bulma does not replace that knowledge—it packages common UI decisions into reusable patterns. Compare with Bootstrap, which ships a JS plugin layer for dropdowns and modals; Bulma stays CSS-only and leaves interactivity to you.
Our Utility CSS and Tailwind tracks teach atomic utilities. Bulma leans toward semantic component classes with modifier prefixes like is-primary and is-half.
Playground setup
Each lesson ships a full HTML document with Bulma 1.x CSS from CDN. Edit markup and classes; layouts, typography, and static components render immediately—no build step, no framework JavaScript.
What you will learn
- The flexbox-based
columns/columnlayout system - Core components: buttons, navbar, hero, cards, forms
- Modifier patterns (
is-*,has-*) - Responsive column and visibility helpers
- When to add your own JS for interactive widgets
Self-check
- In one sentence, what does “CSS-only framework” mean for Bulma?
- Why do we still need solid HTML and CSS fundamentals before leaning on Bulma?
Interview prep
- What is Bulma in one sentence?
A modern CSS framework built on Flexbox with readable class names and no required JavaScript.
- How does this track differ from memorizing bulma.io?
We teach patterns and trade-offs in original copy; official docs are a reference, not the lesson script.