Thumbnail

Olivero - A new core theme makes Drupal 9 become the Most Beautiful CSM Ever

Thumbnail

Feb Dao

|

Drupal 9 is coming, while the Bartik theme hasn’t seen a major change since January 2011, it still uses gradients, drop shadows and other out-of-date graphical elements. So we need a new core theme which looks more modern, simple, accessible, flexible more robust.

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, modernfocused, 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.

 

Reponsive grids: with grid system is a 14 columns in stead of 12 columns as the old one
Reponsive grids: with grid system is a 14 columns in stead of 12 columns as the old one

 

        - Color palette: with the base color is bright blue, belong the neutral grays to help with accessibility while lighter colors are used for supporting design elements throughout the layout
Color palette: with the base color is bright blue, belong the neutral grays to help with accessibility while lighter colors are used for supporting design elements throughout the layout 

 
Typography: They used the size 18px for the base font to make it more readable than the old one: 16px
Typography: They used the size 18px for the base font to make it more readable than the old one: 16px

 

Header & Navigation: It supports the second-level navigation, with fixed and hamburger menu once the user scrolls down
Header & Navigation: It supports the second-level navigation, with fixed and hamburger menu once the user scrolls down

 
Site branding variations: The Olivero theme will ship with background-color and width settings that you can configure in order to fit any text length and logo type
Site branding variations: The Olivero theme will ship with background-color and width settings that you can configure in order to fit any text length and logo type

 

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(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

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(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

 

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

 

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

 

The Olivero theme will be released to Drupal 9 in June 2020. Let’s wait for The Most Beautiful CSM Ever! 

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word