Introduction

Cauri est le design system de la BDU. Il réunit ce qu'il faut pour construire des interfaces fidèles à l'identité de la banque : un thème, des composants et leur documentation.

Ce que contient le paquet

Fichiers du paquet
Fichier	Rôle
`dist/cauri.min.css`	La feuille de style complète : Bootstrap 5.3 et le thème BDU.
`dist/cauri.bundle.min.js`	Le JavaScript des composants interactifs : modale, menu déroulant, menu mobile.
`dist/cauri.js`	Les comportements propres à BDU, comme le simulateur de prêt.
`scss/`	Les sources Sass, pour personnaliser le thème.
`tailwind-preset.cjs`	Un preset Tailwind avec les mêmes couleurs et les mêmes rayons.
`dist/SRI.txt`	Les empreintes d'intégrité à renseigner dans les balises CDN.
`THIRD-PARTY-LICENSES.md`	Les licences des logiciels libres embarqués.

Démarrage rapide

Ajoutez la feuille de style dans le <head> et le script avant la fermeture de <body>. Ce gabarit est une page complète prête à l'emploi.

Page minimale#

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ma page BDU</title>
  <link rel="stylesheet" href="https://cdn-cauri.wanetech.com/v0.1.0/cauri.min.css">
</head>
<body>
  <main class="container py-5">
    <h1 class="cauri-title">Bonjour</h1>
    <p class="lead">Cette page utilise Cauri.</p>
    <a class="btn btn-primary" href="#">Découvrir</a>
  </main>
  <script src="https://cdn-cauri.wanetech.com/v0.1.0/cauri.bundle.min.js"></script>
</body>
</html>

JavaScript

La modale, le menu déroulant et le menu mobile s'appuient sur le JavaScript de Bootstrap, inclus dans cauri.bundle.min.js avec Popper. Le simulateur de prêt demande en plus cauri.js. Les autres composants fonctionnent sans JavaScript.

Navigateurs pris en charge

Les dernières versions de Chrome, Edge, Firefox et Safari, sur ordinateur et sur mobile. Internet Explorer n'est pas pris en charge.

Ce que Cauri réutilise

Cauri repose sur une base éprouvée de composants et de classes utilitaires, sous licence libre MIT (voir Licences). Tout est documenté ici : la grille, les utilitaires, les formulaires et les composants. Cauri y ajoute la palette, la typographie, des composants de marque et la personnalisation en Sass.

Et ensuite

Installation : CDN, npm, Sass et Tailwind.
Composants : aperçu, code et règles d'usage.
Sass : adapter le thème sans écraser de CSS.