Utilisation
Intégration
Le DSBJ s'intègre dans n'importe quel projet sans affecter les styles existants. Les styles sont scopés aux classes .bj-* : seuls les éléments utilisant ces classes (et leurs enfants) reçoivent les styles du design système.
// Dans votre fichier JS/TS principal
import '@flrxnt/dsbj';
// Le CSS est automatiquement chargé.
// Utilisez les composants avec les classes .bj-*Pour les sites institutionnels où le DSBJ est le framework principal, ajoutez le reset global via @flrxnt/dsbj/reset pour styliser également body, h1-h6, p, a, table, etc.
import '@flrxnt/dsbj/reset';Structure HTML de base
Une page conforme au DSBJ repose sur une hiérarchie sémantique claire : en-tête de service, contenu principal identifiable, pied de page institutionnel. Les polices recommandées et les icônes peuvent être chargées depuis des réseaux de confiance, comme dans l’exemple ci-dessous.
<!DOCTYPE html>
<html lang="fr" data-bj-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon service - République du Bénin</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="chemin/vers/dsbj.css">
<!-- Optionnel : reset global pour projets 100% DSBJ -->
<!-- <link rel="stylesheet" href="chemin/vers/dsbj-reset.css"> -->
</head>
<body>
<header class="bj-header" role="banner">
<!-- Marque de l'État et navigation -->
</header>
<main id="main" role="main">
<!-- Contenu du service -->
</main>
<footer class="bj-footer" role="contentinfo">
<!-- Liens institutionnels et mentions -->
</footer>
<script src="chemin/vers/dsbj.es.js" type="module"></script>
</body>
</html>Préfixe CSS
Toutes les classes livrées par le DSBJ sont préfixées par bj- (par exemple bj-btn, bj-card, bj-header). Cette convention limite les collisions avec les feuilles de style existantes et facilite l’audit de conformité. Les variables de thème suivent le préfixe --bj-.
Grâce au système de scoping, le DSBJ ne modifie aucun élément HTML qui ne porte pas de classe .bj-*. Vous pouvez l’intégrer en toute sécurité dans un projet existant utilisant Bootstrap, Tailwind ou tout autre framework CSS.
Polices
Le DSBJ utilise Montserrat comme police principale. Ajoutez-la dans votre <head> si elle n'est pas déjà chargée :
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">Thème sombre
Le jeu de couleurs sombre s’active en positionnant l’attribut data-bj-theme sur l’élément racine <html>. Vous pouvez l’aligner sur la préférence système de l’utilisateur au moyen d’une requête média CSS.
<html lang="fr" data-bj-theme="dark">Pour suivre la préférence « thème sombre » du système (prefers-color-scheme: dark), adaptez l’attribut lors du chargement et lors des changements de préférence, par exemple :
const mq = window.matchMedia('(prefers-color-scheme: dark)');
function syncThemeFromOs() {
document.documentElement.setAttribute(
'data-bj-theme',
mq.matches ? 'dark' : 'light'
);
}
mq.addEventListener('change', syncThemeFromOs);
syncThemeFromOs();Lorsque l’utilisateur impose un mode dans les paramètres du site, conservez sa valeur (par exemple data-bj-theme="light") et n’écrasez pas ce choix avec la détection système.
Initialisation JavaScript
Lorsque le module dsbj.es.js est chargé dans le navigateur, le script enregistre les comportements interactifs et exécute une initialisation globale au moment du DOMContentLoaded (ou immédiatement si le document est déjà prêt). Les composants concernés s’appuient sur des attributs data-bj-* pour relier le balisage aux gestionnaires d’événements.
Exemples d’attributs : data-bj-header-menu (menu mobile de l’en-tête), data-bj-accordion-btn, data-bj-modal-open, data-bj-tabs, data-bj-toggle. Référez-vous à la documentation des composants pour la liste exhaustive et les valeurs attendues.
Personnalisation
Les couleurs, espacements et typographies sont exposés sous forme de variables CSS. Vous pouvez les redéfinir après l’import de dsbj.css pour adapter l’apparence tout en conservant la structure des composants.
:root {
--bj-action-high: #1a5f3c;
--bj-radius-sm: 6px;
}Pour des ajustements systématiques à la charte d’un ministère, la compilation depuis les sources SCSS et la surcharge des jetons en amont restent les approches recommandées.