Fiche thématique

Living Style Guide

UI design system dashboard showing button component examples and code snippets on a monitor.

Introduction
Carte d'identité
Health check
Développeurs
Framework JS
Tokens
Polices
Playground
Export
Typographie
Boutons & liens
Badges, labels & marqueurs
Alertes & notifications
Cards
Listes
Tableaux
Formulaires
Navigation
Interactif (JS)
Media & décor
Indicateurs
Layout & grille
Utilitaires visuels
Styles de titres
Composants avancés (JS)
Utilitaires avancés
Évolutions à venir

Guide du développeur

À quoi sert cette page. Elle permet à une application métier — construite hors de WordPress (React, Vue, PHP, app interne…) — d'adopter exactement le même langage visuel que les sites de la Province Sud : couleurs, typographie, espacements, composants. Au lieu de recréer une UI, vous réutilisez celle de YOOtheme Pro + UIkit 3 telle qu'elle est compilée sur ce site.

Comment ça marche. YOOtheme compile UIkit avec les variables du Style Customizer en un seul theme.css qui porte toute l'identité PSud. Vous le chargez, vous ajoutez le JS UIkit pour l'interactif, et votre HTML utilise les classes uk-* documentées ci-dessous. Aucune dépendance à WordPress côté appli.

Ce que cette page détecte pour vous, en lisant le site réel : URLs CSS/JS, polices (CDN vs local), CSS/JS des Settings, tokens de design, et un squelette prêt à copier.

Quickstart en 3 étapes

1Charger le CSS

Liez le theme.css de ce site (section « URLs à charger »). Il porte l'identité PSud.

2Charger UIkit JS

Ajoutez uikit.min.js + uikit-icons.min.js en defer pour l'interactif et les icônes.

3Utiliser les classes

Écrivez votre HTML avec les classes uk-* de la galerie. Copiez le markup exact.

Carte d'identité technique

Environnement réel de ce site, pour cadrer l'intégration.

YOOtheme Pro (thème)

5.0.37

UIkit

…

Sortie CSS

Fichier

Polices

…

Style actif (CSS)

…

Breakpoints

@s 640 · @m 960 · @l 1200 · @xl 1600

Détection : recalculée Le cache s'invalide automatiquement dès que le style est recompilé.

Health check

Diagnostics d'intégration établis à partir de la configuration réelle de ce site.

OK UIkit JS présent sur le serveur, les composants interactifs peuvent fonctionner
OK Icônes JS présent : les icônes seront affichées
OK Sortie CSS fichier theme.css, cacheable et à URL stable
Attention Polices mixtes : une partie provient du CDN Google, point de vigilance RGPD
OK Style actif une seule feuille de thème exposée : theme.css

URLs à charger

Un seul CSS thème. Ce site contient plusieurs feuilles compilées, mais une seule est active. Ne chargez que celle listée ci-dessous : cumuler plusieurs theme*.css produit une cascade contradictoire et un rendu faux. Les CSS d'administration (barre admin, dashicons, outils SEO/éditeur) sont exclus — ils ne concernent pas une appli tierce.

URLs vérifiées sur ce serveur (RTL et variantes inactives exclues ; feuille active = badge « chargée ») :

Type	Requis	URL
CSS thème	Toujours	https://www.province-sud.nc/wp-content/themes/yootheme/css/theme.css?ver=1785466538
UIkit JS	Si interactif	https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit.min.js
UIkit Icons JS	Si icônes	https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit-icons.min.js

Autres feuilles présentes sur le serveur (2) — ne pas charger

inactive theme.1.css
inactive theme.update.css

Styles alternatifs ou résidus de mise à jour (*.update.css). Les cumuler écrase le style actif.

D'autres styles existent. La Province Sud dispose de variantes de charte supplémentaires, gérées par une extension interne dédiée. Elles ne sont pas exposées sur cette page pour le moment : seule la feuille active y est documentée. Leur mise à disposition, avec les palettes de couleurs associées, est prévue dans une version ultérieure de ce guide. Si votre application doit adopter une variante particulière, rapprochez-vous de l'équipe web avant d'engager l'intégration.

Figer une copie (snapshot)

Pour ne pas dépendre du live (le CSS est régénéré à chaque recompilation du style) :

