在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

jgthms/bulma

菜单

文档样式

相关源文件

目的与范围

本文档详细介绍了 Bulma 文档网站使用的样式系统。它涵盖了 CSS 架构、主题功能、关键视觉组件，以及文档网站如何应用和扩展 Bulma 自身框架。有关文档内容本身组织和结构的信息，请参阅 文档结构。

样式架构

文档网站使用一套复杂的样式系统，该系统是用 Sass 构建并编译为 CSS 的。样式结合了 Bulma 的核心框架以及文档特定的扩展和自定义。

整体结构

来源

文档样式的入口点是 website.scss，它导入了 Bulma 的核心样式以及组织在单独的 Sass 部分文件中的自定义文档特定样式。

CSS 变量系统

文档网站实现了一个广泛的 CSS 变量系统，该系统服务于多个目的：

  1. 创建文档中一致的样式
  2. 支持浅色和深色主题模式
  3. 为不同的文档部分启用专门的主题变体

根变量和主题化

来源

根 CSS 变量定义了一套全面的样式参数，特别关注遵循结构化命名模式的颜色变量：

变量模式示例目的
--bulma-[颜色]-h/s/l--bulma-primary-h基础 HSL 分量
--bulma-[颜色]-[nn]-l--bulma-primary-50-l亮度变体（00-100）
--bulma-[颜色]-[nn]--bulma-primary-50具有指定亮度的完整 HSL 颜色
--bulma-[颜色]-invert--bulma-primary-invert文本的对比色
--theme-color--theme-color当前部分主题色

来源

主题系统

文档网站包含一个复杂的themings系统，该系统支持浅色和深色模式，并为不同的文档部分提供专门的主题变体。

浅色和深色模式

浅色和深色模式是使用 CSS 变量和主题特定的类来实现的。该网站同时检测系统偏好和用户选择。

来源

特定章节主题

不同的文档章节使用由主题类定义的专门主题。

这些主题通过 HTML 元素上的 bd-theme-[name] 类来应用，该类设置了文档中使用的 --theme-color 变量。

来源

关键文档组件

Hero 部分

Hero 部分是文档中的一个显著视觉元素，有几种变体。

来源

代码块和语法高亮

代码示例使用专门的容器和语法高亮进行样式设置。

来源

文档使用自定义的语法高亮方案，具有 --hl-green、--hl-blue 等变量，以及在根 CSS 变量中定义的其他颜色。代码块还具有悬停状态和交互式功能。

文档包含样式化的宣传元素。

来源

动画系统

文档具有各种动画和交互效果。

  1. 主题切换的过渡效果
  2. 交互式元素的悬停和活动状态
  3. 宣传内容的闪耀效果
  4. 淡入和滑动动画

来源

赞助商和 Amis 部分

文档包含一个特别样式的赞助商（称为“amis”）部分。

来源

容器系统

文档使用响应式容器系统，并带有自定义宽度变量。

这些容器宽度应用于整个文档，以在不同视口尺寸下保持一致的布局。

来源

性能优化

文档样式包含多项性能优化。

  1. 最小化的 CSS 输出（website.min.css）
  2. 高效的 CSS 变量使用
  3. 响应式设计原则
  4. 动画的 Reduced Motion 支持

来源

与 Bulma 集成

文档样式系统利用了 Bulma 自身的组件和实用工具，并扩展了它们以满足文档特定的需求。

  1. 使用 Bulma 的变量系统并用文档变量进行扩展。
  2. 实现 Bulma 的响应式类，并增加了文档特定的响应式行为。
  3. 将 Bulma 组件作为文档组件的基础。
  4. 展示 Bulma 样式，同时保持文档特定的美学。

来源

工具类

文档定义了几个用于常见样式需求的实用程序类。

类目的
bd-stack具有一致间距的垂直堆叠。
bd-fat-button醒目的按钮样式。
bd-color-swatch颜色样本显示。
bd-hidden-light在浅色模式下隐藏。
bd-hidden-dark在深色模式下隐藏。
bd-svg-black跨主题的 SVG 填充处理。

来源

特殊元素样式

文档包含对各种 UI 元素的专门样式。

Carbon Ads

Carbon Ads 的集成样式与文档的美学风格相匹配。

可调整大小的元素

文档包括带自定义句柄的可调整大小的 UI 示例。

来源

通过了解文档样式系统，贡献者在更新 Bulma 文档网站或扩展其新内容时，可以保持视觉一致性。