Hello Olivero: The New Front-End Face for Drupal CMS

For those who develop user interfaces in Drupal, we have exciting news. Drupal now ships with a modern default front-end theme, Olivero, which was first introduced as an experiment in Drupal 9.1 and has since become a permanent, stable feature and it remains the default front-end theme in Drupal 11. Our article will delve into the philosophy behind Olivero and how it enhances the appeal of Drupal.

After reading our post, those who have decided against migrating their websites to Drupal 11 may want to reconsider their plans.

Welcoming Olivero

The Olivero theme was first introduced in Drupal 9.1 as an experimental theme. It was developed to become Drupal's new default front-end theme and was eventually released as the default theme in Drupal 10, a role it continues to hold in Drupal 11. The development of the Olivero theme was community-driven, with contributions from designers and developers from around the world.

Drupal Switching Faces

After 11 years of using the good old Bartik theme, the front-end theme in Drupal core received an update known as Olivero, which was unveiled during DrupalCon Amsterdam 2019. Although the old Bartik theme was acknowledged, it was noted that it no longer adhered to contemporary web design trends nor supported Drupal's advancements, such as Layout Builder, embedded media, and secondary dropdown menus. As a result, graphical elements, gradients, and drop shadows added to the CMS since Drupal 7 in Bartik had become outdated. Bartik was deprecated in Drupal 9.5 and removed from Drupal 10 core entirely; it now lives on only as a contributed project.

The development of the new default front-end theme included defining three essential requirements, which were:

• Ensure the Drupal theme's design felt modern and timeless.
• Support the latest Drupal features.
• Comply with the design accessibility guidelines laid out in WCAG AA.

Why Olivero?

Let's now shift our focus to the advantages of the new theme, which is designed to build upon the strengths of its predecessor Bartik while addressing its weaknesses and aligning with the needs of modern Drupal developers. The developers of Olivero focused on key elements such as color selection, readability, content prioritization, and adherence to design accessibility principles, all with the aim of enhancing the user experience.

It is designed to be responsive, which means it can adapt to different screen sizes and devices. It also has a clean and modern design, making it easy to navigate and use. The Olivero theme is also highly customizable, allowing users to modify the layout, color scheme, and typography to suit their needs.

Accessibility Maximized

Design teams are increasingly being tasked with improving website accessibility, making it a top priority in the 21st century. In response to this, the new front-end theme, Olivero, has been specifically designed with accessibility in mind.

The creators of Olivero worked closely with accessibility experts and the Drupal Accessibility team to ensure that the theme meets the Web Content Accessibility Guidelines (WCAG) at the AA level.

The team has continuously tested the design for accessibility, making adjustments to every detail, including color contrast ratio, typography, buttons, forms, messages, ARIA attributes, and more, all with the goal of creating top-notch accessible websites.

A Timeless Theme for Modern Features

The old front-end theme no longer reflected Drupal's modern backend, so creating a theme that showcased Drupal's backend strengths was a goal of the new theme's creation.

The new front-end theme supports Drupal's commonly used functionality, including recent additions like Layout Builder and Media. It also displays right-to-left (RTL) languages such as Urdu, Arabic, Hebrew, etc., accurately, which is crucial for Drupal's multilingual capabilities.

Olivero is compatible with all modern browsers supported by Drupal core and uses modern front-end web technologies, such as CSS Grid and Intersection Observer. PostCSS is used to compile CSS, offering better browser support and more options for developers.

Powerful Design System

Typography: The main font size of 18px provides a stable and rhythmic design, with all other text-related UI elements adjusted accordingly. Lora is the primary font for text, while Metropolis is used for headings. Both fonts are freely distributed under the Open Fonts License and display well on mobile devices.

Image

Color Palette: The modern and vibrant color palette of Olivero lends the theme a fresh and contemporary vibe, while also increasing brand recognition for Drupal.

The ability to strike a balance between product identity and accessibility principles when choosing colors is impressive. The bright blue base color, complemented by neutral grays, creates a visually appealing design that is both accessible and harmonious. The team's thoughtful use of darker and lighter colors enhances the design's accessibility and supports its elements, respectively.

Forms and buttons: The new front-end theme features forms and buttons that are both modern and elegant, yet simple in design. They incorporate recognizable elements that are highly accessible.

The form fields are designed with a color bar on the side and a uniform appearance to enhance recognition, and the labels above each field promote clarity and prevent confusion during form completion. Additionally, the forms come equipped with focus, disabled, and error states, as well as the option to include checkboxes.

Breadcrumbs: Bartik users faced multiple issues with breadcrumbs and opted for a personalized approach to resolve them. However, minimizing customization leads to better code maintainability. Olivero addresses this concern by reducing the need for customized solutions, placing the breadcrumbs at the top of the page where they belong, and accentuating their color to indicate their clickable nature. Additionally, the interests of mobile users were considered, and they can now swipe left and right to navigate between pages.

Header and Navigation: Olivero's header has the ability to collapse into a hamburger-button menu while scrolling down the page, allowing users to access the menu regardless of the page length. Additionally, the header and menu offer multiple options that cater to various text sizes and logos.

Another important addition to Olivero is its support for secondary dropdown menus, a capability that was not available in Bartik. This feature has garnered positive feedback from users.

System Messages: An additional advantage of the well-designed color scheme is that system messages are easily noticeable without overlapping with the main content, which is crucial because messages typically convey essential information or instructions. The bright color does not affect the message's legibility, and the messages also feature icons that represent different message types.

Side Bar: Finally, Olivero's front-end theme incorporates a solitary sidebar region that floats alongside the primary content, making it an ideal location for blocks such as "related content" on a website. Having anchor links to post sections or related materials within the visible area is highly convenient, and it was a feature that was absent in the Bartik theme.

Vartheme

If you're using the Olivero theme for your Drupal website, you're already benefiting from its modern, accessible design and user-friendly features. But did you know that you can further enhance your website's performance with Vartheme?

Vartheme is a customizable Drupal theme that is designed to be fast, responsive, and efficient. It integrates between Bootstrap versions 4 and 5 front-end framework and inspired by Olivero. Vartheme and Drupal follow the same SMACSS-style categorization which makes Vartheme seamless and easy to edit for Drupal users. Vartheme comes with a wide range of features and options that allow you to build high-quality Drupal websites quickly and easily.

Next Steps

We have outlined the most remarkable features of Olivero, the new front-end theme, and its adoption into popular distributions such as Varbase. The design speaks volumes about the goal to make Drupal websites more visually stunning, user-friendly, and accessible right from the start.

With a default theme as impressive as this, the future of Drupal appears even more promising than before. If you are interested in exploring how your Drupal website can prepare for upcoming versions, we are available to discuss your options at any time!