Les indications contenues dans ce type de bloc (class="sg-comment") sont destinées aux développeurs. Les retirer en production.

Styleguide - site Ressources du Pidila

Identité visuelle

Couleurs

Couleurs principales du site

    • $body-color

    • $headings-color

    • $primary-color

    • $secondary-color

    • $piyellow

    • $pigreen

Couleurs des alertes

Nuances de gris

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
  • Bebas
  • Bebas bold

Variables scss et font-stacks :

  • $opensans: opensans, arial, sans-serif;
  • $bebas: bebas, georgia, serif;
  • $serif: Georgia, "Times New Roman", Times, serif;
  • $sans-serif: $opensans, arial, sans-serif;
  • $mono: "Andale mono","Courier New", Courier, mono;

Pangramme

Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.

Logos outils PiDILA

class="svg-picto" - macro.picto('name',baseURL)

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.

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

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

Tableau simple

Palette Pidila
Nom variable Valeur hexa Usage
$body-color #363740 Texte courant
$primary-color #2b2e4a Fond boutons d’action principale
$secondary-color #da3b39 Titres h1, h2, h3
$piyellow #f0c825 Passages de code sur fond sombre

Effet au survol

Liste des cinq communes de France les plus peuplées (2016)
Commune Département Région Habitant·e·s
1 Paris Paris Île-de-France 2 190 327
2 Marseille Bouches-du-Rhône Provence-Alpes-Côte-d'Azur 862 211
3 Lyon Rhône Auvergne-Rhône-Alpes 515 695
4 Toulouse Haute-Garonne Occitanie 475 438
5 Nice Alpes-Maritimes Provence-Alpes-Côte-d'Azur 342 637

Fonds alternés

Résultat du baccalauréat 2029
Nom élève Prénom élève Lycée Note Admission
Abassy Bakaye Jean Mermoz 12.68 Admis
Agnenou Cyrille Jules Ferry 9.92 Non admis
Antonin Kévin Pablo Néruda 4.26 Non admis

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

Boutons, module de base

La classe `btn` est à ajouter à tous les boutons.

Bouton simple (uniquement la class btn)

Bouton primaire (class btn-primary)

Bouton secondaire (class btn-secondary)

Boutons désactivés (attribut disabled)

Éléments de formulaire

Input text

Input email

Input file

Input range

Texte d'aide

Le mot de passe doit comporter un minimum de 8 caractères avec : au moins une lettre en majuscule, au moins une lettre en minuscule, au moins un chiffre.

Lecture seule

L'attribut readonly ...

Checkboxes

Choix multiples
Choix multiples (inline)

Boutons radio

Choix unique
Choix unique (inline)

Textarea

Select

Select multiple

Messages

Votre messagerie : Vous avez 123 nouveaux messages privés. Accédez à votre boîte de messages.

Composants du projet

Liens d'évitement (skip-link)

En situation dans cette page. Rafraîchir la page et tabuler.

Fil d'Ariane (breadcrumb)

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.