昆士兰政府设计系统-香草
这是昆士兰州政府设计系统的“香草”版本,由昆士兰州卫生部的数字体验团队建立和维护。
这个代码库的设计原则是减少对第三方库和框架锁定的依赖。随着时间的推移,我们将继续减少这种依赖。
有关昆士兰州政府设计系统和其他代码库的更多信息,请访问- 昆士兰政府设计系统.
夹杂物
- 公共NPM发布包:
- https://www.npmjs.com/package/@qhealth-design-system/core
- Figma
技术概述
- Webpack -捆绑、编译和资产优化
- Sass + PostCSS —CSS预处理和自动前缀
- HandlebarsJS -组件和HTML模板
- 故事书 -组件开发,测试和文档
- 热模块重新加载(HMR) -在开发过程中实时更新HTML/JS/CSS
- Figma -设计,原型和协作
- NPM -包管理和构建自动化
文档
开发入门
要求
- 节点:v20.19.1
- NPM: 10.8.2
下载回购
git clone https://github.com/Qld-Health-Online-Team/design-system.git
cd design-system
安装依赖关系
npm install
构建设计系统CSS, JS,组件和模板
npm run build
为组件开发构建故事书
npm run build-storybook
npm run storybook
线头
npm run lint
单元测试
npm run test
GitHub的行为
- NPM包 出版和发行管理
- 自动化 语义版本控制 适用于补丁、次要和主要版本
- 拉取请求的自动CI/CD验证
- 自动化的GitHub io静态文档 故事书 构建和部署工作流
- 彩色 在主分支和发布分支上进行可视化回归测试
您可以使用您选择的任何IDE。我们的开发团队使用Visual Studio Code (VS Code)和以下推荐的扩展:
- 更漂亮
- ESLint
- HandlebarsJS 模板的支持
可访问性
此存储库根据Web内容可访问性指南(WCAG) 2.2级别A和AA进行测试,以帮助确保高标准的可访问性。 我们遵循昆士兰州政府的数字无障碍要求,以支持公平获取信息、服务和机会。
沟通
如果您有改进建议或发现问题,请在此存储库中提出问题。