Bulma

---
name: bulma
description: Build responsive web interfaces with Bulma CSS framework (v1.0.4). Use this skill when the user asks to build web pages, components, layouts, or applications using Bulma, or when a project already uses Bulma. Covers all classes, components, forms, grid, layout, helpers, theming, dark mode, Sass customization, and extensions.
version: 1.0.0
framework_version: 1.0.4
last_updated: 2026-04-08
skill_type: reference
---

# Bulma CSS Framework — Skill Reference

## When to Use This Skill

Use when:
- Building web pages, components, or layouts with Bulma CSS
- A project imports or references Bulma (`bulma.css`, `bulma.min.css`, or `bulma` npm package)
- The user asks to create responsive layouts, forms, navigation, cards, modals, or other UI with Bulma
- Migrating from another CSS framework to Bulma
- Customizing Bulma via Sass variables or CSS custom properties
- Adding Bulma extensions (accordion, calendar, carousel, etc.)

Do NOT use when the project uses Tailwind, Bootstrap, or another CSS framework — unless explicitly asked to use Bulma.

---

## Overview

**Bulma** is a free, open-source, CSS-only framework (no JavaScript) built on Flexbox, CSS Grid, and CSS Variables. It provides ready-to-use components for building responsive web interfaces. Current version: **1.0.4**.

### Core Principles
- **CSS-only** — No JavaScript shipped. Behavior is left to the developer.
- **Flexbox + CSS Grid + CSS Variables** — Modern CSS foundations.
- **Mobile-first, 100% responsive** — All components adapt to screen size.
- **Fully modular** — Import only what you need.
- **Sass-based** — Customizable via `!default` Sass variables or CSS custom properties.
- **Dark mode & themes** — Built-in via CSS variables (v1.x feature).

### Installation

```html
<!-- CDN (HTML link) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
```

```css
/* CDN (CSS import) */
@import "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css";
```

```bash
# npm
npm install bulma

# yarn
yarn add bulma
```

```scss
// Sass — import after your variable overrides
$primary: #7952b3;
@import "bulma/bulma";
```

---

## Breakpoints

| Name | Min | Max | Suffix |
|------|-----|-----|--------|
| mobile | — | 768px | `-mobile` |
| tablet | 769px | 1023px | `-tablet` |
| desktop | 1024px | 1215px | `-desktop` |
| widescreen | 1216px | 1407px | `-widescreen` |
| fullhd | 1408px | — | `-fullhd` |
| touch | — | 1023px | `-touch` |

Responsive suffixes apply to sizes, visibility, alignment, and spacing helpers.

---

## Colors

Seven semantic colors used across all components:

| Name | Default | Class suffix |
|------|---------|-------------|
| primary | turquoise | `.is-primary` |
| link | blue | `.is-link` |
| info | cyan | `.is-info` |
| success | green | `.is-success` |
| warning | yellow | `.is-warning` |
| danger | red | `.is-danger` |
| dark | dark grey | `.is-dark` |

Additional: `.is-white`, `.is-light`, `.is-black`, `.is-text`, `.is-ghost`

Light/dark variants: combine color + `.is-light` or `.is-dark` (e.g., `.is-primary.is-light`).

---

## Columns

The Bulma column system is based on Flexbox.

```html
<div class="columns">
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
</div>
```

### Size Modifiers (on `.column`)
- **Fractional**: `.is-full`, `.is-half`, `.is-one-third`, `.is-two-thirds`, `.is-one-quarter`, `.is-three-quarters`, `.is-one-fifth`, `.is-two-fifths`, `.is-three-fifths`, `.is-four-fifths`
- **12-grid**: `.is-1` through `.is-12`
- **Narrow**: `.is-narrow` (takes only needed width)
- **Offsets**: `.is-offset-1` through `.is-offset-11`, plus fractional offsets

### Container Modifiers (on `.columns`)
- `.is-mobile` — columns on mobile too (default: tablet+)
- `.is-desktop` — columns only from desktop
- `.is-multiline` — wrap to multiple rows
- `.is-centered` — center horizontally
- `.is-vcentered` — center vertically
- `.is-gapless` — remove gaps
- `.is-0` through `.is-8` — gap sizes (`.is-3` = default 0.75rem)

