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

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

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.

The style guide called Europa component library is to be used as a reference when building your 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.

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:

This module provides default theme implementations for custom ECL formatters.

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

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

Go to top

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.

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

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

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

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 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.

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.

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