CivicTheme is a component-based atomic design system and Drupal theme.

Resources:

Official site
Design system: Figma, Accessibility Compliance Assessment
UI Kit: GitHub, Storybook
Drupal theme: Monorepo, Admin module
Documentation: Content authoring, Development, Repository
Example sites: Default, Government, Higher Education, Corporate
Case studies

Where to get support

Where to submit issues and PRs

Development of the entire CivicTheme ecosystem is managed in the GitHub civictheme organization.
This allows to develop the Drupal theme and modules at the same place and use advanced CI configuration for testing.
The code from the monorepo is automatically published to Drupal.org with all commit and author information preserved.

For Drupal theme: submit issues to the Drupal theme issue queue and submit PRs to the GitHub Drupal monorepo

For UI Kit: submit issues to the UI Kit GitHub repository and submit PRs to the UI Kit GitHub repository

If you do not know which part the issues relates to - submit an issue to the Drupal theme issue queue and it will be moved to the appropriate location by the CivicTheme maintainers.

Installation

IMPORTANT! Drupal core has a known issue and a patch would need to be installed on your site before installing CivicTheme to allow the CivicTheme installation complete successfully. Note, this patch is not required for production.

Get required core patch

Or, add this patch to your `composer.json`

 "patches": {
   "drupal/core": {
       "Layout builder cannot recover on missing layout - https://www.drupal.org/project/drupal/issues/3204271#comment-15151776": "https://www.drupal.org/files/issues/2023-07-16/3204271-20-missing-layout-exception.patch"
    }
 }

Please do not submit issues if your installation finished with WSOD - this means that you are using CivicTheme that was not fully installed. Install a patch mentioned above and restart your installation from scratch.

Make sure the core issue patch above has been applied *before* installing CivicTheme and then clear the cache
Install theme code: composer require drupal/civictheme
Enable required modules (Drupal allows themes to declare module dependencies, but does not yet allow those modules to be enabled automatically):
drush ev "require_once dirname(\Drupal::getContainer()->get('theme_handler')->rebuildThemeData()['civictheme']->getPathname()) . '/theme-settings.provision.inc'; civictheme_enable_modules();"
Clear caches in UI or with Drush: drush cr
Enable the theme in UI or with Drush: drush then civictheme

Sub-theme

Create a sub-theme using provided script (do not skip this step if you want to receive the full benefits of the tooling provided with a sub-theme starter kit) :
php civictheme_create_subtheme.php <theme_machine_name> "Human theme name" "Human theme description" /path/to/theme_machine_name
Enable the theme in UI or with Drush: drush theme:enable theme_machine_name
Compile front-end assets (NodeJS version >=18.14 is required):
```
nvm use
npm ci
npm run build
```

Credit

As of February 2023, Salsa Digital has contributed over 6000 hours to CivicTheme!

The following people have contributed to CivicTheme as of February 2023:

RTBC issues for CivicTheme Design System

Filters