A website demonstrating design patterns for U.S. Web Design System (USWDS). Each pattern is a separate site page with its own isolated HTML, SASS stylesheet, and TS typescript files, to make their implementation easy to see and reuse.
While this site is built with the Angular framework, the source code is abstracted in a way that it is easily transposed to any other web development framework. Links to the GitHub code folder for each design pattern are at the bottom of each pattern page.
All design patterns are listed on the uswds.facioquo.com home page.
Don't see a good design pattern? Submit a request or contribute some code.
# install packages and
# start the local site
npm install
npm startSince our design pattern pages are based on default USWDS styles, we use its base stylesheets: SASS/uswds-styles.scss is an out of the box USWDS baseline. It's also the primary SASS entry point. SASS/_site.scss and the base .site family of styles are for our regular dark themed site pages and components.
Individual design patterns have their own stylesheets in their own folder. They build on top of the base USWDS styles.