Documentation
Implementations
Users of the U.S. Web Design System have created implementations for popular content management systems, web frameworks, and package managers that may help get you started more quickly and easily. Though some implementations may not include all of the Design System, they should give your team a strong foundation to work from.
If you have a new implementation to add to this list, please open an issue or send us an email with the following information:
- The implementation’s target language and/or framework
- The author’s name (or alias) and contact URL or email address
- The most recent version of the Design System that the project targets
- Any useful caveats or other notes
Heads up
Some of the implementations listed here are not affiliated or endorsed, and have not been tested, by the Design System team. Use them at your own discretion.
| Name | Distribution | Author or maintainer | Notes |
|---|---|---|---|
| django-designstandards | Django | Paul Tagliamonte (USDS) | This package provides access to the Design System in Django applications. |
| django-uswds-forms | Django | 18F | This package provides Django Forms integration with the Design System. |
| USWDS Drupal theme | Drupal | Brock Fanning | 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. |
| uswds-jekyll | Jekyll | 18F | A Jekyll theme for the Design System. |
| uswds-simple-sass | npm and gulp | 18F | This is a simple Node JS-based “starter project” that uses gulp and gulp-sass to power a development workflow for a one-page site that leverages the Design System’ SASS. Note that this is a starter project and not a reusable package. |
| 18f-contrib-web-design-standards | npm and node-sass | Brian DeRocher | A node-sass based wrapper of the U.S. Web Design System library. |
| NuGet web-design-standards | NuGet | Abdul Ahad Monty | The NuGet Package has been created to access the library easily from Visual Studio NuGet Package Manager. |
| uswds-rails | Rails gem | 18F | This Ruby on Rails gem is not currently maintained. |
| us_web_design_standards gem | Ruby gem | 18F | This gem has been deprecated in favor of the Rails gem. Please let us know if you’d like to adopt it. |
| USWDS WebJar | WebJars | VJ Kapur | For Java- and JVM-based build tools, such as Maven and Gradle. |
| Broadcasting Board of Governors WordPress theme | WordPress | Broadcasting Board of Governors (BBG) | This is not a reusable WordPress theme, but an implementation of the Design System for bbg.gov. |
| Benjamin | WordPress | Kyle Jennings | A WordPress theme built with Automattic’s _s, the U.S. Web Design System, and the needs of the people. For additional components and shortcodes, check out the Franklin plugin. |
| The Standards | WordPress | Kyle Laverty | The Standards is a WordPress theme that is based on the U.S. Web Design System. |
| NASAPress | WordPress | Brandon Ruffridge | A WordPress theme designed for NASA, built on the Sage starter theme, styled using the U.S. Web Design System. While it currently uses the NASA fork of the U.S. Web Design System, this could be swapped out by changing the dependency in package.json from nasawds to uswds. |