Site System

Boilerplate zéro dépendances pour créer des sites et landing pages en pur HTML/CSS/JS.

Démarrage rapide

  1. Copiez le dossier site-system/ dans votre projet
  2. Ouvrez core/css/tokens.css et modifiez les couleurs, polices, etc.
  3. Configurez config-site.js avec vos IDs analytics
  4. C'est prêt ! Ouvrez index.html dans votre navigateur

Architecture

site-system/
├── .htaccess                  ← URLs propres (Apache)
├── config-site.js             ← Configuration client (cookies + blog)
├── core/                      ← Framework (ne pas toucher)
│   ├── css/
│   │   ├── tokens.css         ← Charte client (couleurs, polices, etc.)
│   │   ├── base.css           ← Reset + utilitaires
│   │   ├── animations.css     ← Animations scroll + clic
│   │   ├── elements.css       ← Styles éléments interactifs
│   │   ├── forms.css          ← Styles formulaires + toasts
│   │   ├── cookies.css        ← Bandeau cookies
│   │   ├── grid.css           ← Système de grille / bento
│   │   ├── icons.css          ← Styles icônes SVG
│   │   └── blog.css           ← Styles blog (listing, article, lightbox)
│   └── js/
│       ├── components.js      ← Système de composants/slots
│       ├── animations.js      ← IntersectionObserver + clic
│       ├── elements.js        ← Popup, Tooltip, Accordion, Tabs, Slider
│       ├── forms.js           ← Formulaires multi-steps, validation, webhooks
│       ├── params.js          ← Persistance des UTMs + pré-remplissage
│       ├── cookies.js         ← Consentement cookies
│       ├── blog.js            ← Moteur blog Baserow
│       ├── darkmode.js        ← Toggle dark/light mode
│       └── icons.js           ← Système d'icônes SVG inline
├── components/                ← Composants (modifiables)
│   ├── header.js              ← Composant Header
│   ├── footer.js              ← Composant Footer
│   └── card.js                ← Composant Card
├── snippets/                  ← Fragments HTML copier-coller
├── assets/                    ← Images, icônes, logos, polices
│   ├── images/
│   ├── icons/
│   ├── logos/
│   └── fonts/
├── blog.html                  ← Page listing blog
├── blog/
│   └── article.html           ← Page article
├── docs/                      ← Cette documentation
└── index.html                 ← Page de démo

Fonctionnalités

Démarrer un projet

Créer un site, le déployer en production, adapter le boilerplate (avec ou sans blog).

Voir la doc →

Design Tokens

Configurez la charte graphique du client en 30 secondes dans un seul fichier.

Voir la doc →

Composants / Slots

Système de composants réutilisables via slots : Header, Footer, Card, et composants custom.

Voir la doc →

Éléments interactifs

Popup, Tooltip, Accordion, Tabs, Slider (draggable, autoplay, multi-slides).

Voir la doc →

Icônes

324 icônes Heroicons (outline + solid). Chargement SVG inline, animation au survol, copier-coller rapide.

Voir la doc →

Grid / Bento

Système de grille flexible et layouts bento asymétriques. CSS pur, responsive.

Voir la doc →

Formulaires

Multi-steps, logique conditionnelle, champs custom, validation, webhooks.

Voir la doc →

Blog

Blog dynamique connecté à Baserow. Listing, article, galerie lightbox, filtres.

Voir la doc →

Cookies

Bandeau RGPD avec gestion granulaire et injection auto des scripts analytics.

Voir la doc →

Animations

Animations d'entrée au scroll, de sortie, et au clic. Respect prefers-reduced-motion.

Voir la doc →

Paramètres URL

Persistance des UTMs, pré-remplissage des champs depuis l'URL.

Voir la doc →

Sitemap

Génération automatique de sitemap.xml et robots.txt via Node.js.

Voir la doc →

Wireframes

375 sections prêtes à copier-coller : headers, heroes, services, portfolios, FAQs, et bien plus.

Voir la doc →

Conventions

  • BEM : Block__Element--Modifier pour le nommage CSS
  • data-* : Configuration via attributs HTML
  • Aucune dépendance : tout fonctionne en pur JS/CSS/HTML
  • file:// : fonctionne sans serveur web

Inclure dans une page

<!-- CSS (dans le <head>) -->
<link rel="stylesheet" href="core/css/tokens.css">
<link rel="stylesheet" href="core/css/base.css">
<link rel="stylesheet" href="core/css/animations.css">
<link rel="stylesheet" href="core/css/elements.css">
<link rel="stylesheet" href="core/css/forms.css">
<link rel="stylesheet" href="core/css/cookies.css">
<link rel="stylesheet" href="core/css/grid.css">
<link rel="stylesheet" href="core/css/icons.css">
<link rel="stylesheet" href="core/css/blog.css">

<!-- Dark mode (synchrone, avant les CSS) -->
<script src="core/js/darkmode.js"></script>

<!-- JS (dans le <head>) -->
<script src="core/js/components.js"></script>
<script src="components/header.js"></script>
<script src="components/footer.js"></script>
<script src="components/card.js"></script>

<!-- JS interactifs (defer) -->
<script src="core/js/animations.js" defer></script>
<script src="core/js/elements.js" defer></script>
<script src="core/js/forms.js" defer></script>
<script src="core/js/icons.js" defer></script>
<script src="core/js/params.js" defer></script>
<script src="config-site.js" defer></script>
<script src="core/js/blog.js" defer></script>
<script src="core/js/cookies.js" defer></script>