Bulma：基于 Flexbox 的现代化 CSS 框架——安装、构建流程与源码结构指南

Bulma 是一个基于 Flexbox 构建的现代化纯 CSS 框架，其唯一产物是一个单文件 bulma.css，不含任何 JavaScript。本篇技术文章以 Bulma 仓库的 README 为主线，完整覆盖安装方式、浏览器支持范围与使用前提，并结合 package.json、sass/_index.scss 与 versions/ 目录中的真实构建脚本和源码结构，深入讲解该框架的 Sass 编译流程、变体版本与测试体系，帮助开发者从"下载即用"到"定制变量"完整掌握 Bulma 的工程化使用方式。

什么是 Bulma：纯 CSS、无 JavaScript

README 开宗明义地给出了 Bulma 的定位：

Bulma is a modern CSS framework based on Flexbox.

它有三个核心特性值得强调：

1. CSS only。Bulma 是纯 CSS 框架，唯一输出物是单个 CSS 文件 css/bulma.css（以及压缩版 css/bulma.min.css）。你可以直接"开箱即用"，也可以下载 Sass 源码来自定义变量。
2. 零 JavaScript。Bulma 不携带任何 JS 实现——社区通常已有自己的 JS 方案，Bulma 只作为"逻辑之上的样式层"存在，与环境无关（environment agnostic），因此可以无冲突地接入任意前端技术栈。
3. CSS 变量驱动。从 css/bulma.css 的产物可以看到，v1.x 的样式层大量使用 :root 上的 --bulma-* CSS 自定义属性（如 --bulma-control-radius、--bulma-scheme-main-l、--bulma-family-primary 等），这正是"通过变量定制主题"的实现基础。

从 package.json 可以确认 v1.0.4 的产物暴露方式：

{
  "name": "bulma",
  "version": "1.0.4",
  "main": "bulma.scss",
  "unpkg": "css/bulma.css",
  "style": "css/bulma.min.css",
  "keywords": ["css", "sass", "scss", "flexbox", "grid", "responsive", "framework"]
}

其中 main 指向 Sass 源入口（供构建工具消费），unpkg 与 style 分别指向 CDN 场景和编辑器场景使用的预编译 CSS；files 字段声明了 npm 包实际发布的目录为 css、sass、versions 以及 bulma.scss、LICENSE、README.md——也就是说，npm install bulma 之后你能拿到的就是这三类资产：预编译 CSS、Sass 源码与变体版本。

快速安装

README 提供了四种安装渠道，以下命令均可直接复制使用。

NPM

npm install bulma

Yarn

yarn add bulma

Bower

bower install bulma

（仓库中保留了 bower.json，对应此安装渠道。）

导入

安装后，在项目的样式入口中导入预编译 CSS：

@import 'bulma/css/bulma.css'

对应到本仓库结构，bulma/css/bulma.css 即 css/bulma.css。如果你使用支持 Sass 的构建工具（Vite、Webpack 等），也可以直接指向 bulma/bulma.scss 参与编译并覆盖变量。

CDN

Bulma 在 jsDelivr 上有 CDN 分发（包名 bulma）。结合 package.json 中 unpkg: "css/bulma.css" 的声明，CDN 场景下引用的是预编译好的 CSS，无需本地构建。

浏览器支持

Bulma 使用 autoprefixer（对应 package.json devDependencies 中的 postcss-cli + cssnano 工具链）让大部分 Flexbox 特性兼容更早的浏览器版本。根据 Can I use 的 flexbox 数据，Bulma 兼容以下浏览器的较新版本：

• Chrome
• Edge
• Firefox
• Opera
• Safari

Internet Explorer（10+）仅获得部分支持。

需要注意适用前提：该结论针对的是"较新版本"浏览器；若你的用户群包含旧版内核或 IE，需要自行验证 Flexbox 相关组件（如 navbar、columns、level）的降级表现。

构建流程：Sass 编译与产物生成

虽然使用者只需引入 CSS，但理解 Bulma 仓库的构建链路，对定制变量、精简产物非常关键。package.json 的 scripts 字段定义了完整流程：

# 从 Sass 源编译出带 source map 的展开式 CSS
npm run build-bulma
# 等价于：sass --style=expanded --source-map bulma.scss css/bulma.css

# 用 cssnano 压缩出最小化产物
npm run minify-bulma
# 等价于：postcss css/bulma.css --no-map --use cssnano --output css/bulma.min.css

# 编译四个变体版本（见下一节）
npm run build-versions

# 一键清理 + 全量构建 + 全量压缩
npm run deploy
# 等价于：npm run clean && npm run build-all && npm run minify-all

# 本地开发：watch 模式持续编译
npm start

Sass 源码目录结构

