Guides

Utiliser LSSD UI, pas à pas

Ces guides partent d’un dossier vide et vont jusqu’à la mise en production. Chaque fichier est donné en entier, prêt à copier, et chaque étape se termine par une vérification. Aucune installation n’est nécessaire sur votre ordinateur à part Docker : Python, Node.js et Tailwind tournent dans des conteneurs.

Choisir votre guide

Python

Django

Templates Django, Tailwind CSS avec son outil autonome (sans Node.js), Gunicorn et WhiteNoise en production.

Suivre le guide Django

JavaScript

Next.js

App Router, TypeScript, Tailwind CSS installé par create-next-app, serveur autonome en production.

Suivre le guide Next.js

Une autre stack ? Le principe est le même partout : suivez Prise en main · Installation.

Ce qu’il vous faut

Docker Desktop (Windows ou macOS) ou Docker Engine avec le plugin Compose (Linux). Vérifiez dans un terminal : docker --version puis docker compose version doivent afficher un numéro de version.
Un terminal : PowerShell sous Windows, Terminal sous macOS ou Linux. Les commandes des guides fonctionnent telles quelles dans ces trois terminaux.
Un éditeur de code, par exemple Visual Studio Code.
Une connexion à Internet pour la première construction : Docker télécharge Python ou Node.js, Tailwind et LSSD UI.

Le vocabulaire en trente secondes

Image : un modèle de machine prêt à l’emploi, décrit par le Dockerfile.
Conteneur : une image en marche. Votre site tourne dans un conteneur.
Docker Compose : lance plusieurs conteneurs ensemble, décrits dans compose.yaml. En développement, compose.override.yaml est ajouté automatiquement par-dessus.
Tailwind CSS : lit vos gabarits, repère les classes utilisées (p-4, bg-surface…) et écrit un fichier CSS qui ne contient qu’elles.
LSSD UI : les couleurs, polices et composants LSSD, que Tailwind ajoute à ce fichier CSS.