Olivero is a new theme that aims to be the new default front-end theme for Drupal 9. The theme's inception took place in a hotel lobby during DrupalCon Seattle and has now grown into a full Drupal core initiative (read about its inception here).
From Design to Proof of Concept
The Drupal 9 theme initiative started with stakeholder meetings and the design process (learn more here). Once the designs were close to being final, I started working on translating the designs into markup, styles, and JavaScript within a static proof of concept.
While working on the proof of concept, Putra Bonaccorsi was laying the theming groundwork by creating boilerplate code for the theme and transpiling of the CSS and JavaScript.
Proof of concept
The process of creating a proof of concept has been invaluable. The overarching goals are to validate major DOM architectural decisions and get sign-off from the Drupal core accessibility team on major decisions before moving into templating. Additionally, the proof of concept has validated and influenced design decisions across multiple devices and viewports.
You can view the proof of concept at https://olivero-poc.netlify.com, but note that progress is rapid, and changing by the hour!
Bumps in the Road
When the Olivero team was creating the initial schedule, the plan was to get the theme into Drupal 9.1, because the first version of Drupal 9 (9.0) was going to be the same as the last version of Drupal 8 — but with deprecated code removed.
However, during the Driesnote at DrupalCon Amsterdam, Drupal project lead, Dries Buytaert, stated that he wanted to get the theme into the initial release of Drupal 9.0. This pushed up the timeline significantly!
Balancing between onboarding and mentoring new developers versus rapidly closing issues has proven to be delicate. Many contributors want to help with the initiative; however, because they are volunteers (as are the core team), they are not on a timetable for closing issues.
Because of the tight timeline, I’ve been leaning toward the latter (rapidly fixing issues).
Florida DrupalCamp Sprint
We decided that the initiative needs a shot in the arm, so we put on a mini code-sprint within the annual contribution sprint at Florida DrupalCamp in last month. Because Putra couldn’t make it down for the actual conference, Florida DrupalCamp sponsored her to fly in for the sprint.
During the 2 day sprint, we accomplished the following
Lullabot Hawkeye Tenderwolf sprinting at Florida DrupalCamp
- Cleaned up the PostCSS build process
- Integrated a default database export with indicative content into the Tugboat build process.
- Copied some of the latest scripts/JS and CSS from the PoC repo into the Drupal theme.
- We've exported block configs for the theme initial install for the following Core's blocks:
- Primary Menu
- User Account Menu
- Powered By Drupal
- Content
- The Primary Menu block is themed and configured to expose the drop-down menu by default.
- The Secondary menu/User Account block is themed and configured.
- The "Powered by" block is themed and configured.
- The "Get Started" page has been created and will need to be revisited.
- Latest preview is viewable on Tugboat: https://8-x-1-x-dev-2t4d1epwkj8tgwxduizmixhzevqwzi8w.tugboat.qa
If you were to install the theme initially, you'll be able to see the different regions and blocked configured, however, please note that there is still more theme development that needs to be done for the beta release.
Current Status
The work of the theme includes the proof of concept and the actual theming.
Proof of Concept
Screenshot from Figma comp showing the always-on mobile navigation in an opened state.
We’re working on styling that will enable site owners to choose an “always-on” mobile theme in the event that the primary navigation has more items than the space can manage.
We’re also knocking out various accessibility issues—especially focus states in Windows high contrast mode, which are trickier than expected.
Drupal Theme
The Drupal theme looks close to the designs! Work continues on the search integration into the header, in addition to standard theming.
What’s Next?
We hope to pull in the final proof of concept markup, styling, and JavaScript into the theme toward the end of next week (around March 13th, 2020). At that point, work on the proof of concept will cease, and new styling fixes will go into the theme.
There’s still so much to do! We need:
Accessibility is one of the primary concerns with Olivero. Above is the current state of the theme within Internet Explorer 11 when viewed in a Windows high contrast theme.
- Support for Drupal core features such as:
- Book module
- Forum module
- Embedded media
- Various Views rows styles (grid, etc.)
- More accessibility
- Internationalization
- Tests
- Coding standards
- And more!
Standing on the Shoulders of Giants
I also want to note that the rapid pace of development would not have been possible without the contributions of Claro (Drupal 9’s new administrative theme), and Umami (the theme for the out of the box initiative).
These themes blazed the way by including support for technologies in core such as web fonts, PostCSS, and the overall core theme architecture.
Completion
Olivero was initially slated for inclusion in core in Drupal 9.1. That’s still the most likely scenario. That said, there’s a possibility that Drupal may shift the 9.0 beta deadline to the end of April. If that’s the case, there is a possibility to submit a core patch beforehand.
To commit by this time, we need to submit the patch a minimum of a few weeks ahead of time to give core committers time to review (and even that might not be enough time).
We’re currently working on [META] Add new default Olivero frontend theme to Drupal 9 core to define the minimum beta requirements to submit to core. Expect this issue to be more fleshed out within the coming days.
After Completion
After the theme is in core, we still would love to add additional features such as support for accessible color schemes, dark mode, etc. However, the first step is finishing up the minimal viable product for inclusion in core.
Join Us!
The Olivero team meets on Drupal Slack every Monday at 3 pm UTC (10 am ET) in the #d9-theme channel on drupal.slack.com. We post the agendas in the Olivero issue queue beforehand.
We need people to pick up issues and run with them, but keep in mind that for the next week or two, the primary styling is still in progress within the proof of concept on Github.
Upcoming Events and Sprinting
I will be attending Drupal Dev Days in Ghent Belgium, April 6-10th, 2020, and will be sprinting the entire time. We hope to work on getting the code ready for Drupal core inclusion by that time.
Putra and I (along with the majority of the Lullabot team) will be attending DrupalCon Minneapolis in May 2020. We will be heavily sprinting on Olivero during this time (especially on Friday).