How to contribute to Olivero

Last updated on

28 April 2022

Getting Involved

Read this document (congrats, you’re already here!)
Look through the Olivero theme component issues queue to see if any issues are not yet picked up. If you commit to an issue, comment on it, and let us know when you expect to post the work.
Weekly meetings will be held every other Monday at 10 am ET (currently 2 pm UTC — but this will change when daylight savings goes away in the US)
1. This meeting:
  • happens every other Monday at 3 pm GMT (10 am ET).
  • is chat only via the #olivero slack channel (no audio or video).
  • happens in threads so keep an eye on those notifications.
  • there are about 5-10 minutes between topics for people who are multitasking to follow along.
  • the agenda is public and anyone can add to it. The direct link to the agenda will be posted on the #olivero slack channel.
  • The transcript of this meeting will be exported and posted on the agenda issue. For anonymous comments, start with a :bust_in_silhouette: emoji. To take a comment or thread off the record, start with a :no_entry_sign: emoji.

Proof of concept is static HTML hosted on GitHub.
We will be documenting issues (accessibility, and functionality) on Drupal.org.
- If you intend to work on an issue, comment on it to prevent duplicate work.
- When the PR is ready and submitted, re-comment on Drupal.org with a link to the PR. Set the issue to “Needs Review”
PRs can be submitted on GitHub
- The PR must not break existing functionality
- Not 100% concerned about coding standards… but we expect the best effort.
- Test the functionality in supported browsers (including IE11).
- Test the functionality at all appropriate screen sizes.
Once we get the following completed, we will move to Drupal theming. 👈 We are here!
- Accessibility pass from Drupal accessibility maintainers.
- Working cross-browser under all of Drupal’s supported browsers.
- Properly responsive at all screen sizes.

The theme will be developed as a Drupal 8 contrib theme at https://www.drupal.org/project/olivero

When possible, we will follow the Claro project’s lead in theme architecture including
- Directory structure
- CSS architecture
Use of PostCSS
- Claro uses the following packages, which we will utilize:
  - autoprefixer
  - postcss
  - postcss-calc
  - postcss-custom-properties
  - postcss-header
  - postcss-import
- We hope to use the additional packages:
  - postcss-nested
  - postcss-custom-media
We will use modern technology that will either support IE11 or gracefully degrade functionality.
- CSS Grid is being used and has syntax back-ported to support IE11 through autoprefixer. To do this, we utilize a basic grid, and we cannot use negative grid line numbers (as IE’s older grid syntax doesn’t support this.
- We use Intersection Observer to detect when the site header should hide behind a navigation menu. IE does not support this, but we ensure that the site continues to work properly — but without this added functionality. In this case, the navigation will continue to appear in the same place and scroll out of view as the end-user scrolls down.
JavaScript
- All JS will be written using vanilla JS (no jQuery or other frameworks).
- Modern (ES6 and later) JavaScript will be used (see https://www.drupal.org/node/2815083). JS will be compiled by Babel so it can be understood by IE11.
- Follow Drupal JS coding standards.
- Usage of Drupal Behaviors
  - TBD — should we mandate the usage of behaviors if the component will never change outside of page-load?

A setup guide that walks you through the different scripts you'll need to run in order to compile the CSS and JS files for the Olivero theme.

A shared paper document that lists our various tools used by folks to automate and test code.

Page status: No known problems

You can: