Installation

npm

Le paquet officiel est publié sous le scope @flrxnt. Il convient aux projets disposant d'une chaîne de build (bundler, framework ou outil de gestion des dépendances).

npm install @flrxnt/dsbj

Après installation, référencez la feuille de style et, le cas échéant, le module JavaScript selon les conventions de votre environnement (import ES, require ou copie vers vos assets publics).

Intégration dans un projet existant

Le DSBJ est conçu pour coexister avec votre CSS existant. Tous les styles sont scopés aux classes .bj-* : aucun reset global, aucun style sur body, h1, p, a ou table. Votre interface n'est pas modifiée.

import '@flrxnt/dsbj';

// Utilisez ensuite les composants DSBJ avec les classes .bj-*
// <button class="bj-btn bj-btn--primary">Valider</button>

Seuls les éléments portant une classe .bj-* (et leurs enfants) reçoivent les styles du design système. Le reste de votre application n'est pas affecté.

Projet 100 % DSBJ

Si le DSBJ est le framework principal de votre projet (site institutionnel, portail public), vous pouvez activer le reset CSS global complet qui stylise body, h1-h6, p, a, table, etc.

import '@flrxnt/dsbj';
import '@flrxnt/dsbj/reset'; // Active le reset CSS global

Le reset modifie les styles de tous les éléments HTML. Ne l'utilisez pas si vous intégrez le DSBJ dans une application existante avec son propre CSS.

CDN

Pour une intégration rapide ou des prototypes, le réseau de distribution unpkg sert les fichiers compilés du paquet. Indiquez une version explicite en production afin de garantir la reproductibilité des déploiements.

<link rel="stylesheet" href="https://unpkg.com/@flrxnt/dsbj/dist/dsbj.css">
<script src="https://unpkg.com/@flrxnt/dsbj/dist/dsbj.umd.js"></script>

<!-- Optionnel : reset global pour projets 100% DSBJ -->
<!-- <link rel="stylesheet" href="https://unpkg.com/@flrxnt/dsbj/dist/dsbj-reset.css"> -->

Le fichier UMD s'exécute dans le navigateur sans module loader. Pour les applications basées sur les modules ES natifs, vous pouvez pointer vers dist/dsbj.es.js de la même manière.

Téléchargement

Il est également possible de récupérer les artefacts directement depuis le dépôt du projet ou depuis une archive de version, puis de placer le contenu du répertoire dist/ sur votre serveur ou dans votre dépôt d’assets statiques. Cette approche est adaptée aux sites sans gestionnaire de paquets ou aux environnements contraints.

Structure des fichiers

Le répertoire dist/ regroupe les livrables prêts pour la production.

dsbj.css — styles du design système scopés aux classes .bj-* (composants, utilitaires, thèmes). Compatible avec un CSS existant.
dsbj-reset.css — reset CSS global (opt-in). Stylise body, h1-h6, p, a, table, etc. À importer séparément pour les projets 100 % DSBJ.
dsbj.es.js — entrée au format module ECMAScript ; initialisation automatique au chargement du document lorsque le script est chargé en type="module".
dsbj.umd.js — bundle universel compatible inclusion directe via balise <script> sans module.

Points d'entrée disponibles

Import	Contenu	Usage
`@flrxnt/dsbj`	CSS scopé + JS	Intégration dans un projet existant
`@flrxnt/dsbj/css`	CSS scopé seul	Sans JavaScript
`@flrxnt/dsbj/reset`	Reset CSS global	Projet 100 % DSBJ uniquement
`@flrxnt/dsbj/scss`	Sources SCSS	Personnalisation avancée