Skip to content

Structure

CSS files for River are located in the Core directory and individual stream folders in the Streams directory. River's water metaphor references the cascade hierarchy of CSS from the Core thru custom Streams to the browser:

  1. Core Variables, are stored in core/css/_variables.css and core/css/_dark.css for dark-mode. Every variable available is listed here, and they're the fallback defaults for when a Stream doesn't define its own value.
  2. Custom Stream Variables, e.g. Minetta, Walbrook, Thames, Hackney Brook etc, are stored in /streams/[name]/_main.css and dark.css. They can overwrite any of the core variables or CSS.

Structurally each of the Streams are similar to CiviCRM sub-themes, inheriting anything in the Core directory that they don't overwrite. Cascade order is key to River's design and explained in more depth in the Cascades section.

Minetta and the Core variables are largely the same visually

The Core variables cannot be loaded directly, but they are largely the same as the Stream Minetta, which was based on the old default CiviCRM theme Greenwich. Minetta and Core differ in light mode by only three variables and one line of CSS, but diverge more in dark mode.

Core CSS

CSS files are located:

  • In the core/css directory are theme files marked with an underscore:
  • core/css/_base.css – resets, basic type, colours, links, positioning.
  • core/css/_bootstrap.css – a Bootstrap subset.
  • core/css/_cms.css – resets and fixes specific to different CMSs. If there's an issue specific to Drupal, or a specific admin theme in Drupal, then a fix for it should be added here, targetted to that CMS / admin theme.
  • core/css/_dark.css - every default dark mode CSS variable.
  • core/css/_core.css - links to the UI components in the components directory (below).
  • core/css/_fixes.css - CSS that’s necessary for now but will hopefully one day go.
  • core/css/_fonts.css - @font-face declarations used for different Streams.
  • core/css/_variables.css - every default CSS variable.
  • core/css/civicrm.css - an empty functional file used by the extension.
  • core/css/components directory contains reusable UI elements, such as _accordions and _tables.css, all referenced by core/css/_core.css.
  • other files here without underscore (admin.css, api4-explorer.css, contactSummary.css etc) override CiviCRM's core CSS directory with files of the same name that are called by templates to only load in certain parts of Civi. E.g. dashboard.css loads on the CiviCRM main dashboard, and no-where else.
  • several directories contain contextual css files that are only loaded when called in certain parts of CiviCRM. core/ang is for status page and in place-edit, core/civi_mail-ang for CiviMail, core/org.civicrm.afform-ang for Afform output, core/org.civicrm.afform_admin-ang for Form Builder and core/org.civicrm.search_kit-css for SearchKit replace css files in core Civi extensions.

Streams

Each stream in the extension has a subdirectory under /streams/ which contains CSS files for the stream:

  • a _main.cssfile. These will overrule any variables in the core list above.
  • a _dark.css if darkmode is supported.
  • A stream could also include images, fonts and other CSS files, which can be loaded from the _main.css file as an import.

Each stream also has a Managed Record file which is used to "install" the stream. These are found in the managed directory.

Fonts

Fonts are located in the /fonts/ directory outside of the core and streams directories. River includes two WOFF2 web font families:

  • Inter: Regular, Italic and 600/Bold.
  • Lato: Regular, Italic, 700/Bold and 700/Bold Italic.

Walbrook uses Inter, and Thames uses Lato: both load their fonts via @font-face in the core/css/_fonts.css file, any stream can call these fonts.