curl -o theme-psud.css "https://www.province-sud.nc/wp-content/themes/yootheme/css/theme.css?ver=1785466538"
curl -O "https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit.min.js"
curl -O "https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit-icons.min.js"

Bloc <head> :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin,latin-ext&display=fallback">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif%C2%A0%3A+400%2C400i%2C700%2C700i">
<link rel="stylesheet" href="https://www.province-sud.nc/wp-content/themes/yootheme/css/theme.css?ver=1785466538">
<script src="https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit.min.js" defer></script>
<script src="https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit-icons.min.js" defer></script>

Ordre : <meta viewport> · CSS thème avant CSS applicatif · UIkit JS en defer, icons après · pas de jQuery.

CSS inline → fichier

Si le site sert le CSS inline, extraction du CSS réellement chargé :

Ce site sert son CSS sous forme de fichier : rien à extraire ici, utilisez directement l'adresse indiquée plus haut. Ce bloc ne concerne que les installations diffusant le CSS directement dans le code de la page.

Le CSS custom (Settings → Custom Code) est compilé dans theme.css : déjà inclus dès que vous chargez le theme.css. Rien à faire côté appli.

Cycle de vie du CSS & versions

Point critique pour l'intégrateur. Le theme.css n'est pas un fichier figé. Il est régénéré par YOOtheme à chaque modification du style, et son nom peut même changer si le style actif change. Une URL copiée aujourd'hui peut donc, demain, pointer vers une version périmée ou ne plus exister du tout.

Concrètement, trois situations produisent ce décalage. Un simple ajustement de la charte (une couleur, une police, un espacement) déclenche une recompilation : le fichier garde son nom mais son contenu change, et son paramètre de version est mis à jour. Un changement de style actif fait basculer le site sur un autre fichier : l'ancien reste sur le serveur sans être servi, ce qui explique les feuilles marquées « inactives » plus haut. Une mise à jour de YOOtheme peut enfin laisser des fichiers résiduels qui ne sont jamais actifs.

Les conséquences côté application diffèrent selon le cas. Dans le meilleur, l'application continue de fonctionner mais affiche une version périmée de la charte, avec un décalage visuel progressif par rapport aux sites officiels. Dans le pire, l'URL renvoie une erreur 404 et l'application perd d'un coup toute sa mise en forme, sans avertissement préalable et sans qu'aucune modification n'ait été faite de son côté.

Deux réflexes évitent ces écueils. Ne codez jamais une URL en dur sans plan de mise à jour : revenez sur cette page après chaque évolution majeure de la charte, ou surveillez la disponibilité de l'URL. Ou figez une copie maîtrisée à l'aide des commandes de snapshot ci-dessous, quitte à la resynchroniser volontairement. Le tableau des stratégies, plus bas, vous aide à choisir selon la criticité de votre application. À terme, une URL stable et pérenne est envisagée pour supprimer ce problème à la racine : voir la section « Évolutions à venir ».

Que se passe-t-il quand le style change ?

Vous modifiez les réglages du style (couleurs, typo, template…): Le CSS est recompilé. Même nom de fichier, mais nouvelle date de modification → le paramètre ?ver= change. L'ancienne URL sert alors du CSS périmé (ou est invalidée par le cache navigateur).
Vous changez de style actif: C'est un autre fichier qui devient l'actif (ex. theme.1.css → theme.2.css). L'ancien reste sur le disque mais n'est plus servi : c'est l'origine des feuilles « inactives » listées plus haut.
Vous mettez YOOtheme à jour: Des résidus *.update.css peuvent apparaître. Ils ne sont jamais actifs et sont systématiquement écartés par cette page.

Solutions mises en place ici

Détection de la feuille active, pas d'URL codée en dur : la page identifie la feuille réellement servie (badge « chargée ») et n'expose que celle-là. Les autres sont reléguées en liste « inactives ».
Cache auto-invalidé : la clé du cache serveur intègre la date de compilation des theme*.css. Dès que vous recompilez ou changez de style, la détection est refaite immédiatement — jamais d'URL périmée affichée.
?ver= systématique sur les URLs proposées : le navigateur du visiteur récupère bien la nouvelle version après recompilation.
Snapshot curl (ci-dessus) : pour figer une copie locale et se découpler totalement du live.