### Responsive Sizing
Pattern: `.is-{size}-{breakpoint}` — e.g., `.is-half-mobile`, `.is-one-third-desktop`

---

## Smart Grid (v1.x)

CSS Grid-based layout system.

```html
<div class="grid">
  <div class="cell">Auto</div>
  <div class="cell">Auto</div>
</div>
```

### Fixed Grid
```html
<div class="fixed-grid has-3-cols">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
</div>
```

Fixed grid modifiers: `.has-1-cols` through `.has-12-cols`, responsive variants: `.has-{n}-cols-{breakpoint}`

---

## Elements

### Block
`.block` — basic spacer (margin-bottom: 1.5rem except last child)

### Box
`.box` — white container with padding, border-radius, shadow

### Button
```html
<button class="button is-primary">Save</button>
<button class="button is-danger is-outlined is-loading">Loading</button>
```
- **Colors**: `.is-white`, `.is-light`, `.is-dark`, `.is-black`, `.is-text`, `.is-ghost`, `.is-primary`, `.is-link`, `.is-info`, `.is-success`, `.is-warning`, `.is-danger`
- **Sizes**: `.is-small`, `.is-normal`, `.is-medium`, `.is-large`, `.is-responsive`
- **Styles**: `.is-outlined`, `.is-inverted`, `.is-rounded`, `.is-fullwidth`
- **States**: `.is-hovered`, `.is-focused`, `.is-active`, `.is-loading`, `.is-static`, `[disabled]`
- **Groups**: `.buttons` container with `.has-addons`, `.is-centered`, `.is-right`

### Content
`.content` — typography for user-generated HTML (h1-h6, p, ul, ol, table, blockquote). Sizes: `.is-small`, `.is-medium`, `.is-large`.

### Delete
`.delete` — cross button for closing. Sizes: `.is-small`, `.is-medium`, `.is-large`.

### Icon
`.icon` — container for icon fonts (FontAwesome, etc.). Use `.icon-text` for icon + text combos.

### Image
`.image` — responsive image container.
- **Fixed sizes**: `.is-16x16`, `.is-24x24`, `.is-32x32`, `.is-48x48`, `.is-64x64`, `.is-96x96`, `.is-128x128`
- **Ratios**: `.is-square`, `.is-1by1`, `.is-4by3`, `.is-16by9`, `.is-2by1`, etc.
- **Modifiers**: `.is-rounded`, `.is-fullwidth`, `.has-ratio`

### Notification
```html
<div class="notification is-success is-light">
  <button class="delete"></button>
  Success message here.
</div>
```
Colors + `.is-light` variants supported.

### Progress
```html
<progress class="progress is-primary" value="50" max="100">50%</progress>
```
Colors and sizes supported.

### Table
```html
<table class="table is-striped is-hoverable is-fullwidth">...</table>
```
Modifiers: `.is-bordered`, `.is-striped`, `.is-narrow`, `.is-hoverable`, `.is-fullwidth`. Wrap in `.table-container` for scroll.

### Tag
```html
<span class="tag is-primary is-medium">Tag</span>
```
Colors, sizes, `.is-rounded`, `.is-delete`. Group with `.tags` container, `.has-addons` for attached tags.

### Title & Subtitle
```html
<h1 class="title is-1">Title</h1>
<h2 class="subtitle is-3">Subtitle</h2>
```
Sizes `.is-1` through `.is-6`. Use `.is-spaced` on `.title` to maintain gap with `.subtitle`.

---

## Components

### Breadcrumb
```html
<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="is-active"><a href="#" aria-current="page">Page</a></li>
  </ul>
</nav>
```
Alignment: `.is-centered`, `.is-right`. Separators: `.has-arrow-separator`, `.has-dot-separator`, `.has-bullet-separator`, `.has-succeeds-separator`. Sizes supported.

