Session Room
Room 1 (Amphitheater Pantheon)
Time Slot
Duration
40 min
Speaker(s)
Full name
George Kastanis
Gender Pronouns
He/Him
Company
Pointblank,
Drupal name link
Full name
Aris Magripis
Gender Pronouns
He/Him
Company
Pointblank,
Drupal name link
Session track
Coding & Site Building
Experience level
Intermediate
Learn how to create branded EU institutional websites using the Europa Component Library (ECL) and OpenEuropa theme. Inspired by real implementations, this session shows how to build subthemes, integrate ECL Twig components, and create custom solutions that build on ECL.
Prerequisite
- Solid understanding of Drupal theming (Twig templates, preprocess hooks etc.)
- Familiarity with npm/node.js basics
- Basic knowledge of SCSS/CSS
- Understanding of Drupal's library system
Outline
This session explores the Europa Component Library (ECL) and its Drupal integration through the OpenEuropa theme, drawing inspiration from production EU institutional sites. We'll cover the architecture of both systems, demonstrate how to build subthemes that leverage ECL components, and discuss practical patterns learned from production EU sites.
- ECL architecture: packages, presets, themes, and the
ecl-twig-loader - oe_theme's dual branding system (EC/EU) and template inheritance patterns
- Creating a subtheme: info.yml regions, npm setup, ecl-builder configuration
- Using ECL components correctly: the critical
onlykeyword,ecl_icon_path - Value objects for data transformation (
ImageValueObject,DateValueObject,FileValueObjectamong others)
References:
- ECL playground: https://ec.europa.eu/component-library/playground/ec/
- ECL GitHub: https://github.com/ec-europa/europa-component-library
- OpenEuropa theme: https://github.com/openeuropa/oe_theme
Learning Objectives
- Understand how the Europa Component Library (ECL) fits within the OpenEuropa theming stack, and how it relates to
oe_theme. - Learn how to structure maintainable
oe_themesubthemes with correct inheritance and clean separation of concerns. - Choose the right implementation approach for ECL-driven theming when to rely on templates, when to use preprocess hooks, and when to introduce theme content modules while keeping templates clean and reusable.
- Map and transform Drupal content (fields and render arrays) into ECL component data sets in a consistent way.
