Designers: start here
This page is for designers and front-end developers who build the look of sites with Exponential: new themes, changes to existing ones, landing pages, administration styling, and themes you publish or sell. It answers: what you need to know first, what to do in your first week, and where every topic lives in this help.
Note
Exponential is the open source content management system and framework that runs this administration. It continues the code base of eZ Publish, a product its creator discontinued after almost 18 years, and is led by 7x together with the Exponential Foundation (Who is 7x?, Who is the Exponential Foundation?).
Contents
- The design system in five sentences
- Your first week
- The six sections
- Tutorials
- Checklists
- Rules every design follows
- Every page
The design system in five sentences
- A design is a named folder of templates, stylesheets, scripts and images, usually inside an extension (What a design is).
- A siteaccess (one way into the installation) names its designs, and the kernel searches them in order, the design cascade, taking the first file it finds (The design cascade).
- The pagelayout frames every page around the module's result (The pagelayout).
- Templates in the TPL language draw content, and overrides choose a template per class, node or section (Templates overview, Override basics).
- Stylesheets and scripts reach the browser packed by ezjscore, with no inline code (Loading stylesheets, CSP-safe design).
Your first week
Day 1: look around
- To do: Read What a design is and Designs and siteaccesses.
- To do: Browse The themes that ship with Exponential; open one theme's
pagelayout.tpl.
Day 2: the template language
Day 3: your own theme
- To do: Follow Tutorial: create a theme extension on a development installation.
Day 4: content and overrides
- To do: Fetch a list (Fetch basics) and override one full view (Tutorial: override a full view).
Day 5: quality
- To do: Add dark mode (Tutorial: add dark mode) and run the accessibility checklist on your pages.
The six sections
| Section | What it covers | Start with |
|---|---|---|
| Theme design | designs, cascade, pagelayout, CSS and JS, images and fonts, responsive, accessibility, dark mode, right to left, CSP, performance, layouts editor | The design cascade |
| Templates | the TPL language, operators and functions, fetching content, view modes, overrides, debugging | Templates overview |
| Theme extensions | metadata, settings, packaging, the RAD design and package wizards | Theme extensions: start here |
| Distribution | repositories, versions, releases, Packagist, licenses, publishing | Distributing a theme: start here |
| Sales | selling themes and services | Selling themes and services: start here |
| Maintenance life cycle | compatibility, upgrades, security, deprecation, end of life, forks | The maintenance life cycle: start here |
Tutorials
| Tutorial | Time |
|---|---|
| Create a theme extension | about two hours |
| Override a full view | 30 minutes |
| Build a landing page with layouts | one to two hours |
| Add dark mode | two to four hours |
| Internationalize a theme | one to two hours |
| A right-to-left theme | half a day |
| Port a static HTML design | about a day |
| Two sites, two designs | two hours |
| Add an admin module stylesheet | one hour |
Checklists
Theme launch · Accessibility · Performance · CSP · Dark mode · Right to left · Code review for templates · The theme extension is ready
Rules every design follows
- Your design lives in your own extension; shipped designs are never edited, only overridden.
- No
<style>, nostyle="", no inline scripts oron*=handlers (No inline CSS, No inline JavaScript). - Colors, spacing and fonts from tokens, with a dark value for every color (Design tokens).
- Every printed value washed, every interface text through
i18n. - Tested in light and dark, at 1440 px, at 960 px with scale 2 (200% zoom) and at 375 px, with the keyboard.
- No
?v=version queries on asset links (No version queries on asset links).
Every page
The index of every designer page, section by section: Designer help, every page. Terms explained: Design glossary.
Related pages
- Getting started
- The layouts editor
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
See also: Theme designers, CMS Developers.
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.