# @bbc/gel-foundations 中文文档

规范地址：https://npmcn.com/package/%40bbc/gel-foundations/

版本：7\.0\.0
npm 元数据更新时间：2026-09-26T06:00:40.682Z
中文译文更新时间：2026-11-07T18:46:15.781Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bbc/gel-foundations
原文对照：https://npmcn.com/package/%40bbc/gel-foundations/?lang=original
项目主页：https://github.com/bbc/psammead/blob/latest/packages/utilities/gel-foundations/README.md
源码仓库：https://github.com/bbc/psammead/tree/latest/packages/utilities/gel-foundations

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：253 kB，69 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2018-12-18T09:51:29.142Z
- 最新版本发布：2021-09-30T14:11:51.445Z
- 近 30 天下载量：31131（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：45（近 12 个月 0 个）

## 中文简介

用于CSS的一系列字符串常数,旨在帮助执行BBC GEL兼容的网页和组件.

## 安装

```sh
npm install @bbc/gel-foundations
```

也可以使用：`pnpm add @bbc/gel-foundations`、`yarn add @bbc/gel-foundations`、`bun add @bbc/gel-foundations`

## README

# 凝胶的发现 [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Futilities%2Fgel-foundations%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Futilities%2Fgel-foundations%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/utilities/gel-foundations)](https://david-dm.org/bbc/psammead?path=packages/utilities/gel-foundations) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/utilities/gel-foundations)](https://david-dm.org/bbc/psammead?path=packages/utilities/gel-foundations&type=peer) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-foundations.svg)](https://www.npmjs.com/package/@bbc/gel-foundations) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)

