Themes for Exponential Platform
This page is for theme designers who are asked to design for Exponential Platform DXP, the Symfony-based line of the product family, rather than for Exponential 6 (the PHP kernel this section is about). The design work is largely the same; the template language and the file layout are not. This page gives the differences in brief and points to the DXP developer pages that cover them properly.
Contents
- Which product are you designing for
- The same idea, different words
- Where theme files live
- Stylesheets and scripts
- What carries over from this section
- Where to continue
Which product are you designing for
Ask first. A site on Exponential 6 has .tpl templates, design/ folders in extensions and settings/*.ini files. A
site on the DXP has .html.twig templates, a templates/themes/ folder and YAML configuration under config/.
Choosing DXP, Legacy, Nexus or Exponential 6 explains
the product lines.
The same idea, different words
| Exponential 6 | Exponential Platform DXP |
|---|---|
| a design (folder of templates) | a theme (templates/themes/<theme>/) |
| the design cascade of a siteaccess | a design: an ordered list of themes, first match wins |
standard at the end of the cascade | the standard design and theme, provided by ibexa/standard-design |
TPL templates, {include uri='design:...'} | Twig templates, {% include '@ibexadesign/...' %} |
pagelayout.tpl | pagelayout.html.twig |
node/view/full.tpl and overrides by class | full and line view templates mapped to content types in the content view configuration |
image aliases in image.ini | image variations (Image variations) |
The DXP's design engine (ibexa/design-engine) resolves every @ibexadesign/... name through the current siteaccess's
design and its order of themes, much like the cascade. Templates always refer to @ibexadesign/..., never to a theme's
folder path (Twig templates and the design engine).
Where theme files live
A project theme is a folder under templates/themes/, and a design that lists it before standard is configured
under ibexa_design_engine.design_list; a siteaccess group then uses that design. Bundles can ship themes as well.
The steps, with the configuration, are in
The standard design and your theme.
Stylesheets and scripts
The DXP has no ezjscore packer. Most projects build their stylesheets and scripts with Webpack Encore and include them
with the Encore Twig functions; the design engine can also resolve theme assets from public/assets/themes/<theme>/
(Building assets with Yarn and Encore,
The standard design and your theme).
The design principles stay the same: no inline scripts or styles, so a Content Security Policy can stay strict.
What carries over from this section
Almost all of the design work in this section is product-neutral:
- the process: From mockup to theme, Working with developers, Working with clients and reviews;
- foundations: Type scale, Spacing and grid, Color palettes and ramps, From design tool variables to CSS custom properties;
- content design: Mapping a design to content classes (content types and fields on the DXP), Designing view modes, Designing for editors;
- quality: the design QA checklist, accessibility and dark mode.
What does not carry over: TPL syntax, override.ini, design.ini, the packer, and anything in the designer help
about Exponential 6 settings files.
Where to continue
- DXP developers: start here
- Twig templates and the design engine
- The standard design and your theme
- Twig functions you use daily
Related pages
- What Exponential Platform DXP is
- How Exponential themes differ
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.