Styleguide - site Ressources du Pidila

Identité visuelle

Couleurs

Couleurs principales du site

    • $body-color

    • $headings-color

    • $primary-color

    • $secondary-color

    • $secondary-color-a11y

    • $piyellow

    • $pigreen

Couleurs des alertes

    • $info-color

    • $success-color

    • $warning-color

    • $danger-color

Nuances de gris

  • $gray-1

  • $gray-2

  • $gray-3

  • $gray-4

  • $gray-5

  • $gray-6

  • $gray-7

  • $gray-8

  • $gray-9

  • $gray-10

Fontes

La police de caractères Open Sans est utilisée sur l'ensemble du site, à l'exception du titre de la page d’accueil, qui utilise la police bebas.

  • Open Sans Regular
  • Open Sans Italic
  • Open Sans Semibold
  • Open Sans Semibold Italic

Pangramme

Un pangramme (du grec ancien πᾶς / pâs (« tout ») et γράμμα / grámma (« lettre »)) est une phrase comportant toutes les lettres de l’alphabet.

En français, un pangramme comporte au moins 26 lettres. Il doit en compter au moins 42 si on compte les lettres accentuées et les ligatures (à, â, é, è, ê, ë, î, ï, ô, ù, û, ü, ÿ, ç, æ et œ). Si l’on peut atteindre la limite théorique en recourant massivement aux abréviations et aux sigles, le talent consiste à construire une phrase cohérente la plus courte possible, sans lettres solitaires, ni abréviation ou sigle.

Icônes

Éléments de contenu courants

Typographie

Titre de niveau h1 (page ou article)

Chaque page web est identifiée par un titre, unique dans le site. C’est le titre de premier niveau du document. Il est balisé par l’élément HTML h1. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Titre de niveau h2

Le titre ci-dessus est de niveau 2, balise <h2>. Il s’utilise après un élément <h1>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Titre de niveau h3

Le titre ci-dessus est de niveau 3, balise <h3>. Il s’utilise après un élément <h2>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Titre de niveau h4

Le titre ci-dessus est de niveau 4, balise <h4>. Il s’utilise après un élément <h3>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Titre de niveau h5

Le titre ci-dessus est de niveau 5, balise <h5>. Il s’utilise après un élément <h4>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Titre de niveau h6

Le titre ci-dessus est de niveau 6, balise <h6>. Il s’utilise après un élément <h5>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Tout paragraphe est marqué par l’élément HTML <p>. L’idée principale doit être exprimée clairement au début du paragraphe. Les autres phrases servent à expliquer et à illustrer le message qu’on veut transmettre. Bref, un paragraphe pour chaque idée et une idée par paragraphe.
Ici, retour à la ligne, avec l’élément <br>. Espace insécable.

Second paragraphe. Selon la norme typographique adoptée, la première ligne d’un paragraphe peut être en retrait (alinéa rentrant). Sur un document électronique comportant de nombreux paragraphes courts, on évite parfois ce retrait pour le remplacer par une ligne vierge, détachant mieux les paragraphes et les prêtant ainsi mieux à la lecture rapide.


Troisième paragraphe, précédé d’une ligne horizontale de séparation <hr>. La lecture sur écran est fastidieuse et provoque rapidement de la fatigue oculaire. Il est donc recommandé d’aérer le texte : faire des paragraphes courts et sauter une ligne entre chaque.

  • <q> : citation au fil du texte
  • <cite>  : titre d’œuvre

Voici une citation ordinaire, avec la balise HTML <blockquote>, où la source est précisée avec <footer> :

Mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.

Tim Berners-Lee, inventeur du Web.
  • Rouge tomate, chaud et dynamisant
  • Vert sapin, naturel et équilibrant
  • Bleu océan, profond et reposant
  • Jaune soleil, vif et réjouissant
  1. Coupez les tomates et la mozzarella en fines tranches ;
  2. Intercalez les tranches ;
  3. Arrosez d'un filet d’huile d’olive ;
  4. Parsemez de basilic fraîchement haché.
Internet
Réseau informatique international qui connecte les ordinateurs entre eux, tout comme le réseau routier relie les villes entre elles. Ce réseau propose trois types de services fondamentaux : le courriel, le Web et l’échange de fichiers.
Web
Le World Wide Web est le système hypertexte permettant de visiter des pages sur le réseau Internet.
  • Rouge
  • Orange
    • Dans la nature
      • Courges
        • Citrouille
        • Potiron
      • Carotte
      • Abricot
    • Objets frabriqués
      • Mimolette
      • Feu clignotant
      • Robe des moines boudhistes
  • Jaune
  • Vert
  • Bleu
  • Indigo
  • Violet
  1. Premier item
  2. Deuxième item
  3. Troisième item
  4. Quatrième item
  5. Cinquième item
    1. Premier
    2. Deuxième
      1. Premier
      2. Deuxième
        1. Premier
        2. Deuxième
        3. Troisième
      3. Troisième
    3. Troisième
  6. Sixième item
  7. Septième item
  • le niveau 1 est une ul
  • les éléments d’une liste dans une phrase commencent par une minuscule et se terminent par une virgule, sauf le dernier élément qui, s’il termine la phrase, prend un point.
    1. Le niveau 2 est une ol
    2. Avec du texte long, pouvant s’écouler sur plusieurs lignes. Les éléments d’une liste formée de plusieurs phrases se comportent comme des alinéas (majuscule en début, point à la fin).
      • Troisième niveau (ul)
        • Chat
          1. Quatrième niveau (ol)
          2. Kiki la Doucette
        • Chien
        • Perruche
      • Troisième niveau
      • Troisième niveau
    3. deuxième item de niveau 2
  • dernier item de niveau 1

Les hyperliens <a> doivent être visuellement distingués du reste du contenu autrement que par la couleur. Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.

Par convention, sur les sites de la DILA les liens externes s’ouvrent dans une nouvelle fenêtre (ou onglet). Ils sont suivis d’une icône spécifique et le title du lien comporte l’intitulé + la mention "- Nouvelle fenêtre".

Les liens de téléchargement doivent comporter soit directement dans le texte, soit dans le title du lien, la mention du format et du poids du document téléchargé.

Lorsqu’elle diffère de la page d’origine, la langue de la cible est renseignée dans l’attribut HTML hreflang="".

Tableaux

Autrefois employé pour mettre en page, l’élément HTML <table> n’est pas stylé par défaut. Utilisez systématiquement le sélecteur CSS .table et les éléments associés — <tbody>, <thead>, <tr>, <td>, <th> — pour baliser les tableaux de données. Indiquez un titre via l’élément <caption>.

Titre du tableau
entête R V B
footer footer footer footer
Red 255 0 0
Green 0 255 0
Blue 0 0 255
Titre du tableau contenu idem au summary
Entête Entête Entête
Entête Valeur Valeur Valeur
Entête Valeur Valeur Valeur
Entête Valeur Valeur Valeur
Entête Valeur Valeur Valeur
Entête Valeur Valeur Valeur
Entête Valeur pouvant courir sur plusieurs lignes, pourquoi pas ? Valeurs qui permettront de tester l’affichage des tableaux sur les mobiles Valeur
Entête Valeur Valeur Valeur

Médias

Image / Figure

Le Bouche à Oreilles, Metz, juin 2012 - Voir la description détaillée en-dessous de la légende

Illustration 1 Le Bouche à Oreille, Metz, juin 2012 Crédit : Anna Fedorovna Salon de thé`"Le Bouche à Oreille" à Metz - juin 2012"

Description longue

Le salon de thé est décoré dans le style rétro des années 30. Des casseroles et des brocs sont pendus au plafond et du linge est étendu sur une ficelle.

Boutons et formulaires

Boutons

Bouton primaire

Bouton secondaire

Barre de boutons

Éléments de formulaire

Les champs marqués d'un * sont obligatoires.

Cette adresse ne sera jamais communiquée à d’autres que nous.
Poids maximum 1Mo.
Choix multiples
Choix multiples (inline)
Choix multiples avec fieldset non apparent
Choix unique
Choix unique (inline)

Messages

Composants

Cards

Outils de home

Une checklist unique regroupant les critères des différents référentiels que nous respectons sur nos sites : RGAA, Charte internet de l'État, écoconception, bonnes pratiques…

Cette liste peut être filtrée par métier, étape de projet, référentiel et est assortie d'une extension pour Firefox permettant des contrôles automatiques.

Autres cards de home

Gestion de projet

  • Clauses modèles pour les appels d'offre
  • Description des livrables attendus pour les prestations web
  • Modèles de contenus rédactionnels
  • Le rôle de l'expert dans la vie d'un projet

Features Scampi

Adaptable

Un module, rwd-utils, permet d'adapter la taille de base des caractères et la largeur des éléments en fonction des largeurs d'écran.

Focus

Titre

Contenu.