Open Props 项目技术文档

Open Props 项目技术文档

open-props CSS custom properties to help accelerate adaptive and consistent design. 项目地址: https://gitcode.com/gh_mirrors/op/open-props

1. 安装指南

通过 CDN 安装

你可以通过以下 CDN 链接直接在项目中引入 Open Props：

<link rel="stylesheet" href="https://unpkg.com/open-props">

此外，你还可以引入其他资源文件：

• Normalize CSS:

  <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css">
  

• 设计令牌 JSON:

  <link rel="stylesheet" href="https://unpkg.com/open-props/open-props.tokens.json">
  

• Figma 设计令牌 JSON:

  <link rel="stylesheet" href="https://unpkg.com/open-props/open-props.figma-tokens.sync.json">
  

• 样式字典令牌 JSON:

  <link rel="stylesheet" href="https://unpkg.com/open-props/open-props.style-dictionary-tokens.json">
  

通过 npm 安装

你可以通过 npm 安装 Open Props：

npm install open-props

安装完成后，你可以在项目中引入：

import 'open-props/style';

2. 项目的使用说明

Open Props 提供了丰富的 CSS 变量，涵盖了颜色、渐变、阴影、宽高比、排版、缓动、动画、尺寸、边框、z-index 和媒体查询等多个方面。使用这些变量可以大大简化你的 CSS 编写工作。

示例

body {
  background-color: var(--gray-0);
  color: var(--gray-12);
  font-family: var(--font-system-ui);
}

自定义生成

你可以通过 CLI 工具生成自定义版本的 Open Props：

• 生成 PostCSS 文件:

  npm run gen:op
  

• 生成无 :where() 版本的 Open Props:

  npm run gen:nowhere
  

• 生成 Shadow DOM 版本的 Open Props:

  npm run gen:shadowdom
  

• 生成带前缀的 Open Props:

  npm run gen:prefixed
  

• 生成所有版本的 Open Props:

  npm run bundle
  

3. 项目 API 使用文档

Open Props 提供了丰富的 CSS 变量，以下是一些常用的变量及其用途：

颜色

• --gray-0: 浅灰色
• --gray-12: 深灰色

排版

• --font-system-ui: 系统默认字体
• --font-size-1: 小字体
• --font-size-2: 中等字体

边框

• --radius-1: 小圆角
• --radius-2: 中等圆角

动画

• --ease-1: 缓动动画
• --ease-2: 缓动动画

示例

button {
  border-radius: var(--radius-1);
  transition: all var(--ease-1);
}

4. 项目安装方式

通过 CDN 安装

<link rel="stylesheet" href="https://unpkg.com/open-props">

通过 npm 安装

npm install open-props

通过 CLI 生成自定义版本

npm run gen:op

通过以上方式，你可以轻松地将 Open Props 集成到你的项目中，并利用其丰富的 CSS 变量来提升开发效率。

open-props CSS custom properties to help accelerate adaptive and consistent design. 项目地址: https://gitcode.com/gh_mirrors/op/open-props