U.S. Web Design Standards (USWDS)

Drupal integration of the U.S. Web Design Standards library.

This base theme focuses on tweaking Drupal’s markup so that it will work with the USWDS library. Some CSS is added to deal with unavoidable Drupal quirks, but only as a last resort.


As with most Drupal themes, it’s recommended that your active theme be a subtheme of this one, to make updates easier. Simply copy out the /examples/my_subtheme folder to get started, following the directions in /examples/my_subtheme/README.md.


The theme makes no assumptions about how you would like to add site-specific CSS. You can either:

  1. use the pre-compiled USWDS library along with your own normal CSS files, or
  2. use npm to include the USWDS Sass source files in your own front-end workflow

Using the pre-compiled USWDS library

If you would like to use the pre-compiled USWDS library, download the zip file, extract and rename the folder to “assets”, and place it in your theme folder. Afterwards, this should be a valid path inside your theme folder: `assets/css/uswds.css`

Using npm to include the USWDS Sass source files into your own workflow

The library’s source can be installed directly in the subtheme directory by running `npm install` in that location. However it is assumed that you have a preferred front-end workflow and will adjust the package.json file accordingly.

If you take this route, make sure that your assets are placed so that the paths in uswds.libraries.yml (or uswds.info for D7) will be valid, or override those paths in your subtheme as needed.


After installation, see the theme settings inside Drupal for various customizations, like configuring the header, footer, and menus.


Note: This code was originally forked from this repository, and was split off at 18F’s suggestion.

Source: https://drupal.org/project/project_theme/feed/all