Quelle stratégie choisir côté appli ?

Stratégie	Avantage	Inconvénient	Pour qui
Lien direct vers l'URL du site	Toujours synchro avec l'identité PSud	Le rendu de l'appli change si le style du site change ; dépendance réseau + CORS polices	Applis internes, intranet
Snapshot (copie hébergée)	Stable, maîtrisé, pas de dépendance	À re-synchroniser manuellement après chaque évolution de charte	Applis critiques, hors réseau
Tokens (`:root{--psud-*}`)	Découplé, léger, réutilisable dans n'importe quel framework	Ne fournit pas les composants, seulement les variables	Applis React/Vue avec leur propre UI

Recommandation : lien direct pour rester aligné sur la charte, snapshot si vous devez garantir un rendu figé dans le temps.

Polices — Google (CDN) vs locales

Depuis Google (CDN)

RGPD : préférez les localiser.

Présentes localement

215 fichier(s) :

Squelette d'intégration

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.province-sud.nc/wp-content/themes/yootheme/css/theme.css?ver=1785466538">
  <script src="https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit.min.js" defer></script>
  <script src="https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit-icons.min.js" defer></script>
</head>
<body>
  <div class="uk-container uk-margin">
    <h1 class="uk-heading-medium">Mon application metier PSud</h1>
    <button class="uk-button uk-button-primary">Bouton au style PSud</button>
  </div>
</body>
</html>

Conventions & pièges

Conventions

Préfixe uk-. Grille = attribut uk-grid + uk-child-width-1-3@m.
uk-container > uk-section > uk-grid · espacement uk-margin*.
Composants JS = attributs (uk-modal, uk-dropdown…). Contraste uk-light/uk-dark.

Pièges

theme.css écrasé au recompile → liez l'URL (?ver=).
Reset global : scopez UIkit si l'appli a son CSS. Fonts cross-origin → CORS.
Couplage live : pour découpler, snapshotez les tokens :root{--psud-*}. Jamais de CDN générique.

Intégration dans un framework JS

Le CSS ne pose pas de difficulté, le JavaScript si. La feuille de style du thème s'applique sans problème dans Angular, React ou Vue : ce sont des styles globaux, et l'encapsulation des composants ne concerne que les styles définis à l'intérieur de ceux-ci. En revanche, UIkit JS manipule le DOM directement : il déplace des nœuds, en crée, en supprime. Votre framework fait exactement la même chose. Deux pilotes pour un même volant, c'est là que naissent les problèmes.

Quatre approches possibles

Approche	Principe	Avantage	Limite
A. CSS + UIkit JS	Les deux ressources sont chargées depuis ce site	Mise en œuvre immédiate, rendu strictement identique aux sites PSud	Impose de gérer le cycle de vie des composants UIkit à la main
B. Snapshot local	Le CSS est copié dans le projet	Build reproductible, aucune dépendance réseau, pas de souci de polices distantes	À resynchroniser volontairement après chaque évolution de la charte
C. Tokens seuls	L'application consomme les variables de design et garde ses propres composants	Aucun conflit possible, très léger	Les composants sont à réimplémenter
D. CSS sans le JS recommandé	Classes UIkit pour l'apparence, interactivité native au framework	Un seul pilote du DOM, identité visuelle respectée	Les composants interactifs sont à recréer avec les outils du framework

En pratique : l'approche A convient à un outil interne à livrer vite, l'approche D à une application métier destinée à durer.

Angular
React
Vue

Chargement des ressources

Déclarez la feuille de style globalement, dans src/index.html ou via le tableau styles d'angular.json :
```

<link rel="stylesheet" href="https://www.province-sud.nc/wp-content/themes/yootheme/css/theme.css?ver=1785466538">
  <script src="https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit.min.js" defer></script>
  <script src="https://www.province-sud.nc/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit-icons.min.js" defer></script>
```
Ne placez jamais cette feuille dans les styleUrls d'un composant. Angular réécrirait alors les sélecteurs en y ajoutant ses attributs d'encapsulation, ce qui casserait l'intégralité des règles UIkit. Le CSS du thème est un style global : il se déclare comme tel.
```
// angular.json — variante : styles locaux (apres snapshot)
"styles": [
  "src/assets/psud/theme.css",
  "src/styles.css"
]
```
Bonne nouvelle : la syntaxe est identique

