EC Europa Theme

Repository containing the drupal theme for the NextEuropa platform.

The EC-Europa theme is a Drupal 7 theme, implementing the styling defined for the Digital Transformation of the European Commission. This theme is based on a component driven design.

This theme is bundled with the version 1.4.0 of ECL.

ECL component library: https://v1--europa-component-library.netlify.com/ec

Current supported browsers:

• Chrome >= 60
• Internet Explorer >= 11
• Safari >= 11
• Firefox >= 54

Table of content:

• Installation
• Styleguide
• Tests
• Helper tools
• Developers notes
  • Development environment

Installation

Place the content of this repository into a folder in sites/all/themes and enable the theme going to admin/appearance. The EC Europa Theme uses Atomium as the base theme.

Style guide

The style guide called Europa component library is to be used as a reference when building your website.

Settings

Option "Improved website"

On the settings page, the option 'Is this an "improved website"?' allows to active some customization - in the home page, the switcher-page and other blocks. By default, this option is checked.

Helper tools

All the templates are provided inside the theme:

• component templates
• views templates
• display suite templates

The platform provides the following modules to facilitate building your site and to integrate with Views and Fields:

NextEuropa Formatters (nexteuropa_formatters)

This module provides default theme implementations for custom ECL formatters.

NextEuropa Formatters - Views (nexteuropa_formatters_views)

This module extends nexteuropa_formatters with custom view plugins that render content using ECL formatters.

NextEuropa Formatters - Fields (nexteuropa_formatters_fields)

This module extends nexteuropa_formatters with custom field formatters that render field value using ECL formatters.

Go to top

Tests

Developers are encouraged to create tests as a best practice, especially functional testing using Behat, and by doing so it should be on a vanilla Drupal 7 site and installing the theme and its dependencies, which can be easily achieved by using Docker as shown on development environment section.

Developer notes

Introduction

The theme implementation is a sub-theme of Atomium and follows its implementation logic. For more information, please consult its project page.

WYSIWYG content formatter

This theme includes a particular mechanism in order to format contents that involve HTML elements; I.E.:

• "Long text" and "Text with summary" fields;
• Custom blocks containing a markup ("body").

This mechanism is based on a namespacing CSS class put on the field value container (see "ec_europa_preprocess_block()" and "ec_europa_preprocess_field()"). This css class is "ecl-editor".

If you need to implement some specific content formats in the rich texts in your sub-theme and you want to reflect them in the WYSIWYG widget, you just have to insert them in an "editor.css" file.
This file is to be put in a repository named "wysiwyg" placed at the root of the sub-theme.

Go to top

Development environment

Usage

To start, run:

docker-compose up

It is advised to not daemonise docker-compose so it can be turned off (CTRL+C) quickly when it is not anymore needed. However, there is an option to run docker on background by using the flag -d:

docker-compose up -d

Then:

docker-compose exec web composer install
docker-compose exec web ./vendor/bin/taskman drupal:site-install

Compile ECL

Requirements:

• Node.js: >= 6.9.5
• Yarn: >= 0.20.3

Setup your environment by running:

docker-compose exec -u node node npm install 

docker-compose exec -u node node npm run build 

or

npm install

Build it by running:

docker-compose exec -u node node npm run build 

or

npm run build

This will:

1. Compile ECL SASS to ./assets/styles/europa.css
2. Transpile ECL JavaScript dependencies from ./assets/scripts/entry.js to ./assets/scripts/europa.js
3. Copy ECL fonts to ./assets/fonts/
4. Copy ECL images to ./assets/images/

For more details about these build steps, check ecl-builder documentation

Go to top

Update ECL

Update the ECL by changing the @ec-europa/ecl-components-preset-base version in package.json and running:

docker-compose exec -u node node npm build 

or

npm run build

This will update assets such as images and fonts and re-compile CSS, resulting changes are meant to be committed to this repository since we cannot require theme users and/or deployment procedures to build the theme locally.

On browser

Using default configuration, the development site files should be available in the build directory and the development site should be available at: http://127.0.0.1:8080/build.

Running the tests

To run the grumphp checks:

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

To run the behat tests:

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

or

./vendor/bin/behat

Go to top