Installation

Les mêmes fichiers servent à tous les types de projet. Choisissez la méthode qui correspond à votre stack.

HTML, PHP, CMS : CDN

Les fichiers sont servis en versions figées par le CDN de développement. Les empreintes integrity ci-dessous correspondent exactement aux fichiers publiés : le navigateur refuse un fichier modifié. Le simulateur de prêt demande aussi cauri.js.

Balises à copier#

<link rel="stylesheet" href="https://cdn-cauri.wanetech.com/v0.1.0/cauri.min.css" integrity="sha384-5dZjNF4mWKXFP6UehlP9RvH34BPpm9a2RIyP3g4kIZtk62k40TPlOuUP0QXQT9mr" crossorigin="anonymous">
<script src="https://cdn-cauri.wanetech.com/v0.1.0/cauri.bundle.min.js" integrity="sha384-Q/IdJQU/nAQgOR/9wOHOZ/bUF57sA9962erHce3yr735MJyjDJNFUBQnbe1Jf8f7" crossorigin="anonymous" defer></script>
<script src="https://cdn-cauri.wanetech.com/v0.1.0/cauri.js" integrity="sha384-2XKcEFCQ/7gawNAlUXWSWACLtUugc0WpaSVbdx0jLy3f5G2pf4gOrcDqpm0jfqEw" crossorigin="anonymous" defer></script>

React, Vue, Angular

Avec npm, pnpm ou yarn.

Installer#

pnpm add @bdu/cauri

Importer#

import '@bdu/cauri/css';
import '@bdu/cauri/js';
import Cauri from '@bdu/cauri/components'; // simulateur de prêt

Cauri.init(document); // après le rendu du composant

Personnaliser en SCSS

Surchargez un token avant l'import : tous les composants suivent.

Surcharger un token#

$primary: #AA2B2B;
@import "@bdu/cauri/scss/cauri";

Tailwind

Pour les applications déjà en Tailwind : mêmes couleurs, mêmes rayons.

tailwind.config.js#

module.exports = {
  presets: [require('@bdu/cauri/tailwind')],
  content: ['./src/**/*.{html,js,jsx,tsx}'],
};