Angular utilise l'attribut class, exactement comme UIkit. Le balisage présenté dans la galerie de composants est donc copiable tel quel, sans transformation — contrairement à React qui impose className.

Cycle de vie des composants interactifs

Un composant UIkit s'initialise après le rendu de la vue et doit être détruit explicitement :
```
// composant Angular utilisant un composant interactif UIkit
import { Component, ElementRef, ViewChild, NgZone,
         AfterViewInit, OnDestroy } from '@angular/core';

declare const UIkit: any;

@Component({
  selector: 'app-exemple',
  template: `
    <button class="uk-button uk-button-primary" (click)="ouvrir()">Ouvrir</button>
    <div #dlg uk-modal>
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Titre</h2>
        <button class="uk-modal-close uk-button uk-button-default">Fermer</button>
      </div>
    </div>`
})
export class ExempleComponent implements AfterViewInit, OnDestroy {
  @ViewChild('dlg') dlg!: ElementRef<HTMLElement>;

  constructor(private zone: NgZone) {}

  ngAfterViewInit(): void {
    // UIkit vit hors d'Angular : on repasse dans la zone pour la detection de changements
    this.dlg.nativeElement.addEventListener('hidden', () => {
      this.zone.run(() => { /* mise a jour de l'etat */ });
    });
  }

  ouvrir(): void { UIkit.modal(this.dlg.nativeElement).show(); }

  ngOnDestroy(): void {
    // INDISPENSABLE : UIkit deplace la modale dans <body>.
    // Sans destruction explicite, elle survit au composant.
    UIkit.modal(this.dlg.nativeElement).$destroy(true);
  }
}
```
Les cinq pièges à connaître
1. Les modales sont déplacées vers <body>. C'est le piège le plus coûteux. Si un *ngIf détruit votre composant, la modale reste orpheline dans le DOM : fuite mémoire et éléments fantômes qui s'accumulent. D'où l'appel à $destroy(true) dans ngOnDestroy.
2. Le contenu généré dynamiquement est ignoré. Ce qu'Angular ajoute après coup via *ngFor, *ngIf ou une réponse HTTP est invisible pour UIkit tant qu'on ne le lui signale pas.
3. Les événements UIkit sortent de la zone Angular. Un changement d'état déclenché depuis un écouteur UIkit ne rafraîchira pas la vue ; il faut le réintroduire via NgZone.run().
4. Attention aux versions divergentes. Si UIkit est installé via npm alors que la feuille de style provient de ce site, les deux versions peuvent différer et produire des incohérences. Chargez le script depuis la même origine que le CSS.
5. Conflit avec Angular Material. Le CSS du thème applique une normalisation globale des balises. Si votre application utilise déjà une bibliothèque de composants, attendez-vous à des écrasements : limitez alors la portée du CSS, ou retenez l'approche C.
```
// Contenu genere apres l'initialisation (*ngFor, *ngIf, appel HTTP) :
// UIkit ne le connait pas encore, il faut le lui signaler.
ngAfterViewChecked(): void {
  UIkit.update(this.host.nativeElement);
}
```
Rendu côté serveur

Avec Angular Universal, UIkit ne doit être manipulé que dans le navigateur : protégez ces appels par isPlatformBrowser, sinon le rendu serveur échouera sur l'absence de window et de document.

L'alternative recommandée

Pour une application durable, chargez le CSS du thème pour l'apparence — boutons, cartes, formulaires, grille, utilitaires — et confiez l'interactivité aux outils natifs d'Angular : @angular/cdk/overlay pour les menus déroulants et les infobulles, Dialog du CDK ou MatDialog pour les modales, l'animation Angular pour les transitions. Vous conservez l'identité visuelle PSud sans jamais laisser deux frameworks se disputer le DOM.
Chargement des ressources

Déclarez la feuille de style dans index.html, ou importez-la depuis le point d'entrée de l'application. Le principe est identique à Angular : il s'agit d'un style global.

La syntaxe du balisage change. React impose className au lieu de class. Le bouton JSX situé en haut de cette page convertit automatiquement tous les extraits de la galerie : activez-le avant de copier. Pensez également à htmlFor à la place de for dans les libellés de formulaire.

