PHPackages                             emanaton/govcms-uswds-drupal - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. emanaton/govcms-uswds-drupal

ActiveProject[Framework](/categories/framework)

emanaton/govcms-uswds-drupal
============================

Project template for Drupal 9 projects with a relocated document root

0293↑25%CSS

Since Aug 11Pushed 10mo agoCompare

[ Source](https://github.com/emanaton/govcms-uswds-drupal)[ Packagist](https://packagist.org/packages/emanaton/govcms-uswds-drupal)[ RSS](/packages/emanaton-govcms-uswds-drupal/feed)WikiDiscussions main Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

gov.cms USWDS Template
======================

[](#govcms-uswds-template)

Installation
------------

[](#installation)

### Prerequisites

[](#prerequisites)

- PHP 8.1 or higher
- Composer
- Node.js version 20 (managed with nvm)
- npm package manager
- MySQL/MariaDB or PostgreSQL database
- Web server (Apache/Nginx)

### Setup Steps

[](#setup-steps)

1. **Clone the repository**

    ```
    git clone [repository-url]
    cd govcmstemplate
    ```
2. **Install PHP dependencies**

    ```
    composer install
    ```
3. **Install and build theme dependencies**

    ```
    cd web/themes/custom/uswds_extend_custom
    nvm use 20
    rm -rf node_modules
    npm install
    gulp build
    ```
4. **Database setup**

- Create a new database for your site
- Copy `web/sites/default/default.local.settings.php` to `web/sites/default/local.settings.php`
- Configure database connection in `web/sites/default/local.settings.php`

5. **Install Drupal with configuration sync**

    The site has a predefined UUID in the existing configuration, so we need to install a base configuration first, then sync the site UUID, and finally import the full configuration.

    ```
    drush site:install --existing-config -y --site-name="[YOUR_SITE_NAME]" --account-name=admin --account-pass=[YOUR_ADMIN_PASSWORD]
    ```

    **UUID Synchronization Process:**Use the process outline here to synchronize the UUID, or use the `sync_site_uuid` defined below.

- Fetch the current site UUID:

    ```
    drush cget system.site uuid --format=string
    ```
- Back up existing system site config file:

    ```
    cp config/sync/system.site.yml config/sync/system.site.yml.backup
    ```
- Replace UUID in system site config file (replace `[CURRENT_UUID]` with the UUID from the first command):

    ```
    sed -i.tmp "s/^uuid: .*/uuid: [CURRENT_UUID]/" "config/sync/system.site.yml"
    rm "config/sync/system.site.yml.tmp"
    ```

**Import the configuration:**

The config\_split module requires multiple import runs to fully process configuration splits:

```
drush cr
drush cim -y
drush cr
drush cim -y
drush cr
drush cim -y
```

6. **Final theme build**

    ```
    cd web/themes/custom/uswds_extend_custom
    npm run build
    ```
7. **Set file permissions**

    ```
    chmod -R 755 web/sites/default/files
    ```

### Optional: Enable Sample Content

[](#optional-enable-sample-content)

The `govcsm_sample_content` module provides demonstration content showcasing the various paragraphs, blocks, menus, and other features available in this USWDS template. This is useful for:

- Exploring the available content types and paragraph components
- Understanding how different USWDS elements are implemented
- Having example content to reference when building your own pages
- Testing theme functionality with realistic data

**To enable sample content:**

```
drush en -y govcsm_sample_content
```

This will install:

- Sample pages demonstrating various paragraph types and layouts
- Taxonomy terms and vocabularies used by the content
- Example menus and navigation structures
- Demonstration data including tables and interactive elements
- Content showcasing USWDS components like heroes, cards, accordions, and more

**Note:** Sample content is intended for development and demonstration purposes. You may want to disable or remove this module before deploying to production.

### Development Environment

[](#development-environment)

For local development:

```
# Start development server
../vendor/bin/drush runserver

# Watch for theme changes
cd web/themes/custom/uswds_extend_custom
npm run watch
```

Theme Architecture
------------------

[](#theme-architecture)

This project uses a layered theme architecture built on the U.S. Web Design System (USWDS):

### Theme Hierarchy

[](#theme-hierarchy)

1. **USWDS Base Theme** (`web/themes/contrib/uswds/`)

- Community contributed Drupal theme that serves as the foundation of our theme stack
- Provides core USWDS functionality and components

2. **USWDS Extend Theme** (`web/themes/govcms/uswds_extend/`)

- Inherits from the base `uswds` theme
- Provides enhanced functionality and components based on the [U.S. Web Design System](https://designsystem.digital.gov/)
- Acts as an intermediate layer between the base theme and custom implementations

3. **USWDS Extend Custom Theme** (`web/themes/custom/uswds_extend_custom/`)

- Inherits from `uswds_extend`
- Site-specific customization layer
- This is the theme that should be extended and customized for individual sites
- Contains project-specific styles, templates, and functionality

### Theme Development

[](#theme-development)

When customizing the theme for your site:

- Make modifications in `web/themes/custom/uswds_extend_custom/`
- Avoid directly modifying the base `uswds` or `uswds_extend` themes
- Follow the [USWDS Design System guidelines](https://designsystem.digital.gov/) for consistent implementation

### Advanced Setup

[](#advanced-setup)

#### UUID Synchronization Helper Function

[](#uuid-synchronization-helper-function)

For easier UUID management, you can use this bash function (add to your `.bashrc` or `.zshrc`):

```
sync_site_uuid () {
  local config_file="config/sync/system.site.yml"
  if [ ! -f "$config_file" ]
  then
          echo "Error: Config file not found: $config_file"
          return 1
  fi
  echo "Getting current site UUID..."
  local current_uuid=$(drush cget system.site uuid --format=string)
  if [ $? -ne 0 ] || [ -z "$current_uuid" ]
  then
          echo "Error: Failed to get site UUID from drush"
          return 1
  fi
  echo "Current site UUID: $current_uuid"
  local config_uuid=$(grep "^uuid:" "$config_file" | sed 's/uuid: //')
  echo "Config file UUID: $config_uuid"
  if [ "$current_uuid" = "$config_uuid" ]
  then
          echo "UUIDs already match. No changes needed."
          return 0
  fi
  cp "$config_file" "${config_file}.backup"
  echo "Created backup: ${config_file}.backup"
  sed -i.tmp "s/^uuid: .*/uuid: $current_uuid/" "$config_file"
  rm "${config_file}.tmp"
  echo "Updated UUID in $config_file"
  echo "Old UUID: $config_uuid"
  echo "New UUID: $current_uuid"
  local new_config_uuid=$(grep "^uuid:" "$config_file" | sed 's/uuid: //')
  if [ "$new_config_uuid" = "$current_uuid" ]
  then
          echo "✓ UUID successfully updated in config file"
  else
          echo "✗ Error: UUID update failed"
          return 1
  fi
}
```

#### Visual Regression Testing

[](#visual-regression-testing)

- Install BackstopJS globally: `npm install -g backstopjs`
- Navigate to the `web/` directory
- Run `backstop reference` to capture screenshots from production site
- Run `backstop test` to capture screenshots from local site
- View the report at `https://[YOUR_LOCAL_DOMAIN]/backstop_data/html_report/`

Theme Architecture
------------------

[](#theme-architecture-1)

This project uses a layered theme architecture built on the U.S. Web Design System (USWDS):

### Theme Hierarchy

[](#theme-hierarchy-1)

1. **USWDS Base Theme** (`web/themes/contrib/uswds/`)

- Community contributed Drupal theme that serves as the foundation of our theme stack
- Provides core USWDS functionality and components

2. **USWDS Extend Theme** (`web/themes/govcms/uswds_extend/`)

- Inherits from the base `uswds` theme
- Provides enhanced functionality and components based on the [U.S. Web Design System](https://designsystem.digital.gov/)
- Acts as an intermediate layer between the base theme and custom implementations

3. **USWDS Extend Custom Theme** (`web/themes/custom/uswds_extend_custom/`)

- Inherits from `uswds_extend`
- Site-specific customization layer
- This is the theme that should be extended and customized for individual sites
- Contains project-specific styles, templates, and functionality

### Theme Development

[](#theme-development-1)

When customizing the theme for your site:

- Make modifications in `web/themes/custom/uswds_extend_custom/`
- Avoid directly modifying the base `uswds` or `uswds_extend` themes
- Follow the [USWDS Design System guidelines](https://designsystem.digital.gov/) for consistent implementation

###  Health Score

19

—

LowBetter than 9% of packages

Maintenance38

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity14

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/1851fb1c47e09b8a5f1fa9bd5d5680b301c3432adde06d2b9180862eeab6a465?d=identicon)[emanaton](/maintainers/emanaton)

---

Top Contributors

[![emanaton](https://avatars.githubusercontent.com/u/3100421?v=4)](https://github.com/emanaton "emanaton (81 commits)")

### Embed Badge

![Health badge](/badges/emanaton-govcms-uswds-drupal/health.svg)

```
[![Health](https://phpackages.com/badges/emanaton-govcms-uswds-drupal/health.svg)](https://phpackages.com/packages/emanaton-govcms-uswds-drupal)
```

###  Alternatives

[laravel/dusk

Laravel Dusk provides simple end-to-end testing and browser automation.

1.9k39.6M297](/packages/laravel-dusk)[nineinchnick/edatatables

Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin

173.2k](/packages/nineinchnick-edatatables)[link-cloud/fast-hyperf

LinkCloud Fast Hyperf

241.2k1](/packages/link-cloud-fast-hyperf)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)