企业级站点需要一套稳定、可主题化、且有组织背书的 CSS 框架，而不是个人玩具项目。很多轻量框架缺乏长期维护与企业场景打磨。
Vanilla Framework 由 Canonical（Ubuntu 背后公司）出品，是它们自家网站使用的企业级 CSS 框架：基于 Sass、可主题，适合对“长期维护 + 一致设计语言”有要求的项目。

项目基本信息

信息项详情
项目名称vanilla-framework
GitHub地址https://github.com/canonical/vanilla-framework
项目描述Ubuntu 团队出品、企业级且可主题化的 CSS 框架
作者canonical
开源协议GNU Lesser General Public License v3.0
开源状态公开
LanguagesHTML
支持平台Web
最后更新—

一、项目介绍

canonical/vanilla-framework 是 Canonical（Ubuntu 厂商）开源的企业级 CSS 框架，LGPL-3.0 协议，基于 Sass。它提供栅格、组件、工具类与主题变量，被 Canonical 旗下多个站点实际使用。它强调一致的设计语言与可主题化，适合政府、企业或 Ubuntu 生态相关项目。

二、核心优势

  1. 企业级：Canonical 出品并在生产站点使用。
  2. Sass 基石：主题变量与可定制性强。
  3. 一致设计：统一视觉语言，适合大型站点。
  4. 组件齐备：常用 UI 元素与布局覆盖。
  5. 长期维护：有组织背书，持续更新。

三、适用场景

  • 企业或政府级网站。
  • 需要统一设计系统的团队。
  • Ubuntu/Canonical 生态相关项目。
  • 重视长期维护与背书。

四、安装教程

安装 Sass 与框架后用 @import 引入：

yarn add sass vanilla-framework

在构建脚本里把 node_modules 加入 @import 搜索路径，然后在样式入口：

@import 'vanilla-framework';

常见报错：未在构建配置把 node_modules 加入 includePaths 会导致 @import 找不到；Sass 版本差异可能引发弃用警告，按文档适配。

五、使用示例

建立 src/style.scss 引入 Vanilla 后编写页面：

@import 'vanilla-framework';
<div class='row'><div class='col-6'>左侧</div><div class='col-6'>右侧</div></div>

真实效果：栅格与组件获得 Ubuntu 系的一致观感，主题变量可整体换肤。

六、常见问题

Q：协议有什么要注意？
A：采用 LGPL-3.0（宽松 copyleft）：直接链接/使用一般无需开源你的网站，但若修改框架本身并分发，需按 LGPL 提供修改与源码。
Q：必须用 Sass 吗？
A：使用源码需要 Sass 编译；也可寻找预编译发行版。
Q：谁在用？
A：Canonical 旗下多个官方站点基于 Vanilla Framework 构建。

七、总结

Vanilla Framework 是 Canonical 出品的企业级 CSS 框架，基于 Sass、可主题，并被其官方站点长期验证。对需要稳定维护与一致设计语言的企业/政府项目，它是值得信赖的选择；但需注意其 LGPL-3.0 的 copyleft 条款——修改框架本身并分发时须开源相应改动。