Styleguide du site
5 septembre 2021Les composants
- Affichage (Bloc)
- Alignement (Texte)
- Bloc
- Bordure (Décoration)
- Citation (Texte)
- Couleur (Texte)
- Disposition
- Flexbox (Bloc)
- Fond (Image)
- Formulaire (Bloc)
- Graisse (Texte)
- Grille (Bloc)
- Hauteur de ligne (Texte)
- Image
- Largeur (Bloc)
- Lien (Texte)
- Liste (Texte)
- Marge (Bloc)
- Markdown
- Pagination (Texte)
- Position
- Scroll-x (Bloc)
- SVG (Image)
- Taille (Texte)
- Texte (Texte)
- Titre (Texte)
- Palette de couleur (Gamme)
-
Affichage — Bloc
Caché<div class="hide">Caché</div>
Texte pour les screen reader uniquement<div class="sr-only">Texte pour les screen reader uniquement</div>
-
Alignement — Texte
A gauche par défaut
<p>A gauche par défaut</p>
texte centré
<p class="text-center">texte centré</p>
-
Bloc
span en mode block<span class="d-block">span en mode</span> block
-
Bordure — Décoration
Haut<div class="bordure-h"></div>
Bas<div class="bordure-b"></div>
Gauche<div class="bordure-l"></div>
Bordure<div class="bordure"></div>
-
Citation — Texte
Accusamus commodi cumque ea excepturi expedita facilis, quisquam sed soluta voluptas voluptatum!
Lorem ipsum<blockquote> <p>Accusamus commodi cumque ea excepturi expedita facilis ...</p> <cite>Lorem ipsum</cite> </blockquote>
-
Couleur — Texte
Une : Texte courant
Deux : Texte secondaire, légende image, date, bloc scroll horizontal
Trois : Lien
Quatre : Titre de niveau 2, Citation, puce des liste non ordonnée
<p class="tg1-1">Une : Texte courant</p> <p class="tg1-2">Deux : Texte secondaire, légende image, date, bloc scroll horizontal</p> <p class="tg1-3">Trois : Lien</p> <p class="tg1-4">Quatre : Titre de niveau 2, Citation, puce des liste non ordonnée</p>
-
Disposition
Sur un sommaire, par exemple, répartis la liste sur deux colonnes en small-only
<ul class="ul-sommaire cc2-so"> <li><a class="tg1-1 td-0 tw-4" href="#">un</a></li> <li><a class="tg1-1 td-0 tw-4" href="#">deux</a></li> <li><a class="tg1-1 td-0 tw-4" href="#">trois</a></li> <li><a class="tg1-1 td-0 tw-4" href="#">quatre</a></li> <li><a class="tg1-1 td-0 tw-4" href="#">cinq</a></li> </ul>
-
Flexbox — Bloc
Flexbox<div class="d-flex">Flexbox</div>
space-betweenitem<div class="d-flex jc-sb"> <div>space-between</div> <div>item</div> </div>
space-centeritem<div class="d-flex jc-c"> <div>space-center</div> <div>item</div> </div>
align-items:
centeritem<div class="d-flex jc-c" style="border: 1px solid var(--gamme1__texte3);margin-bottom:10px"> <div>space-center</div> <div>item</div> </div>
flex-wrap: wrap;item<div class="d-flex fw-w"> <div>flex-wrap: wrap;</div> <div>item</div> </div>
flex-direction: column;flex-direction: column;<div class="d-flex fd-c"> <div>flex-direction: column;</div> <div>flex-direction: column;</div> </div>
-
Fond — Image
Thème sombre : Fond clair + padding
Thème clair : transparent sans padding<img src="" alt="" loading="lazy" class="fond-clair"/>
-
Formulaire — Bloc
<input type="text" placeholder="type text"/>
<textarea placeholder="Textarea"></textarea>
<button class="bouton">Bouton</button>
<button class="bouton-icon"> <svg class="fill--mode" width="24px" height="24px" aria-hidden="true"> <use xlink:href="#loupe"></use> </svg> </button>
<div class="pr"> <input type="search" class="search js--rechercheInput" placeholder="Que recherchez-vous ?" aria-label="Que recherchez-vous ?" /> <button type="button" class="bouton-icon pa-cr" title="Lancer la recherche"> <span class="sr-only">Lancer la recherche</span> <svg class="fill--mode" width="24px" height="24px" aria-hidden="true"> <use xlink:href="#loupe"></use> </svg> </button> </div>
-
Graisse — Texte
Texte courant
300 - Trois-cents (défaut)400 - Quatre-cents
700 - Sept-cents, strong<span class="tw-3">300 - Trois-cents (Normal)</span> <p class="tw-4">400 - Quatre-cents</p> <span class="tw-7">700 - Sept-cents</span>, <strong>strong</strong>
Couleur quatre
500 - Cinq-cents (défaut)
700 - Sept-cents, strong
<p class="tg1-4">500 - Cinq-cents (défaut)</p> <p class="tg1-4"><span class="tw-7">700 - Sept-cents</span>, <strong>strong</strong></p>
-
Grille — Bloc
Medium down : Les colonnes font 100% et sont espacé de $espace-m
Large : La deuxième colonne est de la taille indiqué moins la taille de la gouttière $espace-mColonne 1Colonne 2<div class="d-flex"> <div class="w-">Largeur du contenu</div> <div class="w-">Largeur du contenu</div> </div>
Colonne 1Colonne 2<div class="d-flex"> <div class="w-50">Colonne 1</div> <div class="w-50">Colonne 2</div> </div>
Colonne 1Colonne 2<div class="d-flex"> <div class="w-70">Colonne 1</div> <div class="w-30">Colonne 2</div> </div>
Colonne 1Colonne 2Colonne 3<div class="d-flex"> <div class="w-33">Colonne 1</div> <div class="w-33">Colonne 2</div> <div class="w-33">Colonne 3</div> </div>
-
Hauteur de ligne — Texte
Zero neuf
Zero neuf
Zero neuf<p class="th-09">Zero neuf</p>
Normal
Normal
Normal<p>Normal</p>
Deux
Deux
Deux<p class="th-2">Deux</p>
-
Image
Empêche que l'image soit flout
<img src="" alt="" loading="lazy" class="pa"/>
-
Largeur — Bloc
largeur 100%<div class="w-100">largeur 100%</div>
largeur 70%<div class="w-70">largeur 70%</div>
largeur 50%<div class="w-50">largeur 50%</div>
largeur 33.333%<div class="w-33">largeur 33.333%</div>
largeur 30%<div class="w-30">largeur 30%</div>
-
Lien — Texte
<a href="#">Lien primaire</a> <a href="0" rel="external">Lien primaire externe</a> <a class="lien-niveau2" href="#">Lien secondaire</a> <a class="lien-niveau2" href="0" rel="external">Lien secondaire externe</a>
<ul class="ul-sommaire"> <li><a class="lien-niveau2" href="#">Sommaire</a></li> </ul>
<a href="#" class="tg1-1 td-0">Lien de couleur "une"</a>
La lien d'évitement est affiché au focus en absolute en haut à gauche
<a href="#contenu" class="lien-evitement">Lien évitement</a>
<a href="#" class="tg1-1 tw-7">Menu header niveau 1</a> <a href="#" class="tg1-1">Menu header niveau 2</a> <a href="#" class="tg1-1 td-0">Menu footer</a>
<a class="bouton sticky-retour js--go-top-btn" href="#contenu" title="Retour en haut de page">Retour en haut</a>
-
Liste — Texte
Liste standard de contenu
- un
- deux
- trois
<ul> <li>un</li> <li>deux</li> <li>trois</li> </ul>
Liste pour sommaire
<ul class="ul-sommaire"> <li class="mb-xs"> <a href="#" class="lien-niveau2"> un </a> </li> <li class="mb-xs"> <a href="#" class="lien-niveau2"> deux </a> </li> <li class="mb-xs"> <a href="#" class="lien-niveau2"> trois </a> </li> </ul>
{{ macro.sommaire(["Un", "Deux", "Trois"]) }}
Liste sans style — Reinitialisé
- un
- deux
- trois
<ul class="ul-reset"> <li>un</li> <li>deux</li> <li>trois</li> </ul>
Liste numéroté
- un
- deux
- trois
<ol> <li>un</li> <li>deux</li> <li>trois</li> </ol>
-
Marge — Bloc
Espacement standard
Haut Droite Bas Gauche Haut et Bas 120px mb-xl
60px mb-l
30px pt-m
mr-m
mb-m
15px mb-s
pl-s
py-s
7px mr-xs
mb-xs
Conteneur header et footer
header ou footer<div class="px-tranche"> header ou footer </div>
Enfant d'un conteneur
S'applique aux enfants direct, quelle que soit la balise, sauf au premier enfant
123<div class="d-flex mr-m__enfant"> <div>1</div> <div>2</div> <div>3</div> </div>
123<div class="d-flex ml-s__enfant"> <div>1</div> <div>2</div> <div>3</div> </div>
-
Markdown
Ajouté la classe CSS
oumarkdown
à la balise du conteneurSur la page utilisant le
layout-standard.njk
ajoutémarkdown: "true"
-
Pagination — Texte
Pagination pour la recherche : utilise listjs.com
Cette recherche impose les classe CSSpage
,active
,disabled
et interdit l'utilisation depagination
sinon plus rien ne fonctionne !<ul class="ul-reset d-flex ai-c ts-l mr-m__enfant"> <li> <a class="page lien-niveau2" href="#" data-i="1" data-page="3">1</a> </li> <li class="disabled"> <a class="page lien-niveau2" href="#">...</a> </li> <li> <a class="page lien-niveau2" href="#" data-i="4" data-page="3">4</a> </li> <li> <a class="page lien-niveau2" href="#" data-i="5" data-page="3">5</a> </li> <li class="active"> <a class="page lien-niveau2" href="#" data-i="6" data-page="3">6</a> </li> <li> <a class="page lien-niveau2" href="#" data-i="7" data-page="3">7</a> </li> <li> <a class="page lien-niveau2" href="#" data-i="8" data-page="3">8</a> </li> <li class="disabled"> <a class="page lien-niveau2" href="#">...</a> </li> <li> <a class="page lien-niveau2" href="#" data-i="10" data-page="3">10</a> </li> </ul>
-
Position
position relative<div class="pr">position relative</div>
-
Scroll-x — Bloc
- 1111111111111111111111111111111111111111
- 2222222222222222222222222222222222222222
- 3333333333333333333333333333333333333333
Légende si nécessaire
<ul class="ul-reset scroll-x mb-xs"> <li>un</li> <li>deux</li> <li>trois</li> </ul> <p class="tg1-2 mb-s"> <em>Légende si nécessaire</em> </p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
<ul class="ul-reset scroll-x var--90 mb-xs"> <li>un</li> <li>deux</li> <li>trois</li> </ul>
-
SVG — Image
Coloration selon le thème
<svg width="18px" height="18px" class="fill--mode"> <use xlink:href="#darkMode"></use> </svg>
Changement de couleur au survol
<svg width="18px" height="18px" class="fill--mode var--lien"> <use xlink:href="#darkMode"></use> </svg>
-
Taille — Texte
Tres grand
Grand
Normal, Strong
Petit
<p class="ts-xl">Tres grand</p> <p class="ts-l">Grand</p> <p>Normal, <strong>Strong</strong></p> <p class="ts-s">Petit</p>
-
Texte — Texte
Menu actif<span class="tg1-1 td-1">Menu actif</span>
-
Titre — Texte
Nom du site - header
<p class="ts-xl tg1-1 tw-4 th-09">Nom du site - header</p>
Niveau 1
Niveau 2
Niveau 3
Texte courant
Niveau 4
<p class="ts-xl tg1-1 tw-4">Niveau 1</p> <p>Texte courant</p> <p class="ts-s tg1-2 tw-4">Niveau 4</p>
{{ macro.h2("Niveau 2") }} {{ macro.h2("Niveau 2", "16/08/2021") }} {{ macro.h3("Niveau 3") }} {{ macro.h3("Niveau 3", "16/08/2021") }}
-
Palette de couleur — Gamme
Gamme 1 — Base
Fond principal
Bordure
Texte courant
Texte secondaire, légende, date, rubrique
Lien
Titre, puce, citation
var(--gamme1__fond) var(--gamme1__bordure) var(--gamme1__texte1) var(--gamme1__texte2) var(--gamme1__texte3) var(--gamme1__texte4)
Gamme 2 — Sélection de texte
FondTextevar(--gamme2__fond) var(--gamme2__texte1)
Gamme 3 — Démo de code simple et Formulaire
FondBordureTextePlaceholder formulairevar(--gamme3__fond) var(--gamme3__bordure) var(--gamme3__texte1) var(--gamme3__texte2)