⚠️ 注: o- 间隔已被替换为 o3 创建请参看 移徙指南 用于升级的步骤.

零间距

根据设计准则内的基线网格,设置一个用于援助时间间隔一致的项目和部分的型式公用事业部分.

• 使用量
• 空间
• 标记
• CSS 自定义属性
• 萨斯
• 移徙
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-spacing。 。 。 .

对于 构建服务 用户, o-spacing 提供 CSS课程 垂直空间和 CSS 自定义属性( CSS 变量) 用于其他用例。 用于 Sass 用户 o-spacing 也提供了一些 Sass 函数和混音器 为项目应用空间.

空间

以上插图取自 UXD 缩写工具箱。 。 。 .

基线

我们的基线网格默认为4px. 这一缺省的任何倍数均可被应用于一个项目. 我们建议使用我们的 已命名空格 为了一致性.

已命名空格

命名的空格是用于连贯布局一个组件或页面的大小 。 每个空间都基于4px基线. 小型,例如 s1 或者说 s2 用于组件内空间的理想; 使用中等尺寸 m12 财务报告和审定财务报表 m16 用于页面上的相关内容;和 大尺寸 l18, (中文(简体) ), l24 将项目的不同区域分开.

应用命名的空格 o-spacing 标记 财务报告和审定财务报表 萨斯 文档.

标记

o-spacing 提供实用课程,帮助您项目内垂直的空间 Origami 组件.

<!-- Add a 48px vertical margin between elements. -->
<div class='o-spacing-m12'></div>
<div class='o-spacing-m12'></div>

对其他属性应用空格 o-spacing 提供 CSS 自定义属性( CSS 变量)。 。 。 .

CSS 自定义属性

命名自定义空间属性

o-spacing a 每个指定空间的 CSS 自定义属性( CSS 变量)。 举个例子. --o-spacing-s1。这些可以用于在自定义 CSS 中应用空格,如果您的工程 支持 CSS 自定义属性. 这对 构建服务 无法访问的用户 o-spacing是因为 萨斯 函数.

.example {
    margin: var(--o-spacing-s1);
}

基线自定义属性

我们建议使用 命名空间,但对于更多的颗粒控制,项目可以输出任何空间,这是我们基准值的倍数。 对于无法访问Sass的用户, o-spacing 产出a --o-spacing-baseline CSS变量.

.example {
    padding: calc(var(--o-spacing-baseline) * 1); // A small padding (4px).
    margin-bottom: calc(var(--o-spacing-baseline) * 4); // A large space (16px).
}

萨斯

相对单位

为了与现有的Origami项目兼容, o-spacing 产出 px 默认值。 用于相对 rem 数值,设置 $o-spacing-relative-units: true 导入前 @financial-times/o-spacing/main。 。 。 .

    $o-spacing-relative-units: true;

    .example {
        padding: oSpacingByName('s1');  // Small padding (0.24rem).
        margin-bottom: oSpacingByName('m12'); // Medium margin (3rem).
    }

如果使用 o-typography 设定 美元打字-相对单位 临τ.

命名空间

我们建议Sass用户在项目中使用空间 oSpacingByName 函数。 它接受一个 空间名称 返回 a px 数值(或 rem 值,如果 相对单位 已启用).

    .example {
        padding: oSpacingByName('s1');  // Small padding (4px).
        margin-bottom: oSpacingByName('m12'); // Medium margin (48px).
    }

基线空间

我们建议使用 已命名空格,但任何空间 乘以我们 基线 允许。 应用基准值的倍数 oSpacingByIncrement中,它接受一个值,将基线乘以并返回 a px 数值(或 rem 值,如果 相对单位 已启用).

    .example {
        margin-bottom: oSpacingByIncrement(4);
    }

自定义属性和工具类

我们建议用户使用 Sass 函数应用命名空间 时间间隔Name,但 Sass 用户可能输出全部 o-spacing CSS 包括 工具类 财务报告和审定财务报表 CSS 自定义属性 使用 oSpacing 混合剂.

@include oSpacing($opts: (
    'margin-bottom-utilities': true, // Output CSS classes such as `o-spacing-s1`
    'custom-properties': true // Output CSS variables
));

移徙

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .