Utilisateur:Trizek/Brouillon/Charte
Dans le cadre du projet aide et accueil, plusieurs pages ont été revues suivant une charte graphique nouvelle, basée sur la future charte graphique de Wikipédia (projet Athena).
Structuration d'une page modifier
Cadre d'introduction, en-tête de la page modifier
Une page est présentée par un cadre à fond gris, avec une marge large. Le titre bleu à pour but d'attirer l’œil. Il est suivi par un résumé des points abordés dans la page ou des recommandations. A droite se trouve un cadre de conseils.
La création de l'en-tête d'une page d'aide se fait via une classe CSS englobant l'ensemble des éléments décrits dans cette section : .aa-cadre
Cadre principal modifier
.aa-cadre-principal
Fond
.aa-fond
Le fond met en avant le titrage et les conseils à venir. Il est gris clair à liseré gris foncé.
Titrage
.aa-titre
Le titre de la page est bleu, basé sur un titre de niveau 2 (<h2>). La typographie est plus importante que le texte standard afin de faire ressortir le contenu.
Texte additionnel
Le texte additionnel du cadre principal est légèrement plus important que le texte standard, en noir. Il permet d'afficher des informations complétant le titre ou résumant la page. Sa mise en forme est incluse dans la classe CSS .aa-cadre-principal.
Cadre secondaire modifier
.aa-cadre-secondaire
Le cadre secondaire est destiné à mettre en avant un conseil ou un avertissement lié au cadre principal. Ce cadre est optionnel.
Le texte est le wikitexte par défaut.
Les titres sont réalisés avec la balise <strong>, associée en fonction du contenu à la couleur idoine.
Texte principal modifier
Le texte principal fonctionne comme un texte classique d'article Wikipédia.
Intertitres modifier
Les intertitres sont assurés par le wikicode des titres.
Texte par défaut modifier
Le texte est celui par défaut.
Cadres particuliers modifier
Astuces modifier
Relief modifier
Le modèle {{relief}} permet de mettre en avant un élément de contenu.
Encarts modifier
Le modèle {{encart}} permet de mettre en avant un élément à prendre en compte dans un cas spécifique (accessibilité, travaux, etc.)
Pied de page modifier
Questions guides modifier
Éléments utiles modifier
Icônes modifier
Boutons modifier
Codes couleur modifier
Les couleurs sont à utiliser avec parcimonie afin que leur sens ne soit pas dévoyé.
- Blanc : par défaut pour les fonds
- Blanc : par défaut pour les textes
- Rouge : avertissement ou erreur
.aa-rouge - Vert : validation
.aa-vert - Bleu : mise en avant d'un contenu
.aa-bleu - Gris clair : fonds pour la mise en valeur
.aa-gclair - Gris foncé : bordures et éléments non activés
.aa-gfonceou.aa-inactif