### Card
```html
<div class="card">
  <div class="card-image">
    <figure class="image is-4by3"><img src="..." alt=""></figure>
  </div>
  <div class="card-content">
    <div class="content">Card content</div>
  </div>
  <footer class="card-footer">
    <a class="card-footer-item">Save</a>
    <a class="card-footer-item">Delete</a>
  </footer>
</div>
```
Parts: `.card-header`, `.card-header-title`, `.card-header-icon`, `.card-image`, `.card-content`, `.card-footer`, `.card-footer-item`.

### Dropdown
```html
<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button">Dropdown</button>
  </div>
  <div class="dropdown-menu">
    <div class="dropdown-content">
      <a class="dropdown-item">Item 1</a>
      <hr class="dropdown-divider">
      <a class="dropdown-item">Item 2</a>
    </div>
  </div>
</div>
```
Modifiers: `.is-active`, `.is-hoverable`, `.is-right`, `.is-up`.

### Menu
```html
<aside class="menu">
  <p class="menu-label">General</p>
  <ul class="menu-list">
    <li><a class="is-active">Dashboard</a></li>
    <li><a>Customers</a></li>
  </ul>
</aside>
```

### Message
```html
<article class="message is-info">
  <div class="message-header"><p>Info</p><button class="delete"></button></div>
  <div class="message-body">Message body text.</div>
</article>
```
Colors and sizes supported. Header is optional.

### Modal
```html
<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">Content</section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>
```
Toggle `.is-active` on `.modal` with JavaScript. Add `.is-clipped` to `<html>` to prevent background scroll.

### Navbar
```html
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#"><img src="logo.png" alt="Logo"></a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">More</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">About</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Contact</a>
        </div>
      </div>
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary"><strong>Sign up</strong></a>
          <a class="button is-light">Log in</a>
        </div>
      </div>
    </div>
  </div>
</nav>
```
- **Fixed**: `.is-fixed-top`, `.is-fixed-bottom` (add `.has-navbar-fixed-top`/`.has-navbar-fixed-bottom` to `<body>`)
- **Colors**: all semantic colors
- **Modifiers**: `.is-transparent`, `.is-spaced`, `.has-shadow`
- **Dropdown**: `.is-hoverable`, `.is-active`, `.is-right`, `.is-boxed`, `.has-dropdown-up`
- **Burger toggle**: toggle `.is-active` on both `.navbar-burger` and `.navbar-menu` via JS

### Pagination
```html
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link is-current" aria-label="Page 5" aria-current="page">5</a></li>
  </ul>
</nav>
```
Alignment: `.is-centered`, `.is-right`. Sizes supported.

### Panel
```html
<nav class="panel is-primary">
  <p class="panel-heading">Repositories</p>
  <p class="panel-tabs"><a class="is-active">All</a><a>Public</a></p>
  <a class="panel-block is-active"><span class="panel-icon">...</span> Item</a>
</nav>
```

### Tabs
```html
<div class="tabs is-boxed is-medium">
  <ul>
    <li class="is-active"><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
  </ul>
</div>
```
Styles: `.is-boxed`, `.is-toggle`, `.is-toggle-rounded`, `.is-fullwidth`. Alignment and sizes supported.

---

## Form

### Structure
```html
<div class="field">
  <label class="label">Name</label>
  <div class="control has-icons-left">
    <input class="input is-primary" type="text" placeholder="Name">
    <span class="icon is-small is-left"><i class="fas fa-user"></i></span>
  </div>
  <p class="help is-danger">This field is required</p>
</div>
```

### Input
`.input` — Colors, sizes, `.is-rounded`, `.is-static` supported.

### Textarea
`.textarea` — Colors, sizes, `.has-fixed-size` supported.

### Select
```html
<div class="select is-primary">
  <select><option>Option 1</option></select>
</div>
```
Colors, sizes, `.is-rounded`, `.is-multiple`, `.is-loading`.

### Checkbox & Radio
```html
<label class="checkbox"><input type="checkbox"> Remember me</label>
<label class="radio"><input type="radio" name="answer"> Yes</label>
```

