Changelog 📋
L'évolution du projet, version par version, des premières bases jusqu'au lancement public.
✦ Dernière version : v1.0.0
26 templates · 11 pages · 5 modules JS
🚀
Première version publique stable. Lancement officiel de
DevStarter Kit avec 26 templates, un design system complet,
la documentation, le changelog et les pages du projet. Le
projet passe d'un outil d'apprentissage personnel à une
ressource francophone publique.
●Nouveau
+
Page Documentation complète —
référence CSS variables, guide d'utilisation, API
des modules JS, convention BEM, coloration
syntaxique.
docs.html
+
Page Changelog — historique complet
des versions avec timeline, sidebar de navigation et
légende des types de changements.
changelog.html
+
Pages institutionnelles — À propos,
Contribuer et Contact avec formulaire interactif et
validation JS complète.
+
6 formulaires complets — Login,
Register (force mot de passe), Contact, Newsletter,
Search, Checkout multi-étapes.
forms.html
+
10 templates Cards — Product,
Profile, Pricing, Blog, Testimonial, Feature, Stats,
Service, Team, Dashboard.
cards.html
●Améliorations
↑
Système de variables CSS
refactorisé — ajout de 12 nouvelles variables pour
les ombres, les dégradés et les transitions.
↑
Dark mode étendu à toutes les
previews de templates — les composants intégrés
s'adaptent désormais correctement.
↑
Module FilterGrid — le système de
recherche + filtres est désormais utilisable sur
n'importe quelle grille de cartes.
search.js
✨
Version de pré-lancement. Ajout des templates Footer et
Cards, refonte du système d'animations, introduction du mode
sombre persistant et de l'effet ripple sur les boutons.
●Nouveau
+
5 templates Footer — Simple, 3
colonnes, Social Media, Newsletter, Entreprise.
footer.html
+
Module darkmode.js — persistance
via localStorage, synchronisation avec
prefers-color-scheme, toggle automatique des icônes.
+
Effet ripple sur tous les boutons
.btn-ripple — animation CSS pure, sans
JS supplémentaire.
+
Skeleton loading — classe
.skeleton avec animation shimmer pour
les états de chargement.
+
Bouton scroll-to-top — apparaît
après 400px de défilement, avec animation smooth.
●Améliorations
↑
animations.css entièrement reécrit
— 9 keyframes, 8 classes utilitaires, 8 délais,
support prefers-reduced-motion.
↑
Reveal on scroll via
IntersectionObserver — remplacement de l'ancienne
implémentation scroll-event qui causait du jank.
↑
Responsive amélioré sur mobile —
refonte des breakpoints, correction des overflows
horizontaux sur petits écrans.
●Corrections
!
Correction du flash de contenu non stylisé (FOUC) au
chargement en mode sombre — darkmode.js maintenant
chargé en tête de page.
!
Fix du menu mobile qui restait ouvert lors d'une
navigation entre pages sur iOS Safari.
🔍
Introduction du système de recherche et de filtrage, page
Templates catalogue, et module copy.js avec API clipboard
unifiée.
●Nouveau
+
Page templates.html — catalogue
général avec grille de toutes les cartes, recherche
et filtres par catégorie et niveau.
+
Module search.js — Search
(debounced), Filters (multi-select par chips),
FilterGrid (combine les deux sur une grille).
+
Module copy.js — API unifiée avec
fallback execCommand, feedback visuel "Copié ✔",
copie automatique depuis les
.code-block.
+
Toast notifications — module Toast
dans main.js avec 4 types, animation
d'entrée/sortie, durée configurable.
●Corrections
!
Correction de la scrollbar personnalisée qui
disparaissait sur Firefox — remplacement par des
styles compatibles cross-browser.
🧩
Ajout des 5 templates Navbar avec prévisualisations live,
système d'onglets HTML/CSS, et composants CSS réutilisables.
●Nouveau
+
5 templates Navbar — Simple,
Centrée, CTA, Dashboard, Glassmorphism. Chacune avec
preview live dans la page.
navbar.html
+
Système d'onglets HTML/CSS/JS —
composant tab générique activé par
data-tab et
data-tab-content.
+
components.css — cartes de
features, cartes de catégories, testimonials, CTA
section, steps, breadcrumb.
🏠
Page d'accueil complète avec hero section animée, section
fonctionnalités, catégories, témoignages, statistiques
animées et CTA.
●Nouveau
+
Page d'accueil — hero avec badge,
titre gradient, lead, stats et CTA. 6 feature cards,
6 category cards, 3 testimonials, section steps.
index.html
+
Compteurs animés —
data-counter et
data-suffix sur n'importe quel élément,
animation déclenchée au scroll.
+
Page loader — écran de chargement
avec logo animé, disparaît après le load de la page.
📐
Mise en place du système de design complet : variables CSS,
layout global, navbar du site, footer du site, design tokens
et typographie.
●Nouveau
+
variables.css — 60+ variables CSS :
palette, ombres, radius, espacements, transitions,
polices, dégradés.
+
layout.css — navbar sticky avec
glassmorphism, menu mobile avec hamburger animé,
footer 4 colonnes, hero section.
+
responsive.css — breakpoints mobile
(640px), tablet (1024px), large desktop (1400px).
Support print et prefers-reduced-motion.
+
Police Plus Jakarta Sans — chargée
depuis Google Fonts, distincte et moderne. JetBrains
Mono pour le code.
⚙️
Refactorisation de l'architecture JavaScript en modules
IIFE. Séparation des responsabilités, meilleure
maintenabilité.
●Améliorations
↑
Découpage du monolithe
app.js en 5
modules distincts (main, darkmode, copy, search,
data).
↑
Utilisation de l'IIFE pattern pour éviter la
pollution du namespace global, tout en exposant les
APIs nécessaires sur
window.
●Suppression
−
Suppression de
app.js (remplacé par les
5 modules spécialisés).
🌙
Premier prototype du mode sombre. Définition des couleurs
dark dans des overrides CSS.
●Nouveau
+
Système dark mode basé sur
[data-theme="dark"] avec surcharge des
variables CSS. Support de la préférence système.
+
Transitions fluides entre les thèmes — toutes les
propriétés sensibles transitionnent en 400ms.
📝
Ajout des 3 premiers templates de formulaires (Login,
Contact, Newsletter) avec validation JavaScript basique.
●Nouveau
+
Formulaire Login avec validation email + password,
messages d'erreur inline.
+
Formulaire Contact avec sélecteur de sujet et
validation multi-champs.
+
Formulaire Newsletter compact avec message de succès
animé.
🌱
Premiers fichiers du projet. Les bases sont posées pour
transformer une idée née pendant l'apprentissage autodidacte
en bibliothèque de templates HTML, CSS et JavaScript.
●Nouveau
+
3 navbars HTML/CSS (Simple, Sticky, Mobile) dans un
fichier
index.html unique.
+
Reset CSS minimal et premières variables de couleur.
+
README.md avec instructions d'utilisation.
🔭
Ce qui arrive dans v1.1.0
Fonctionnalités envisagées pour la suite du projet, guidées par les retours de la communauté.
🎯 Hero sections (5 variantes)
🪟 Modal / Dialog
🎠 Slider / Carousel
📊 Tableaux de données
🔔 Banners d'alerte
📍 Tooltips & Popovers
🗂️ Tabs avancés
📅 Datepicker
🤝 Contribuer à v1.1.0 →