# @coopdigital/foundations 中文文档

规范地址：https://npmcn.com/package/%40coopdigital/foundations/

版本：1\.12\.0
npm 元数据更新时间：2026-10-28T16:18:04.219Z
中文译文更新时间：2026-11-10T22:34:29.269Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40coopdigital/foundations
原文对照：https://npmcn.com/package/%40coopdigital/foundations/?lang=original
项目主页：https://github.com/coopdigital/coop-frontend#readme
源码仓库：https://github.com/coopdigital/coop-frontend

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

- 包体积（解压后）：508 kB，50 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2021-12-13T14:28:04.100Z
- 最新版本发布：2026-10-28T16:18:03.893Z
- 近 30 天下载量：2528（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 4 个）

## 中文简介

我们的地基是CSS的基础和变量 我们的产品建立在

## 安装

```sh
npm install @coopdigital/foundations
```

也可以使用：`pnpm add @coopdigital/foundations`、`yarn add @coopdigital/foundations`、`bun add @coopdigital/foundations`

## README

# 共同基金会

我们的地基是设计基础,我们把产品建立在设计基础之上.

我们利用基础来帮助创造我们的要素和组成部分。 当我们保持我们的基础一致, 我们的产品看起来和感觉一致的顾客.

## 结构和内容

地基由基线CSS样式,字体,自定义属性和公用分类等组合而成. 我们把它们分为以下几类:

-   基础
-   颜色
-   版式
-   间距
-   类型
-   用户

## 使用量

### 安装

```bash
npm install @coopdigital/foundations
```

### 建议:进口所有物品

```css
@import "@coopdigital/foundations/dist/vars/vars.css";
@import "@coopdigital/foundations/dist/foundations.css";
```

这是最容易得到你需要的一切的方法.

### 导入部分

如果您只需要部分地基,您可以使用下面的导入。 确保保持结构 以确保级联工程.

```css
/* Variables */
/* Colours */
@import "@coopdigital/foundations/dist/vars/colors.css";
@import "@coopdigital/foundations/dist/vars/colors-cls.css";
@import "@coopdigital/foundations/dist/vars/colors-membership.css";
/* Typography */
@import "@coopdigital/foundations/dist/vars/typography.css";
/* Spacing */
@import "@coopdigital/foundations/dist/vars/spacing.css";
/* UI */
@import "@coopdigital/foundations/dist/vars/ui.css";

/* Base */
@import "@coopdigital/foundations/dist/base/base.css";
/* Typography */
@import "@coopdigital/foundations/dist/typography/typography.css";
/* Layout */
@import "@coopdigital/foundations/dist/layout/grid.pcss";
/* UI */
@import "@coopdigital/foundations/dist/ui/a11y.css";
@import "@coopdigital/foundations/dist/ui/logo.css";
@import "@coopdigital/foundations/dist/ui/icons.css";

/* Utilities */
@import "@coopdigital/foundations/dist/colors/colors-utilities.css";
@import "@coopdigital/foundations/dist/colors/cls/colors-utilities-cls.css";
@import "@coopdigital/foundations/dist/colors/membership/colors-utilities-membership.css";
@import "@coopdigital/foundations/dist/typography/typography-utilities.css";
@import "@coopdigital/foundations/dist/spacing/spacing-utilities.css";
@import "@coopdigital/foundations/dist/layout/layout-utilities.css";
```

## 图标使用

图标作为单独的 SVG 文件在 `src/ui/icons` 并合并为名为 SVG 的 SVG 图案 `coop-icon-sprite.svg`。该图示在 `src/assets/icons/coop-icon-sprite.svg` 复制到 `dist` 由构建脚本.

此图案可以从 `node_nodules` 从内部 `foundations/dist/assets/icons/coop-icon-sprite.svg`,使用您选择的构建过程.

[使用“经验库”图标页面图标的设计指南](https://www.coop.co.uk/experience-library/foundations/icon-set.html)

### 使用您的工程中的图标

一旦前端装入了图标,您可以通过使用:

```html
<svg>
  <use xlink:href="coop-icon-sprite.svg#[icon-file-name]"></use>
</svg>
```

例如,购物篮图标将使用:

### 可用图标

如果可能的话,您应当尽量按照 [图书馆关于图标的准则](https://www.coop.co.uk/experience-library/foundations/icon-set.html)

如果图标与文本对齐,则被归类为装饰性,并且可以从屏幕阅读器中隐藏.

```html
<p>
  <svg aria-hidden="“true”">
    <title>Basket</title>
    <use xlink:href="coop-icon-sprite.svg#icon-basket"></use>
  </svg>
  Basket
</p>
```

如果无法将图标与文本配对,则不需要隐藏的aria-hidden属性.

```html
<svg role="img">
  <title>Basket</title>
  <use xlink:href="coop-icon-sprite.svg#icon-basket"></use>
</svg>
```

### 支助科

有一些 CSS 类来空间和大小图标. 作长方形的相机取一个修饰类来将宽度增加一倍.

```CSS
.coop-i {
    fill: currentColor;
    margin: 20px;
    width: 32px;
    height: 32px;
}

.coop-i--scooter {
    width: 64px;
}
```

### 由 ID 提供的图标完整列表

```
#icon-add
#icon-minus
#icon-arrow-up
#icon-arrow-down
#icon-arrow-left
#icon-arrow-right
#icon-chevron-up
#icon-chevron-down
#icon-chevron-left
#icon-chevron-right
#icon-avatar
#icon-avatar-alt
#icon-basket
#icon-clock
#icon-close
#icon-close-alt
#icon-coop
#icon-coop-card
#icon-location
#icon-coop-location
#icon-download
#icon-home
#icon-information
#icon-mail
#icon-menu
#icon-message
#icon-open-new
#icon-phone
#icon-question
#icon-search
#icon-settings
#icon-tick
#icon-tick-alt
#icon-van
#icon-warning
#icon-write
#icon-pencil
#icon-calendar
#icon-scooter
```

## 捐款

## 从Css-steptions向基金会的迁移

[看这里的移民指南](https://npmcn.com/package/docs/migrations/@coopdigital-foundations-migration.md)

## 常见问题

### @coopdigital/foundations 是什么？

我们的地基是CSS的基础和变量 我们的产品建立在

### 如何安装 @coopdigital/foundations？

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

### @coopdigital/foundations 支持 TypeScript 吗？

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

### @coopdigital/foundations 可以商用吗？

@coopdigital/foundations 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @coopdigital/foundations 的下载量有多少？

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

### @coopdigital/foundations 还在维护吗？

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