仓库根目录的 sass/ 目录即完整源码，其总入口 sass/_index.scss 按模块 @forward 了整个框架：

@forward "utilities";
@forward "themes";
@forward "base";
@forward "elements";
@forward "form";
@forward "components";
@forward "grid";
@forward "layout";
@forward "base/skeleton";
@forward "helpers";

各模块职责清晰，与 docs/_data/variables/ 下的变量文档目录一一对应：

模块	内容	示例文件
sass/utilities/	初始变量、派生变量、函数、mixins、CSS 变量、controls	initial-variables.scss、derived-variables.scss、css-variables.scss
sass/themes/	主题（light/dark/setup）	dark.scss、light.scss
sass/base/	基础层：minireset、generic、animations、skeleton	minireset.scss
sass/elements/	基础元素：button、box、tag、title、icon、table 等	button.scss
sass/form/	表单控件：input、select、file、checkbox/radio	input-textarea.scss
sass/components/	组合组件：navbar、dropdown、card、modal、tabs、pagination	navbar.scss
sass/grid/	网格系统：columns 与 grid	columns.scss、grid.scss
sass/layout/	布局块：section、container、hero、level、media、footer	hero.scss
sass/helpers/	工具类：颜色、间距、flexbox、overflow、visibility 等	spacing.scss、color.scss

这套"utilities → themes → base → elements → form → components → grid → layout → helpers"的引入顺序保证了变量先行、基础样式打底、组件居上、工具类最后，符合 CSS 覆盖层级的常规约定。

多编译器测试

Bulma 对 Sass 实现的一致性有显式的测试保障：test/ 目录下分别为三种编译器准备了独立测试——test/dart-sass/dart-sass.js、test/node-sass/node-sass.js 与 test/ruby-sass/（后者含 ruby-sass.sh 及 sass/ 下的多组定制样例，如 customize.scss、override.scss，并配有 keywords/ 中预期产物关键词用于校验）。这印证了 Bulma 作为"变量可定制框架"对不同 Sass 编译器行为差异的敏感处理。

预编译变体版本

除标准版外，仓库为不同集成场景预置了四个变体，源码在 versions/，编译产物在 css/versions/：

变体	源文件	产物	用途
no-dark-mode	versions/bulma-no-dark-mode.scss	css/versions/bulma-no-dark-mode.css	关闭暗色模式，固定为浅色主题
no-helpers	versions/bulma-no-helpers.scss	css/versions/bulma-no-helpers.css	剔除 helpers 工具类，减小体积
no-helpers-prefixed	versions/bulma-no-helpers-prefixed.scss	css/versions/bulma-no-helpers-prefixed.css	无工具类 + 类名前缀，避免与宿主样式冲突
prefixed	versions/bulma-prefixed.scss	css/versions/bulma-prefixed.css	全部类名加 bulma- 前缀

从源码结构看，prefixed 版本正是通过 Sass 的模块参数化实现的，versions/bulma-prefixed.scss 全文仅一行配置：

@use "../sass" with (
  $class-prefix: "bulma-"
);

这展示了 Bulma 定制机制的底层原理：类名前缀是编译期由 $class-prefix 变量控制的，而不是事后文本替换。同样，versions/bulma-no-dark-mode.scss 展示了"模块裁剪 + 主题锁定"的组合写法——它显式 @forward 除 themes 外的大多数模块，再通过 @use "../sass/themes/light" 与 @use "../sass/themes/setup" 在 :root 中直接混入 light-theme 和 setup-theme，把主题固定为浅色。需要这些版本的场景（如与既有类名体系共存的第三方集成）可以直接从 css/versions/ 取用产物，或用 package.json 中的 build-versions 脚本自行重建。

文档体系

README 指明文档位于 docs/ 目录，基于 Ruby 的 Jekyll 构建（可见 docs/_config.yml 与 docs/_layouts/ 布局模板）。在线文档源文件按主题组织在 docs/documentation/ 下，覆盖 start（安装、语法、响应式）、elements、form、grid、components、helpers、features（自动配色、暗色模式、skeleton、智能网格等）等章节，例如 installation.html 与 overview.html。其中 overview 明确给出使用前提：页面必须使用 HTML5 doctype 并保证响应式声明，且 Bulma 的使用路径只有两条——直接用预编译 .css，或安装 .scss 源码做定制。

另外，仓库附带了面向 UI 组件的验收测试页面 cypress/ 与 cyp/（如 cyp/components/navbar.html），可作为各组件最终渲染形态的参照。

生态：相关项目一览

README 维护了一份规模可观的生态项目清单。以下是该清单的完整内容（项目名与用途均摘自 README 原文）：

