Comment on page
CivicTheme theme utilises the components that are defined within CivicTheme UI kit.
We access these components via component namespaces.
The idea of separating the CivicTheme UI kit and Drupal templates is to create a reusable set of components that can be used in multiple CMS systems.
After setting up a component and structuring the twig file (see Demo button example), you can include this new component in a Drupal template with an
includestatement. See the
civictheme/templatesdirectory for how CivicTheme components have been included.
For example, if you were wanting to utilise the new demo button in your theme as a submit button, you may override CivicTheme submit button template
civictheme/templates/input--submit.html.twig, changing the include in the template file to
If you need to provide custom variables to your component, you derive these variables through the preprocess hook system Drupal provides. Look at the files in
civictheme/includesdirectory for how the CivicTheme components are preprocesed in Drupal.
Because we are not using Drupalisms within our templates we equally should be aware that we have to be careful not to rely on Twig features that only exist within Drupal. Link URLs and text need to be provided as data to the component system, image URLs need to be constructed (remembering to get the required image style URL if implemented) and several other nuances we need to be aware of when integrating with the component library.
There is a drawback (or advantage as it aligns more closely with modern UX development workflows) to CivicTheme in that the architecture is based at the component level rather than then field level.
Outputting individual fields on the page will result in bare bones output as CivicTheme theme is relying upon the developer to provide these field values to components rather than utilising a field formatter.
Paragraphs are the primary mechanism for linking components up with Drupal, and we have implemented a significant number with CivicTheme. These paragraphs can be created via paragraph fields within new content types and then organised within layout builder to quickly create a new content type.