{"id":15064517,"url":"https://github.com/18f/uswds-jekyll","last_synced_at":"2025-05-15T03:04:12.886Z","repository":{"id":18374340,"uuid":"82982183","full_name":"18F/uswds-jekyll","owner":"18F","description":"A Jekyll theme showcasing the U.S. Web Design System","archived":false,"fork":false,"pushed_at":"2024-10-28T15:18:44.000Z","size":22333,"stargazers_count":140,"open_issues_count":25,"forks_count":140,"subscribers_count":91,"default_branch":"main","last_synced_at":"2025-04-14T02:59:38.334Z","etag":null,"topics":["government","jekyll-theme","uswds"],"latest_commit_sha":null,"homepage":"https://federalist-proxy.app.cloud.gov/site/18f/uswds-jekyll/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/18F.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-23T23:41:47.000Z","updated_at":"2025-03-12T16:57:28.000Z","dependencies_parsed_at":"2023-12-06T18:25:32.645Z","dependency_job_id":"4f357ec0-6765-45d8-b68b-9f63b59186f6","html_url":"https://github.com/18F/uswds-jekyll","commit_stats":{"total_commits":531,"total_committers":43,"mean_commits":"12.348837209302326","dds":0.7175141242937852,"last_synced_commit":"ddedf992becc3b75e30f808b3231df403cd90cc7"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/18F%2Fuswds-jekyll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/18F%2Fuswds-jekyll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/18F%2Fuswds-jekyll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/18F%2Fuswds-jekyll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/18F","download_url":"https://codeload.github.com/18F/uswds-jekyll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248813789,"owners_count":21165633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["government","jekyll-theme","uswds"],"created_at":"2024-09-25T00:19:46.527Z","updated_at":"2025-04-14T02:59:46.851Z","avatar_url":"https://github.com/18F.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**This repository is in maintenance mode and only accepting fixes. The Tech Portfolio and TTS Digital Council are working on a strategy for TTS microsites which will inform the future of this theme. [Open an issue to provide any feedback](https://github.com/18F/uswds-jekyll/issues/new).**\n\n# Jekyll + U.S. Web Design System\n\nThis is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the\n[U.S. Web Design System](https://designsystem.digital.gov).\n\n## Table of contents\n\n1. [Installation](#installation)\n   - [Versioning](#versioning)\n1. [Configuration](#configuration)\n   - [Site title](#site-title)\n   - [Site description](#site-description)\n   - [Navigation](#navigation)\n   - [Page subnavigation](#page-subnavigation)\n   - [Hero](#hero)\n   - [Tagline intro](#tagline-intro)\n   - [Graphics list](#graphics-list)\n   - [Color and font configuration](#color-and-font-configuration)\n   - [Search](#search)\n   - [Analytics](#analytics)\n   - [Last modified date](#last-modified-date)\n   - [Edit page](#edit-page)\n   - [Anchor JS](#anchor-js)\n   - [Private Eye JS](#private-eye-js)\n1. [Assets](#assets)\n   - [Stylesheets](#stylesheets)\n   - [Scripts](#scripts)\n   - [Asset load order](#asset-load-order)\n1. [Customization](#customization)\n   - [Overriding includes and layouts](#overriding-includes-and-layouts)\n1. [Components](#components)\n   - [Header](#header)\n   - [Identifier](#identifier)\n1. [Layouts](#layouts)\n   - [Default](#layout-default)\n   - [Page](#layout-page)\n   - [Home](#layout-home)\n   - [Post](#layout-post)\n   - [Project](#layout-project)\n   - [Team member](#layout-team-member)\n1. [Migration guide](#migration)\n1. [Development](#development)\n\n## Installation\n\n1. Install the theme as a Ruby Gem by adding it to your `Gemfile`\n   like so:\n\n   ```ruby\n   gem 'uswds-jekyll'\n   ```\n\n1. Fetch and update your bundled gems by running:\n\n   ```sh\n   bundle\n   ```\n\n1. Set the `theme` in your site's Jekyll configuration,\n   `_config.yml`:\n\n   ```yml\n   theme: uswds-jekyll\n   ```\n\nYou will need to restart your Jekyll server to see the effects.\n\n### Install as a new Jekyll site\n\n1. Create a new Jekyll site:\n   ```\n   jekyll new\n   ```\n1. Replace the default `gem \"minima\", \"~\u003e 2.0\"` gem with the `uswds-jekyll` gem in your `Gemfile`:\n\n   ```ruby\n   gem 'uswds-jekyll'\n   ```\n\n1. Set the `theme` in your site's Jekyll configuration, `_config.yml`:\n\n   ```yml\n   theme: uswds-jekyll\n   ```\n\n1. Fetch and update your bundled gems by running:\n\n   ```sh\n   bundle\n   ```\n\n1. Run `bundle exec jekyll serve` to build your site locally at http://localhost:4000/\n\n### Versioning\n\nTo reference a specific version of this theme:\n\n1. Visit the [releases page](https://github.com/18F/uswds-jekyll/releases) and decide which version you want to use.\n1. Specify the version in your `Gemfile`.\n\n   ```ruby\n   gem 'uswds-jekyll', '~\u003e 5.0'\n   ```\n\n## Configuration\n\nConfiguration of common elements ([header](#header), [identifier](#identifier), [navigation](#navigation), etc.) happens in your project's [data files](https://jekyllrb.com/docs/datafiles/). See this project's [data directory](_data) for reference configurations of each component.\n\nThe [default layout](#layout-default) also provides a mechanism for automatically including [stylesheets](#stylesheets) and [scripts](#scripts) on a site-wide, layout-wide, and per-page basis. See [asset load order](#asset-load-order) for more information.\n\n### Site title\n\nYou can change your site's title with the `title` field in `_config.yml`. If you want to provide an alternate title for use _only_ in the site header, you can set the `title` field in `_data/header.yml`.\n\n### Site description\n\nYou can change your site's description with the `description` field in `_config.yml`. If you want to override it for a particular page, you can set the `description` field in that page's frontmatter.\n\n### Navigation\n\nThis theme's navigation system is powerful and flexible. Named navigational lists live in your project's `_data/navigation.yml`.\n\nBy default all links are assumed to be internal to the site. You can add `external: true` to links that are external. You can also add `class: class-name` to add a class to a specific link.\n\n```yml\n# _data/navigation.yml\n\nprimary:\n  - text: Documentation\n    href: /docs/\n  - text: Support\n    href: /help/\n    class: highlight\n  - text: \"18F\"\n    href: https://18f.gsa.gov\n    external: true\n\n  # link objects with a 'links' field will be presented as\n  # collapsible link lists. The 'links' field can either be\n  # a reference to another link list in this file, or\n  # a literal list.\n\n  - text: Section title\n    links: \u003clinks\u003e\n```\n\nThis scheme allows you to define navigational elements that can be shared by different components, such as the [header](#header) and [sidenav](#Page-subnavigation). See the documentation for those components for more info.\n\n### Page title\n\nSet each page's title in its frontmatter:\n\n```\n---\ntitle: About us\n---\n```\n\n### Page subnavigation\n\nIf you're using the [page layout](#layout-page), each page may declare its own side navigation and subnavigation in its front matter:\n\n```md\n---\nsidenav: documentation\nsubnav:\n  - text: Section one\n    href: '#section-one'\n  - text: Section two\n    href: '#section-two\n---\n\n## Section one\n\n## Section two\n```\n\nAs with the [header](#header), the `sidenav` field may either reference a common [navigation list](#navigation) from `_data/navigation.yml` (recommended) or be a literal list of links.\n\nThe `subnav` field should be used to link to sections _within_ the current page, because links to other pages will cause the linking page's side navigation to collapse when visited.\n\n`sidenav` is a key _into_ `_data/navigation.yml`. See the [navigation](#navigation) docs for more info.\n\nA page's \"current\" or \"active\" state in the sidenav is determined by whether a link's `href` matches `page.url` or `page.permalink` for each page being rendered.\n\n`subnav` is a list of links to display on this page under its own link in the side navigation.\n\n**Note that subnav link hrefs are not prefixed with `site.baseurl`** because this breaks hash links prefixed with `#`.\n\n**Pro tip:** Unless your Jekyll configuration specifies otherwise, the default Markdown formatter (Kramdown) will automatically generate predictable `id` attributes for your page headings and convert markdown like this:\n\n```md\n## Section one\n```\n\ninto:\n\n```html\n\u003ch2 id=\"section-one\"\u003eSection one\u003c/h2\u003e\n```\n\nIf you're using Redcarpet, you will need to configure it to enable the `with_toc_data` extension in your `_config.yml`, like so:\n\n```yml\nmarkdown: redcarpet\nredcarpet:\n  extensions:\n    - with_toc_data\n```\n\n**Pro tip:** If you're like us and prefer your navigation sticky, you can add `sticky_sidenav: true` on [page](#layout-page), [project](#layout-project), and [team member](#layout-team-member) layouts to have the sidenav follow as you scroll.\n\n### Hero\n\n```yml\nhero: # optional\n  image: /path/to/image.jpg # optional\n  callout:\n    alt: Callout white text! # optional\n    text: The rest of the callout\n  button: # optional\n    text: The button text\n    href: /button-href/\n```\n\n### Tagline intro\n\n```yml\n# optional, but must be used in conjunction with 'intro', below\ntagline: A tagline for your page\n# also optional, but must be used with 'tagline', above\nintro: |\n  Some introductory text content.\n\n  This will be processed as **Markdown**.\n```\n\n### Graphics list\n\n```yml\n# an optional list of graphics to display before or after the content\ngraphics:\n  - image:\n      # note the indentation here: graphics[n].image.src\n      src: /path/to/image.ext\n      alt: optional alt text\n    title: Optional graphic title, rendered as an \u003ch3\u003e\n    description: Graphic description text, processed as _Markdown_.\n\n# optional\ngraphics_position: (before|after)\n```\n\n### Color configuration\n\nThe default colors can be configured in the `_data/theme.yml` file. Other settings can be configured using USWDS theme settings. (See the [customization](#customization) section, below.)\n\n### Search\n\n[Search.gov](https://search.gov/) is used for search and can be configured in `_config.yml`.\n\nBefore configuring your search you will need to create a search.gov account and set up your website\nwith search.gov.\n\nAfter setting up your site on search.gov you can then add your `search_site_handle` to the `config.yml`.\n\n### Analytics\n\n#### Google Analytics\n\nYou can add Google Analytics to your site by uncommenting the `google_analytics_ua` line and replacing `UA-????????-??` with your Google analytics UA code.\n\n```\n# Configuration for Google Analytics, add your UA code here:\n# google_analytics_ua: UA-????????-??\n```\n\n#### Digital Analytics Program (DAP)\n\nYou can add DAP to your site by uncommenting the `dap_agency` line and, if need be, replacing `GSA` with the appropriate agency key. And optionally, `dap_subagency` may also be specified. For more information visit \u003chttps://www.digitalgov.gov/services/dap/\u003e\n\n```\n# Configuration for DAP, add your agency ID here:\n# dap_agency: GSA\n# dap_subagency: TTS\n```\n\n### Feedback form\n\nTo add a user feedback form, create a new survey through [Touchpoints](https://touchpoints.digital.gov/) and add the ID via the `touchpoints_form_id` key in `_config.yml`.\n\n### Last modified date\n\nTo show the last date a page was last modified by:\n\n1. Add these lines to the `edit-page.yml` data file:\n\n    ```yml\n    last_modified:\n      display_date: true\n      date_format: '%B %d, %Y'\n    ```\n\n1. Add the following to your `Gemfile`:\n\n    ```ruby\n    group :jekyll_plugins do\n      gem \"jekyll-last-modified-at\"\n    end\n    ```\n\nThis will add the date right before the identifier component.\n\n### Edit page\nTo add a link which will allow visitors to submit edits to the current page via GitHub, add the following lines to to the `edit-page.yml` data file:\n\n```yml\nedit_page:\n  display_link: true\n  text: \"Edit this page\"\n```\nThis will add the edit link right before the identifier component.\n\n### Anchor JS\n\nYou can show an anchor link next to header tags by uncommenting this section from the `_config.yml` data file. This will add an anchor link after the header tag on the page and post layouts making each header linkable. See https://github.com/bryanbraun/anchorjs for more information.\n\n```yml\n# anchor_js_targets: [h1, h2, h3, h4, h5, h6]\n```\n\n### Private Eye JS\n\nBy default, the USWDS Jekyll theme uses [Private Eye](https://github.com/18F/private-eye) to denote private links. You can turn this on by adding the setting below in your _config.yml. If you would like to customize the default Private Eye configuration, you can find it in `/assets/js/private_eye_conf.js`.\n\n```yml\nprivate_eye: true\n```\n\n## Assets\n\nThe [stylesheet](_includes/styles.html) and [script](_includes/scripts.html) includes each incorporate the USWDS CSS and JS files if the corresponding `styles` and `scripts` lists aren't defined in your `_config.yml`. So unless you add one or both of those manually, your HTML will include the following:\n\n```html\n\u003c!-- in the \u003chead\u003e --\u003e\n\u003clink rel=\"stylesheet\" href=\"/assets/uswds/css/uswds.min.css\" media=\"screen\"\u003e\n\u003c!-- before \u003c/body\u003e --\u003e\n\u003cscript src=\"/assets/uswds/js/uswds.min.js\" async\u003e\n```\n\nRead more about customizing [stylesheets](#stylesheets) and [scripts](#scripts) below.\n\n### Stylesheets\n\nAs a general rule, all stylesheets are inserted in a layouts' `\u003chead\u003e`, which qualifies them as \"render-blocking\". Site stylesheets can be specified in `_config.yml` or a layout or page's [front matter] YAML in the following form:\n\n```yml\nstyles:\n  - /path/to/sheet.css\n  - href: /path/to/sheet.css\n    media: (screen|print|all) # optional\n```\n\nStylesheets specified as objects (in the latter item above) must have an `href` property. The `media` defaults to `screen`.\n\n### Scripts\n\nAs a general rule, all scripts are inserted before a layouts' `\u003c/body\u003e`, which prevents them from blocking the rendering of your page's content. Scripts can be specified in `_config.yml` or a layout or page's [front matter] YAML in the following form:\n\n```yml\nscripts:\n  - /path/to/script.js\n  - src: /path/to/script.js\n    async: true # optional\n```\n\nScripts specified as objects (in the latter item above) must have a `src` property. Scripts with `async: true` will get an `async` attribute, which tells the browser _not_ to let this script's loading block the execution of subsequent scripts. If the execution order of your scripts is **not** important, setting `async: true` may provide performance benefits to your users. (Conversely, if you don't know whether your scripts need to execute in a particular order, then you should not set `async: true` because it may prevent your scripts from running properly.)\n\n### Asset load order\n\nBoth [stylesheets](#stylesheets) and [scripts](#scripts) can be configured\n\n1. Assets configured at the `site` level (in your `_config.yml`) will be loaded\n   in all pages that use the USWDS [layouts](#layouts).\n1. Those configured at the layout level (in that layout's [front\n   matter]) will be loaded on all pages that use that layout, after\n   site assets.\n1. Those configured at the page level (in the page's [front matter])\n   will be loaded last.\n\n## Customization\n\nCustomize the USWDS Jekyll theme with [USWDS theme settings files](https://designsystem.digital.gov/documentation/settings/), [USWDS design tokens](https://designsystem.digital.gov/design-tokens/), and custom Sass or CSS. You'll need to place USWDS settings and custom Sass into a couple specific locations for the theme to find them.\n\n1. **Settings:** Add custom USWDS settings to `_sass/_uswds-theme-settings.scss`. Settings control the USWDS output. See all available settings in the [USWDS settings documentation](https://designsystem.digital.gov/documentation/settings/). We recommend adding only your modified settings to the `_uswds-theme-settings.scss` file.\n\n    To see an example of all the settings available to USWDS, see the files [in the USWDS GitHub repo](https://github.com/uswds/uswds/tree/develop/src/stylesheets/theme). The repo splits settings into multiple files. If you want to copy and mimic that structure, download the repo files using a tool like [DownGit](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/uswds/uswds/tree/develop/src/stylesheets/theme). Then add them to the `_sass/` directory and `@import` them from `_uswds-theme-settings.scss`.\n\n    Whether you add only individual settings variables or import from multiple files, `_uswds-theme-settings.scss` needs to be the entry point.\n\n1. **Custom Sass and variables:** Add any custom CSS or Sass to `_sass/_uswds-theme-custom-styles.scss`. You can use this custom styles file to `@import` any _additional_ Sass or CSS files your project needs, as long as any additional files exist in the `/_sass` directory.\n\n    Custom Sass loads after the USWDS and default Sass, so you can use it to override the defaults. Individual sites can also [selectively override](#overriding-includes-and-layouts) individual includes and layouts.\n\n### Overriding includes and layouts\n\nAny [include](_includes) or [layout](_layouts) can be overridden by\nyour site by placing a file with the same name into your site's\n`_includes` or `_layouts` directory. For instance:\n\n- You can change how the side navigation is rendered (but not which\n  data it receives) in the [page layout](#layout-page) by creating\n  your own `_includes/sidenav.html`.\n\n- You can change how and whether the side navigation is displayed\n  at all in the [page layout](#layout-page) by overriding\n  `_layouts/page.html`.\n\n## Components\n\nFor some [USWDS components](https://designsystem.digital.gov/components/), there are two different files that control how data is passed to\nthe template:\n\n1. `components/{component}.html` is the low-level template that assumes a similarly named global template variable. For instance, the header component operates on the `header` template variable.\n1. `{component}.html` is the \"concrete\" implementation of the component that sets the appropriate global variable then includes the low-level template.\n\nThis separation allows you to override either of the component includes in your own Jekyll site without having to re-implement either the high- or low-level logic. For instance, if you want your header data to come directly from the Jekyll configuration file (`_config.yml`) rather than `_data/header.yml`, you can override `_includes/header.html` to look like this:\n\n```html\n{% assign header = site.data.header %} {% include components/header--basic.html\n%}\n```\n\n### Header\n\nThe [header.html include](_includes/header.html) sets the `header` template variable to `site.data.header`, the value of which is set in your Jekyll project's `_data/header.yml` file. Then it includes [components/header.html](_includes/components/header.html) to render the header's markup.\n\nSee this repo's [header.yml](_data/header.yml) for more info.\n\n### Identifier\n\nThe [components/identifier.html include](_includes/components/identifier.html) sets the `identifier` template variable to `site.data.identifier`, the value of which is set in your Jekyll project's `_data/identifier.yml` file.\nSee this repo's [identifier.yml](_data/identifier.yml) for more info.\n\n## Layouts\n\nThis theme provides the following layouts, which you can use by setting the `layout` [front matter] on each page, like so:\n\n```yml\n---\nlayout: name\n---\n\n```\n\nSupported (optional) front matter for page layouts.\n\n- [page navigation](#page-subnavigation)\n- [hero](#hero)\n- [tagline intro](#tagline-intro)\n- [graphics list](#graphics-list)\n\n### `layout: default`\n\nThis is the bare-bones USWDS layout, which does all of the basic page scaffolding then drops the page content into the `\u003cmain\u003e` element. All of the other layouts \"inherit\" this one and provide other features in the content block.\n\nThe default layout provides a layout [front matter] hook to add attributes to the `\u003cmain\u003e` element. You can see how this works in the [page layout](_layouts/page.html#L3-L4).\n\n### `layout: home`\n\nThis layout implements the [home page\ntemplate](https://designsystem.digital.gov/page-templates/landing/), which accommodates the following [front matter]:\n\nCheck out the YAML front matter in the [home demo page](demo/home.html) for an example of how to structure it.\n\n### `layout: page`\n\nThis layout implements the [document page template](https://designsystem.digital.gov/page-templates/docs/).\n\nSee the [page demo page](demo/page.md) for an example of how this works, and see [\\_data/navigation.yml](_data/navigation.yml) for how to structure named navigation data for your site.\n\n### `layout: post`\n\nThis layout is identical to the layout `page` and is included to allow for easier site creation using `Jekyll new`.\n\n### `layout: project`\n\nThis layout is used to show details for an individual project and uses the following front matter.\n\n```yml\nlayout: project\ntitle: Title of project\npermalink: /projects/link-to-project/\ndescription: Project description.\nlarge_image: /path/to/image.ext\nsmall_image: /path/to/image.ext\nimage_alt: The image alt text\n```\n\nTo show a listing of projects on a page add `{% include project-list.html %} to the page`\n\n### `layout: team-member`\n\nThis layout is used to show details for an individual team member and uses the following front matter.\n\n```yml\nlayout: team-member\npermalink: /team/link-to-team-member/\nname: Team member name\nimage: /path/to/image.ext\njob_title: Team member job title\nphone: 123-456-7890\nemail: email@address.gov\n```\n\nTo show a listing of team members on a page add `{% include team-list.html %} to the page`\n\n[sass]: http://sass-lang.com/guide\n[jekyll sass]: https://jekyllrb.com/docs/assets/#sassscss\n[front matter]: https://jekyllrb.com/docs/frontmatter/\n\n## Migration\n\n### From [guides_style_18f](https://github.com/18F/guides-style)\n\nSee [this example pull request](https://github.com/18F/before-you-ship/pull/458).\n\n### From earlier versions\n\n**Note:** `uswds-jekyll` 5.x is only compatible with Jekyll 4.0 and higher.\n\n1. Update your `uswds-jekyll` gem in your project's Gemfile. Replace the current `gem 'uswds-jekyll'` line with:\n\n   ```ruby\n   gem 'uswds-jekyll', '~\u003e 5.0'\n   ```\n\n   Then, in the terminal, run\n\n   ```sh\n   bundle update uswds-jekyll\n   ```\n\n1. If you have an existing `_sass` folder, it needs to move to the root level, and out of any directory like `/assets`.\n1. Add or move any custom styles or variables to `/_sass/_uswds-theme-custom-styles.scss`.\n\n    If you have multiple custom styles files, add them to the `/_sass` directory and `@import` them from `_uswds-theme-custom-styles.scss`.\n1. Convert manual values to tokenized values using the guidance on the [USWDS migration page](https://designsystem.digital.gov/documentation/migration/#spacing-units).\n1. Don't duplicate the `h1` in the body content of `page` template pages. (This is automatically inserted at the top with the content of `page.title`.)\n1. Check that certain data keys exist\n\n   ```\n   --\u003e config.yml\n   styles:\n     [nothing unless adding additional stylesheets]\n\n   --\u003e header.yml\n   type: [basic | basic-mega | extended | extended-mega]\n\n   --\u003e theme.yml (examples)\n   colors:\n     usa-banner:\n       usa-banner-bg: 'base-lightest'\n       usa-banner-text: 'ink'\n       usa-banner-link: 'primary-dark'\n       usa-banner-link-hover: 'primary-darker'\n     header:\n       header-bg: 'white'\n       header-title: 'ink'\n       header-link: 'base'\n       header-link-hover: 'primary-dark'\n     alt-section:\n       bg-color: 'primary-darker'\n       header-color: 'accent-cool'\n       text-color: 'white'\n       link-color: 'base-lightest'\n       link-hover-color: 'white'\n     hero:\n       hero-bg: 'primary-darker'\n       hero-header: 'accent-cool'\n       hero-header-alt: 'white'\n       hero-text: 'white'\n       hero-link: 'accent-cool'\n       hero-button-bg: 'primary'\n       hero-button-text: 'white'\n     top-navigation:\n       top-nav-bg: 'white'\n       top-nav-link: 'base-dark'\n       top-nav-link-hover: 'primary'\n       top-nav-link-hover-bg: 'white'\n       top-nav-link-current: 'base-dark'\n       top-nav-dropdown-bg: 'primary-dark'\n       top-nav-dropdown-link: 'white'\n       top-nav-dropdown-link-hover-bg: 'transparent'\n     side-navigation:\n       side-nav-bg: 'transparent'\n       side-nav-link: 'ink'\n       side-nav-link-hover: 'primary-dark'\n       side-nav-link-hover-bg: 'base-lightest'\n       side-nav-link-current: 'primary-dark'\n\n   ```\n\n1. Check that css is referencing `uswds-theme.css`\n\n\n## Development\n\nThis section explains how to develop this theme and/or test it locally.\n\n\n### Requirements\n\n- [Ruby](https://www.ruby-lang.org/)\n- [Bundler](https://bundler.io/) 2.x\n- [Node.js](https://nodejs.org/)\n\n\n### Setup\n\nInstall the Node.js dependencies.\n\n    $ npm install\n\nInstall Ruby dependencies.\n\n    $ npm run setup-jekyll\n\nStart the application. This allows you to preview the effects of your changes.\nJekyll will build the site, watch the Sass files, and rebuild when there are\nchanges.\n\n    $ npm start\n\nOpen your web browser to [localhost:4000](http://localhost:4000/).\n\n\n### To update USWDS\n\nWhen new version of USWDS is released, you should pull in the latest assets.\n\n    $ rake update\n\nReview and commit the assets.\n\n\n### Working with a Jekyll site\n\nIf you want to test an existing Jekyll site that uses uswds-jekyll, you can link\nthe gem to your local uswds-jekyll repo.\n\nIn your Jekyll site, change your `Gemfile` to point at the local clone of this repo.\n\n```ruby\ngem 'uswds-jekyll', :path =\u003e '../path/to/uswds-jekyll'\n```\n\n### Publish to Rubygems\n\n1. Update `spec.version = \"NUMBER HERE\"` in the uswds-jekyll.gemspec file to the version you want to publish\n1. Run `bundle install`\n1. Add a PR for the update and get it merged\n1. Run `bundle exec rake release`\n1. Add a GitHub release to the releases page with the same version number\n1. You should see the latest version here https://rubygems.org/gems/uswds-jekyll\n\n#### Scripts\n\n- `start`: Starts the jekyll site\n- `setup-uswds`: Copies assets from the USWDS package to their theme locations, by running the following scripts, which can also be run separately:\n  - `sync-assets`: Copies assets to `assets/uswds`\n  - `sync-sass`: Copies Sass source files to `_sass/uswds/src/`\n  - `sync-default-settings`: Copies default settings files to `_sass/uswds/settings`\n  - `sync-theme-settings`: Copies only theme settings files to `_sass/settings`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F18f%2Fuswds-jekyll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F18f%2Fuswds-jekyll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F18f%2Fuswds-jekyll/lists"}