PHPackages                             skounis/blellow - 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. [Utility & Helpers](/categories/utility)
4. /
5. skounis/blellow

ActiveDrupal-theme[Utility & Helpers](/categories/utility)

skounis/blellow
===============

Institutional Look and Feel for D8

010CSS

Since May 31Pushed 6y ago1 watchersCompare

[ Source](https://github.com/skounis/blellow)[ Packagist](https://packagist.org/packages/skounis/blellow)[ RSS](/packages/skounis-blellow/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

Futurium base theme
===================

[](#futurium-base-theme)

[![Packagist](https://camo.githubusercontent.com/895db377fbd73858ac1a48cb1faf3cda2984dca7c6c01adbf64918134302a14b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5061636b61676973742d76312e302e302d2d616c7068612d6f72616e67652e737667)](https://packagist.org/packages/cnect-web/oe_theme)

Drupal 8 theme based on the [Open Europa Theme](https://github.com/openeuropa/oe_theme) and the [Europa Component Library](https://github.com/ec-europa/europa-component-library) (ECL).

Requirements
------------

[](#requirements)

This depends on the following software:

- [PHP 7.1](http://php.net/)

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

[](#installation)

The recommended way of installing the theme is via a [Composer](https://www.drupal.org/docs/develop/using-composer/using-composer-to-manage-drupal-site-dependencies#managing-contributed).

In your Drupal project's main `composer.json` add the following dependency:

```
{
    "require": {
      "cnect-web/blellow": "dev-develop"
    }
}
```

\***TODO**: We should verify the above reference. \*

And run:

```
$ composer update

```

Development
-----------

[](#development)

The Blellow Theme project contains all the necessary code and tools for an effective development process, meaning:

- All PHP development dependencies (Drupal core included) are required in [composer.json](composer.json)
- All Node.js development dependencies are required in [package.json](package.json)
- Project setup and installation can be easily handled thanks to the integration with the [Task Runner](https://github.com/openeuropa/task-runner) project.
- All system requirements are containerized using [Docker Composer](https://docs.docker.com/compose).
- Every change to the code base will be automatically tested using [Drone](https://drone.io).

### Project setup

[](#project-setup)

Developing the theme requires a local copy of ECL assets, including Twig templates, SASS and JavaScript source files.

In order to fetch the required code you'll need to have [Node.js (>= 8)](https://nodejs.org/en) installed locally.

To install required Node.js dependencies run:

```
$ npm install

```

To build the final artifacts run:

```
$ npm run build

```

This will compile all SASS and JavaScript files into self-contained assets that are exposed as [Drupal libraries](https://github.com/openeuropa/oe_theme/releases).

In order to download all required PHP code run:

```
composer install
```

This will build a fully functional Drupal site in the `./build` directory that can be used to develop and showcase the theme.

Before setting up and installing the site make sure to customize default configuration values by copying [runner.yml.dist](runner.yml.dist)to `./runner.yml` and override relevant properties.

To set up the project run:

```
./vendor/bin/run drupal:site-setup
```

This will:

- Symlink the theme in `./build/themes/custom/oe_theme` so that it's available to the target site
- Setup Drush and Drupal's settings using values from `./runner.yml.dist`
- Setup PHPUnit and Behat configuration files using values from `./runner.yml.dist`

After a successful setup install the site by running:

```
./vendor/bin/run drupal:site-install
```

This will:

- Install the target site
- Set the OpenEuropa Theme as the default theme
- Enable OpenEuropa Theme Demo and [Configuration development](https://www.drupal.org/project/config_devel) modules

### Using Docker Compose

[](#using-docker-compose)

Alternatively, you can build a development site using [Docker](https://www.docker.com/get-docker) and [Docker Compose](https://docs.docker.com/compose/) with the provided configuration.

Docker provides the necessary services and tools such as a web server and a database server to get the site running, regardless of your local host configuration.

#### Requirements:

[](#requirements-1)

- [Docker](https://www.docker.com/get-docker)
- [Docker Compose](https://docs.docker.com/compose/)

#### Configuration

[](#configuration)

By default, Docker Compose reads two files, a `docker-compose.yml` and an optional `docker-compose.override.yml` file. By convention, the `docker-compose.yml` contains your base configuration and it's provided by default. The override file, as its name implies, can contain configuration overrides for existing services or entirely new services. If a service is defined in both files, Docker Compose merges the configurations.

Find more information on Docker Compose extension mechanism on [the official Docker Compose documentation](https://docs.docker.com/compose/extends/).

#### Usage

[](#usage)

To start, run:

```
docker-compose up
```

It's advised to not daemonize `docker-compose` so you can turn it off (`CTRL+C`) quickly when you're done working. However, if you'd like to daemonize it, you have to add the flag `-d`:

```
docker-compose up -d
```

Then:

```
docker-compose exec -u node node npm install
docker-compose exec -u node node npm run build
docker-compose exec web composer install
docker-compose exec web ./vendor/bin/run drupal:site-install
```

Using default configuration, the development site files should be available in the `build` directory and the development site should be available at: .

#### Running the tests

[](#running-the-tests)

To run the grumphp checks:

```
docker-compose exec web ./vendor/bin/grumphp run
```

To run the phpunit tests:

```
docker-compose exec web ./vendor/bin/phpunit
```

To run the behat tests:

```
docker-compose exec web ./vendor/bin/behat
```

### Disable Drupal 8 caching

[](#disable-drupal-8-caching)

Manually disabling Drupal 8 caching is a laborious process that is well described [here](https://github.com/openeuropa/task-runner).

Alternatively, you can use the following Drupal Console command to disable/enable Drupal 8 caching:

```
./vendor/bin/drupal site:mode dev  # Disable all caches.
./vendor/bin/drupal site:mode prod # Enable all caches.
```

Note: to fully disable Twig caching the following additional manual steps are required:

1. Open `./build/sites/default/services.yml`
2. Set `cache: false` in `twig.config:` property. E.g.:

```
parameters:
     twig.config:
       cache: false
```

3. Rebuild Drupal cache: `./vendor/bin/drush cr`

This is due to the following [Drupal Console issue](https://docs.docker.com/compose).

### Working with ECL components

[](#working-with-ecl-components)

You can use the ECL components in your Twig templates by referencing them using the [ECL Twig Loader](https://www.drupal.org/project/config_devel)as shown below:

```
{% include '@ecl/logos' with {
  'to': 'https://ec.europa.eu',
  'title': 'European Commission',
} %}
```

Or:

```
{% include '@ec-europa/ecl-logos' with {
  'to': 'https://ec.europa.eu',
  'title': 'European Commission',
} %}
```

JavaScript components can be accessed by `ECL.methodName()`, e.g. `ECL.accordions()`.

*Important:* not all ECL templates are available to the theme for include, whenever you need include a new ECL template remember to add it to the `copy` section of [ecl-builder.config.js](ecl-builder.config.js) and run:

```
npm run build
```

#### Update ECL

[](#update-ecl)

To update ECL components change the `@ec-europa/ecl-preset-full` version number in [package.json](package.json) and run:

```
$ npm install && npm run build

```

This will update assets such as images and fonts and re-compile CSS. Resulting changes are not meant to be committed to this repository.

#### Watching and re-compiling Sass and JS changes

[](#watching-and-re-compiling-sass-and-js-changes)

To watch for Sass and JS file changes - [/sass](/sass) folder - in order to re-compile them to the destination folder:

```
npm run watch
```

Resulting changes are not meant to be committed to this repository.

#### Patching ECL components

[](#patching-ecl-components)

ECL components can be patched by using the [`patch-package`](https://www.npmjs.com/package/patch-package) NPM project.

To patch a component:

1. Modify its source files directly in `./node_modules/@ecl/[component-name]`
2. Run:

```
npx patch-package @ecl/[component-name]
```

Or, when using Docker Compose:

```
docker-compose exec -u node node npx patch-package @ecl/[component-name]
```

Patches will be generated in `./patches` and applied when running `npm install`.

#### Patch the ECL build script

[](#patch-the-ecl-build-script)

An improved version of the ecl-builder is used for this project. After the installation we should patch the script:

- [Patch the `@ecl/builder` build script](https://gist.github.com/skounis/124182c5bc5ef0e45920a2c867f7e160)

Dependencies
------------

[](#dependencies)

The theme needs the "**OpenEuropa Theme Helper**" module installed.

Misc
----

[](#misc)

### Style guide

[](#style-guide)

The development environment will install the Styleguide module. The test page is available in the URL:

-

###  Health Score

18

—

LowBetter than 8% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity37

Early-stage or recently created project

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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/15c04a6b3f1cae278b565af874b44924598ddcbd34f2f4ee3828bc12bfd600ae?d=identicon)[skounis@gmail.com](/maintainers/skounis@gmail.com)

### Embed Badge

![Health badge](/badges/skounis-blellow/health.svg)

```
[![Health](https://phpackages.com/badges/skounis-blellow/health.svg)](https://phpackages.com/packages/skounis-blellow)
```

###  Alternatives

[kaufmanndigital/gdpr-cookieconsent

A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site.

2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[selective/transformer

A strictly typed array transformer with dot-access, fluent interface and filters.

3817.8k1](/packages/selective-transformer)[derhansen/sf_banners

Banner-Management Extension based on Extbase and Fluid. Loads banners asynchronously using JavaScript.

1144.5k](/packages/derhansen-sf-banners)[martin/wn-forms-plugin

Create easy (and almost magic) AJAX forms

212.3k](/packages/martin-wn-forms-plugin)

PHPackages © 2026

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