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:

Nostrum velit facere aut. Voluptatibus porro repellat nemo optio earum exercitationem nesciunt. Vitae dolor libero dolores perspiciatis dolor vitae autem velit. Ea ea autem molestiae culpa. Nemo quis itaque officia qui doloremque non sit omnis.

ab minus beatae at

Optio voluptas vero ut distinctio quam tempora

Similique iure minus quam molestias ipsum dolorem.

Qui doloribus exercitationem porro error eos minus atque. Quia praesentium quae ullam veniam soluta. Accusamus dignissimos recusandae eligendi ad sint quos.

Est amet officiis maxime dolore et quis nostrum. Officiis fugiat quod doloribus sed voluptatem ullam. Voluptas est recusandae qui voluptatem aut.

vel reiciendis

Timelines

Displays a sequence of chronologically-organized sections.

Example:

2026—2027

Magni et est

Aperiam inventore

Recusandae explicabo nisi similique quas veritatis. Voluptatem vel dolores sed nihil non quo voluptate. Magni necessitatibus esse accusantium reprehenderit voluptas quia aut sed. Voluptas quaerat facilis quisquam sequi voluptatem et sunt.

Quae amet voluptate sint quod rerum ipsam. Harum earum assumenda eligendi autem beatae debitis autem pariatur. Autem velit molestiae doloribus eum est. Assumenda et enim quis occaecati officia ex tempora.

Ratione asperiores aut quia temporibus. Ut quaerat amet rerum ab. Inventore expedita voluptatem non non occaecati enim dolore.

Voluptatem ut laboriosam illum voluptas similique assumenda. Atque perspiciatis necessitatibus inventore error consequatur voluptatem. Et aut nihil eos assumenda eos nemo.

2025—2026

consequatur voluptatem reprehenderit

Eveniet consequuntur rerum aliquam impedit architecto

Hic amet necessitatibus quisquam recusandae aspernatur. Aut est unde nihil sed culpa qui. Voluptatibus autem temporibus provident ipsa sequi delectus sunt.

Nam eaque dolor fugiat molestias. Voluptatem rerum voluptatem odio. Distinctio dolor ratione laborum repudiandae. Quae rerum eos non corporis voluptatem.

Nihil dolor dolore necessitatibus et ea. Voluptate officiis debitis aut exercitationem harum soluta. Ut aut quia qui sint optio id possimus ipsum. Rerum voluptas qui commodi delectus.

Dignissimos consectetur est blanditiis corporis aspernatur veritatis. A molestiae dolor est nihil. Cum voluptas corporis nam.

2024—2025

Non quae est nemo laudantium aut repudiandae. Ut quia ex sunt accusantium voluptas.

Vero autem voluptas consequatur ipsa ipsum. Quia atque hic dolorum tempore sed et. Hic nihil earum est suscipit provident officia odio. Ut sequi quis veritatis odio quo et nihil.

Occaecati rem hic delectus cupiditate voluptatem aut ipsum. Nisi fugit rem excepturi quasi soluta repudiandae unde. Aut ratione expedita in quas sunt.

Blanditiis qui officia repellat velit at blanditiis quos. Et quae molestiae vitae aut odio. Voluptatem minus quo sed beatae.

Quaerat quidem ut dolor doloremque corrupti non non. Minima sit error sed. Praesentium sed alias aut dolorem voluptatem.

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> sequi facere assumenda <label> minus neque laudantium <label> corrupti unde magnam <label> quo eum sequi <label> voluptatem harum et
.btn: An element taking the shape of a button (whether it is a <button> or a <a> or any other interactive element).

Example:
eveniet nihil et eum
.btn.form-row: Example:
omnis sint omnis ad

Graphic design

General principles

Templates