### File Upload
```html
<div class="file has-name is-primary">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon"><i class="fas fa-upload"></i></span>
      <span class="file-label">Choose a file…</span>
    </span>
    <span class="file-name">resume.pdf</span>
  </label>
</div>
```
Colors, sizes, `.is-boxed`, `.is-fullwidth`, `.is-centered`, `.is-right`.

### Field Modifiers
- `.is-grouped` — group controls on same line
- `.is-grouped-centered`, `.is-grouped-right`, `.is-grouped-multiline`
- `.has-addons` — attach controls together
- `.is-horizontal` — horizontal form layout (use `.field-label` + `.field-body`)
- `.is-expanded` on `.control` for full-width in grouped/addons

---

## Layout

### Container
`.container` — centered, max-width container.
- `.is-widescreen`, `.is-fullhd` — wider max-widths
- `.is-max-desktop`, `.is-max-widescreen`, `.is-max-tablet` — cap max-width
- `.is-fluid` — full-width with 32px margin

### Hero
```html
<section class="hero is-primary is-medium">
  <div class="hero-body">
    <p class="title">Hero title</p>
    <p class="subtitle">Hero subtitle</p>
  </div>
</section>
```
Sizes: `.is-small`, `.is-medium`, `.is-large`, `.is-halfheight`, `.is-fullheight`, `.is-fullheight-with-navbar`. Parts: `.hero-head`, `.hero-body`, `.hero-foot`.

### Section
```html
<section class="section">
  <div class="container">Content</div>
</section>
```
Sizes: `.is-medium`, `.is-large`.

### Level
```html
<div class="level">
  <div class="level-left"><div class="level-item"><strong>123</strong> posts</div></div>
  <div class="level-right"><div class="level-item"><a class="button is-success">New</a></div></div>
</div>
```
Use `.is-mobile` for horizontal layout on mobile.

### Media Object
```html
<article class="media">
  <figure class="media-left"><p class="image is-64x64"><img src="..."></p></figure>
  <div class="media-content"><div class="content"><p><strong>Name</strong> text</p></div></div>
  <div class="media-right"><button class="delete"></button></div>
</article>
```

### Footer
```html
<footer class="footer">
  <div class="content has-text-centered"><p>Footer content</p></div>
</footer>
```

---

## Helpers

### Spacing
Pattern: `{m|p}{t|r|b|l|x|y}-{0-6|auto}`
- `m` = margin, `p` = padding
- `t/r/b/l/x/y` = top/right/bottom/left/horizontal/vertical (omit for all)
- Values: `0`=0, `1`=0.25rem, `2`=0.5rem, `3`=0.75rem, `4`=1rem, `5`=1.5rem, `6`=3rem, `auto`

### Typography
- **Sizes**: `is-size-1` (3rem) through `is-size-7` (0.75rem), responsive: `is-size-{1-7}-{breakpoint}`
- **Alignment**: `has-text-centered`, `has-text-left`, `has-text-right`, `has-text-justified`
- **Weight**: `has-text-weight-light`, `-normal`, `-medium`, `-semibold`, `-bold`, `-extrabold`
- **Transform**: `is-capitalized`, `is-lowercase`, `is-uppercase`, `is-italic`, `is-underlined`
- **Family**: `is-family-sans-serif`, `is-family-monospace`, `is-family-primary`, `is-family-secondary`, `is-family-code`

### Color Helpers
- **Text**: `has-text-{color}`, `has-text-{color}-light`, `has-text-{color}-dark`
- **Background**: `has-background-{color}`, `has-background-{color}-light`, `has-background-{color}-dark`
- **Greys**: `has-text-grey`, `-grey-light`, `-grey-lighter`, `-grey-dark`, `-grey-darker`, `-black-bis`, `-black-ter`, `-white-bis`, `-white-ter`
- **Palette (v1)**: `has-text-{color}-00` through `has-text-{color}-100` (increments of 5)

### Visibility
- **Show**: `is-block`, `is-flex`, `is-inline`, `is-inline-block`, `is-inline-flex` + breakpoint variants
- **Hide**: `is-hidden`, `is-hidden-{breakpoint}`, `is-invisible`, `is-sr-only`

