Les deux premiers articles de cette série nous ont permis d’installer Wagtail, de créer des pages avec StreamField et d’ajouter une navigation administrable. Le site fonctionne, mais sa couche front reste volontairement minimale. Il est maintenant temps de lui donner une vraie mise en forme.
Wagtail n’impose aucun framework CSS : les templates restent des templates Django classiques et les fichiers statiques sont gérés par Django. Nous pouvons donc utiliser Bootstrap, Tailwind CSS ou écrire notre propre CSS sans changer la façon dont le contenu est administré dans Wagtail.
Bootstrap, Tailwind CSS ou CSS maison ?
Bootstrap
Bootstrap fournit une grille, des utilitaires et de nombreux composants prêts à l’emploi. C’est une solution efficace lorsqu’on veut construire rapidement une interface homogène sans concevoir chaque composant depuis zéro.
Il peut être installé avec npm :
npm install bootstrapLa documentation officielle propose aussi une intégration par CDN, pratique pour un prototype. Pour un projet maintenu dans la durée, une intégration au pipeline de build permet toutefois de mieux maîtriser les fichiers réellement chargés.
Tailwind CSS
Tailwind adopte une approche différente : au lieu de fournir des composants déjà dessinés, il fournit des classes utilitaires que l’on compose directement dans les templates. La version actuelle s’installe notamment avec le CLI officiel :
npm install tailwindcss @tailwindcss/cliLe fichier CSS d’entrée peut ensuite importer Tailwind :
@import "tailwindcss";Puis le CLI génère le fichier CSS final en analysant les classes présentes dans les templates :
npx @tailwindcss/cli -i ./src/input.css -o ./mon_site/static/css/site.css --watchCSS maison
Le CSS maison demande davantage de travail de conception, mais il garde le projet très simple : aucune dépendance front supplémentaire, aucun processus de compilation obligatoire et un contrôle complet sur le rendu.
Choix pour cette série
Pour poursuivre notre projet Wagtail, nous allons utiliser du CSS maison. L’objectif est de conserver un socle léger et de bien séparer Wagtail de la couche de présentation. Bootstrap ou Tailwind pourront être ajoutés plus tard sans modifier les modèles de pages.
Créer la feuille de style
Créons un fichier site.css dans le répertoire des fichiers statiques de notre projet :
mon_site/
└── static/
└── css/
└── site.cssCommençons par quelques variables et règles globales simples :
:root {
--color-text: #18242c;
--color-muted: #60717a;
--color-background: #f8faf9;
--color-surface: #ffffff;
--color-border: #dce5e8;
--color-accent: #087f8c;
--content-width: 760px;
--site-width: 1120px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: system-ui, sans-serif;
line-height: 1.6;
}
body {
margin: 0;
background: var(--color-background);
color: var(--color-text);
}
img {
max-width: 100%;
height: auto;
}
a {
color: var(--color-accent);
}Charger le CSS dans base.html
Le template principal de notre projet se trouve dans mon_site/templates/base.html. Nous y utilisons déjà les template tags static, wagtailcore_tags, wagtailuserbar et menu_tags.
{% load static wagtailcore_tags wagtailuserbar menu_tags %}Dans la balise <head>, chargez ensuite notre feuille de style :
<link rel="stylesheet" href="{% static 'css/site.css' %}">Django se charge alors de résoudre l’URL du fichier statique. En production, ce mécanisme continuera à fonctionner lorsque les fichiers seront servis depuis un répertoire dédié ou un stockage externe.
Donner une structure au site
Ajoutons quelques classes dans base.html pour disposer d’une structure commune à toutes les pages :
<body class="{% block body_class %}{% endblock %}">
<header class="site-header">
<div class="site-header__inner">
<a class="site-title" href="/">Mon site Wagtail</a>
{% main_menu max_levels=1 template="menus/main_menu.html" %}
</div>
</header>
{% block content %}{% endblock %}
{% wagtailuserbar %}
</body>Nous pouvons maintenant définir une largeur générale et une présentation simple de l’entête :
.site-header {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
width: min(calc(100% - 40px), var(--site-width));
margin: 0 auto;
padding: 18px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.site-title {
color: var(--color-text);
font-weight: 700;
text-decoration: none;
}Styliser le menu Wagtail
Dans l’article précédent, notre template mon_site/templates/menus/main_menu.html était volontairement très neutre. Ajoutons maintenant les classes dont nous avons besoin :
{% load menu_tags %}
<nav class="main-nav" aria-label="Navigation principale">
<ul class="main-nav__list">
{% for item in menu_items %}
<li class="main-nav__item {{ item.active_class }}">
<a class="main-nav__link" href="{{ item.href }}">
{{ item.text }}
</a>
</li>
{% endfor %}
</ul>
</nav>Puis ajoutons le style correspondant :
.main-nav__list {
margin: 0;
padding: 0;
display: flex;
gap: 20px;
list-style: none;
}
.main-nav__link {
color: var(--color-text);
font-weight: 600;
text-decoration: none;
}
.main-nav__link:hover,
.main-nav .active .main-nav__link {
color: var(--color-accent);
}Styliser le contenu des pages
Le template standard_page.html créé précédemment affiche les blocs du StreamField dans des éléments portant une classe basée sur leur type, par exemple block-heading, block-paragraph ou block-image. Nous pouvons donc les cibler sans ajouter de logique à nos modèles Python.
.template-standardpage main,
.template-homepage main {
width: min(calc(100% - 40px), var(--content-width));
margin: 64px auto;
}
main h1 {
margin: 0 0 32px;
font-size: clamp(2.4rem, 7vw, 4.5rem);
line-height: 1.05;
}
.block-heading {
margin-top: 48px;
}
.block-paragraph {
color: var(--color-text);
}
.block-image {
margin: 32px 0;
}
.block-image img {
display: block;
width: 100%;
border-radius: 12px;
}Cette approche conserve la responsabilité de la présentation dans le CSS : le contenu reste structuré dans Wagtail, tandis que les modèles Python restent indépendants du design.
Adapter la navigation aux petits écrans
Pour cette première version, un simple retour à la ligne est suffisant. Nous pourrons ajouter plus tard un menu mobile interactif si le projet en a besoin.
@media (max-width: 700px) {
.site-header__inner {
align-items: flex-start;
flex-direction: column;
}
.main-nav__list {
flex-wrap: wrap;
gap: 10px 18px;
}
}Fichiers statiques et production
En développement, Django trouve automatiquement les fichiers statiques lorsque la configuration habituelle du projet Wagtail est utilisée. Lors du déploiement, il faudra rassembler ces fichiers dans le répertoire configuré par STATIC_ROOT :
python manage.py collectstaticLe serveur web — ou un stockage dédié — pourra ensuite servir le CSS, le JavaScript et les images statiques sans faire intervenir Wagtail pour chaque requête.
Et si l’on préfère Bootstrap ou Tailwind ?
La structure mise en place dans les deux premiers articles ne dépend pas du choix réalisé ici. Pour passer à Bootstrap, il suffit principalement d’adapter les classes des templates et de charger ses fichiers CSS et JavaScript. Avec Tailwind, les mêmes templates peuvent recevoir des classes utilitaires et être analysés par le processus de compilation.
C’est l’un des avantages de cette séparation : les modèles Wagtail décrivent le contenu, les templates définissent sa structure HTML et la couche CSS détermine son apparence.
Documentation
Templates et fichiers statiques dans Wagtail 7.4
Installation de Tailwind CSS avec le CLI
Captures d’écrans
Laisser un commentaire