Earlier this year, the Drupal community mourned the passing of Rechel Olivero - She worked at the National Federation of the Blind, as Director of Organizational Technology, she was commited to making technology accessible to all people. Now the new theme has been named in her honour. So it also tells us that the Olivero theme is made accessibility a top priority.
As the Bartik theme, Olivero is still just design with a proof of concept, BUT it is expected to address all of the old one’s limitations: more accessible, simple, modern, focused, flexible and support Drupal’s increasingly powerful functionality.
WCAG AA compliance
One of the top priorities for the theme’s creators was to make Olivero compliant with Web Content Accessibility Guidelines (WCAG), so they worked with website accessibility experts. All users, including those with various impairments, should find it easy to use websites with Olivero.
Support for the latest Drupal functionality
The Olivero creators have prioritized making it supportive of the recent Drupal features for websites such as layout builder, media embeds, second-level navigation, and more.
A modern and bright color palette
Websites will look beautiful with Olivero’s color scheme, with a base color of bright blue. In addition to being attractive, it supports Drupal’s branding. Combinations of darker and lighter colors help provide website accessibility.
The Olivero theme technical
Postcss plugins listing
- postcss-nested: plugin to unwrap nested rules like how Sass does it.
Input:
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
.title {
font-size: var(--font);
@at-root html {
--font: 16px
}
}
}
Output:
.phone_title {
width: 500px;
}
@media (max-width: 500px) {
.phone_title {
width: auto;
}
}
body.is_dark .phone_title {
color: white;
}
.phone img {
display: block;
}
.title {
font-size: var(--font);
}
html {
--font: 16px
}
- postcss-import: plugin to transform @import rules by inlining content.
Input:
/* can consume node_modules, web_modules or local modules */
@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */
@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */
@import "foo.css"; /* relative to css/ according to from option above */
@import "bar.css" (min-width: 25em);
body {
background: black;
}
Output:
/* ... content of ../node_modules/cssrecipes-defaults/index.css */
/* ... content of ../node_modules/normalize.css/normalize.css */
/* ... content of css/foo.css */
@media (min-width: 25em) {
/* ... content of css/bar.css */
}
body {
background: black;
}
- postcss-rtl: support dir right to left
Input:
.foo {
float: right;
margin-left: 13px;
text-align: right;
font-size: 13px;
border-color: lightgray;
border-width: 2px 0 2px 2px;
border-style: solid dashed solid solid
}
.foo {
text-align: center;
}
Output:
.foo {
font-size: 13px
}
[dir] .foo {
border-color: lightgray
}
[dir="ltr"] .foo {
float: right;
margin-left: 13px;
text-align: right;
border-width: 2px 0 2px 2px;
border-style: solid dashed solid solid
}
[dir="rtl"] .foo {
float: left;
margin-right: 13px;
text-align: left;
border-width: 2px 2px 2px 0;
border-style: solid solid solid dashed
}
[dir] .foo {
text-align: center
}
- postcss-custom-media: lets you use Custom Media Queries in CSS, following the CSS Media Queries specification
Input:
@custom-media --small-viewport (max-width: 30em);
@media (--small-viewport) {
/* styles for small viewport */
}
Output:
@media (max-width: 30em) {
/* styles for small viewport */
}
- postcss-custom-properties: lets you use Custom Properties in CSS, following the CSS Custom Properties specification
Input:
:root {
--color: red;
}
h1 {
color: var(--color);
}
Output:
:root {
--color: red;
}
h1 {
color: red;
color: var(--color);
}
- postcss-calc: lets you reduce calc() references whenever it's possible
Input:
:root {
--main-font-size: 16px;
}
body {
font-size: var(--main-font-size);
}
h1 {
font-size: calc(var(--main-font-size) * 2);
height: calc(100px - 2em);
margin-bottom: calc(
var(--main-font-size)
* 1.5
)
}
Output:
body {
font-size: 16px
}
h1 {
font-size: 32px;
height: calc(100px - 2em);
margin-bottom: 24px
}
- autoprefixer: plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
Input:
::placeholder {
color: gray;
}
.image {
background-image: url([email protected]);
}
@media (min-resolution: 2dppx) {
.image {
background-image: url([email protected]);
}
}
Output:
::-webkit-input-placeholder {
color: gray;
}
::-moz-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
.image {
background-image: url([email protected]);
}
@media (-webkit-min-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-resolution: 2dppx) {
.image {
background-image: url([email protected]);
}
}
- postcss-discard-comments: Discard comments in your CSS files with PostCSS.
Input:
h1/* heading */{
margin: 0 auto
}
Output:
h1 {
margin: 0 auto
}
Grid system
Olivero uses the css grid layout module, it offers a grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning.
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
Development Setup
Before starting, ensure that you are using at least the latest LTS release of Node.js, once Node.js has been installed. In this case, we should use YARN
npm i -g yarn
You can try the Olivero theme with Drupal 8
git clone --branch 8.x-1.x-dev https://git.drupalcode.org/project/olivero.git
cd olivero
yarn install
Working on CSS and JS
- Process sources without writing source maps:
yarn run build:css
yarn run build:js
- Watches source assets and apply development tasks if any of the changes:
yarn run watch:css-dev
yarn run watch:js-dev
Add new comment