Même page, même HTML · changez de marque
01 · Le principe
Toutes les marques IPM reposent sur Bootstrap 5.3 pour la grille, les utilitaires et les composants, et sur Font Awesome Free pour les pictos qu'on ne dessine pas soi-même. La marque tient dans un seul fichier de thème, chargé juste après Bootstrap : pour passer de La Libre à la DH, on change une ligne.
C'est la règle pour les marques actuelles et pour celles qui arriveront : même socle, mêmes classes, et un développeur qui connaît un site les connaît tous.
02 · Mise en place
<link rel="stylesheet" href="vendor/bootstrap-5.3.3/bootstrap.min.css">
<link rel="stylesheet" href="vendor/fontawesome-free-6.7.2/css/all.min.css">
<link rel="stylesheet" href="css/ipm-bootstrap-lalibre.css">
<link rel="stylesheet" href="css/mon-projet.css">
<script src="vendor/bootstrap-5.3.3/bootstrap.bundle.min.js" defer></script>Bootstrap complet, version figée en 5.3.3, auto-hébergé. Le poids reste raisonnable : environ 31 Ko pour le CSS
et 24 Ko pour le JavaScript une fois compressés par le serveur. Le mode sombre passe par data-bs-theme="dark" sur la balise html.
03 · Les règles
Dans un projet, on passe par les classes (btn-primary, text-primary, bg-body-tertiary) ou par var(--bs-primary). Une couleur écrite en hexadécimal ne suivra pas la marque.
Bootstrap 5.3 compile ses boutons, cases à cocher, pagination et onglets en bleu. Changer --bs-primary ne suffit pas : le thème les reprend un par un. Ne pas le retirer.
Teasers, lecteur audio, timeline : construits sur la grille et les variables --bs-*, ils changent de marque avec le thème.
Version 6.7.2, incluse dans le kit. Style fa-solid pour l'interface, fa-brands pour les réseaux, comme sur les sites. Icône décorative en aria-hidden="true" ; bouton avec icône seule, un aria-label. Les pictos propres à une marque (abonné, direct) passent avant Font Awesome. Chaque fiche liste les pictos des sites et leur classe.