rbg / greenwich
The main Drupal base theme for the Greenwich design system integration.
Installs: 578
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Forks: 0
Type:drupal-theme
pkg:composer/rbg/greenwich
Requires
- localgovdrupal/localgov: ^3.1
- dev-develop
- 2.1.0
- 2.0.0
- 1.4.1-alpha3
- 1.4.1-alpha2
- 1.4.0-alpha1
- 1.3.0
- 1.2.1
- 1.2.0
- 1.1.1
- 1.1.0
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- dev-fix/250-remove-extra-padding
- dev-fix/download-component
- dev-feature/215-transactions-update-h1-font-size
- dev-feature/217-transactions-text-field-displaying-incorrectly-when-description-is-above-the-field
- dev-feature/218-transactions-widen-spacing-on-error-message-for-type-of-waste
- dev-feature/220-transactions-reduce-vertical-spacing-between-elements
- dev-develop-tr
- dev-main
- dev-fix/156-footer-spacing-mobile-view
- dev-revert-8f379622
- dev-fix/137-chevron-on-events-pages
- dev-fix/182-header-services-menu-review-focus-state
- dev-feature/219-transactions-remove-bold-from-radio-button-checklist-error-messages
- dev-207-fix-spacing-sublanding-page
- dev-fix/162-update-guide-page-content-list-chevron-icon-sizing
- dev-fix/193-feedback-form
- dev-fix/202-step-by-step-screen-reader-not-reading-steps-numbers
- dev-fix/133-download-screen-reader-fix
- dev-fix/214-remove-one-bottom-line-in-mobile-view
- dev-fix/155-download-font
- dev-feat/user-council-tax-page
- dev-feature/93-create-new-content-type-curated-topic-page
- dev-feature/128-create-two-new-newsrooms
- dev-fix/103-spacing-between-headers
- dev-feature/32-call-to-action
- dev-bug/12-event-listings-page
- dev-feature/23-step-by-step-page
- dev-feature/98-multi-step-list-item
- dev-fix/video-caption-font-size
- dev-fix/sidebar-styling
- dev-feature/100-header
- dev-fix/125-error-pages
- dev-feature/98-multi-step-list
- dev-feature/99-footer
- dev-feature/118-govuk-pay-return-pages
- dev-feature/29-downloads-3
- dev-feature/120-redo-newsroom-listing
- dev-feature/11-homepage
- dev-fix/16-site-scaffolding-cookie-banner
- dev-fix/91-101-102-111-text-fixes
- dev-feature/106-links-focus-state-needs-to-be-updated-to-meet-contrast-requirements
- dev-feature/87-card-group
- dev-bug/pager
- dev-feature/13-individual-event-page
- dev-feature/52-pagination
- dev-fix/set-default-homepage-banner-text
- dev-feature/62-hero-banner-homepage
- dev-feature/10-service-sub-landing-page
- dev-feature/77-cpz-lookup-not-working-in-main-website
- dev-feature/61-alert-banner
- dev-feature/63-action-links-homepage
- dev-feature/51-cards
- dev-feature/29-downloads
- dev-feature/36-cpz-lookup
- dev-jtrbg-main-patch-65463
- dev-feature/29-downloads-2
- dev-feature/33-contact
- dev-feature/35-iframe
- dev-feature/30-videos
- dev-feature/31-image
- dev-feature/17-information-page-2
- dev-feature/17-information-page
- dev-feature/37-adds-more-inline-documentation-to-each-ds-story-template
- dev-feature/26-make-breadcrumbs-24px-in-height
- dev-8-demo-update-the-accent-colour-to-purple
- dev-7-demo-change-accent-colour-to-purple
- dev-24-tanc-demo
- dev-feature/test-branch
This package is auto-updated.
Last update: 2025-10-17 12:05:50 UTC
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:
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.