Bricks 中使用 Core Framework

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 :focus

body.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

相关阅读：

• 在 Bricks 中使用 IsotopeJS 创建筛选器（第四部分）：AJAX 筛选与无限循环、排序、列表视图与禁用动画

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

结论

Core Framework 在 Bricks 里的起步四件事：①装插件并激活许可证；②对齐容器宽度（Bricks 1100px ↔ CF 1400px，二选一）；③对齐断点（两组默认值选一组）；④在 CF 里配好品牌色与排版，然后就能在 Bricks 编辑器里用工具类 + 变量自动补全了。它的核心价值是 CSS 变量驱动的设计系统：改一处全局生效，还能把自定义选择器组存成 project 跨项目复用。

什么时候该用 Core Framework（适用场景与误区）

适合：你做多个 Bricks 站、想要一套统一的间距/字号/颜色令牌，或团队协作用同一套设计变量。误区：一是刚学 Bricks 就上框架，反而被一堆类名劝退，先把原生布局搞熟；二是把所有样式都写进框架、忽略 Bricks 全局 Classes，维护反而更乱；三是断点没对齐 Bricks 的断点，响应式对不上。框架是「统一语言」，不是非用不可，小站用 Bricks 自带样式就够。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

Core Framework 收费吗？ 具体随版本变动，以官方文档为准；有免费档和付费档，按需求选。

新手一上来就用框架吗？ 不建议，先把 Bricks 原生布局和全局 Classes 搞熟，再上框架更顺。

框架断点要和多主题一致吗？ 要，断点不对齐 Bricks，响应式会在某些屏幕大小对不上。

和 Bricks 全局 Classes 冲突吗？ 不冲突，框架给设计变量，Classes 管复用样式，配合用更清爽。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程