design system starter

澳大利亚政府设计系统已退役，访问我们的社区页面以获取更多信息

澳大利亚政府设计系统 - 入门者

使用澳大利亚政府设计系统开始全页模板。

内容

• 模板
• 发展环境
• 开始
• 它如何工作
• 先决条件
• 贡献
• 执照

---

模板

使用澳大利亚政府设计系统浏览全页模板。

• 主页
• 内容页
• 表单页

发展环境

克隆此存储库来创建本地开发环境并开始修改模板。

• 开始
• 它如何工作
• 贡献
• 执照

---

开始

入门包使用NPM（节点软件包管理器）来设置本地开发环境并安装设计系统组件。节点的默认软件包管理器为NPM。下载节点时，NPM预装了。

1. 确保计算机上安装了NPM和节点。如果您不确定，则可以按照NPM说明进行操作。

2. 将此存储库下载到计算机上的文件夹中。

3. 在命令行中，进入此文件夹并运行npm install 。这将安装本地开发环境所需的依赖关系。

4. 现在，您应该准备通过运行npm run watch来启动本地服务器。这将注意*.scss文件，创建新*.css文件并刷新浏览器的更改。

使用Docker

构建图像：

$ docker build -t ds-starter .

然后运行图像并映射卷。注意：Windows不支持$ PWD。

$ docker run --rm --volume= " $PWD :/app " -p 3000:3000 -it ds-starter

⬆回到顶部

---

它如何工作

在您的目录中，您有一个package.json文件。该文件指向运行npm install时要安装的依赖项。运行npm install后，您会安装与本地开发环境相关的所有设计系统组件和其他软件包。

npm install煎饼进行运行之后，这检查了您的依赖项是否合作，并创建docs/js/script.min.js和src/sass/_uikit.scss 。

src/sass/main.scss导入生成的_uikit.scss 。您不应该在生成时触摸_uikit.scss文件，而是随意更改main.scss文件。

当用户运行npm run build或npm run watch时，我们使用Node-Sass将src/sass/main.scss文件转换为docs/css/main.css文件。汇编后运行AutoPrefixer，将供应商前缀添加到main.css文件中。

请参阅package.json脚本以设置如何设置

此设置允许您从main.scss文件中修改设计系统文件中的变量。您可以添加自己的配色方案，也可以更改版式和间距。对组件或其他的调整应添加到_uikit.scss的导入下方。这些文件的更改将被注入您的浏览器中，因此，由于浏览器同步，您甚至不需要刷新。

该docs夹包含发布网站所需的所有文件。 index.html文件引用main.css file和script.min.js资产以生成页面。我们命名文件夹docs是因为github页面使用文档文件夹托管静态网站。

⬆回到顶部

---

先决条件

• Node.js 8或更高版本，最好是当前LTS版本。

注意：如果您在Windows上开发，请确保您的本地npm配置正在使用支持unix之类的外壳（即a/unix/path而不是a\windows\path ）。

⬆回到顶部

---

贡献

为澳大利亚政府设计系统入门包做出贡献：

1. 分叉项目并在本地克隆。
2. 为将要完成的工作创建一个新的分支。
3. 遵循此处的指南，完成工作并以最好的能力进行测试。
4. 工作完成后，写一条好的提交消息。
5. 将您的工作推向github并创建新的拉力请求。
6. 回应任何代码审核反馈。

⬆回到顶部

---

执照

版权（C）澳大利亚联邦。除了英联邦的武器外套外，此外，此工作是根据麻省理工学院许可证获得许可的。

⬆回到顶部

};