架构

相关源文件

• CHANGELOG.md
• bower.json
• css/bulma.css
• css/bulma.css.map
• css/bulma.min.css
• docs/_config.yml
• docs/documentation/elements/form.html
• package.json

本文档描述了 Bulma CSS 框架的核心架构，解释了其结构组织、组件层次结构以及指导其实现的键设计原则。有关启用主题和自定义的 CSS 变量系统的详细信息，请参阅 CSS 变量系统。有关 Sass 文件如何组织和协同工作的详细信息，请参阅 Sass 架构。

核心架构概述

Bulma 被设计为一个模块化的 CSS 框架，使用 Sass 构建（从 1.0 版本开始特别使用 Dart Sass）。它遵循以组件为中心的架构，具有清晰的层次结构，使其既易于维护又易于扩展。

架构层

Bulma 的架构分为四个不同的层，每个层都有特定的职责和依赖项。

来源：bulma.scss CHANGELOG.md83-106

文件组织

源代码组织在与架构层相对应的目录中，并有额外的实用程序和助手目录。

来源：css/bulma.css.map1-7 package.json54-61

构建管道

Bulma 使用构建过程将 Sass 源文件转换为各种 CSS 输出，包括主 CSS 文件、缩小版本和具有不同功能集的替代版本。

来源：package.json38-52 CHANGELOG.md96-105

组件架构

Bulma 的组件架构遵循层次模型，其中更简单的组件为更复杂的组件提供了构建块。

基础组件

这些组件为整个框架提供了基础。

• Minireset：标准化浏览器样式。
• Generic：将基本样式应用于 HTML 元素。
• Helpers：用于常见样式需求的实用类。
• Animations：定义可重用的动画。

元素组件

提供核心功能的简单 UI 组件。

• Box：带有阴影和圆角的容器。
• Button：触发操作的交互式控件。
• Content：通用文本内容的样式。
• Delete：十字形删除按钮。
• Icon：图标的容器。
• Image：响应式图像元素。
• Notification：彩色消息通知。
• Progress：进度条。
• Table：增强型 HTML 表格。
• Tag：小型标签。
• Title：标题文本样式。

表单组件

特定于表单界面的元素。

• Input & Textarea：文本输入字段。
• Select：下拉选择。
• Checkbox & Radio：切换控件。
• File：文件上传按钮。

复杂组件

使用元素构建的更高级别的组件。

• Breadcrumb：导航层级指示器。
• Card：多功能内容容器。
• Dropdown：交互式下拉菜单。
• Menu：垂直导航菜单。
• Message：彩色消息块。
• Modal：对话框叠加层。
• Navbar：顶部导航栏。
• Pagination：分页导航控件。
• Panel：带有标题和项目的可组合面板。
• Tabs：选项卡式界面。

布局组件

用于页面组织的结构组件。

• Container：居中的内容容器。
• Level：水平对齐系统。
• Hero：全宽横幅元素。
• Section：带内边距的段落容器。
• Footer：页面页脚。
• Media Object：媒体内容布局。
• Columns：响应式网格系统。

来源：css/bulma.css.map10-72 css/bulma.css3-14

CSS 变量系统

Bulma v1.0 引入了一个全面的 CSS 变量系统，为其实施主题的功能提供了动力。

这个变量系统允许跨组件实现一致的主题，并启用暗模式和运行时自定义等功能，而无需重新编译 Sass。

来源：css/bulma.css4-438 CHANGELOG.md95-100

主题系统

Bulma 的主题系统围绕主题作为 CSS 变量集合的概念，实现了暗模式等功能。

Bulma 中的每种颜色现在都会生成一个完整的调色板，包含浅色和深色变体，从而实现更一致和全面的主题功能。

来源：css/bulma.css16-32 CHANGELOG.md99-102

自定义选项

Bulma 提供了几种自定义方法。

1. Sass 变量自定义：在导入 Bulma 之前覆盖 Sass 变量。
2. CSS 变量自定义：在您自己的样式表中覆盖 CSS 变量。
3. 类名前缀：使用带有前缀的类名版本（例如，my-prefix-button 而不是 button）。
4. 替代构建：使用特殊的构建版本，如 bulma-no-helpers.css 或 bulma-no-dark-mode.css。
5. 交互式自定义器：使用基于 Web 的 Bulma 自定义器工具。

替代版本架构

来源：package.json41-44 CHANGELOG.md104-105

构建系统

Bulma 的构建系统由 package.json 文件中定义的 NPM 脚本提供支持。

脚本名称	目的
build-bulma	将 bulma.scss 编译为 css/bulma.css，并带有展开样式和源映射。
minify-bulma	将 css/bulma.css 缩小到 css/bulma.min.css。
version-*	构建替代版本（no-dark-mode、no-helpers 等）。
minify-versions	缩小所有替代版本。
build-all	运行 build-bulma 和 build-versions。
minify-all	运行 minify-bulma 和 minify-versions。
deploy	清理输出目录并构建+缩小所有版本。

来源：package.json38-52

响应式设计架构

Bulma 的响应式设计建立在移动优先方法之上，具有可自定义的断点。

每个组件都可以具有响应式变体，并且内置的响应式网格系统（columns）会自动适应不同的屏幕尺寸。

来源：CHANGELOG.md109-115 css/bulma.css3-14

关键架构优势

1. 模块化：组件是隔离的，可以独立使用。
2. 可定制性：从 Sass 变量到 CSS 变量的多个自定义级别。
3. 响应式：内置响应式设计，具有可自定义的断点。
4. 主题化：全面的主题系统，支持暗模式。
5. 性能：构建系统允许仅包含所需的组件。
6. 可扩展性：清晰的架构易于在 Bulma 之上构建。

来源：CHANGELOG.md package.json38-52