### Flexbox
- **Direction**: `is-flex-direction-row`, `-row-reverse`, `-column`, `-column-reverse`
- **Wrap**: `is-flex-wrap-nowrap`, `-wrap`, `-wrap-reverse`
- **Justify**: `is-justify-content-flex-start`, `-flex-end`, `-center`, `-space-between`, `-space-around`, `-space-evenly`
- **Align Items**: `is-align-items-stretch`, `-flex-start`, `-flex-end`, `-center`, `-baseline`
- **Align Self**: `is-align-self-auto`, `-flex-start`, `-flex-end`, `-center`, `-baseline`, `-stretch`
- **Grow/Shrink**: `is-flex-grow-{0-5}`, `is-flex-shrink-{0-5}`

### Other Helpers
`is-clearfix`, `is-pulled-left`, `is-pulled-right`, `is-overlay`, `is-clipped`, `is-radiusless`, `is-shadowless`, `is-unselectable`, `is-clickable`, `is-relative`

---

## Customization

### With Sass Variables
All Bulma variables use `!default` — override them before importing:

```scss
// Override initial variables
$primary: #7952b3;
$family-sans-serif: "Nunito", sans-serif;
$radius: 6px;
$gap: 32px;

// Override derived variables
$link: $primary;
$scheme-main: #fafafa;

// Import Bulma
@import "bulma/bulma";
```

### Key Sass Variables
- **Colors**: `$black`, `$white`, `$primary`, `$info`, `$success`, `$warning`, `$danger`, `$link`
- **Typography**: `$family-sans-serif`, `$family-monospace`, `$size-1` through `$size-7`
- **Spacing**: `$block-spacing` (1.5rem), `$section-padding` (3rem 1.5rem)
- **Breakpoints**: `$tablet` (769px), `$desktop` (1024px), `$widescreen` (1216px), `$fullhd` (1408px)
- **Radius**: `$radius` (4px), `$radius-small`, `$radius-large`, `$radius-rounded`

### With CSS Variables (v1.x)
```css
:root {
  --bulma-primary-h: 171;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 41%;
  --bulma-family-primary: "Nunito", sans-serif;
}
```

### Modular Import
```scss
// Import only what you need
@use "bulma/sass/utilities";
@use "bulma/sass/base";
@use "bulma/sass/elements/button";
@use "bulma/sass/components/navbar";
@use "bulma/sass/grid/columns";
```

---

## Dark Mode & Themes (v1.x)

Bulma v1.x supports dark mode natively via CSS variables and the `prefers-color-scheme` media query.

```html
<!-- Force dark mode -->
<html class="theme-dark">

<!-- Force light mode -->
<html class="theme-light">
```

Themes can be customized by overriding CSS variables per theme class.

---

## Skeletons (v1.x)

Loading placeholder components.

```html
<!-- Standalone block -->
<div class="skeleton-block"></div>

<!-- Multiple lines -->
<div class="skeleton-lines">
  <div></div><div></div><div></div>
</div>

<!-- On components -->
<button class="button is-skeleton">Loading</button>
<h1 class="title is-skeleton">Loading</h1>
<input class="input is-skeleton">
```

- `is-skeleton` — full element skeleton (button, icon, image, input, textarea, notification, tag, title, subtitle)
- `has-skeleton` — content-only skeleton (title, subtitle)

See [FEATURES.md](FEATURES.md) for CSS variables and full details.

---

## Naming Convention (Syntax)

Bulma uses a modifier class system:
- **Base class**: the component (e.g., `button`, `input`, `card`)
- **`is-` prefix**: state/style modifiers (`is-primary`, `is-small`, `is-loading`, `is-active`)
- **`has-` prefix**: content/property modifiers (`has-text-centered`, `has-background-primary`, `has-addons`)
- **Combinable**: stack multiple modifiers freely on one element

```html
<button class="button is-primary is-small is-outlined is-loading" disabled>Button</button>
```

---

## Modularity (@use imports)

Import only what you need to reduce CSS bundle size.

