Skip to content

Commit d08a718

Browse files
fzhao99fzhao99
authored
Merge pull request #3 from CDCgov/bob/add-design-system-styles
2 parents ffed8b4 + e62ce1a commit d08a718

16 files changed

+917
-28416
lines changed

‎README.md‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,39 @@
1-
# CDCgov GitHub Organization Open Source Project Template
1+
# DIBBs Design System
22

3-
**Template for clearance: This project serves as a template to aid projects in starting up and moving through clearance procedures. To start, create a new repository and implement the required [open practices](open_practices.md), train on and agree to adhere to the organization's [rules of behavior](rules_of_behavior.md), and [send a request through the create repo form](https://forms.office.com/Pages/ResponsePage.aspx?id=aQjnnNtg_USr6NJ2cHf8j44WSiOI6uNOvdWse4I-C2NUNk43NzMwODJTRzA4NFpCUk1RRU83RTFNVi4u) using language from this template as a Guide.**
3+
This repo is a compilation of the design system for the Data Integration Building Blocks (DIBBs) project at the CDC.
4+
It's an attempt to provide a starting point for new and existing DIBBs team to use a unified design language that matches the
5+
created specs from our design colleagues.
46

5-
**General disclaimer** This repository was created for use by CDC programs to collaborate on public health related projects in support of the [CDC mission](https://www.cdc.gov/about/cdc/#cdc_about_cio_mission-our-mission). GitHub is not hosted by the CDC, but is a third party website used by CDC and its partners to share information and collaborate on software. CDC use of GitHub does not imply an endorsement of any one particular service, product, or enterprise.
7+
Included are
68

7-
## Access Request, Repo Creation Request
9+
- A configuration of the base USWDS styles that the system is based on
10+
- A Gulp compilation setup that translates the Sass into CSS (this is done by NextJS in most of the existing DIBBs projects / handled in different ways in the actual application frontends)
11+
- A `design_system.scss` file that provides the actual design system overrides that are the "core" of the design system styles. The engineers made an implementation decision to implement the design system at the Sass level, maintaining the interface of the USWDS utility classes
12+
- An example `index.html` that showcases the overriden styles / how to use access them in actual markup.
813

9-
* [CDC GitHub Open Project Request Form](https://forms.office.com/Pages/ResponsePage.aspx?id=aQjnnNtg_USr6NJ2cHf8j44WSiOI6uNOvdWse4I-C2NUNk43NzMwODJTRzA4NFpCUk1RRU83RTFNVi4u) _[Requires a CDC Office365 login, if you do not have a CDC Office365 please ask a friend who does to submit the request on your behalf. If you're looking for access to the CDCEnt private organization, please use the [GitHub Enterprise Cloud Access Request form](https://forms.office.com/Pages/ResponsePage.aspx?id=aQjnnNtg_USr6NJ2cHf8j44WSiOI6uNOvdWse4I-C2NUQjVJVDlKS1c0SlhQSUxLNVBaOEZCNUczVS4u).]_
14+
## Setup
15+
16+
Install the relevant packages using `npm install`. Then, run `npm run start` to spin up the simple Node server to see the complied styles at `localhost:8080`.
17+
18+
If you want to extend the Sass, make any changes you need and then compile it into CSS by running `npm run compile`. You might need to clear the cache in your local browser to see the changes.
19+
20+
**General disclaimer** This repository was created for use by CDC programs to collaborate on public health related projects in support of the [CDC mission](https://www.cdc.gov/about/cdc/#cdc_about_cio_mission-our-mission). GitHub is not hosted by the CDC, but is a third party website used by CDC and its partners to share information and collaborate on software. CDC use of GitHub does not imply an endorsement of any one particular service, product, or enterprise.
1021

1122
## Related documents
1223

13-
* [Open Practices](open_practices.md)
14-
* [Rules of Behavior](rules_of_behavior.md)
15-
* [Thanks and Acknowledgements](thanks.md)
16-
* [Disclaimer](DISCLAIMER.md)
17-
* [Contribution Notice](CONTRIBUTING.md)
18-
* [Code of Conduct](code-of-conduct.md)
24+
- [Open Practices](open_practices.md)
25+
- [Rules of Behavior](rules_of_behavior.md)
26+
- [Thanks and Acknowledgements](thanks.md)
27+
- [Disclaimer](DISCLAIMER.md)
28+
- [Contribution Notice](CONTRIBUTING.md)
29+
- [Code of Conduct](code-of-conduct.md)
1930

2031
## Overview
2132

2233
Describe the purpose of your project. Add additional sections as necessary to help collaborators and potential collaborators understand and use your project.
23-
34+
2435
## Public Domain Standard Notice
36+
2537
This repository constitutes a work of the United States Government and is not
2638
subject to domestic copyright protection under 17 USC § 105. This repository is in
2739
the public domain within the United States, and copyright and related rights in
@@ -31,6 +43,7 @@ submitting a pull request you are agreeing to comply with this waiver of
3143
copyright interest.
3244

3345
## License Standard Notice
46+
3447
The repository utilizes code licensed under the terms of the Apache Software
3548
License and therefore is licensed under ASL v2 or later.
3649

@@ -48,13 +61,15 @@ program. If not, see http://www.apache.org/licenses/LICENSE-2.0.html
4861
The source code forked from other open source projects will inherit its license.
4962

5063
## Privacy Standard Notice
64+
5165
This repository contains only non-sensitive, publicly available data and
5266
information. All material and community participation is covered by the
5367
[Disclaimer](DISCLAIMER.md)
5468
and [Code of Conduct](code-of-conduct.md).
5569
For more information about CDC's privacy policy, please visit [http://www.cdc.gov/other/privacy.html](https://www.cdc.gov/other/privacy.html).
5670

5771
## Contributing Standard Notice
72+
5873
Anyone is encouraged to contribute to the repository by [forking](https://help.github.com/articles/fork-a-repo)
5974
and submitting a pull request. (If you are new to GitHub, you might start with a
6075
[basic tutorial](https://help.github.com/articles/set-up-git).) By contributing
@@ -67,9 +82,11 @@ All comments, messages, pull requests, and other submissions received through
6782
CDC including this GitHub page may be subject to applicable federal law, including but not limited to the Federal Records Act, and may be archived. Learn more at [http://www.cdc.gov/other/privacy.html](http://www.cdc.gov/other/privacy.html).
6883

6984
## Records Management Standard Notice
85+
7086
This repository is not a source of government records, but is a copy to increase
7187
collaboration and collaborative potential. All government records will be
7288
published through the [CDC web site](http://www.cdc.gov).
7389

7490
## Additional Standard Notices
91+
7592
Please refer to [CDC's Template Repository](https://github.com/CDCgov/template) for more information about [contributing to this repository](https://github.com/CDCgov/template/blob/main/CONTRIBUTING.md), [public domain notices and disclaimers](https://github.com/CDCgov/template/blob/main/DISCLAIMER.md), and [code of conduct](https://github.com/CDCgov/template/blob/main/code-of-conduct.md).

‎gulpfile.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* gulpfile.js */
2+
3+
const uswds = require("@uswds/compile");
4+
5+
/**
6+
* USWDS version
7+
*/
8+
9+
uswds.settings.version = 3;
10+
11+
/**
12+
* Path settings
13+
* Set as many as you need
14+
*/
15+
16+
uswds.paths.dist.css = "./public/assets/css";
17+
uswds.paths.dist.img = "./public/uswds/img";
18+
uswds.paths.dist.fonts = "./public/uswds/fonts";
19+
uswds.paths.dist.theme = "./sass";
20+
21+
/**
22+
* Exports
23+
* Add as many as you need
24+
*/
25+
26+
exports.init = uswds.init;
27+
exports.compile = uswds.compile;
28+
exports.watch = uswds.watch;
29+
exports.init = uswds.init;
30+
exports.updateUswds = uswds.updateUswds;
31+
exports.default = uswds.watch;

‎package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"dependencies": {
3+
"@uswds/uswds": "^3.13.0",
4+
"http-server": "^14.1.1"
5+
},
6+
"devDependencies": {
7+
"@uswds/compile": "^1.3.1"
8+
},
9+
"scripts": {
10+
"start": "npx http-server",
11+
"compile": "npx gulp compile"
12+
}
13+
}

0 commit comments

Comments
 (0)