此软件包提供一系列用于 CSS 的字符串常数, 旨在帮助执行 [BBC GEL 符合](https://www.bbc.co.uk/gel/articles/what-is-gel) 网页和组件.

## 出口

`/breakpoints` - GEL断点以及打字断点。 这些软件使用可在 [GEL 网格准则](https://www.bbc.co.uk/gel/guidelines/grid#grid-sizes)。 。 。 . `/spacings` - GEL间隔和GEL网格边和沟道。 这些应用了可在 [GEL 网格准则](https://www.bbc.co.uk/gel/guidelines/grid#spacing-layout)。 。 。 . `/typography` - GEL 类型大小和字体堆栈。 这些定义是根据GEL的打字法定义制定的,这些定义可见于 [GEL准则](https://www.bbc.co.uk/gel/guidelines/typography)。 。 。 . [关于该软件包的类型大小是如何执行的更详细情况,请访问这里.](https://npmcn.com/package/%40bbc/gel-foundations/typography_sizes_web.md)

## 安装

```jsx
npm install @bbc/gel-foundations --save
```

## 使用量

```jsx
import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';

import { GEL_GUTTER_ABOVE_600PX } from '@bbc/gel-foundations/spacings';

import { getLongPrimer } from '@bbc/gel-foundations/typography';
```

然后这些值可以在代码中的CSS声明中直接使用:

```jsx
import { css } from 'styled-components';

const SomeStyledComponent = css`
  font-family: ${GEL_FF_REITH_SANS};
  ${getLongPrimer(script)};

  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
    grid-gap: ${GEL_GUTTER_ABOVE_600PX};
  }
`;
```

要让打字机完全可以访问和响应,请注意您应该对文档根(例如:. `html { font-size: 100% }`) (中文(简体) ).

我们的打字技术 `rem` 字体大小和行高。 这个 `rem` 单位代表相对于文档根的大小,因此,我们用这个来表示字体大小、行高和相距,以表示整个文档的一致外观和相间。 你可以读我们 [对“REMs vs EMs for space”的详细分析](https://github.com/bbc/psammead/tree/latest/documentation/Spacing-Units.md) 更多信息.

### 脚本支持

通用打字功能(如:. `getLongPrimer('arabic')`)收到一个脚本参数,它是具有不同脚本的对象 GEL 类型大小并返回 `font-sizes` 财务报告和审定财务报表 `line-heights` 对于特定的GEL类型(例如:. `Long Premier`) (中文(简体) ).

您可以导入脚本 `import { arabic } from '@bbc/gel-foundations/scripts`。默认情况下,您应当导入 `latin` 脚本在 [GEL 打印指南](https://www.bbc.co.uk/gel/guidelines/typography#type-sizes)。 。 。 .

除了拉丁文的默认外,Psammead还支持为其他一些脚本打字. 我们把具有类似特征的脚本分组如下:

| 组名称 | 服务 | 理由 |
| --- | --- | --- |
| 长子和短子 | 新闻、豪萨、加胡扎、索马里、斯瓦希里、伊格博、皮德金、阿法安·奥罗莫、约鲁巴、阿塞拜疆、印度尼西亚、乌兹别克、塞尔维亚、俄罗斯、乌克兰、吉尔吉斯、乌兹别克 | 拉丁字母和西里尔字母的打字值相同 |
| 与分解 | 越南、芒多、非洲、巴西、土耳其 | 二极论使得这些值与拉丁文不同 |
| 阿拉伯利比亚民众国 | 阿拉伯语、普什图语、波斯语、乌尔都语 | 在使用阿拉伯字母时分组 |
| 无人驾驶或无人驾驶 | 朝鲜语、日语、忠文、乌克钦纳语、提格里尼亚语、阿姆哈拉语 | 组合所有没有升起或降起的字母. 这可以作为中国、韩国、希腊文执行 |
| 德瓦纳加里和古尔穆希 | 印地语、尼泊尔语、古吉拉特语、旁遮普语、马拉地语、泰卢古语 | Devanagari 和 Gurmukhi 字符的打字值相同 |
| 泰语 | 泰国语Name | 对泰国人物说话 |
| 宾加利语name | 孟加拉语 | 对孟加拉人说话 |
| 汉堡 | 缅甸 | 对缅甸人物说话 |
| 辛亥语 | 僧伽罗 | 对僧伽罗人说话 |
| 塔米尔 | 泰米尔语Name | 对泰米尔人说话 |

## 捐款

何时 **添加** 向此工具包新导出 [出口测试](https://github.com/bbc/psammead/blob/5d7395fd60bd8d73796d5a23775b4b5b36db1445/packages/utilities/gel-foundations/index.test.jsx#L13-L59) 还需要更新。 何时 **删除** 从此工具包中导出 [出口测试](https://github.com/bbc/psammead/blob/5d7395fd60bd8d73796d5a23775b4b5b36db1445/packages/utilities/gel-foundations/index.test.jsx#L13-L59) 需要更新软件包版本,软件包版本需要进行重大修改(EG:1.2.1 - > 2.0.0),因为这将被视为功能正在被移除时的突破性修改.

Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: [psammead 仓库的根](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)。 。 。 .

### [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)

我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)请稍候再读一下.

### 许可证

萨姆米德 [Apache 2.0 许可](https://github.com/bbc/psammead/blob/latest/LICENSE)。 。 。 .

## 常见问题

### @bbc/gel-foundations 是什么？

用于CSS的一系列字符串常数,旨在帮助执行BBC GEL兼容的网页和组件\.

### 如何安装 @bbc/gel-foundations？

在项目目录运行 npm install @bbc/gel-foundations，或使用 pnpm add / yarn add / bun add。

### @bbc/gel-foundations 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bbc\_\_gel-foundations 是否存在。

### @bbc/gel-foundations 可以商用吗？

@bbc/gel-foundations 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @bbc/gel-foundations 的下载量有多少？

根据 npm 官方下载统计，@bbc/gel-foundations 在 2026/10/08 – 2026/11/06 这 30 天内被下载 31,131 次，日均约 1,038 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bbc/gel-foundations 还在维护吗？

最新版本 7\.0\.0 发布于 2021/09/30（5 年前）；至今共发布 45 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/12/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。