```scss
// Required base (for most components)
@use "bulma/sass/base";
@use "bulma/sass/themes";

// Individual components
@use "bulma/sass/elements/button";
@use "bulma/sass/elements/title";
@use "bulma/sass/components/navbar";
@use "bulma/sass/components/modal";

// Layout
@use "bulma/sass/layout/section" with (
  $section-padding: 3rem,
  $section-padding-desktop: 4.5rem
);

// Columns are self-contained (no base needed)
@use "bulma/sass/grid/columns";
```

---

## Migrating from v0.x to v1

### What Stays the Same
- All HTML markup is backward compatible
- You can swap the CDN link and everything works

### Key Changes

**Dart Sass required** — v1 uses `@use`/`@forward` instead of `@import`.

**Before (v0.x):**
```scss
$primary: #7952b3;
@import "bulma";
```

**After (v1.x):**
```scss
@use "bulma/sass" with (
  $primary: #7952b3
);
```

**CSS Variables** — all values use `var(--bulma-*)` instead of hardcoded values.

**Tiles deprecated** — use Smart Grid (`.grid` + `.cell`) instead of `.tile`.

**New v1 features**: Themes, Dark Mode, Color Palettes, Skeletons, Class Prefixing.

---

## Extensions (Community)

29 community extensions. See [EXTENSIONS.md](EXTENSIONS.md) for complete list with npm packages, GitHub URLs, and usage examples.

Most popular (by Wikiki): accordion, badge, calendar, carousel, checkradio, divider, iconpicker, pageloader, pricingtable, quickview, ribbon, slider, steps, switch, tagsinput, timeline, tooltip.

Others: bulma-toast (rfoel), bulma-dashboard (lucperkins), bulma-o-steps (octoshrimpy), bulma-block-list (chrisrhymes), bulma-spacing (kaangokdemir), bulma-list (bluefantail), and more.

---

## Important Notes

1. **No JavaScript** — Bulma is CSS-only. Interactive behaviors (modals, dropdowns, navbar burger) require custom JS. Toggle `.is-active` class for show/hide.
2. **Navbar burger** — Toggle `.is-active` on both `.navbar-burger` AND `.navbar-menu`.
3. **Modal** — Toggle `.is-active` on `.modal`. Add `.is-clipped` to `<html>` to prevent scroll.
4. **Columns are tablet+ by default** — Add `.is-mobile` on `.columns` for mobile columns.
5. **Content class** — Wrap user-generated HTML in `.content` for automatic typography styling.
6. **Responsive helpers** — Most size/visibility/alignment classes accept breakpoint suffixes.
7. **Color palette (v1)** — ~70+ CSS variables per color, shades `00`–`100` auto-generated.
8. **CSS variable prefix** — All CSS vars use `--bulma-` prefix (configurable via `$cssvars-prefix`).
9. **Tiles removed in v1** — Use `.grid` + `.cell` (Smart Grid) instead.

---

## Update Commands

| Command | Description |
|---------|-------------|
| `/bulma-check` | Quick version check — see if Bulma has a newer release |
| `/bulma-update` | Full update — fetch latest docs and regenerate all skill files |
| `/bulma-update --force` | Force full re-fetch regardless of version |
| `/bulma-update --check` | Detailed comparison without applying changes |
| `/bulma-update --section X` | Re-fetch specific section (features, extensions, sass, examples, reference) |

The skill tracks `framework_version` in this file's frontmatter. The update command compares it against the latest npm release at `registry.npmjs.org/bulma/latest`.

---

## Related Files
- [references/classes.md](references/classes.md) — Complete class index with all modifiers
- [references/examples.md](references/examples.md) — Common patterns and full-page examples
- [references/features.md](references/features.md) — CSS Variables, Themes, Dark Mode, Color Palettes, Skeletons
- [references/sass.md](references/sass.md) — All Sass variables, mixins, extends, customization
- [references/extensions.md](references/extensions.md) — All 29 extensions with details and usage
- [scripts/check-updates.sh](scripts/check-updates.sh) — Version check against npm registry