├── .npmignore
├── .gitignore
├── .browserslistrc
├── src
└── theme
│ ├── styles.scss
│ ├── img
│ ├── favicons
│ │ ├── favicon.ico
│ │ ├── favicon.png
│ │ ├── favicon-16.png
│ │ ├── favicon-40.png
│ │ ├── favicon-57.png
│ │ ├── favicon-72.png
│ │ ├── favicon-114.png
│ │ ├── favicon-144.png
│ │ ├── favicon-192.png
│ │ └── favicon-usa-57.png
│ ├── minus-white.svg
│ ├── plus-white.svg
│ └── external-link-black.svg
│ ├── _uswds-theme.scss
│ └── _uswds-theme-custom-styles.scss
├── package.json
├── gulpfile.js
├── release.js
├── doc-util.js
├── .github
└── workflows
│ ├── auto-prerelease-notuswds.yml
│ ├── auto-prerelease.yml
│ └── auto-release.yml
└── README.md
/.npmignore:
--------------------------------------------------------------------------------
1 | .github/
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /src/css
3 | /src/fonts
4 | /src/img
5 | /src/js
--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # Supported browsers
2 | > 2%
3 | last 2 versions
4 | IE 11
5 | not dead
6 |
--------------------------------------------------------------------------------
/src/theme/styles.scss:
--------------------------------------------------------------------------------
1 | @forward "uswds-theme";
2 | @forward "uswds";
3 | @forward "uswds-theme-custom-styles";
4 |
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon.ico
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon.png
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon-16.png
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon-40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon-40.png
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon-57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon-57.png
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon-72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon-72.png
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon-114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon-114.png
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon-144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon-144.png
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon-192.png
--------------------------------------------------------------------------------
/src/theme/img/favicons/favicon-usa-57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bruffridge/nasawds/HEAD/src/theme/img/favicons/favicon-usa-57.png
--------------------------------------------------------------------------------
/src/theme/img/minus-white.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nasawds",
3 | "description": "",
4 | "license": "CC0-1.0",
5 | "version": "4.0.70",
6 | "author": "bruffridge",
7 | "repository": {
8 | "type": "git",
9 | "url": "git://github.com/bruffridge/nasawds.git"
10 | },
11 | "scripts": {
12 | "test": "echo \"Error: no test specified\" && exit 1",
13 | "prepare": "gulp init",
14 | "watch": "gulp watch",
15 | "release": "gulp release"
16 | },
17 | "devDependencies": {
18 | "@uswds/compile": "^1.0.0",
19 | "@uswds/uswds": "^3.1.0",
20 | "ansi-colors": "^4.1.1",
21 | "cross-spawn": "^7.0.3",
22 | "del": "^5.1.0",
23 | "fancy-log": "^1.3.3",
24 | "node-notifier": "^8.0.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/theme/img/plus-white.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/theme/_uswds-theme.scss:
--------------------------------------------------------------------------------
1 | @forward "uswds-core" with (
2 | /* COLOR SETTINGS */
3 | $theme-color-primary: 'blue-warm-60v',
4 | $theme-color-secondary-lighter: 'red-cool-10', //red-10 matches nasawds better
5 | $theme-color-secondary: 'red-50v',
6 | $theme-color-secondary-vivid: 'red-50v',
7 | $theme-color-accent-cool: 'blue-cool-20v',
8 | $theme-color-accent-cool-dark: 'cyan-30v',
9 | $theme-color-accent-cool-darker: 'blue-cool-40v',
10 | $theme-color-accent-cool-darkest: 'blue-cool-60v',
11 | $theme-color-warning-lighter: 'gold-5v',
12 | $theme-color-warning-light: 'gold-20v',
13 |
14 | /* TYPOGRAPHY SETTINGS */
15 | $theme-font-type-lang: 'helvetica',
16 | $theme-font-role-heading: 'lang',
17 | $theme-h3-font-size: 10,
18 | $theme-h4-font-size: 8,
19 | $theme-h5-font-size: 'sm',
20 | $theme-h6-font-size: 'xs',
21 | $theme-lead-font-family: 'body',
22 | );
23 |
--------------------------------------------------------------------------------
/src/theme/img/external-link-black.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | /*
2 | * * * * * ==============================
3 | * * * * * ==============================
4 | * * * * * ==============================
5 | * * * * * ==============================
6 | ========================================
7 | ========================================
8 | ========================================
9 | ----------------------------------------
10 | USWDS SASS GULPFILE
11 | ----------------------------------------
12 |
13 | from https://designsystem.digital.gov/documentation/getting-started/developers/phase-two-compile/
14 | */
15 |
16 | /**
17 | * Import uswds-compile
18 | */
19 | const uswds = require("@uswds/compile");
20 | const gulp = require("gulp");
21 |
22 | /**
23 | * USWDS version
24 | * Set the major version of USWDS you're using
25 | * (Current options are the numbers 2 or 3)
26 | */
27 | uswds.settings.version = 3;
28 |
29 | /**
30 | * Path settings
31 | * Set as many as you need
32 | */
33 | uswds.paths.src.projectSass = './src/theme';
34 | uswds.paths.dist.theme = './src/theme';
35 | uswds.paths.dist.img = './src/img';
36 | uswds.paths.dist.fonts = './src/fonts';
37 | uswds.paths.dist.js = './src/js';
38 | uswds.paths.dist.css = './src/css';
39 |
40 | /**
41 | * Gulp tasks
42 | */
43 | gulp.task("copy-nasa-images", () => {
44 | return gulp.src(`${uswds.paths.dist.theme}/img/**`)
45 | .pipe(gulp.dest(uswds.paths.dist.img));
46 | });
47 | gulp.task('copy', gulp.series(uswds.copyAssets, 'copy-nasa-images'));
48 | gulp.task('init', gulp.series('copy', uswds.compile));
49 | gulp.task('watch', uswds.watch);
50 |
51 |
52 | gulp.task("default", gulp.series("watch"));
53 |
54 | require("./release");
55 |
--------------------------------------------------------------------------------
/release.js:
--------------------------------------------------------------------------------
1 | /* from https://github.com/uswds/uswds/blob/develop/config/gulp/release.js */
2 |
3 | const del = require("del");
4 | const spawn = require("cross-spawn");
5 | const gulp = require("gulp");
6 | const dutil = require("./doc-util");
7 |
8 | const task = "release";
9 |
10 | gulp.task("make-tmp-directory", () => {
11 | dutil.logMessage(
12 | "make-tmp-directory",
13 | "Creating temporary release directory."
14 | );
15 |
16 | return gulp.src("src/**/*").pipe(gulp.dest(dutil.dirName));
17 | });
18 |
19 | gulp.task("clean-tmp-directory", () => {
20 | dutil.logMessage(
21 | "clean-tmp-directory",
22 | "Deleting temporary release directory."
23 | );
24 | return del(dutil.dirName);
25 | });
26 |
27 | gulp.task("zip-archives", done => {
28 | const zip = spawn("zip", [
29 | "--log-info",
30 | "-r",
31 | `./${dutil.dirName}.zip`,
32 | dutil.dirName,
33 | '-x "*.DS_Store"'
34 | ]);
35 |
36 | dutil.logMessage(
37 | "zip-archives",
38 | `Creating a zip archive in ${dutil.dirName}.zip`
39 | );
40 |
41 | zip.stdout.on("data", data => {
42 | if (/[\w\d]+/.test(data)) {
43 | dutil.logData("zip-archives", data);
44 | }
45 | });
46 |
47 | zip.stderr.on("data", data => {
48 | dutil.logError("zip-archives", data);
49 | });
50 |
51 | zip.on("error", error => {
52 | dutil.logError("zip-archives", "Failed to create a zip archive");
53 | done(error);
54 | });
55 |
56 | zip.on("close", code => {
57 | if (code === 0) {
58 | done();
59 | }
60 | });
61 | });
62 |
63 | gulp.task(
64 | task,
65 | gulp.series(
66 | done => {
67 | dutil.logMessage(
68 | task,
69 | `Creating a zip archive at ${dutil.dirName}.zip`
70 | );
71 | done();
72 | },
73 | "init",
74 | "make-tmp-directory",
75 | "zip-archives",
76 | "clean-tmp-directory"
77 | )
78 | );
--------------------------------------------------------------------------------
/doc-util.js:
--------------------------------------------------------------------------------
1 | // dependency of release.js. from https://github.com/uswds/uswds/blob/develop/config/gulp/doc-util.js
2 |
3 | const log = require("fancy-log");
4 | const colors = require("ansi-colors");
5 | const notifier = require("node-notifier");
6 | const pkg = require("./package.json");
7 |
8 | const shellPrefix = "$";
9 |
10 | function drawFlag() {
11 | log(colors.white(""));
12 | log(colors.white("* * * * * ========================"));
13 | log(colors.white("* * * * * ========================"));
14 | log(colors.white("* * * * * ========================"));
15 | log(colors.white("* * * * * ========================"));
16 | log(colors.white("=================================="));
17 | log(colors.white("=================================="));
18 | log(colors.white("=================================="));
19 | log(colors.white(""));
20 | }
21 |
22 | function notify(title, message, wait) {
23 | notifier.notify({
24 | title,
25 | message,
26 | icon: 'src/img/favicons/favicon-192.png',
27 | wait,
28 | timeout: false
29 | });
30 | }
31 |
32 | module.exports = {
33 | pkg: {
34 | name: pkg.name,
35 | version: pkg.version
36 | },
37 |
38 | dirName: `${pkg.name}-${pkg.version}`,
39 |
40 | logIntroduction(message) {
41 | const introMessage = message || "NASAWDS";
42 | log(colors.yellow(`${introMessage} v${pkg.version}`));
43 | drawFlag();
44 | },
45 |
46 | logCommand(name, message) {
47 | log(shellPrefix, colors.cyan(name), colors.magenta(message));
48 | },
49 |
50 | logHelp(name, message) {
51 | log(shellPrefix, colors.cyan(name), colors.yellow(message));
52 | },
53 |
54 | logData(name, message) {
55 | log(colors.cyan(name), colors.yellow(message));
56 | },
57 |
58 | logError(name, message) {
59 | log(colors.red(name), colors.yellow(message));
60 | notify(`${this.dirName} gulp ${name}`, message, true);
61 | },
62 |
63 | logMessage(name, message) {
64 | log(colors.cyan(name), colors.green(message));
65 | notify(`${this.dirName} gulp ${name}`, message, false);
66 | }
67 | };
--------------------------------------------------------------------------------
/.github/workflows/auto-prerelease-notuswds.yml:
--------------------------------------------------------------------------------
1 | name: auto-prerelease-notuswds
2 |
3 | on:
4 | workflow_dispatch:
5 |
6 | jobs:
7 | pre-release:
8 |
9 | runs-on: ubuntu-latest
10 |
11 | steps:
12 | #checkout develop branch
13 | - uses: actions/checkout@v3
14 | with:
15 | ref: develop
16 | # https://github.com/actions/setup-node
17 | - uses: actions/setup-node@v3
18 | with:
19 | node-version: '16.x'
20 | registry-url: https://registry.npmjs.org/
21 |
22 | - run: npm install
23 | - name: update npm package versioning
24 | #https://help.github.com/en/actions/automating-your-workflow-with-github-actions/development-tools-for-github-actions#set-an-environment-variable-set-env
25 | run: echo "RELEASE_VERSION=$(npm --no-git-tag-version version prerelease --preid=beta)" >> $GITHUB_ENV
26 | #run: echo "::set-env name=RELEASE_VERSION::$(npm --no-git-tag-version version prerelease --preid=beta)" # updates package.json version number from 3.0.0 to 3.0.1-beta.0
27 | #https://github.com/ad-m/github-push-action
28 | - uses: stefanzweifel/git-auto-commit-action@v4
29 | with:
30 | commit_message: bump to beta
31 | branch: develop
32 | env:
33 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
34 | - run: npm run release
35 | - run: echo "RELEASE_ASSET_PATH=$(find . -name "nasawds-*.zip")" >> $GITHUB_ENV
36 | - uses: ncipollo/release-action@v1
37 | with:
38 | artifacts: ${{ env.RELEASE_ASSET_PATH }}
39 | tag: ${{ env.RELEASE_VERSION }}
40 | prerelease: true
41 | body: |
42 | Changes in this Release
43 | -
44 | token: ${{ secrets.GITHUB_TOKEN }}
45 | #https://github.com/actions/starter-workflows/blob/master/ci/npm-publish.yml
46 | # remove .zip file
47 | - run: rm -rf ${{ env.RELEASE_ASSET_PATH }}
48 | - run: npm publish --tag beta
49 | env:
50 | # https://stackoverflow.com/questions/57685065/how-to-set-secrets-in-github-actions
51 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
52 |
--------------------------------------------------------------------------------
/.github/workflows/auto-prerelease.yml:
--------------------------------------------------------------------------------
1 | name: auto-prerelease
2 |
3 | on:
4 | workflow_dispatch:
5 | schedule:
6 | - cron: '0 0 */15 * *' # every 15 days at midnight
7 |
8 | jobs:
9 | pre-release:
10 |
11 | runs-on: ubuntu-latest
12 |
13 | steps:
14 | # see if uswds version has changed since last nasawds release. if not, do nothing.
15 |
16 | #checkout develop branch
17 | - uses: actions/checkout@v3
18 | with:
19 | ref: develop
20 | # https://github.com/actions/setup-node
21 | - uses: actions/setup-node@v3
22 | with:
23 | node-version: '16.x'
24 | registry-url: https://registry.npmjs.org/
25 |
26 | - run: npm install
27 | # if npm outdated --parseable contains 'uswds:uswds' then exit code will be 0 and CI workflow will continue, otherwise exit code will be 1 and CI workflow will not continue.
28 | # https://stackoverflow.com/questions/12375722/how-do-i-test-in-one-line-if-command-output-contains-a-certain-string
29 |
30 | - run: npm outdated --parseable | grep -q @uswds/uswds
31 | - run: npm update @uswds/uswds
32 | - name: update npm package versioning
33 | #https://help.github.com/en/actions/automating-your-workflow-with-github-actions/development-tools-for-github-actions#set-an-environment-variable-set-env
34 | run: echo "RELEASE_VERSION=$(npm --no-git-tag-version version prerelease --preid=beta)" >> $GITHUB_ENV
35 | #run: echo "::set-env name=RELEASE_VERSION::$(npm --no-git-tag-version version prerelease --preid=beta)" # updates package.json version number from 3.0.0 to 3.0.1-beta.0
36 | #https://github.com/ad-m/github-push-action
37 | - uses: stefanzweifel/git-auto-commit-action@v4
38 | with:
39 | commit_message: Updated uswds package to latest version
40 | branch: develop
41 | env:
42 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
43 | - run: npm run release
44 | - run: echo "RELEASE_ASSET_PATH=$(find . -name "nasawds-*.zip")" >> $GITHUB_ENV
45 | - uses: ncipollo/release-action@v1
46 | with:
47 | artifacts: ${{ env.RELEASE_ASSET_PATH }}
48 | tag: ${{ env.RELEASE_VERSION }}
49 | prerelease: true
50 | body: |
51 | Changes in this Release
52 | - uswds package updated to latest version
53 | token: ${{ secrets.GITHUB_TOKEN }}
54 | #https://github.com/actions/starter-workflows/blob/master/ci/npm-publish.yml
55 | # remove .zip file
56 | - run: rm -rf ${{ env.RELEASE_ASSET_PATH }}
57 | - run: npm publish --tag beta
58 | env:
59 | # https://stackoverflow.com/questions/57685065/how-to-set-secrets-in-github-actions
60 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
61 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # NASA Web Design System
2 |
3 | The same [USWDS](https://designsystem.digital.gov/) you know and love, with NASA theming!
4 |
5 | ### NASA Theme customizations
6 |
7 | * Minor tweaks to colors in `_uswds-theme-color.scss`
8 | * Headings use helvetica instead of source sans pro font in `_uswds-theme-typography.scss`
9 | * NASA meatball favicons in `theme/favicons`
10 | * Dark header option and other minor visual tweaks in `_uswds-theme-custom-styles.scss`
11 | * [See it live!](https://www1.grc.nasa.gov/facilities/sec/)
12 | * To use the dark header option, add the `.usa-header--dark` class to the `` element.
13 | * For the close icon in the mobile slideout menu to appear white instead of dark gray replace `close.svg` with `close-white.svg` in this line of html ``
14 |
15 | ### How to Use
16 |
17 | Like USWDS, NASAWDS has two installation options:
18 |
19 | * **Direct download** - Download the .zip file attached to the latest stable [release](https://github.com/bruffridge/nasawds/releases) under the assets section. Extract then add the files to your project's code base. For more details see [this section](https://designsystem.digital.gov/documentation/developers/#download) in the USWDS developer documentation.
20 |
21 | * **Install using npm** - NASAWDS is available as an [npm package](https://www.npmjs.com/package/nasawds). To install via npm, follow [these instructions](https://designsystem.digital.gov/documentation/developers/#install-using-npm), but where it says `uswds` replace with `nasawds`. Once installed, you will find the compiled asset files in the `node_modules/nasawds/src/` directory.
22 |
23 | For more detailed installation and usage instructions see the [USWDS developer documentation](https://designsystem.digital.gov/documentation/developers).
24 |
25 | #### Creating a webpage using NASAWDS
26 | - Create an index.html file at the top of your repository
27 | - Paste into that file
28 | ```
29 |
30 |
31 |
32 |
33 | My Example Project
34 |
35 |
36 |
37 |
38 |
39 |
40 |