EHS Subtheme

Version: 1.x-dev

Changelog: CHANGELOG.md

Description

ehs_subtheme is the Stanford sub-theme for Environmental Health & Safety (EHS). It works with the Stanford Basic base theme on Stanford Sites (Drupal 10).

Machine name: ehs_subtheme · CSS class prefix: ehs-

Summary of customizations:

1. Homepage search bar on the front page (templates/form--search.html.twig, included from templates/page--front.html.twig; styles in src/scss/components/search/_search.scss). Originally developed by RH and designed by JT in 2025 for VPSA OSE, from which this theme was forked.

History / provenance: This repository was forked from vpsa_ose_subtheme and rebranded for EHS. The OSE-specific related-resource links (CardinalEngage, student-org work orders, VSO re-registration) and the contact-us block were removed from the search bar — only the search field remains. The SCSS for that link list is kept in place under ehs- prefixed classes so an EHS link list can be added back without restyling.

Documentation

See subtheming guides and best practices here: https://devguide.sites.stanford.edu/front-end/drupal/sub-themes

Installation

1. Review the documentation link above for best practices, particularly the Do's and Don't's sections.
2. Place this repository in the site's themes directory, then enable it and set it as the default active theme.
3. Add any EHS brand colors you need (in addition to the decanter colors that are already available) to src/scss/utilities/variables/_colors.scss. See all the colors already available through decanter: https://decanter.stanford.edu/page/brand-design-elements-color/
4. If desired, add font settings if you need to override and use fonts other than decanter fonts ( https://decanter.stanford.edu/page/brand-design-elements-typography/ ), by defining a font library in the ehs_subtheme.libraries.yml file.
5. If desired, add button mixins in src/scss/utilities/mixins/_buttons.scss with your button styles and then reference them and use them in src/scss/theme/_button.scss.
6. If desired, add cta and link mixins in src/scss/utilities/mixins/_cta.scss with your button styles and then reference them and use them in src/scss/theme/_cta.scss.
7. If you want to skin or theme a component, like a paragraph, create a _mycomponent.scss file in src/scss/components folder. Consider using a subfolder like 'cards' or 'banners' if applicable. Prefix any new classes with ehs-.

Configuration

Nothing special needed. Install, enable, and set as the default active theme.

Developer

If you wish to develop on this theme you will most likely need to compile some new css. Please use the sass structure provided and compile with the sass compiler packaged in this theme. To install:

yarn install

After you've made a change you want to see processed, you can run:

yarn build

This will process scss, js, and asset files, preparing them from the src directory to the dist directory.

yarn watch

This will watch the scss files and compile them upon saving.

GitPod

1. Add your ssh key to GitPod
   1. It is recommended to have a password-less ssh key for simplicity.
      1. ssh-keygen -b 4096, press enter when asked for the password
      2. Add this ssh public key to the necessary services: Acquia, Github, etc.
   2. Get the base64 string of your ssh key files
      1. cat id_rsa | base64 for the private key
      2. cat id_rsa.pub | base64 for the public key.
   3. In GitPod, add the variable named SSH_PRIVATE_KEY with the private key
   4. In GitPod, add the variable named SSH_PUBLIC_KEY with the public key
   5. In Gitpod, add the variable named GITCONFIG with the base64 of your git config: cat ~/.gitconfig | base64
2. Recommended, but not required:
   1. install the GitPod browser plugin
   2. Configure your browser settings for an easier experience: https://www.gitpod.io/docs/configure/browser-settings
3. Open a gitpod workspace with these instructions

Contribution / Collaboration

You are welcome to contribute functionality, bug fixes, or documentation to this theme. If you would like to suggest a fix or new functionality you may add a new issue to the GitHub issue queue or you may fork this repository and submit a pull request. For more help please see GitHub's article on fork, branch, and pull requests