登录.gov 设计系统

Login.gov 设计系统是该软件的扩展 美国网络设计系统 用于Login.gov站点一致识别Login.gov品牌.

这些文件描述了在新项目中如何使用Login.gov设计系统. 读取 捐款额 学习如何为设计系统本身做出贡献.

安装

节点.js 需要使用 Login.gov 设计系统。 如果还没有安装, 您应该先安装它 .

接下来,使用您项目目录中的国家预防机制安装软件包:

npm install @18f/identity-design-system

使用量

作为美国网络设计系统的延伸, 页:1 开始开发者 指南可以成为有用的资源。 Login.gov设计系统旨在作为USWDS的倒置取而代之,使其所有文件都申请Login.gov设计系统. 你唯一需要做的改动是更新任何参考文献 @uswds/uswds 与 @18f/identity-design-system。 。 。 .

样式

Login.gov 设计系统使用 萨斯 生成样式表。 虽然你可以使用任何 Sass 编译程序,但我们建议 @18f/identity-build-sass,因为它支持任何已经具备了Node.js的环境,而且它预示着与设计系统完全相适应的默认行为.

以下是一个导入设计系统的实例样式表:

@use 'uswds-core';
@forward 'uswds';

Sass汇编的唯一要求是:

•  气体加载路径 必须包括 node_modules/@18f/identity-design-system/packages
• 你一定在用那个 达特萨斯 执行萨斯

如果你在用的话 @18f/identity-build-sass,以下命令将编译 CSS 文件到 build/styles.css数字 :

npx build-sass path/to/styles.css.scss --out-dir=build

浏览器- Ready CSS 套装

虽然建议导入 Login.gov 设计系统作为 Sass 模块支持 优化选项,预编译的 CSS 捆绑为方便或无法包含 Sass 构建过程的项目提供.

这些文件在 dist/assets/css 联 合 国 已公布的国家预防机制一揽子计划。当本地安装时,此选项在 node_modules/@18f/identity-design-system。 。 。 .

<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="/path/to/identity-design-system/dist/assets/css/styles.css">
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Java 脚本

作为国家防范机制软件包,您可以在项目进口的任何地方导入Login.gov设计系统:

import '@18f/identity-design-system';

默认情况下, 这将包含 JavaScript 每个 组件,可以增加用户的加载时间,并为开发者构建时间。 参见 以下选项部分 来学习如何优化 JavaScript 导入.

浏览器- Ready JavaScript 套装

建议将Login.gov设计系统作为国家防范机制软件包导入,以支持 优化选项,预编译的JavaScript捆绑提供方便或无法包含JavaScript构建过程的项目.

这些文件在 dist/assets/js 联 合 国 已公布的国家预防机制一揽子计划。当本地安装时,此选项在 node_modules/@18f/identity-design-system。 。 。 .

<html>
  <head>
    <!-- ... -->
    <script src="/path/to/identity-design-system/dist/assets/js/init.js"></script>
  </head>
  <body>
    <!-- ... -->
    <script src="/path/to/identity-design-system/dist/assets/js/main.js"></script>
  </body>
</html>

选项

优化

如果您的项目没有使用设计系统的所有组件, 建议您通过选取您正在使用的单个组件来优化您的构建 .

在 Sass 中,您可以通过替换转发 'uswds' 模块,包含单个组件的软件包:

@use 'uswds-core';
- @forward 'uswds';
+ @forward 'usa-accordion';

您可以在 每个组成部分的文件 (例如:. 手风琴 包件) (中文(简体) ).

在JavaScript中,可以导入JavaScript包的命名成员. 如果您正在使用一个支持去除已死代码的捆绑器, 任何未使用的组件都会从编译的输出中删除 。 每个已命名的导入包含一个 on 在页面上初始化组件的方法.

- import '@18f/identity-design-system';
+ import { accordion } from '@18f/identity-design-system';
+ accordion.on();

主题变量

Login.gov设计系统配置了USWDS主题变量,以提供设计用于所有Login.gov站点的默认. 这些应该几乎总是在箱外运作,不需要进一步的配置.

如果需要,您可以使用 配置设置的文档进程,在导入时提供变量 uswds-core 软件包 :

- @use 'uswds-core';
+ @use 'uswds-core' with (
+   $theme-body-font-size: 'sm'
+ );

许可证

见 自由主义 许可信息.