Documentation 📖
Tout ce qu'il faut savoir pour utiliser, personnaliser et comprendre rapidement la structure de DevStarter Kit.
Introduction
DevStarter Kit est une bibliothèque de templates HTML, CSS et JavaScript vanilla, conçue pour les développeurs web débutants et intermédiaires francophones.
L'objectif est simple : vous fournir des composants professionnels, prêts à copier-coller, pour que vous puissiez vous concentrer sur l'apprentissage plutôt que sur la réinvention permanente des mêmes éléments de base.
Zéro dépendance. Tous les templates fonctionnent avec un fichier HTML vierge. Pas de npm, pas de build tool, pas de CDN externe requis.
Ce que contient le kit
📦 DevStarter Kit v1.0 ├── 5 templates Navbar (Simple, Centrée, CTA, Dashboard, Glassmorphism) ├── 5 templates Footer (Simple, 3 colonnes, Social, Newsletter, Entreprise) ├── 10 templates Cards (Product, Profile, Pricing, Blog, Testimonial…) ├── 6 templates Forms (Login, Register, Contact, Newsletter, Search, Checkout) └── Système de design (variables CSS, dark mode, animations, responsive)
Installation
Aucune installation requise. Trois méthodes selon votre contexte :
Méthode 1 — Téléchargement direct Recommandé
Méthode 2 — Git clone
git clone https://github.com/devstarterkit/devstarter-kit.git
cd devstarter-kit
# Ouvrir index.html dans votre navigateurMéthode 3 — Copier un template seul
Vous n'avez besoin que d'un seul composant ? Naviguez vers la page correspondante (ex : navbar.html), cliquez sur Copier sous le template voulu, et collez le HTML + CSS dans votre projet. C'est tout.
Pour un template isolé, pensez à aussi copier les variables CSS depuis css/variables.css dans votre propre feuille de style. Sans elles, les couleurs et espacements ne s'appliquent pas correctement.
Structure des fichiers
Le projet suit une architecture modulaire simple, organisée par responsabilité :
Copier un template
Chaque template de la bibliothèque est présenté avec ses onglets HTML et CSS (et JS quand nécessaire). Voici comment l'intégrer dans votre projet :
Si votre template s'affiche sans mise en forme, c'est presque toujours parce que les variables CSS sont manquantes. Copiez le contenu de css/variables.css en tête de votre feuille de style.
Mode sombre
Le dark mode est géré par le module js/darkmode.js. Il utilise l'attribut data-theme sur la balise <html> et les préférences système.
Fonctionnement
// L'ordre de priorité est :
// 1. Préférence sauvegardée (localStorage)
// 2. Préférence système (prefers-color-scheme)
// 3. Mode clair par défaut
// Pour activer manuellement dans votre code :
DarkMode.apply('dark'); // forcer le mode sombre
DarkMode.apply('light'); // forcer le mode clair
DarkMode.toggle(); // basculerRendre un composant dark-mode compatible
Utilisez les variables CSS du système. Elles basculent automatiquement :
/* ✅ Bon — s'adapte automatiquement */
.ma-carte {
background: var(--bg-card);
color: var(--text);
border: 1px solid var(--border);
}
/* ❌ Mauvais — valeur fixe, cassée en dark mode */
.ma-carte {
background: #ffffff;
color: #1A1A2E;
}Ajouter le bouton toggle
<!-- Le script darkmode.js lie automatiquement tout bouton .dark-toggle -->
<button class="dark-toggle" aria-label="Basculer le thème">🌙</button>Responsive design
Tous les templates sont responsive. Le fichier css/responsive.css définit trois breakpoints :
| Nom | Largeur | Sélecteur CSS | Usage typique |
|---|---|---|---|
| Mobile | < 640px | max-width: 640px | Smartphones portrait |
| Tablet | 640px – 1024px | max-width: 1024px | Tablettes, petits laptops |
| Desktop | > 1024px | min-width: 1025px | Écrans standards et larges |
.ma-grille {
display: grid;
grid-template-columns: repeat(3, 1fr); /* desktop : 3 colonnes */
gap: var(--space-6);
}
@media (max-width: 1024px) {
.ma-grille { grid-template-columns: repeat(2, 1fr); } /* tablet */
}
@media (max-width: 640px) {
.ma-grille { grid-template-columns: 1fr; } /* mobile */
}Variables CSS
Toutes les variables sont définies dans css/variables.css sur :root. Les valeurs dark mode sont surchargées sur [data-theme="dark"].
Couleurs
| Variable | Valeur (light) | Usage |
|---|---|---|
| --primary | #6C63FF | Couleur principale, liens, boutons |
| --primary-light | #8B85FF | Hover, états actifs |
| --primary-dark | #4B44D6 | Focus, pressed |
| --secondary | #0FCCCE | Accent secondaire, dégradés |
| --accent | #FF6584 | Badges, alertes, CTA alternatifs |
| --bg | #F7F8FC | Fond de page |
| --bg-card | #FFFFFF | Fond des cartes et panels |
| --text | #1A1A2E | Texte principal |
| --text-muted | #6B7280 | Texte secondaire, descriptions |
Espacements
| Variable | Valeur | Pixels equiv. |
|---|---|---|
| --space-2 | 0.5rem | 8px |
| --space-3 | 0.75rem | 12px |
| --space-4 | 1rem | 16px |
| --space-6 | 1.5rem | 24px |
| --space-8 | 2rem | 32px |
| --space-12 | 3rem | 48px |
| --space-16 | 4rem | 64px |
| --space-24 | 6rem | 96px |
Border radius
| Variable | Valeur | Usage |
|---|---|---|
| --radius-sm | 6px | Petits éléments, badges |
| --radius-md | 12px | Boutons, inputs |
| --radius-lg | 20px | Cartes standard |
| --radius-xl | 28px | Grandes cartes, modals |
| --radius-full | 9999px | Pills, avatars, chips |
Classes utilitaires
Un ensemble de classes d'usage fréquent disponibles sur toutes les pages :
| Classe | Propriété CSS |
|---|---|
| .container | max-width 1200px, centré, padding horizontal |
| .section | padding vertical 6rem (var(--space-24)) |
| .section--sm | padding vertical 4rem (var(--space-16)) |
| .grid-2 / .grid-3 / .grid-4 | CSS Grid 2, 3 ou 4 colonnes égales |
| .grid-auto | auto-fill, colonnes min 280px |
| .flex-center | flex + align-items + justify-content: center |
| .flex-between | flex + align-items: center + justify-content: space-between |
| .gradient-text | Texte avec dégradé primary → secondary |
| .glass | backdrop-filter blur + fond semi-transparent |
| .hover-lift | translateY(-4px) + shadow au hover |
| .reveal | Animation d'apparition au scroll (IntersectionObserver) |
| .btn-ripple | Ajoute un effet ripple au clic |
| .skeleton | Animation de chargement shimmer |
Animations
Les animations sont définies dans css/animations.css. Utilisez les classes directement sur vos éléments :
| Classe | Effet | Délais disponibles |
|---|---|---|
| .animate-fade-in | Apparition en fondu | .delay-100 à .delay-800 |
| .animate-fade-in-up | Apparition par le bas | |
| .animate-fade-in-down | Apparition par le haut | |
| .animate-fade-in-left | Apparition depuis la gauche | |
| .animate-scale-in | Apparition avec zoom | |
| .animate-float | Flottement vertical continu |
<h1 class="animate-fade-in-up">Titre</h1>
<p class="animate-fade-in-up delay-200">Paragraphe</p>
<a class="animate-fade-in-up delay-400">Bouton</a>Toutes les animations respectent prefers-reduced-motion. Si l'utilisateur a activé la réduction de mouvement dans son OS, les animations sont désactivées automatiquement.
Modules JavaScript
Le JavaScript est organisé en modules IIFE exposés sur window. Chaque module a une responsabilité unique.
| Fichier | Module | Responsabilité |
|---|---|---|
| main.js | — | Init globale, navbar scroll, mobile menu, scroll-top, reveal, tabs, accordion, compteurs |
| darkmode.js | DarkMode | Toggle thème, persistance localStorage, sync système |
| copy.js | Copy | Copie clipboard, feedback bouton, effet ripple |
| search.js | Search, Filters, FilterGrid | Recherche temps réel, filtres par chips, masquage de cartes |
| data.js | TEMPLATES_DATA | Catalogue centralisé des templates (données JSON) |
L'ordre de chargement des scripts est important : darkmode.js en premier (évite le flash), puis copy.js, search.js, data.js, et main.js en dernier.
Copy API
Le module Copy expose trois méthodes publiques :
// Copier du texte + feedback visuel sur le bouton
await Copy.copyText('texte à copier', boutonElement);
// Auto-init : lie tous les .copy-btn à leur .code-block parent
// (appelé automatiquement par main.js)
Copy.initCopyButtons();
// Ajouter l'effet ripple sur les boutons .btn-ripple
Copy.initRipple();Ajouter un bouton copier à votre propre bloc de code
<!-- Structure attendue par Copy.initCopyButtons() -->
<div class="code-block">
<div class="code-block__header">
<span class="code-block__lang">CSS</span>
<button class="copy-btn">📋 Copier</button>
</div>
<pre><code>.ma-classe { color: red; }</code></pre>
</div>Toast notifications
Le module Toast est exposé globalement par main.js. Il crée automatiquement le conteneur si absent.
// Afficher une notification
Toast.show('Message copié !', 'success');
Toast.show('Erreur réseau', 'error');
Toast.show('Mise à jour disponible', 'info');
Toast.show('Attention !', 'warning');
// Durée personnalisée (ms, défaut : 3000)
Toast.show('Sauvegardé', 'success', 5000);Standards de code
Règles à respecter pour que votre code soit cohérent avec le reste du projet :
HTML : Balises sémantiques obligatoires (nav, article, section, main…). Attributs aria-label sur les éléments interactifs sans texte visible. Indentation 2 espaces.
CSS : Nommage BEM strict. Variables CSS du système uniquement (pas de valeurs hardcodées). Préfixe du bloc en cohérence avec le fichier HTML. Pas de !important.
JavaScript : ES6+ uniquement. Fonctions nommées et commentées. Pas de var, utiliser const et let. Délégation d'événements préférée aux listeners individuels.
Convention BEM
Tout le CSS de DevStarter Kit suit la méthodologie BEM (Block Element Modifier) :
/* Block — composant autonome */
.product-card { }
/* Element — partie du block (séparateur : __) */
.product-card__image { }
.product-card__title { }
.product-card__price { }
.product-card__btn { }
/* Modifier — variante du block ou element (séparateur : --) */
.product-card--featured { } /* carte mise en avant */
.product-card__btn--lg { } /* grand bouton */Ne jamais imbriquer les sélecteurs BEM. .block__element est une classe autonome, pas un sélecteur descendant .block .element. Cela garantit la portabilité des composants.