Drupal Parent Theme - edg_base

This Drupal theme implements the State of Geneva's design system and is implemented as a parent theme. Each site or application must have a child theme (sub-theme) to customize it according to its specific needs.

This theme offers:

• Implementation of the Design System with Tailwind CSS.
• Use of Material icons and the Roboto font.
• Complete implementation of the header and footer (web components will replace them in the future).
• Lightmode management (automatic and manual choice).

Installation

1. In the project where you want to install this theme, add the following configuration to the composer.json file:

"repositories": [
   {
       "type": "vcs",
       "url": "https://git.devops.etat-ge.ch/gitlab/DEVELOPPEUR-PHP/drupal-edg-base"
   }
]

2. Then, install the theme:

composer require php-drupal/edg_base "dev-main"

"dev-main" will be replaced by a version tag soon.

The theme will be installed in the themes/contrib folder.

Use

This theme was designed to be extended by a child theme specific to the project.

Create a child theme

Create a new theme in the themes/custom folder.

Info file

The info.yml file must depend on edg_base and contains, for example:

name: Fluffiness
type: theme
description: 'A subtheme of edg_base that offers extra fluffiness.'
core_version_requirement: ^10 || ^11
base theme: edg_base
libraries:
- fluffiness/tailwindcss

Libraries file

The fluffiness/tailwindcss library must be defined as following:

tailwindcss:
  css:
    base:
      dist/tailwind.css: {}
  dependencies:
    - edg_base/ge_theme

The library edg_base/ge_theme imports the primitives.css file from the CDN.

The library to create

To create the fluffiness/tailwindcss library, you then need to:

1. Install TailwindCSS in the project; see https://tailwindcss.com/docs/installation/tailwind-cli.
2. Create a src/main.css file and add the following to it:

@import "tailwindcss";
@import "../../../contrib/edg_base/src/tailwind.css";
@source "../../../contrib/edg_base/templates";

/* Complete here with the project specifics. */

3. Compile the file using the command:

npx @tailwindcss/cli -i ./src/main.css -o ./dist/tailwind.css

Thus, the file dist/tailwind.css called in the library is generated.

Don't hesitate to check out the ge.ch project (private repo) for inspiration regarding its structure, yarn commands, etc.

Improvements

• Add versioning to the project.
• Use webcomponents for header and footer.