Site System

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

Démarrage rapide

Copiez le dossier site-system/ dans votre projet
Ouvrez core/css/tokens.css et modifiez les couleurs, polices, etc.
Configurez config-site.js (nom du site, favicon, analytics, domaines)
C'est prêt ! Ouvrez index.html dans votre navigateur

Par où commencer ?

Choisissez votre parcours selon votre besoin :

Site vitrine simple

Une landing page ou un site de quelques pages, sans blog ni formulaire.

Démarrer un projet
Personnaliser les tokens
Configurer header & footer
Mettre en page avec Grid / Bento
Copier-coller des sections
Ajouter des animations
Mettre en place les cookies (obligatoire RGPD)
Configurer les pages légales via LEGAL_CONFIG (obligatoire)
Mettre en production

Site avec blog

Tout ce qui précède + un blog dynamique connecté à Baserow.

Parcours « Site vitrine » ci-dessus
Configurer le blog
Générer le sitemap

Site avec formulaires

Tout ce qui précède + formulaires multi-étapes avec envoi par email.

Parcours « Site vitrine » ci-dessus
Créer des formulaires
Pré-remplissage par URL

Architecture

site-system/
├── .htaccess                  ← URLs propres + sécurité (Apache)
├── .env                       ← Variables serveur (CORS, tokens API) — non versionné
├── .deploy.env                ← Config SSH de déploiement — non versionné
├── .rsync-exclude             ← Fichiers exclus du déploiement rsync
├── config-site.js             ← Configuration client (site, cookies, blog, legal)
├── deploy.sh                  ← Script de déploiement rsync/SSH
├── 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
│       └── site.js            ← Favicon + titre par défaut (depuis SITE_CONFIG)
├── 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/
├── api/                       ← Endpoints PHP (proxy Baserow, consentement, formulaires)
│   ├── baserow.php            ← Proxy API Baserow (CORS)
│   ├── consent.php            ← Enregistrement consentement RGPD
│   └── form.php               ← Proxy webhook formulaires
├── data/                      ← Données serveur (CSV consentements)
├── 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

Prérequis

HTML/CSS : connaître les bases (balises, classes, propriétés CSS)
Éditeur de code : VSCode recommandé (avec l'extension Live Server)
Navigateur moderne : Chrome, Firefox, Safari ou Edge
Node.js : uniquement pour la génération du sitemap (optionnel)
Serveur Apache + PHP : uniquement pour la production (blog, formulaires, cookies)

Glossaire

Terme	Définition
Design tokens	Variables CSS centralisées (`--color-primary`, `--text-lg`, etc.) qui définissent la charte graphique. Modifiez-les dans `tokens.css` pour changer tout le design.
BEM	Convention de nommage CSS : `.block__element--modifier`. Exemple : `.card__title--large`.
Slots	Mécanisme pour injecter du contenu dans un composant. On définit des `<template data-slot="nom">` dans le HTML.
Composant	Bloc HTML réutilisable (header, footer, card) défini en JS via `registerComponent()` et utilisé via `data-component="nom"`.
data-*	Attributs HTML personnalisés utilisés pour configurer le comportement des éléments sans écrire de JS. Ex : `data-popup-target`, `data-icon`.
Wireframe	Section HTML prête à l'emploi (hero, FAQ, portfolio...) à copier-coller dans vos pages.
Webhook	URL qui reçoit les données d'un formulaire par POST. Utilisé avec Make.com pour envoyer des emails.
Proxy PHP	Script côté serveur (`api/*.php`) qui transmet les requêtes à des services externes (Baserow, Make.com) en masquant les tokens d'API.
Baserow	CMS headless (base de données en ligne) utilisé comme back-end pour le blog. Similaire à Airtable.
RGPD / CNIL	Règlementation européenne/française sur la protection des données. Impose le consentement avant dépôt de cookies.

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>