Design DSFR pour SPIP

Mis à jour le lundi 15 avril 2024 , par Guillaume Allemann

Qu’est-ce que le Système de Design de l’État (DSFR) ?

Ce projet est le volet numérique de la marque de l’État, qui permet pour les citoyens d’avoir une cohérence graphique et une meilleure expérience à travers l’ensemble des sites de l’État. Le Système de Design de l’État regroupe un ensemble de composants réutilisables, répondant à des standards et à une gouvernance, pouvant être assemblés pour créer des sites Internet accessibles et ergonomiques

Le squelette DSFR pour SPIP

Ce plugin SPIP permet de mettre en place rapidement et facilement la charte de l’état sur votre site web d’établissement ou disciplinaire.
Disponible sur les fermes SPIP de l’académie de Guyane, ce nouveau squelette sera déployé sur l’ensemble des sites académiques des disciplines, des établissements et des services institutionnels au cours de l’année scolaire 2024-2025.

Simple surcharge du squelette natif de SPIP, ce plugin ne nécessite que les plugins Agenda, Saisie pour formulaires, Critère mots et Sélection d’articles.

La mise en page de la page d’accueil est configurable et personnalisable par l’utilisation de mots clés (voir infographie ci-dessous)

Liste des mots clés du squelette DSFR

DSFR_Menu :
permet d’afficher une rubrique dans le menu de navigation

DSFR_Bandeau :
permet de créer un bandeau. Le document (image) qui a le mot clé, va apparaitre en fond. L’article et son logo vont venir se positionner par dessus. La taille idéale de l’image pour le bandeau est 1920x640.

DSFR_CallOut :
met en avant 1 article avec logo, titre et descriptif

DSFR_Carousel :
permet de créer un diaporama de 1 à 3 articles. L’image de fond est le logo de l’article. On affiche aussi le titre et une description ou introduction. La taille idéale des logos est 1200x500.

DSFR_A_la_une :
affiche jusqu’à 4 articles sous forme de carte horizontale avec logo, titre, surtitre et sous-titre. Le descriptif du mot clé est utilisé comme titre de la section sur la page d’accueil

L’actualité, les derniers articles sont par page de 4 sur une ligne si l’on n’affiche pas l’agenda. Si l’agenda est affiché, on affiche alors 6 articles sur 2 lignes.

DSFR_LienRapide :
permet d’afficher jusqu’à 6 articles sous forme de tuile verticale. On affiche le logo (carré) le titre et le sous-titre.

DSFR_Site_institutionnel :
en pied de page, on affiche le titre (en lien) des sites références

DSFR_Partenaire_Gauche :
permet d’affiche le logo d’un seul site dans la partie gauche partenaires.

DSFR_Partenaire_Droite :
permet d’afficher plusieurs logos de sites dans la partie droite partenaires

Dans la même rubrique