PHPackages                             international-labour-organization/ilo\_base\_theme - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. international-labour-organization/ilo\_base\_theme

ActiveDrupal-theme

international-labour-organization/ilo\_base\_theme
==================================================

Drupal base theme for the International Labour Organization.

1.4.0(5mo ago)11.5k[5 issues](https://github.com/international-labour-organization/ilo_base_theme/issues)Apache-2.0TwigPHP >=8.1CI passing

Since Apr 11Pushed 5mo ago7 watchersCompare

[ Source](https://github.com/international-labour-organization/ilo_base_theme)[ Packagist](https://packagist.org/packages/international-labour-organization/ilo_base_theme)[ RSS](/packages/international-labour-organization-ilo-base-theme/feed)WikiDiscussions 1.x Synced 1mo ago

READMEChangelog (10)Dependencies (19)Versions (21)Used By (0)

ILO Base Theme
==============

[](#ilo-base-theme)

Drupal 10 theme based on the [ILO Design System](https://twig.ui.ilo.org). The project is structured in the following way:

- A Drupal base theme providing pre-styled core Drupal elements (such as forms, tabs, and navigation), all adhering to the ILO’s design guidelines.
- A theme companion module [`ilo_base_theme_companion`](modules/ilo_base_theme_companion), which exposes all compatible ILO Design System components as Drupal patterns. Check the [UI Patterns](https://www.drupal.org/project/ui_patterns) and the [UI Patterns Settings](https://www.drupal.org/project/ui_patterns_settings) modules for more information.

The theme requires the companion module to be enabled, while one could enable the companion module without enabling the base theme.

Enabling only the companion module is useful for projects that already have the ILO Design System integrated but have not yet adopted patterns, allowing for incremental adoption of the base theme's pattern-based approach.

Table of contents
-----------------

[](#table-of-contents)

- [Installation](#installation)
    - [Use the base theme](#use-the-base-theme)
    - [Use the components without the base theme](#use-the-components-without-the-base-theme)
    - [Opinionated components](#opinionated-components)
    - [Patterns and cache metadata](#patterns-and-cache-metadata)
    - [Handling Forms](#handling-forms)
- [How to create a sub-theme](./docs/sub-theme.md)
- [Development](./docs/development.md)
- [NPM commands](./docs/npm-commands.md)
- [Demo site](./docs/demo-site.md)

Installation
------------

[](#installation)

The recommended way of installing the ILO Base Theme is via [Composer](https://getcomposer.org/).

Before proceeding, please note that theme releases are built by a continuous integration system, and include code coming from third-party libraries, such as [ILO Design System](https://twig.ui.ilo.org) templates and other assets. Simply Running `composer require international-labour-organization/ilo_base_theme`will download the raw theme source code, which misses required third-party code.

In order to instruct Composer to download the actual built artifact, you need to require and configure the [Composer Artifacts](https://github.com/openeuropa/composer-artifacts) project.

To do so, run:

```
composer require openeuropa/composer-artifacts

```

Then add the following section in your project's `composer.json`:

```
    "extra": {
        "artifacts": {
            "international-labour-organization/ilo_base_theme": {
                "dist": {
                    "url": "https://github.com/{name}/releases/download/{pretty-version}/{project-name}-{pretty-version}.zip",
                    "type": "zip"
                }
            }
        },
    }

```

Once you are done, run:

```
composer require international-labour-organization/ilo_base_theme
```

This will download the fully built artifact, as opposed to the raw theme source code.

### Use the base theme

[](#use-the-base-theme)

In order to enable the theme in your project perform the following steps:

1. Enable the **ILO base theme companion** module
2. Enable the **ILO base theme** and set it as default

```
./vendor/bin/drush en ilo_base_theme_companion
./vendor/bin/drush theme:enable ilo_base_theme
./vendor/bin/drush config-set system.theme default ilo_base_theme

```

### Use the components without the base theme

[](#use-the-components-without-the-base-theme)

If you already have a theme, and you just want to use the design system components, just enable the companion module, without enabling the theme, like so:

```
./vendor/bin/drush en ilo_base_theme_companion

```

The full list of components is available at `/admin/appearance/ui/patterns`.

### Opinionated components

[](#opinionated-components)

#### The `hero` component

[](#the-hero-component)

The `hero` component generates a breadcrumb trail based on the current route and ensures proper caching for the breadcrumb metadata.

#### The `navigation` component

[](#the-navigation-component)

The ILO base theme has specific conventions for handling the main menu. When the companion module is enabled, a "More" link is automatically created. This menu link serves to group all links under the header's expandable "More" panel. If the "More" link does not contain any child items, it will not be displayed.

In case of a multilingual site, the `navigation` component also includes a multilingual language switcher links.

### Patterns and cache metadata

[](#patterns-and-cache-metadata)

Displaying render arrays using patterns requires a careful handing of the render array's cache metadata. For example, if you want to use the `card` pattern to render a news content type teaser, you would typically do the following:

```
{{ pattern('card', {
  title: content.title,
  link: content.field_link['#url'],
  size: 'fluid',
}, 'feature') }}
```

The problem with the above is that cache tags and contexts (for example from the link at `field_link`) are not bubbled up correctly.

In order to solve the issue it is recommended to explicitly bubble up the cache metadata of the render array at hand. You can do that by using the `|cache_metadata` filter exposed by the [Twig Tweak](https://www.drupal.org/project/twig_tweak) module, as shown below:

```
{{ pattern('card', {
  title: content.title,
  link: content.field_link['#url'],
  size: 'fluid',
}, 'feature') }}

{{ content|cache_metadata }}
```

Another recommended module to keep in mind, when working with patterns, is the [Twig Field Value](https://www.drupal.org/project/twig_field_value), which can help with accessing properties and subfields of render arrays and entities when passing them over to patterns.

### Handling Forms

[](#handling-forms)

The [ILO Design System](https://twig.ui.ilo.org) includes comprehensive styles for [forms](./templates/forms) to ensure consistency and usability across the platform. However, due to the internal workings of Drupal's Form API, UI Patterns cannot be directly used to style forms.

Instead, the ILO Base Theme adopts a traditional Drupal templating approach to style forms, this involves applying relevant ILO Design System classes directly to Drupal form templates.

###  Health Score

39

—

LowBetter than 86% of packages

Maintenance50

Moderate activity, may be stable

Popularity21

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 79.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~39 days

Recently: every ~49 days

Total

16

Last Release

172d ago

Major Versions

0.x-dev → 1.0.02024-12-11

### Community

Maintainers

![](https://www.gravatar.com/avatar/8562a7045bde4094cf1252195ae47001970518ed7281b9e13caa6b6ffea03a5b?d=identicon)[ademarco](/maintainers/ademarco)

---

Top Contributors

[![ademarco](https://avatars.githubusercontent.com/u/153362?v=4)](https://github.com/ademarco "ademarco (201 commits)")[![MXTcomunica](https://avatars.githubusercontent.com/u/5735682?v=4)](https://github.com/MXTcomunica "MXTcomunica (43 commits)")[![GGKapanadze](https://avatars.githubusercontent.com/u/36326203?v=4)](https://github.com/GGKapanadze "GGKapanadze (5 commits)")[![davidako](https://avatars.githubusercontent.com/u/22071187?v=4)](https://github.com/davidako "davidako (2 commits)")[![bashlk](https://avatars.githubusercontent.com/u/11556301?v=4)](https://github.com/bashlk "bashlk (1 commits)")

### Embed Badge

![Health badge](/badges/international-labour-organization-ilo-base-theme/health.svg)

```
[![Health](https://phpackages.com/badges/international-labour-organization-ilo-base-theme/health.svg)](https://phpackages.com/packages/international-labour-organization-ilo-base-theme)
```

###  Alternatives

[govcms/govcms

GovCMS Drupal Distribution

18997.1k3](/packages/govcms-govcms)[voidagency/vactory_starter_kit

Vactory is a custom Drupal profile which is developed and released by VOID Agency.

1019.7k](/packages/voidagency-vactory-starter-kit)[wingsuit-designsystem/wingsuit-kickstarter

Starterkit for Wingsuit and Layout Builder.

131.2k](/packages/wingsuit-designsystem-wingsuit-kickstarter)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)