Synerlab

Le mandat

Synerlab, le centre d'innovation en économie circulaire de la MRC d'Argenteuil, devait présenter trois offres très différentes (facilitation, incubation, laboratoire industriel), plus un parc industriel et un appel à projets en continu. Et l'équipe devait pouvoir faire évoluer ces pages sans repasser par un développeur.

Mon rôle : la gestion et la structure du projet avec Bernard Imbert, puis toute la programmation. Le concept visuel venait du design ; mon travail, c'était de le transformer en système que le client peut manipuler.

Un page builder maison

Plutôt que des gabarits figés, le thème expose une bibliothèque de blocs. Dans l'administration, le client empile les sections qu'il veut, dans l'ordre qu'il veut, et remplit leurs champs : aucune page n'est codée en dur.

Dix blocs couvrent tout le site : hero, texte-image, cartes, blocs de couleur, icônes, texte simple, citation, partenaires, liste d'articles et formulaire. Chaque section partage la même enveloppe (o-section) ; le bloc ne s'occupe que de son contenu.

Des variantes plutôt que des gabarits

Un même bloc couvre plusieurs besoins grâce à des modificateurs : le hero devient bandeau autonome (--standalone) ou perd sa forme géométrique (--no-shape), le texte-image s'inverse (--reverse) ou fait chevaucher son média, une section bascule sur le fond de couleur de la marque (--quaterny).

Résultat : peu de code, beaucoup de combinaisons. Les trois pages de services utilisent exactement la même recette (texte, blocs de couleur, bandeau) et restent pourtant distinctes.

Un front-end orienté objet

Le JavaScript est découpé en classes, regroupées par webpack avec le SCSS du thème. Une classe Main démarre l'application, puis une ComponentFactory parcourt le DOM : chaque élément qui porte un attribut data-component reçoit l'instance de la classe correspondante.

Le PHP n'a donc qu'à écrire data-component="Carousel" dans le gabarit d'un bloc pour lui donner un comportement. Ajouter un composant, c'est écrire une classe et l'inscrire dans la liste.

export default class ComponentFactory {
  constructor() {
    this.componentInstances = [];
    this.componentList = { Carousel, Header, Scrolly };
    this.init();
  }

  init() {
    document.querySelectorAll('[data-component]').forEach((element) => {
      const Component = this.componentList[element.dataset.component];
      if (Component) this.componentInstances.push(new Component(element));
    });
  }
}

Des composants configurables par attributs

Chaque composant lit ses options dans le HTML. Header masque l'en-tête au défilement si data-auto-hide est présent et gère la navigation mobile. Scrolly révèle les éléments avec un IntersectionObserver, avec un décalage en cascade (data-stagger) ou en boucle (data-repeat). Carousel enveloppe Swiper.

Les blocs restent ainsi déclaratifs : le client choisit un bloc, le gabarit pose les bons attributs, la classe fait le reste.

Une structure CSS prévisible

Le SCSS suit une nomenclature à préfixes : o- pour les objets de mise en page (o-section, o-wrapper), u- pour les utilitaires (u-hidden-visually), et BEM pour les blocs (card__media, text-image__content, partners__content--white).

On sait en lisant une classe d'où elle vient et ce qu'elle a le droit de toucher : un bloc ne déborde jamais sur un autre, ce qui rend les combinaisons du page builder sûres.

Un dépôt de projet intégré

Le formulaire d'appel à projets est lui-même un bloc : le client le place où il veut, sous les sections d'explication. Le formulaire est géré par une extension WordPress et habillé par le thème, pour que l'équipe modifie ses champs sans toucher au code.

Responsive par bloc

Chaque bloc gère sa propre adaptation : les cartes s'empilent, le texte-image passe en colonne, la navigation bascule dans le menu mobile du composant Header. Une page composée par le client reste donc correcte sur téléphone, peu importe l'ordre des blocs.

Crédits

Client

MRC d'Argenteuil · Synerlab

Gestion et structure

Matthieu Parent, Bernard Imbert

Programmation

Matthieu Parent

Design

Christine Martel

Captures réalisées sur le site en ligne. Photographies et logos : propriété de leurs auteurs et de MRC d'Argenteuil · Synerlab.