Site Système

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 du framework dans votre projet
2. Ouvrez core/css/tokens.css et modifiez les couleurs, polices, etc.
3. Configurez config-site.js (nom du site, favicon, analytics, domaines)
4. C'est prêt ! Ouvrez index.html dans votre navigateur

Par où commencer ?

Choisissez votre parcours selon votre besoin :

Architecture

mon-projet/
├── .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)
│   ├── loader.js              ← Import automatique (1 ligne = tous les CSS + JS)
│   ├── 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)
│   │   └── interactions.css   ← Styles interactions déclaratives
│   └── 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)
│       └── interactions.js    ← Interactions déclaratives (click, hover, scroll…)
├── 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, métadonnées médias)
├── pages/                     ← Pages du site
│   ├── index.html             ← Page d'accueil
│   ├── blog.html              ← Page listing blog
│   ├── blog/
│   │   └── article.html       ← Page article
│   ├── mentions-legales.html  ← Mentions légales (auto-générée)
│   ├── confidentialite.html   ← Politique de confidentialité (auto-générée)
│   ├── css/                   ← Styles custom du projet
│   └── js/                    ← Scripts custom du projet
├── wireframes/                ← 375+ sections HTML prêtes à l'emploi
├── docs/                      ← Cette documentation
├── configurateur/             ← Configurateur visuel (site builder)
└── 404.html                   ← Page d'erreur (racine, convention Apache)

Fonctionnalités

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

Inclure dans une page

Une seule ligne suffit grâce au loader :

<script src="../core/loader.js"></script>

Le loader (core/loader.js) charge automatiquement tous les CSS et JS du framework. Il détecte la profondeur de la page pour calculer les chemins relatifs. Plus besoin de lister 20+ imports individuels.

Il charge dans l'ordre :

1. CSS : tokens, base, grid, forms, elements, animations, text-anim, icons, blog, cookies, legal, interactions
2. JS synchrones : darkmode, config-site, site, components
3. JS deferred : forms, elements, animations, text-anim, icons, blog, cookies, params, form-embed, legal, content, interactions

Les composants du projet (header.js, footer.js) restent en import séparé :

<script src="../core/loader.js"></script>
<script src="../components/header.js"></script>
<script src="../components/footer.js"></script>

Voir Démarrer un projet — Loader pour le détail.