项目	说明
Bulma with Attribute Modules	增加基于属性选择器的支持
Bulma with Rails	将 Bulma 集成进 Rails 资产管道
BulmaRazor	基于 Bulma 与 Blazor 的轻量组件库
Vue Admin（已停更）	基于 Bulma 的 Vue 管理框架
Bulmaswatch	免费的 Bulma 主题集
Goldfish（只读）	使用 Bulma、Golang 与 Vue Admin 的 Vault UI
ember-bulma	为 Bulma 提供组件集合的 Ember 插件
Bloomer	面向 React 的 Bulma 组件集
React-bulma	React.js 版 Bulma 组件
Buefy	基于 Bulma 的轻量 Vue.js UI 组件库
vue-bulma-components	语法直白的 Vue.js 版 Bulma 组件
BulmaJS	Bulma 的 ES6 JavaScript 集成，提供 data-* API
Bulma-modal-fx	带 CSS 过渡与动画的模态窗口特效集
Bulma Stylus	与 Bulma 同步更新的 1:1 Stylus 翻译
Bulma.styl（只读）	Bulma 0.6.11 的 1:1 Stylus 翻译
elm-bulma	Bulma + Elm
elm-bulma-classes	为 Elm 使用准备的 Bulma 类名封装
Bulma Customizer	自定义构建专属 Bulma 的定制器
Fulma	fable-react 场景下 Bulma 的封装层
Laravel Enso	基于 Bulma、VueJS 与 Laravel 的 SPA 管理面板
Django Bulma	Bulma 与 Django 的集成
Bulma Templates	免费的 Bulma 模板集
React Bulma Components	另一个 React 版 Bulma 封装
purescript-bulma	PureScript 的 Bulma 绑定
Vue Datatable	基于 Vue、Laravel 与 JSON 模板的 Bulma 风格数据表格
bulma-fluent	受微软 Fluent Design System 启发的 Bulma 主题
csskrt-csskrt	自动向 HTML 文件添加 Bulma 类
bulma-pagination-react	将 Bulma 分页封装为 React 组件
bulma-helpers	面向 Bulma 的函数式/原子化 CSS 类
bulma-swatch-hook	以 React hook 与组件形式提供的 Bulma 色板
BulmaWP（只读）	Bulma 起步 WordPress 主题
Ralma	无状态 Ractive.js 版 Bulma 组件
Django Simple Bulma	Bulma 与 Bulma-Extensions 的轻量 Django 集成
rbx	用 TypeScript 编写的综合 React UI 框架
Awesome Bulma Templates	免费真实场景的 Bulma 模板合集
Trunx	"基于 Bulma 的 React 组件"
@aybolit/bulma	受 Bulma 与 Bulma-extensions 启发的 Web Components 库
Drulma	Bulma 的 Drupal 主题
Bulrush	基于 Bulma 的 Python Pelican 博客主题
Bulma Variable Export	在 Webpack 项目中以 JS/TS 访问 Bulma 变量
Bulmil	基于 Web Components（Bulma & Stencil）的通用 UI 组件库
Svelte Bulma Components	用于 Svelte.js 或独立使用的 UI 组件库
Bulma Nunjucks Starterkit	带 Bulma 的 Nunjucks 起步包
Bulma-Social	Bulma 社交按钮与配色
Divjoy	带 Bulma 模板的 React 代码库生成器
Blazorise	支持 Bulma CSS 框架的 Blazor 组件库
Oruga-Bulma	Oruga UI 的 Bulma 主题
@bulvar/bulma	带 CSS 变量支持的 Bulma
@angular-bulma	用于 Bulma 项目的 Angular 指令与组件
Bulma CSS Class Completion	基于 Bulma 类名提供 HTML class 属性补全
Crispy-Bulma	django-crispy-forms 的 Bulma 模板包
Manifest	具备 DB、管理面板、API、JS SDK 的轻量 BaaS
Reactive Bulma	基于 React、Bulma、TypeScript 与 Rollup 的组件库

从中可以看出 Bulma 生态的主轴是"框架/语言封装"（React、Vue、Blazor、Angular、Svelte、Elm、Ractive 等）与"主题/工具"（Bulmaswatch、Bulma Customizer、变量导出）两条线，与其"纯 CSS、环境无关"的定位互为印证。

版权与许可

代码版权归 Jeremy Thomas 所有，代码以 MIT 许可证发布，见 LICENSE。

---

小结：Bulma 的使用路径非常清晰——npm install bulma 后引入 css/bulma.css 即可起步；需要定制时，深入 sass/ 模块体系修改 initial-variables 与 derived-variables，或选择 versions/ 中的裁剪/前缀变体；需要与宿主样式隔离时，通过 $class-prefix 参数化编译获得 prefixed 版本。整个框架不引入 JavaScript、不绑定构建工具，这一设计决策使其在 v1.x 的 CSS 变量体系下依然保持了"样式层"的纯粹性。