Systèmes
ULK Design System
ActifLe design system de l'Université de Lille, conçu pour unifier le style visuel sur des dizaines de sites Typo3, réduire le CSS redondant et proposer des composants accessibles et maintenables.
- Domaine
- Design system Components Accessibility
- Outils
- CSS variables BEM Typo3 Bootstrap JS VS Code Git
- Chronologie
- Travaux fondamentaux (v1 & v2) démarrés en 2022. Version 3 en cours avec une collègue spécialisée.
Contexte
Le besoin est venu de l'équipe de gestion des plateformes, qui peinait à maintenir la cohérence visuelle sur plusieurs centaines de sites répartis sur plusieurs instances Typo3 (composantes, formations/recherche/événements, laboratoires, services), et de la direction de la communication qui voulait que l'identité imprimée soit correctement reflétée sur le web. Chaque instance dispose d'un template, ensuite déployé sur les sites concernés puis personnalisé selon les besoins des webmasters. Auparavant, ces personnalisations s'accumulaient sans cadre commun, avec des surcharges qui entraient parfois en conflit et brouillaient la cohérence visuelle d'ensemble.
ULK a connu trois itérations. L'idée de centraliser la structure est partie d'une suggestion, que mon responsable de service a ensuite portée et poussée concrètement au sein de l'équipe. Les versions 1 et 2, notamment la nomenclature BEM et la logique globale, ont été construites à partir de là avec les moyens du bord, la V2 marquant déjà un vrai saut de qualité par rapport à la V1. La version 3 a démarré quand une collègue spécialisée en design systems a rejoint l'équipe : elle a repris cette structure et l'a significativement affinée, en ajoutant une couche de tokens et une profondeur technique adaptée à l'envergure croissante du projet.
Structure & logique
- Nomenclature BEM :
ulk-s-pour la structure,ulk-c-pour les composants,ulk-o-pour les objets, parmi d'autres préfixes selon le type d'élément - Variables CSS pour couleurs, fontes et espacements, injectées centralement avec des surcharges minimales par instance
- Classes utilitaires atomiques (préfixe u-) pour les besoins de style ponctuels hors structure BEM
- Composants JS accessibles basés sur Bootstrap
Fonctionnalités accessibilité
- Système de couleurs conçu avec les contrastes WCAG
- Changement de fonte optionnel : Dyslexia, Luciole
- Mode sombre et bascule de thème
- Espacement et échelle typographique cohérents
- Grille et composants responsives
Standards
- Conformité WCAG 2.1 AA visée
- Exigences RGAA françaises
- Balisage compatible lecteurs d'écran avec HTML sémantique approprié
Collaboration & statut
- Versions 1 et 2 développées avec mon responsable de service, sur les décisions fondamentales
- Version 3 en cours, portée par une collègue spécialisée en design systems, avec architecture de tokens et raffinement technique
- Système actif, déployé sur plusieurs sites institutionnels