Cycle de vie

L'initialisation et le nettoyage se font dans un useEffect, dont la fonction de retour joue le rôle de ngOnDestroy :
```
// React : les classes s'ecrivent className, et le cycle de vie passe par useEffect
import { useEffect, useRef } from 'react';

export function Exemple() {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    const onHide = () => { /* mise a jour de l'etat */ };
    el.addEventListener('hidden', onHide);

    return () => {                       // nettoyage au demontage
      el.removeEventListener('hidden', onHide);
      window.UIkit?.modal(el)?.$destroy(true);
    };
  }, []);

  return (
    <>
      <button className="uk-button uk-button-primary"
              onClick={() => window.UIkit.modal(ref.current).show()}>
        Ouvrir
      </button>
      <div ref={ref} data-uk-modal>
        <div className="uk-modal-dialog uk-modal-body">
          <h2 className="uk-modal-title">Titre</h2>
        </div>
      </div>
    </>
  );
}
```
Les pièges spécifiques
- Le mode strict monte les composants deux fois en développement. Une initialisation UIkit non nettoyée produira donc des doublons visibles uniquement en local : la fonction de retour du useEffect n'est pas optionnelle.
- Les attributs UIkit s'écrivent en version longue. JSX n'accepte pas uk-modal comme attribut nu ; utilisez data-uk-modal, reconnu par UIkit.
- Ne reconstruisez pas le balisage via dangerouslySetInnerHTML pour contourner ces contraintes : React perdrait le contrôle du sous-arbre et les fuites deviendraient difficiles à diagnostiquer.
- Les portails React et les déplacements UIkit se cumulent. Une modale déplacée vers <body> par UIkit, à l'intérieur d'un portail, devient très délicate à nettoyer : préférez alors une modale React native.
Comme pour Angular, l'approche la plus saine sur la durée consiste à conserver le CSS pour l'apparence et à confier l'interactivité aux composants React de votre choix.
Chargement des ressources

Déclaration globale dans index.html ou import dans main.js. Comme Angular, Vue utilise l'attribut class : le balisage de la galerie est directement réutilisable.

Cycle de vie
```

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';

const dlg = ref(null);

onMounted(() => {
  // apres un v-if, attendre le rendu avant d'initialiser
  nextTick(() => UIkit.update(dlg.value));
});

onBeforeUnmount(() => {
  UIkit.modal(dlg.value)?.$destroy(true);
});

const ouvrir = () => UIkit.modal(dlg.value).show();
</script>

<template>
  <button class="uk-button uk-button-primary" @click="ouvrir">Ouvrir</button>
  <div ref="dlg" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
      <h2 class="uk-modal-title">Titre</h2>
    </div>
  </div>
</template>
```
Les pièges spécifiques
- Le rendu n'est pas immédiat. Après un v-if ou une mise à jour de données, le DOM n'existe pas encore au moment où votre code s'exécute : passez par nextTick() avant d'appeler UIkit.
- Les styles scopés n'atteignent pas les éléments internes. Pour ajuster un élément généré par UIkit depuis un composant, utilisez le sélecteur :deep().
- Le composant Teleport et les déplacements UIkit se recoupent. Choisissez l'un ou l'autre pour les modales, jamais les deux simultanément.
- La réactivité ne suit pas les mutations externes. UIkit modifie le DOM sans passer par Vue : n'attendez pas que l'état du composant reflète automatiquement l'ouverture ou la fermeture d'une modale, écoutez les événements UIkit.
```
/* Styles scopes : pour cibler un element UIkit interne, utiliser :deep() */
<style scoped>
:deep(.uk-modal-dialog) { max-width: 720px; }
</style>
```

Design tokens

Extraits en direct du style compilé (couleurs, typo, rayons, ombres). Pour un thème dérivé découplé du live.

CSS custom properties

…

JSON

…

Less variables

…

Polices disponibles

Familles dont les fichiers sont présents sur ce serveur. Une famille peut être installée sans être utilisée sur la page courante : la liste ci-dessous reflète ce qui est disponible, le complément mesuré en bas de section indique ce qui est effectivement rendu dans votre navigateur.

9 famille(s), 215 fichier(s) au total.

alexbrush 6 fichier(s)