In line with Drupal's modernisation, the default front-end theme is also becoming more contemporary. You may have heard about Olivero, a new front-end theme for Drupal. It was introduced to Drupal as an experimental theme in version 9.1 and will soon become the out-of-the-box option, meaning that all newly built Drupal installations will have it instead of Bartik from the start.
Let's take a look at why this is exciting news, what design qualities Olivero has, and the philosophy behind it.
Why did Drupal need a fresh front-end theme?
Bartik, Drupal's default front-end theme, was in desperate need of replacement. Drupal 7 was the first version to include Bartik (the year 2011). Yes, Bartik complies with Drupal 8 and 9's new mobile-first criteria and is mobile-responsive. However, the theme's design is a little antiquated, it doesn't come with all of the newest features, and it doesn't properly demonstrate how aesthetically stunning Drupal websites can be right away.
At DrupalCon Amsterdam in 2019, the Olivero team said:
"Bartik was a terrific Drupal theme, but the web evolved over time, and Bartik's design remained the same. Bartik started to feel a little out of date as time went on. It was hefty because it employed older graphical components like gradients and drop shadows. When users who are new to Drupal complete their initial install, this might lead to a poor view of Drupal. We want to make sure that when users install Drupal, they are blown away not just by its strength and adaptability, but also by its aesthetics."
How did the concept for the Olivero theme come about?
As detailed in a blog post by one of the story's key protagonists — Putra Bonaccorsi — it all started with a casual chat of cool Drupal folks in a hotel lobby at DrupalCon Seattle 2019. She was talking with Mike Herchel, Lauri Eskola, and Angie Byron about what made a strong CMS theme.
They discovered throughout the meeting that there was no push for a Drupal 9 default theme, and they resolved to change that. This blossomed into a Drupal 9 theme project. Putra and Mike defined three major objectives for the effort before revealing it to the world:
- Modernising the design to make it relevant for the next 5-10 years.
- Ensuring that the new theme is compatible with the most widely used Drupal features (Layout Builder, Media, and more).
- WCAG AA compliance, ensuring that the theme complies with the most stringent accessibility requirements.
Olivero's key design concepts
The major design ideas for the new front-end theme were established via study and discussion with stakeholders and designers:
Accessibility features
WCAG AA compliance is a major priority for Olivero. It should be accessible to all users due to its layout, colours, and functionality.
Simple
It's critical to keep unneeded graphic components and complexity to a minimum.
Modern
The new theme takes use of contemporary browsers' features and interaction patterns.
High contrast, rich colours, and negative space are employed by Focused Olivero to assist viewers to focus on the most essential elements on a website.
Flexible
The theme includes settings and overrides to accommodate a variety of purposes.
Rachel Olivero is the subject of the new theme
Rachel Olivero, was a well-known accessibility specialist, contributor, and thought leader who sadly passed away in 2019. In appreciation of Rachel's contribution to contemporary accessibility best practices, the Drupal community agreed to do so.
She initially became active with the Drupal community at DrupalCon 2017 in Baltimore, where she participated in a coding sprint for the first time and filed her first bug. She was always interacting with the community on social media. She spearheaded an accessibility breakthrough at DrupalCon Nashville as a blind person.
She was always willing to share her knowledge and skills on the subject. Her mission was to make life simpler for disabled individuals. She recognised the significance of diversity and was a member of the Drupal Diversity and Inclusion Team. Despite the fact that she was just a temporary member of the society, she left an indelible impact via her acts and contributions.
The Olivero team said:
"Rachel had a significant impact on the Drupal and accessibility communities. She worked with the National Federation of the Blind and was passionate about ensuring that technology was accessible to everyone. We picked the name Olivero not only because we prioritised accessibility, but also because we want to grow this new theme in our community in a way that reflects Rachel's virtues, such as patience, kindness, and inclusion."
The National Federation of the Blind has expressed their gratitude
It's encouraging to see that accessibility is a high focus for Olivero, as shown by the ready theme's testing. The National Federation of the Blind (US) was evaluating it for accessibility and certified that Olivero was well-made and low-vision friendly. Drupal's inventor, Dries Buytaert, spoke about their response during the Drupal Europe 2021 keynote.
Olivero's primary design aspects
What aids the theme in achieving its objectives, adhering to design standards, and receiving many compliments? Let's take a look at some of Olivero's characteristics.
Colour scheme
Olivero's palette's base colour is a brilliant blue. Neutral greys are also often employed to provide a better balance. Olivero has a bright and contemporary design thanks to this colour scheme, which is also consistent with Drupal branding. Darker and brighter colours make the design components more accessible and support them.
Typography
For the body text, Olivero used an 18px typeface. To maintain uniformity and proper proportions, other UI components such as headers, quotes, and so on were designed based on it. For devices with a smaller screen, the text size is reduced.
Navigation and the header
The new front-end theme offers a variety of header and navigation choices depending on the needs of a website. When visitors scroll down the page, the header collapses into a hamburger-button menu, enabling them to access the menu on longer pages. For broad sites with numerous lengthy first-level menu items, you may also enable hamburger-button navigation.
Variations in site branding
The theme's options enable you to adjust the background colour and width, making Olivero more suitable for certain logo and text sizes.
Buttons
Buttons are displayed in Olivero's vivid blue colour scheme, have strong contrast, and are easily identifiable as clickable components. The main button style is filled with colour, and a secondary button style is delineated in the theme.
Forms
Olivero's forms are distinguished by their exquisite simplicity. They feature a consistent appearance with a colour bar on the left, making them more easily identifiable as forms. Labels are placed above the fields, making the process of filling out the forms easier.
Messages
The Olivero theme's website messages are created with a vibrant hue that helps them visually stand out. At the same time, the brilliant hue has no effect on the reading of the content. Icons are also utilised to support the different message types.
Breadcrumbs
The Olivero theme places breadcrumbs towards the top of the page, which is the most expected and conventional breadcrumb placement. Their link is the same colour as the rest of the website's links. Breadcrumbs flow out the edge of the screen on mobile devices, and users may swipe from side to side to view the whole breadcrumb trail.
Support for RTL
Drupal core became multilingual out-of-the-box starting with version 8. Support for right-to-left text orientation is one of the characteristics it acquired for this reason. Olivero also meets this criterion, since it fully supports RTL languages.
Sidebar
Olivero includes a single sidebar area instead of two to assist editors to showcase extra material in the most relevant manner. The sidebar area floats beside the main content area.
Final words about Drupal's Olivero
This has been a quick overview of Drupal's new front-end theme. Olivero will become the default theme in the near future - by the time Drupal 10 is released in 2022 at the earliest. As a result, all new Drupal websites will be more accessible, user-friendly, modern-looking, and aesthetically attractive from the start.
They will serve as "visiting cards" for the Drupal CMS, highlighting its features. Our Drupal team applauds these new efforts and anticipates the inclusion of the Olivero theme in the core. Talk to us if you need any help migrating to Drupal 9 or developing custom modules to your requirements.