Installation

Intégrez le DSML dans votre projet en 3 minutes, sans Node.js.

Méthode 1 — CDN Recommandé

La solution la plus rapide. Collez ce snippet dans votre <head> — aucun outil requis.

    
HTML

<!-- DSML Core -->
<link rel="stylesheet" href="https://cdn.dsml.ml/v0.1/dsml.css">

<!-- Icons (optional) -->
<link rel="stylesheet" href="https://cdn.dsml.ml/v0.1/dsml-icons.css">

⚠️ Le CDN cdn.dsml.ml sera disponible à la sortie publique v0.2. En attendant, utilisez la méthode 2 ci-dessous.

Méthode 2 — Fichier local Zéro dépendance

Idéal pour les environnements sans accès internet ou à bande passante limitée.

1. Télécharger le dossier `core/`

    
BASH

# Cloner le dépôt complet
git clone https://github.com/malibub-digital/dsml.git

# Ou télécharger uniquement le dossier core/ (zip)
# https://github.com/malibub-digital/dsml/archive/refs/heads/main.zip

2. Copier `core/css/` dans votre projet

    
BASH

cp -r dsml/core/css/ mon-projet/assets/dsml/
# Optionnel : copier les assets graphiques
cp -r dsml/core/assets/ mon-projet/assets/dsml/assets/

3. Lier dans votre `<head>`

    
HTML

<link rel="stylesheet" href="/assets/dsml/css/dsml.css">
<!-- Icons (optional) -->
<link rel="stylesheet" href="/assets/dsml/css/dsml-icons.css">

Méthode 3 — NPM Bientôt disponible

Publication sur le registre NPM prévue avec la version v0.2.

    
BASH

npm install @dsml/core
# ou
pnpm add @dsml/core

Page minimale complète

Un template HTML prêt à l'emploi respectant la structure DSML.

    
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mon Service Administratif</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/dsml/css/dsml.css">
</head>
<body>

  <!-- Official DSML header -->
  <header class="ml-header ml-header-shrinkable">
    <div class="container">
      <div class="header-top">
        <div class="brand-block">
          <img src="/dsml/assets/logo-mali.svg" alt="Armoiries du Mali" class="ml-header-logo">
          <div class="brand-text">
            <div class="brand-title">RÉPUBLIQUE DU MALI</div>
            <div class="site-title">Mon Service</div>
            <div class="ml-tricolor-bar" aria-hidden="true">
              <div class="green"></div>
              <div class="yellow"></div>
              <div class="red"></div>
            </div>
          </div>
        </div>
      </div>
      <nav class="ml-header-nav" aria-label="Menu principal">
        <a href="/" class="ml-nav-item active">Accueil</a>
        <a href="/demarches" class="ml-nav-item">Démarches</a>
      </nav>
    </div>
  </header>

  <!-- Main content -->
  <main>
    <h1 class="ml-display">Bienvenue</h1>
    <p class="ml-body">Votre service administratif en ligne.</p>
    <a href="/demarches" class="ml-btn ml-btn-primary">Voir les démarches</a>
  </main>

  <!-- Official DSML footer -->
  <footer class="ml-footer" aria-label="Pied de page">
    <div class="container">
      <div class="footer-top">
        <div class="footer-brand">
          <div class="brand-block">
            <div class="ml-flag" aria-hidden="true">
              <div class="green"></div>
              <div class="yellow"></div>
              <div class="red"></div>
            </div>
            <div class="brand-text">
              <div class="brand-title">RÉPUBLIQUE DU MALI</div>
              <div class="brand-motto">Un Peuple – Un But – Une Foi</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="footer-bottom-links">
          <a href="/mentions-legales">Mentions légales</a>
          <a href="/accessibilite">Accessibilité</a>
        </div>
        <div class="footer-credits">Propulsé par le <strong>DSML</strong></div>
      </div>
    </div>
  </footer>

  <script>
    const header = document.querySelector('.ml-header-shrinkable');
    if (header) {
      window.addEventListener('scroll', () => {
        header.classList.toggle('ml-scrolled', window.scrollY > 50);
      }, { passive: true });
    }
  </script>
</body>
</html>