rbg/greenwich

The main Drupal base theme for the Greenwich design system integration.

2.1.0 2025-10-15 09:55 UTC

Requires

• localgovdrupal/localgov: ^3.1

GPL-2.0-or-later

README

This is the greenwich design system theme, intended to be shared between Greenwich Drupal projects, including main website, transactions and the Greenwich Community Directory.

It is currently used by:

• The transactions platform (live): https://gitlab.com/rbgreenwich/dev/transactions-platform/-/blob/develop/composer.json?ref_type=heads#L48
• The main website (dev branch): https://gitlab.com/rbgreenwich/dev/main-website/lgd-main-website/-/blob/dev/composer.json?ref_type=heads#L99

Composer package

This is a standalone repo for the theme, to allow publishing of the theme as a composer package to Packagist. See https://packagist.org/packages/rbg/greenwich

Packagist is configured to automatically publish branches and release tags. This allows us to define the tag, branch or commit we want on our composer project.

For example:

composer require rbg/greenwich:1.3.0
composer require rbg/greenwich:^1.4@alpha

Storybook

The theme uses Storybook and is built to work with the Drupal storybook module.

For more information, see:

• https://storybook.js.org/
• https://www.drupal.org/project/storybook

Git branching model

We're aiming to align on a Git Flow branching methodology.

Most development should be done on the develop branch, with feature branches branching off the develop branch and merging back into the develop branch. develop branch is then merged to main to tag releases, possibly via a release branch if needed for testing.

For more background on branching methodology, please see our internal documentation:

https://gitlab.com/rbgreenwich/dev/documentation/-/wikis/Website/branching-model

CSS Coding Standards

To help us follow Drupal's CSS coding standards (without having to think about it), there is a handy npm script to automatically scan and fix any CSS coding standards violations.

Simply run npm install to get the necessary packages, then run one of the following npm commands to scan the files and fix any issues.

• "start": "npm run lint:css && npm run lint:js",
• "start:fix": "npm run lint:css:fix && npm run lint:js:fix",
• "lint:css": "stylelint \"**/*.css\"",
• "lint:css:fix": "stylelint \"**/*.css\" --fix",
• "lint:js": "eslint \"**/*.js\"",
• "lint:js:fix": "eslint \"**/*.js\" --fix",

start

This command will run the linter on your CSS and JS files and give you are report in your terminal of any issues. found.

start:fix

This command will do the same as start but will also attempt to fix any issues it finds, such as using correct quote marks, fixing indentation, etc.

It's advisable to run start after you run this command to see if there was anything the automated linter couldn't fix.

lint:css

This is the same as start except it only checks the CSS files.

lint:css:fix

This is the same as start:fix except it only affects the CSS files.

lint:js

This is the same as start except it only checks the JS files.

lint:js:fix

This is the same as start:fix except it only affects the JS files.

Troubleshooting

If you get an error, such as node not being able to find prettier, you might need to install the packages from Drupal core's package.json. All of our linting extends Drupal core's linting to make sure we are always following Drupal's exact coding standards.

To do so, simply cd web/core and then npm install.

If you still cannot run the linter, make sure you are using the correct version of Node. We have a .nvmrc file to help you. Run nvm use from your theme directory to install the correct version.

Creating a new component

Most components are stored in components/components/; with content types, pages and displays stored in components/content/.

Creating a new component is a case of creating a new directory, .css, .twig and .component.yml file, all using the same name. For example:

# components/components/
example-component/
example-component/example-component.css
example-component/example-component.twig
example-component/example-component.component.yml

This will allow you to include that component in a Drupal template (see the templates directory) like this:

{% include "greenwich:example-component" with {
    link_text: content.field_text, # Example of passing a Drupal field value through to the component .twig file
  }
%}

Altering existing styling

If we have styling that is not part of a particular component as above, it's either being inherited from the localgov_base theme, another module, or is in our css directory. We can override styling from theme/module libraries using CSS in this directory, so long as it's setup in the greenwich.info.yml file.