阿姆斯特丹设计系统:CSS组件

此软件包为 : 阿姆斯特丹设计系统 和一些一般的公用事业. 用它来应用阿姆斯特丹城的外观设计来应用到你的HTML元素或非反应组件.

导言

我们用一个单独的软件包来出版我们的组件样式表,以帮助复制到其他库、平台或SaaS应用程序中. 这些类别是构成部分的定义与其执行之间的合同,有助于不断升级.

我们 反应组件 使用它们渲染的 HTML 中的这些类. 如果您的应用程序使用React, 您应该使用该软件包 .

包括几个通用的功能类:宽相比、底边、间隙和视觉隐藏.

安装

样式表参考我们 设计符号。 。 。 . 这两个软件包都需要安装.

npm install @amsterdam/design-system-css @amsterdam/design-system-tokens

使用量

构件的系列可视为其标出和特征的蓝图. 一个 .ams-component root 选择器将组件的基本样式应用到其元素中,并添加类如 .ams-component--variant 修改其外观或行为.

各班雇用 nL 设计系统的命名公约。 。 。 . 其他社区只需覆盖设计标志,即可使用我们的组件并使用其品牌.

在联合来文十中

导入主样式表并在标记中使用类名 .

import "@amsterdam/design-system-assets/font/index.css"
import "@amsterdam/design-system-css/dist/index.css"
import "@amsterdam/design-system-tokens/dist/index.css"

export const App = () => (
  <p className="ams-paragraph">Hello, world!</p>
)

在 HTML 中

虽然这不是典型的使用例,但样式表可以直接包含在HTML页面中.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="node_modules/@amsterdam/design-system-assets/font/index.css" />
    <link rel="stylesheet" href="node_modules/@amsterdam/design-system-css/dist/index.css" />
    <link rel="stylesheet" href="node_modules/@amsterdam/design-system-tokens/dist/index.css" />
  </head>
  <body class="ams-body">
    <p class="ams-paragraph">Hello, world!</p>
  </body>
</html>

压缩模式

装入紧凑符号 用于设计系统的紧凑外观,例如用于信息密度高的内部网站. 它们覆盖了宽敞的;样式表可以保持不变.

Lo-fi 模式

装入 Lo-fi 令牌 以草图形式介绍各页,例如,保持以结构和内容为重点的设计审查. 它们覆盖了默认的外观; 样式表在这里也可以保持不变 .

全局样式

您文档中的某些内容无法达到设计系统组件. 然而,他们的风格可以影响组件的外观.

在身体上设置一个课

添加数据 ams-body 分类到文档 <body> 标签. 这将删除浏览器可能添加的空白 . 在 Contracting 模式中,它也设置了背景颜色来无缝匹配Page组件.

我们没有单独的全局重置样式表. 这来源于基于我们组件的架构:每个组件会覆盖用户代理样式,覆盖它们提供的元素. 您不需要重设样式表 .

保留底字体大小

不更改基本字体大小 - 例如通过 html { font-size: 62.5% }。 。 。 . 我们的打字系统预计 1rem 成为16像素的浏览器默认值.

更新

我们遵循语义 版本并发布一个 更改日志 引导您通过更新. 这些班级是设计系统的公共API. 请注意, 检测更改或删除的类仍然是一个手工过程 .

支助

如果你有问题,找到问题,或者想做贡献,请联系我们. 想办法联系我们 设计系统.amsterdam。 。 。 .