Core Framework 是一个免费 CSS 框架，可以独立使用（在他们官网的 webapp 里）。
他们还出售一个可选的 WordPress 插件，内含 Bricks 集成（此外还支持 Oxygen 和 Gutenberg）。
这篇教程讲如何在 Bricks 里上手 Core Framework 的插件。
安装
从你的 dashboard 下载 Core Framework 插件。
在 WordPress 后台上传并激活。
在 CF dashboard 的 Your Purchases 下点 View，点开你的许可证密钥，粘贴到 Bricks 下的 CoreFramework → Addons 里：
对齐容器宽度
Bricks 的默认容器宽度是 1100px，Core Framework 是 1400px。
先决定你想要的容器宽度，然后确保两边一致。
改 Bricks 这边，需要先建一个全站主题样式（sitewide theme style）。
如果还没建过：用 Bricks 编辑器编辑任意页面或模板。
点击左上角的设置（齿轮图标），点 + 新建一个主题样式，命名为比如 Global。
在 CONDITIONS 里把它设为 Entire website（整个网站）。
在 ELEMENT – CONTAINER 下设置宽度值：
在 CoreFramework → Preferences 里把 Max screen width 设为同样的值（这样当容器达到最大宽度时，所有流式间距与排版值也会达到最大值）：
点 Save changes 保存。
对齐断点
Bricks 默认断点是：1279px、991px、767px、478px。
Core Framework 默认断点是：1400px、992px、768px、480px。
选其中一组（也可以完全自定义）。
想改 CF 的断点：点击顶部任意分类（如 “Colors”），点 “All breakpoints” 下拉，选中你的断点，点 “Edit current media query” 按钮，然后 Apply。
下面把 Bricks 的断点改成和 CF 一致。
进入 Bricks → Settings → General → Custom breakpoints，启用 Custom breakpoints。
在 Bricks 编辑器里点击顶部中间的三个竖点：
点每个断点旁边的 Edit 图标修改数值。
改完大致是这样：
探索框架
在 CF 里设置你想要的配色，尤其是品牌色——primary、secondary、tertiary。需要的话再给每个颜色加 shades、tints 和暗色模式版本：
默认值先够用，随时可以回来改。只要颜色值没有在编辑器里写死，就没问题——得益于这种基于 CSS 变量的设计系统，在 CF 里更新颜色和其他设置，站点会自动同步更新。
再把 Typography、Spacing 等其他区块过一遍，按需微调：
看看 Layouts、Designs 和 Other 区块里的类和变量，搞清楚什么东西在哪。刚接触这个框架时，你会经常回去翻这些类名。
[建议] 设置链接颜色
想让链接有特定颜色，编辑你的全局主题样式，在 LINKS 下设置：
hover 状态也建议同样设置。
[建议] 设置正文字号
在 TYPOGRAPHY 控制组里：
给 body 选择器的 font-size 设一个流式值：从 320px（Min screen width）的 16px 到 1400px（Max screen width）的 18px——前提是你没改过 CF 里的默认值。
[建议] 设置区块内边距
在 ELEMENT – SECTION 控制组里：
上下：var(--space-2xl)
左右：var(--space-s)
使用
现在你可以在 Bricks 编辑器里用 Core Framework 的工具类和变量了。
CF 的 Bricks 集成插件有个省时功能：右键点击任意输入控件（或 ⌘-点击）会弹出便捷的上下文弹窗：
在相关样式输入框里输入 v 或 - 还会触发变量自动补全，悬停时能在页面上预览值：
下面是段短视频（无音频），演示用 Core Framework 的几条工具类和变量在 Bricks 里构建一个自适应文章网格：
注：仅快速演示，未考虑最佳实践与无障碍。
自定义框架
框架也可以自定义、扩展——添加自己的选择器组或变量组（不需要的现有组可以禁用）。
这对加入那些你每个 Bricks 站点都反复添加的 CSS 默认值很有用。
下面是一些适合作为 Bricks 站点合理默认值的常见样式示例：
- 给
body加 100vh 的 min-height，防止页面内容少时 Bricks 页脚上移； - 添加默认区块内边距（不用建 Bricks 主题设置）；
- 除非用键盘 Tab 导航，否则隐藏 Bricks 默认的焦点样式。
也可以用这种方式加默认链接样式和其他常见排版 CSS——省得在每个新站点里都用 Bricks 主题设置配一遍。
这些都可以在 Core Framework 官网存成新 “project”，随时导出给以后的 Bricks 项目用。
另一个示例：所有自定义 CSS 写在一个选择器组里：
上面用到的选择器，方便复制粘贴：
body:where(.brxe-section)body.bricks-is-frontend :focusbody.bricks-is-frontend :focus-visible:where(.brxe-accordion .accordion-content-wrapper) a, :where(.brxe-icon-box .content) a, :where(.brxe-list) a, :where(.brxe-post-content) a:not(.bricks-button), :where(.brxe-posts .dynamic p) a, :where(.brxe-shortcode) a, :where(.brxe-tabs .tab-content) a, :where(.brxe-team-members) .description a, :where(.brxe-testimonials) .testimonial-content-wrapper a, :where(.brxe-text) a, :where(a.brxe-text), :where(.brxe-text-basic) a, :where(a.brxe-text-basic), :where(.brxe-post-comments) .comment-content a, .brxe-product-content a, .brxe-product-short-description a, .brxe-product-tabs .woocommerce-Tabs-panel a结论
Core Framework 在 Bricks 里的起步四件事：①装插件并激活许可证；②对齐容器宽度（Bricks 1100px ↔ CF 1400px，二选一）；③对齐断点（两组默认值选一组）；④在 CF 里配好品牌色与排版，然后就能在 Bricks 编辑器里用工具类 + 变量自动补全了。它的核心价值是 CSS 变量驱动的设计系统：改一处全局生效，还能把自定义选择器组存成 project 跨项目复用。