comprendre l’Atomic Design avec Django
L’Atomic Design est une méthode pour organiser une interface utilisateur en plusieurs niveaux, du plus petit élément au plus grand.
Avec Django, cette approche est particulièrement intéressante parce que Django utilise des templates HTML réutilisables grâce à l’héritage et à l’inclusion de templates.
L’idée générale est :
Atome → Molécule → Organisme → Template → Page
1. Pourquoi utiliser Atomic Design avec Django ?
Prenons une application Django avec plusieurs pages :
-
Dashboard
-
Utilisateurs
-
Patients
-
Paramètres
-
Profil
Sans organisation, on peut facilement retrouver le même code HTML dans plusieurs fichiers.
Par exemple, le même bouton :
<button class="bg-teal-600 px-4 py-2 rounded-lg text-white">
Enregistrer
</button>
peut être copié dans :
users/create.html
patients/create.html
profile/edit.html
settings.html
Si tu veux modifier le bouton, tu dois rechercher plusieurs endroits.
Avec Atomic Design, on cherche plutôt à créer un composant réutilisable.
2. Le premier niveau : Atom ⚛️
Un Atom est un petit élément d’interface qui possède une fonction simple.
Exemples :
-
bouton
-
champ de saisie
-
icône
-
badge
-
avatar
-
label
Dans Django :
templates/
└── components/
└── atoms/
├── button.html
├── input.html
├── badge.html
└── avatar.html
Par exemple :
<!-- components/atoms/button.html -->
<button
type="{{ type|default:'button' }}"
class="rounded-lg bg-teal-600 px-4 py-2 text-white"
>
{{ label }}
</button>
L’Atom reçoit des données et produit une interface.
On peut ensuite l’utiliser dans un autre template :
{% include "components/atoms/button.html" with label="Enregistrer" %}
Ici, Django permet de réutiliser le même composant.
3. Le deuxième niveau : Molecule 🧬
Une Molecule est un petit groupe d’Atoms qui travaillent ensemble.
Prenons un champ de formulaire.
Il peut contenir :
Label
+
Input
+
Message d’erreur
On peut créer :
templates/
└── components/
├── atoms/
│ ├── input.html
│ └── label.html
│
└── molecules/
└── form-field.html
Exemple :
<div>
<label class="block text-sm font-medium">
{{ label }}
</label>
<input
type="{{ type|default:'text' }}"
name="{{ name }}"
placeholder="{{ placeholder }}"
class="mt-1 w-full rounded-lg border px-3 py-2"
>
</div>
Cette Molecule peut être utilisée dans plusieurs formulaires.
4. Le troisième niveau : Organism
Un Organism est une section plus importante de l’interface.
Il regroupe plusieurs Atoms et Molecules.
Par exemple, une barre de navigation peut contenir :
Navbar
│
├── Logo
├── Search Bar
├── Notification
└── User Menu
On peut avoir :
templates/
└── components/
└── organisms/
├── navbar.html
├── sidebar.html
├── data-table.html
└── login-form.html
Prenons une sidebar :
Sidebar
│
├── Logo
├── Dashboard
├── Utilisateurs
├── Paramètres
└── Déconnexion
La sidebar devient un composant réutilisable par toutes les pages de l’espace d’administration.
5. Le quatrième niveau : Template 📄
Ici, il faut faire attention à une chose importante.
Dans Atomic Design, le Template représente la structure générale d’une page.
Avec Django, on peut très bien utiliser l’héritage des templates.
Par exemple :
templates/
└── base/
├── base.html
├── dashboard.html
└── auth.html
base.html peut contenir la structure générale :
<!DOCTYPE html>
<html lang="fr">
<head>
...
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Puis :
<!-- dashboard.html -->
{% extends "base/base.html" %}
{% block content %}
{% include "components/organisms/sidebar.html" %}
{% include "components/organisms/navbar.html" %}
<main>
{% block dashboard_content %}
{% endblock %}
</main>
{% endblock %}
Le Template définit donc comment les différentes parties de l’interface sont disposées.
6. Le cinquième niveau : Page
La Page est l’interface finale.
Par exemple :
pages/
├── dashboard/
│ └── index.html
│
├── users/
│ ├── list.html
│ ├── create.html
│ └── detail.html
│
└── patients/
├── list.html
└── create.html
Une page peut assembler les différents niveaux :
Page Dashboard
│
↓
Template Dashboard
│
├── Navbar
├── Sidebar
├── Stat Cards
└── Data Table
│
├── Button
├── Badge
└── Avatar
7. Comment tout cela fonctionne avec Django ?
C’est ici que Django devient intéressant.
Django possède plusieurs mécanismes qui permettent cette organisation.
{% include %}
Permet d’insérer un composant :
{% include "components/atoms/button.html" %}
On peut également lui transmettre des données :
{% include "components/atoms/button.html" with label="Ajouter" %}
{% extends %}
Permet de créer une relation entre une page et une base :
{% extends "base/dashboard.html" %}
Puis :
{% block content %}
Contenu de ma page
{% endblock %}
Cela évite de recopier toute la structure HTML.
{% block %}
Permet de définir les zones qu’une page peut modifier.
{% block content %}
{% endblock %}
Une page enfant peut ensuite fournir son propre contenu.
8. Exemple concret
Imaginons une page Liste des utilisateurs.
Elle peut être organisée ainsi :
Page : users/list.html
│
↓
Template : dashboard.html
│
├── Sidebar
├── Navbar
│
└── Contenu
│
├── Search Bar
├── Button
└── Data Table
│
├── Avatar
├── Badge
└── Button
La page finale n’a donc pas besoin de contenir tout le HTML de chaque élément.
Elle assemble les composants nécessaires.
9. Où placer Tailwind CSS ?
Tailwind CSS s’occupe principalement de la présentation visuelle.
Par exemple, ton Atom button.html contient les classes Tailwind :
<button class="rounded-lg bg-teal-600 px-4 py-2 text-white">
{{ label }}
</button>
Django s’occupe de la structure et des données.
Tailwind s’occupe du style.
JavaScript s’occupe des interactions.
On peut donc avoir :
Django
│
└── Templates
│
├── Atoms
├── Molecules
├── Organisms
├── Templates
└── Pages
Tailwind CSS
│
└── Apparence
JavaScript
│
└── Interactions
10. Une structure Django possible
Une organisation simple pourrait être :
templates/
│
├── base/
│ ├── base.html
│ ├── dashboard.html
│ └── auth.html
│
├── components/
│ │
│ ├── atoms/
│ │ ├── button.html
│ │ ├── input.html
│ │ ├── badge.html
│ │ └── avatar.html
│ │
│ ├── molecules/
│ │ ├── search-bar.html
│ │ ├── form-field.html
│ │ └── stat-card.html
│ │
│ └── organisms/
│ ├── navbar.html
│ ├── sidebar.html
│ ├── data-table.html
│ └── login-form.html
│
├── layouts/
│ └── dashboard.html
│
└── pages/
├── dashboard/
│ └── index.html
│
├── users/
│ ├── list.html
│ ├── create.html
│ └── detail.html
│
└── settings/
└── index.html
🧠 Le point important à retenir
Atomic Design ne signifie pas simplement créer cinq dossiers.
Le principe est surtout de réfléchir à la responsabilité de chaque niveau.
| Niveau | Rôle | Exemple |
|---|---|---|
| Atom | Petit élément | Button |
| Molecule | Petit groupe d’éléments | Search Bar |
| Organism | Section complète | Sidebar |
| Template | Structure d’une page | Dashboard Layout |
| Page | Interface finale | Liste des utilisateurs |
Le raisonnement devient alors :
Je crée une petite pièce → je l’assemble avec d’autres pièces → je crée une section → je construis une structure de page → j’obtiens une page complète.
Avec Django, include, extends et block permettent de mettre cette idée en pratique très naturellement.
C’est donc une façon de penser l’architecture du frontend, pas simplement une convention de dossiers.