Guide de styles web standards de ge.ch
Introduction
En complément de la charte graphique le guide de styles (styleguide) porte sur la mise en application de ces éléments pour les projets internet de la République et Canton de Genève.
Il contient notamment les références couleur, les références typographiques ou même liste des iconographies. Le comportement du responsive webdesign y sont automatiquement intégrés.
Pour créer un site web (ou une application web ) l'utilisation du CSS de production permet partager efficacement ce guide de référence pour les projets. Il permet de valider la compatibilité sur les navigateurs et appareils du marché et de garantir la mise à jour de la documentation. La documentation est au coeur de la communication d’un projet. Elle est mise à jour à chaque modification pour toujours refléter l’état actuel des standards de ge.ch.
Ressources utiles
Des modèles sont disponibles pour intégrer les standards des applications -ou- sites devant appliquer ces visuels :
- Entête https://www.ge.ch/templates/4.0/header.html
- Pied de page https://www.ge.ch/templates/4.0/footer.html
- Page https://www.ge.ch/templates/4.0/index.html
Un document complémentaire référence également les principes graphiques :
Index
- Couleurs > Couleurs de base | Couleurs de statut | Autres couleurs | Couleurs du mode sombre
- Typographie > Polices de caractère | Enrichissement et styles | Titres
- Références > Liens | Boutons
- Eléments > Listes | Elément dépliable | Tableaux
- Média > Vidéos
- Modèles > Contact
- Navigation > Fil d'Ariane | Langues | Pagination
Couleurs
Couleurs de base
La palette des couleurs propre au site est assez limitée pour ne pas donner plus d'importance au contenant qu'au contenu. Une série de gris neutre est ajoutée pour segmenter des zones de mise en avant.
primary
#0C6BA8
background
#ffffff
text
#333333
gris1
#ededed
gris2
#e1e1e1
gris3
#b2b2b2
Couleurs de statuts
Quatre couleurs de complément sont définies dans la palette, afin d'indiquer des statuts dans des formulaires et l'importance de messages à direction des aux usagers.
success
#5cb85c
info
#ffffff
warning
#f0ad4e
danger et notifications
#DD1840
Autres couleurs
Couleurs de complément générées.
#13204c
#555555
#777777
#888888
#999999
#cccccc
#f0f0f0
Couleurs du mode sombre
La palette des couleurs principales a été déclinée pour le mode sombre.
background
#1E1E1E
gris 100
#303030
gris 200
#444
gris 300
#6B6B6B
gris 400
#A5A5A5
gris 500
#E1E1E1
text
#EEE
primary
#eee
Usage
La couleur dominante "primary" [#33ab7] est utilisée pour les actions "positives" et les actions "recommandées". Le bouton avec la couleur "primary" garantissent une avance normale d'un processus, la conclusion d'une action ou d'une séquence.
Le bouton "primary" étant le lien le plus important et/ou l'action souhaitée logique, il doit:
- Être le premier bouton dans l'ordre de tabulation des bouton "submit"
- Se trouver à gauche quand deux boutons sont l'un à côté de l'autre.
- Se trouver hors de portée d'une manipulation erronnée (exemple : la navigation au pouce droit sur un écran de mobile, risque de provoquer un clic non souhaité par simple déplacement vertical dans la page).
Exemple
<a class="btn btn-primary" href="https://www.ge.ch/">Bouton d'action</a></div> <a class="btn btn-secondary" href="https://www.ge.ch/">En savoir plus</a></div>
Typographie
Usage
Le site www.ge.ch utilise la police de caractère "Roboto" ainsi que les icônes de la police "Fontawesome". Les différentes graisses de la police Roboto sont utilisées selon le besoin (voir les sections "Titres" et "Enrichissements et styles"). L'interlignage est proportionnel à la taille de la police, avec un ratio de 0.73 pour le paragraphe, et de 0.8 pour les titres.
Exemple
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit. Aliquam risus nisl, condimentum nec eros at, pellentesque blandit ipsum. Suspendisse est eros, finibus sit amet vulputate eu, semper eu eros. Suspendisse in mi nisl. Donec et lorem eu justo tincidunt lacinia. Nam blandit mi et purus imperdie, quis porta enim consectetur. Curabitur et nunc bibendum, vehicula felis et, condimentum ante. Suspendisse interdum orci metus, sit amet condimentum erat sollicitudin a.
Morbi efficitur blandit lacus a tristique. Proin gravida, quam vitae hendrerit lacinia, nulla magna ultricies nibh, eget consequat mauris ex at dui. Praesent vitae mi ut felis sodales posuere et ut ligula. Nam ultrices aliquet imperdiet. Duis eu euismod augue, vel ornare velit. Nunc ac sapien nec lacus consectetur bibendum. In non elit rhoncus, ornare augue ac, venenatis neque. In a eros ultrices mi convallis aliquam in vitae urna.
<h5> Lorem ipsum </h5> <p> Dolor sit amet, consectetur adipiscing elit. Aliquam risus nisl, condimentum nec eros at, pellentesque blandit ipsum. Suspendisse est eros, finibus sit amet vulputate eu, semper eu eros. Suspendisse in mi nisl. Donec et lorem eu justo tincidunt lacinia. Nam blandit mi et <strong>purus imperdie</strong>, quis porta enim consectetur. Curabitur et nunc bibendum, vehicula felis et, condimentum ante. Suspendisse interdum orci metus, sit amet condimentum erat sollicitudin a. </p> <div class="exergue"> Integer sagittis scelerisque elit, eget tincidunt sapien interdum. </div> <p> <small> Morbi efficitur blandit lacus a tristique. Proin gravida, quam vitae hendrerit lacinia, nulla magna ultricies nibh, eget consequat mauris ex at dui. Praesent vitae mi ut felis sodales posuere et ut ligula. Nam ultrices aliquet imperdiet. Duis eu euismod augue, vel ornare velit. Nunc ac sapien nec lacus consectetur bibendum. In non elit rhoncus, ornare augue ac, venenatis neque. In a eros ultrices mi convallis aliquam in vitae urna. </small> </p>
Enrichissements et styles
Les enrichissements typographique sont autorisés dans la limite de ce que propose l'éditeur WYSIWYG.
- Normal
- Lorem ipsum
- Gras
- Lorem ipsum
- Italique
- Lorem ipsum
- Souligné
- Lorem ipsum
- Indice inférieur
- Lorem ispum factor
- Indice supérieur
- Lorem auctor libero
- Espace insécable
- Lorem ispum
- Style de texte exergue
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Style en ligne insécable
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Style encart
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Normal</p> <strong>Gras</strong> <em>Italique</em> <u>Souligné</u> Indice <sub>inférieur</sub> Indice <sup>supérieur</sup> <span class="edg-cke-nbsp">Espace insécable</span> <div class="exergue">Style de texte exergue</div> <span class="edg-cke-nbsp">Style en ligne insécable</span>
Titres
Chaque page internet doit comporter un unique titre H1. Puis, pour les titres suivants e la page, il faut utiliser les autres titres dans l'ordre incrémental: H2, H3, etc.
Titre de taille H1
Titre de taille H2
Titre de taille H3
Titre de taille H4
Titre de taille H5
Titre de taille H6
<h1>Titre de taille H1</h1> <h2>Titre de taille H2</h2> <h3>Titre de taille H3</h3> <h4>Titre de taille H4</h4> <h5>Titre de taille H5</h5> <h6>Titre de taille H6</h6>
Usage
Les critères relatifs à la bonne utilisation du titre d’un lien sont basés sur les règles d'Opquast.
Exemples
- Lien vers le site externe
- https://www.ch.ch
- Lien vers une adresse e-mail
- mon-destinataire@son-fai.ch
- Liens vers une autre section de la page courante
- Retour en haut
- Lien vers un page interne
- Document
- Lien vers la prestation e-démarche anonyme
- Prestation e-démarche anonyme
- Lien vers les réseaux sociaux
- Facebook X-twitter Instagram Linkedin
<a href="http://ch.ch/">https://www.ch.ch</a> <a href="mailto:mon-destinataire@son-fai.ch?subject=Le%20sujet%20de%20mon%20message%20(optionnel)&body=Corps%20de%20mon%20message%20(optionnel)" title="Descriptif de l'action">mon-destinataire@son-fai.ch</a> <a href="#Liens">Retour en haut</a> <span class="document tag"><a href="/document/6025/telecharger" target="_blank" type="application/pdf" title="Document">Document<span class="far fa-file-pdf"></span></a></span> <a aria-label="Lien vers la prestation e-demarche" class="e-demarche-logo col-12" href="/node/1"><span>Prestation e-démarche anonyme</span></a> <a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-facebook-square fab"> </span><span>Facebook</span></a> <a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-twitter-square fab"> </span><span>Twitter</span></a> <a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fab fa-instagram-square"> </span><span>Instagram</span></a> <a class="social-link no-external" href="https://www.facebook.com/semainedemocratiege"><span class="fa-linkedin fab"> </span><span>Linkedin</span></a>
Usage
Les boutons peuvent être créés à partir:
- d'un lien
<a class="btn ...">
- d'un bouton
<button class="btn ...">
- d'un champ "input"
<input class="btn ...">
Exemples
<a class="btn btn-dark">Lien</a> <button class="btn btn-secondary" type="button">Bouton</button> <input class="btn btn-primary" type="submit" value="Champ de soumission">
Tableaux
Usage
Les tables par défaut sont marquées par des filets de séparations horizontales et verticales. De plus, un rang sur deux à une couleur de fond alternée afin de faciliter la lecture.
A noter que les tableaux ne doivent pas servir au montage de contenus; ils sont exclusivement réservés à l'affichage de données tabulaires.
Exemples
Tableau de base
Prénom | Nom | |
---|---|---|
John | Doe | john@example.com |
Marie | Moe | marie@exemple.com |
Julie | dooley | julie@exemple.com |
Tableau dynamique
TITRE | TITRE |
---|---|
data 1 | data 2 |
data 3 | data 4 |
<table class="table table-responsive"> <thead> <tr> <th>Prénom</th> <th>Nom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td><a href="mailto:john@example.com">john@example.com</a></td> </tr> <tr> <td>Marie</td> <td>Moe</td> <td><a href="mailto:marie@exemple.com">marie@exemple.com</a></td> </tr> <tr> <td>Julie</td> <td>dooley</td> <td><a href="mailto:julie@exemple.com">julie@exemple.com</a></td> </tr> </tbody> </table> <table class="table datatables table-responsive"> <thead> <tr> <th>TITRE</th> <th>TITRE</th> </tr> </thead> <tbody> <tr> <td>data 1</td> <td>data 2</td> </tr> <tr> <td>data 3</td> <td>data 4</td> </tr> </tbody> </table>
Listes
Usage
Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Dans le cas des listes ordonnées, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés.
Exemples
Les listes non-ordonnées
- Elément de la liste
- Elément de la liste
- Sous-élément de la liste
- Sous-élément de la liste
- Elément de la liste
- Elément de la liste
- Elément de la liste
Les listes ordonnées
- Elément de la liste
- Elément de la liste
- Elément de la liste
- Elément de la liste
<ul> <li>Elément de la liste</li> <li>Elément de la liste <ul> <li>Sous-élément de la liste</li> <li>Sous-élément de la liste</li> </ul> </li> <li>Elément de la liste</li> <li>Elément de la liste</li> <li>Elément de la liste</li> </ul> <ol> <li>Elément de la liste</li> <li>Elément de la liste</li> </ol>
Elément dépliable
Usage
Les éléments dépliables, également surnommés "boîtes à coucou" sont utilisables dans le contenu. Elles s’activent avec un click sur un lien (titre) qui rend visible un <div>
contenant le contenu.
Plusieurs éléments dépliables peuvent être ouverts simultanément.
Exemple
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor.
<div class="edg-cke-collapsible-item"> <p class="edg-cke-collapsible-item-title"> <a data-toggle="collapse" href="#">Titre du contenu dépliable N1</a> </p> <div class="collapse edg-cke-collapsible-item-collapse"> <p class="edg-cke-collapsible-item-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ut libero et faucibus. Quisque imperdiet sapien venenatis elementum volutpat. Aliquam a ornare velit. Mauris magna erat, vulputate vitae lacus sit amet, aliquet pellentesque nisi. Sed lacus nisl, dictum nec ornare sit amet, auctor at nisi. Donec nec eleifend turpis. Maecenas elementum ut massa et pharetra. Sed convallis non justo sed ultricies. Vivamus venenatis aliquet felis sed vehicula. Cras vel rhoncus risus. Nunc metus libero, convallis non scelerisque vel, egestas vitae tortor. </p> </div> </div>
Media Vidéo
Usage
Les vidéos de l'Etat de Genève sont uploadées sur les serveurs de notre partenaire.
L'URL reflète la structure d'organisation des répertoires. Le format simplifié d'une vidéo comporte à minima les informations suivantes :
- l'URL de la vidéo (format mp4)
- une vignette, de la taille de la vidéo (qui est générée automatiquement)
Exemple
<video data-matomo-title="Charte internet - 3921" controls="controls" poster="https://vod.infomaniak.com/redirect/directiongnraledessystmes_1_vod/deta-transports-39583/mp4-12/lmce_02_2021_hd.jpg"> <source src="https://vod.infomaniak.com/redirect/directiongnraledessystmes_1_vod/deta-transports-39583/mp4-12/lmce_02_2021_hd.mp4" type="video/mp4 "> </video>
ontact
- Bloc de contact : grande carte et adresse (la carte et l'adresse sont facultatives)
- Bloc de contact complet pour un service
- Bloc de contact pour un collaborateur
Exemples
Bloc de contact : grande carte et adresse
Bloc de contact complet pour un service
Adresse
Rue des Gares 16
1201 Genève
Suisse Tél: +41 22 546 36 80
E-mail: info.oce@etat.ge.ch
Heures d'ouverture
Permanence téléphonique
Lundi-Vendredi : 8.00-12.00
Bloc de contact pour une collaborateur
Pour toute information complémentaire
Secrétaire adjointe
Office cantonal de l'emploi (OCE)Case postale 2555
1211 Genève 2
Suisse Tél: +41 22 327 96 07
E-mail: dorothee.zarjevski@etat.ge.ch
<div itemscope="" itemtype="https://schema.org/GovernmentOrganization" class="gech-annuaire gech-annuaire-organisation"> <span itemprop="name" class="hidden">OCSIN - SCLI - Portefeuille clients Transversal, e-démarches</span> <strong> OCSIN - SCLI - Portefeuille clients Transversal, e-démarches </strong> <br> <span itemprop="description" class="hidden"> Service de l'office cantonal des systèmes d'information et du numérique pour le développement de la Plateforme internet de l’État, des intranets et des prestations en ligne </span> <span itemprop="location" itemscope="" itemtype="http://schema.org/Place"> <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress"> Rue du Grand Pré 64-66 Case postale 2285 </span> <br> <span itemprop="postalCode">1211</span> <span itemprop="addressLocality">Genève 2</span> <br> <span class="hidden" itemprop="addressCountry">Suisse</span> </address> </span> Tél: <span itemprop="telephone"> <a href="tel:+41223880001">+41 22 388 00 01</a> </span> <br> <div class="sitg"> <iframe class="SITG_idadresse SITG_idadresse" style="width: 100%;height: 345px;" title="Carte SITG" src="https://ge.ch/tergeo/CarteGE/?webmap=d848e099d45746e5b86003d07ce558c7&marker=6.1323933696622;46.216142429532;test2;;;&maponly=true&disable_scroll=true&level=7" frameborder="0"> </iframe> </div> </div>
<h6>Adresse</h6> <div itemscope="" itemtype="https://schema.org/GovernmentOrganization" class="gech-annuaire gech-annuaire-organisation gech-annuaire-organisation-nomap"> <span itemprop="name" class="hidden">Office cantonal de l'emploi (OCE)</span> <a target="_blank" itemprop="department" href="" data-uo="UO3228"> <strong> Office cantonal de l'emploi (OCE) </strong> </a> <br> <span itemprop="location" itemscope="" itemtype="http://schema.org/Place"> <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">Rue des Gares 16</span><br> <span itemprop="postalCode">1201</span> <span itemprop="addressLocality">Genève</span><br> <span class="hidden" itemprop="addressCountry">Suisse</span> </address> </span> Tél: <span itemprop="telephone"> <a href="tel:+41225463680">+41 22 546 36 80</a> </span> <br> E-mail: <span itemprop="email"> <a href="mailto:info.oce@etat.ge.ch">info.oce@etat.ge.ch</a> </span> <br><br> <h6>Heures d'ouverture</h6> <div itemscope="" itemtype="https://schema.org/GovernmentBuilding"> Lundi-Vendredi : 8.00-16.30<br> Permanence téléphonique<br> Lundi-Vendredi : 8.00-12.00<br> </div> </div>
<div itemscope="" itemtype="http://schema.org/Person"> <span itemprop="name"> <strong> Dorothée <span class="text-uppercase">Zarjevski Wirthner</span> </strong> </span> <br> <span itemprop="jobTitle"> <em>Secrétaire adjointe</em> </span> <br> <span itemprop="worksFor"> <em>Office cantonal de l'emploi (OCE)</em> </span> <address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">Case postale 2555</span><br> <span itemprop="postalCode">1211 </span> <span itemprop="addressLocality">Genève 2</span><br> <span class="hidden" itemprop="addressCountry">Suisse</span> Tél: <a href="tel:+41223279607"> <span itemprop="telephone">+41 22 327 96 07</span> </a> <br> E-mail: <span itemprop="email"> <a href="mailto:dorothee.zarjevski@etat.ge.ch">dorothee.zarjevski@etat.ge.ch</a> </span> </address> </div>
Pagination
<nav aria-labelledby="pagination-heading" class="pager" role="navigation"> <h4 class="visually-hidden" id="pagination-heading">Pagination</h4> <ul class="pagination justify-content-center pager__items js-pager__items"> <li class="page-item pager__item is-active"><a class="page-link" href="?titre=&type=All&dossier=All&organisation=All&field_date_publication_value_1=&field_date_publication_value_2=&page=0" title="Page courante"><span class="visually-hidden"> Page courante </span>1</a></li> <li class="page-item pager__item"><a class="page-link" href="?titre=&type=All&dossier=All&organisation=All&field_date_publication_value_1=&field_date_publication_value_2=&page=1" title="Aller à la page 2"><span class="visually-hidden"> Page </span>2</a></li> <li class="page-item pager__item"><a class="page-link" href="?titre=&type=All&dossier=All&organisation=All&field_date_publication_value_1=&field_date_publication_value_2=&page=2" title="Aller à la page 3"><span class="visually-hidden"> Page </span>3</a></li> <li class="page-item pager__item"><a class="page-link" href="?titre=&type=All&dossier=All&organisation=All&field_date_publication_value_1=&field_date_publication_value_2=&page=3" title="Aller à la page 4"><span class="visually-hidden"> Page </span>4</a></li> <li class="page-item pager__item"><a class="page-link" href="?titre=&type=All&dossier=All&organisation=All&field_date_publication_value_1=&field_date_publication_value_2=&page=4" title="Aller à la page 5"><span class="visually-hidden"> Page </span>5</a></li> <li class="page-item pager__item"><a class="page-link" href="?titre=&type=All&dossier=All&organisation=All&field_date_publication_value_1=&field_date_publication_value_2=&page=5" title="Aller à la page 6"><span class="visually-hidden"> Page </span>6</a></li> <li class="page-item pager__item pager__item--next"><a class="page-link" href="?titre=&type=All&dossier=All&organisation=All&field_date_publication_value_1=&field_date_publication_value_2=&page=1" rel="next" title="Aller à la page suivante"><span class="visually-hidden">Page suivante</span> <span aria-hidden="true">›</span> </a></li> <li class="page-item pager__item pager__item--last"><a class="page-link" href="?titre=&type=All&dossier=All&organisation=All&field_date_publication_value_1=&field_date_publication_value_2=&page=1603" title="Aller à la dernière page"><span class="visually-hidden">Dernière page</span> <span aria-hidden="true">»</span> </a></li> </ul> </nav>
angues
<ul class="language-selector"> <li><a class="btn btn-light active" href="/pics-pollution-stick-air-circulation-differenciee" hreflang="fr">fr</a></li> <li><a class="btn btn-light" href="/en/stick-air-and-differentiated-traffic-scheme" hreflang="en">en</a></li> <li><a class="btn btn-light" href="/de/stick-air-und-der-differenzierte-verkehr" hreflang="de">de</a></li> <li><a class="btn btn-light" href="/it/stick-air-e-circolazione-differenziata-ginevra" hreflang="it">it</a></li> </ul>
Fil d’Ariane
<nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb p-0"> <li class="breadcrumb-item"><a href="/" title="Accueil">Accueil</a></li> <li class="breadcrumb-item"><a href="/dossier" title="Dossiers">Dossiers</a></li> <li class="breadcrumb-item"><a href="/dossier/electromobilite" title="Electromobilité">Electromobilité</a></li> <li class="breadcrumb-item"><a href="/dossier/electromobilite#enjeux-objectifs" title="Enjeux et objectifs">Enjeux et objectifs</a></li> </ol> </nav>