Morphos

Overview

Morphos is Morpht’s new Drupal theme. The goal was a modern theme on current front-end tooling: Tailwind CSS and daisyUI for styling, Vite for the build, and Drupal’s single directory components (SDC) for every piece of UI, so editors can place and edit the components in Drupal Canvas.

The challenge

The theme had to be built from reusable components. That meant taking banners, heroes and the rest of daisyUI’s component list and rebuilding each one as a Drupal component that works on its own, takes its content from the CMS, and looks good on any site that uses it without extra styling.

My role

• Theme foundation: I built the original theme, including its structure and Vite build.
• Component library: I built out a large share of the daisyUI components and moved them over into SDC.

The solution

• Single directory components: each component keeps its Twig template, schema, styles and scripts in one folder, so it can be reused, versioned and placed in Canvas as a unit.
• daisyUI on Tailwind CSS: a consistent, themeable set of components to start from, so we didn’t design each one from scratch.
• Vite: fast rebuilds while developing, and optimised CSS and JavaScript for production.

The impact

Morpht now has a Drupal theme on current CSS and front-end tooling, with 60+ single directory components. Morphos is the foundation of the Convivial Gov Site Template, and it’s what Convivial for GovCMS moved to when it left Bootstrap.