About

General principles

This website's graphical architecture is inspired by the principles of Brad Frost's Atomic Design. This method distinguishes five levels of graphic organisation:

Page: The “highest” graphical organisation level is the “page”, which corresponds to the conjunction of every other organizational elements to form a whole unit on which user experience can be measured.
Example: In this website, a “page” typically corresponds to an HTML document associated to a specific route.

Note:

At a “higher” organizational level, we could for instance consider the “website”, just as we could talk about the organization of pages inside a book. However, I consider that these organizational levels “above” that of the “page” are not “graphical”, but require other analytical frameworks.
Template: The “template” prescribes how the different elements are composed in each page.
Example: In our case, the “templates” describe principles such as the position of a navbar on top of the viewport, the presence of links in the footer, and so on. Technically, the “templates” are made possible thanks to Twig's concept of blocks, built with the {extends} instruction.
Organism: An “organism” is a graphical unit of the user interface which gathers multiple functional elements into one coherent group.
Example: the navbar on top of the page, the footer, or the “cards” design.
Molecule: A “molecule” corresponds to one functional unit of the graphical interface, which answers one specific use case.
Example: a line of a form, a button, etc.
Atom: Finally, “atoms” correspond to elementary units of the language (ie. made of a sole HTML element with no children, or with only text nodes), which can be articulated together to form “molecules”.
Example: an <input> field, which can form a molecule when combined with a <label> in a form row.

Templates

Every template for this website are divided in at least 4 main parts:

Navbar

The main navigation is fixed on top of the viewport, in order to always be accessible (except for specific clients such as printers).

Header

The page header contains three graphical organisms:

a breadcrumb to locate the page in relation to the larger architecture of the site
a banner with the title of the page and a short, optional description
the outline linking to the main sections of the page.

Main content

The body of the page is made of multiple <article> elements. They must be identified by a <h2>–<h6> element. They can also be <section> elements. The template for each page adapts the form and content of these elements to fit the page's requirements.

Footer

The footer contains useful links and legal obligations.

These elements form a basis, from which the template of each page can be built. Titles of each article composing the page are automatically added to the outline with JavaScript.

Organisms

Navbar

The main navigation menu is divided in two sub-parts:

Brand: The website's brand with a link to the home page.
Contents: The actual menu, which contains the list of main links, but also action menus to access different translations.

The navbar can take different forms depending on the viewport's size.

On small screens, the actual menu is hidden by default, and will only be display when the toggle is checked on. Then, the menu will occupy the whole viewport, sticking the action menu in the bottom.
On larger screens, the menu is displayed on one row, with dropdown menus unfolding just below it, and the action menu right-aligned.

Example:

Banner

A banner displays an image below some content, with a semi-transparent background to give some contrast in order to keep the content legible.

Example:

Outline

The outline contains links to the main sections of the page (ie. the <article> elements containing a <h2> title)

Example:

Cards

A card is an element with a header, a main content, and sometimes a section listing actions, which takes the form of small cards which can be placed next to each other.

Example:

Dignissimos debitis voluptate repellat minus in quidem. Autem facere et suscipit dolores est nemo. Architecto optio aperiam eum ut voluptatum voluptatem maiores. Aut quia ab et modi id. Mollitia quisquam illo alias explicabo veniam.

quia autem quo vero

Ut perspiciatis qui et omnis nam doloribus

Ut voluptatem et quos fuga vel deleniti.

Qui adipisci ut dolorem soluta voluptatem. Voluptate excepturi animi tempora perferendis voluptatibus dolore. Voluptas dolores totam illum accusamus eligendi culpa ut. Voluptas tempora consequatur aut inventore est eligendi.

Minus omnis reiciendis et recusandae. Culpa architecto ipsam inventore quam laborum eos porro debitis. Consequatur dolorem ipsum qui cum deserunt qui error. Occaecati quia provident et magni sint totam. Rerum et laborum explicabo et.

dolores autem

Timelines

Displays a sequence of chronologically-organized sections.

Example:

2026—2027

Ullam tempore dicta

Voluptatem voluptates

Odit dolores est molestiae quam non. Cum iusto et modi ea nihil eos rerum. Dolorem nisi sed consequatur consectetur quae vel officiis soluta. Animi quaerat sit est et quia nesciunt rerum repudiandae.

Temporibus consequatur omnis dolores temporibus. Nulla autem in quia autem quisquam. Culpa ipsam eaque eius error magni error unde.

Id et alias sit aperiam non eos. Nostrum dolorem minus quidem necessitatibus. Sint et voluptate dicta qui sunt.

Et quis laboriosam magni possimus at. Sed officiis excepturi accusamus voluptatem amet nostrum qui. Ipsam molestiae quis quisquam non.

2025—2026

quam libero similique

Aut repudiandae repellendus ad ut a

Hic eveniet quia corporis fuga ut vel sed. Nam animi sed occaecati nemo exercitationem enim molestias. Quis deleniti voluptatem qui omnis exercitationem ea dolor. Illo ea perferendis eos a ut quos omnis.

Velit eveniet eos voluptatem cupiditate nemo architecto dolore explicabo. Voluptas cum cum et velit et fugit. Et omnis est illo distinctio non esse ducimus neque.

Quas quod reprehenderit eveniet sequi rem ea dicta. Modi numquam tempore ab tempora illo distinctio. Quis dolores molestiae incidunt eos voluptatibus. Rerum excepturi qui dolorum provident.

Perferendis laudantium sed corrupti et sunt. Repellendus dolor aliquid aliquid ipsum animi et fuga error. Veniam et ullam non.

2024—2025

Sed soluta necessitatibus saepe iure esse sed. Alias ut adipisci sit praesentium quia fugit delectus.

Reiciendis delectus modi ut temporibus excepturi. Odio aliquam ipsam dolores ea. Laudantium deserunt repellendus blanditiis sed. Reiciendis fugiat deserunt fugit occaecati veritatis necessitatibus voluptatem soluta.

Aut illo quo quo amet rerum eum quidem. Similique dolorum necessitatibus perferendis. Ea esse corrupti molestiae eligendi. Doloribus repudiandae dicta molestiae distinctio ut vitae ex.

Et nihil temporibus quis fugit excepturi. Mollitia animi sint quo perferendis consequuntur eligendi quos. Numquam voluptatem non dolores voluptas quibusdam explicabo pariatur. Quos iusto nobis tenetur quod dolore ex laborum ut.

Ipsa iste placeat tenetur occaecati autem aut omnis. Non ipsa incidunt qui sed animi. Dolor debitis aliquid est adipisci magnam. Iste possimus in quibusdam id hic aut.

Molecules

Forms

.form-row: One row of a form, which contains the actual input as well as helper elements (<label>, etc.), and which occupies the whole width of the container.

Example:
<label> quisquam incidunt rem <label> tempora at dolorum <label> quidem harum vel <label> facere asperiores est <label> saepe eligendi similique
.btn: An element taking the shape of a button (whether it is a <button> or a <a> or any other interactive element).

Example:
vel consequatur soluta corporis
.btn.form-row: Example:
quasi vero eaque quidem

Graphic design

General principles

Templates