Styleguide du site
5 septembre 2021-
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<p class="tg1-1">Une : Texte courant</p>
Deux : Texte secondaire, légende image, date, bloc scroll horizontal<p class="tg1-2">Deux : Texte secondaire, légende image, date, bloc scroll horizontal</p>
Trois : Lien<p class="tg1-3">Trois : Lien</p>
Quatre : Titre de niveau 2, Citation, puce des liste non ordonnée<p class="tg1-4">Quatre : Titre de niveau 2, Citation, puce des liste non ordonnée</p>
-
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="checkbox" class="hide-checkbox" id="demo"/> <label for="demo">Démo</label>
<input type="text" placeholder="type text"/>
<div class="pr w-50"> <input type="search" class="search js--rechercheBtn" placeholder="Demo..." /> <svg class="pa-cr fill--mode" width="24px" height="24px"> <use xlink:href="#loupe"></use> </svg> </div>
<textarea placeholder="Textarea"></textarea>
<button class="bouton">Bouton</button>
-
Graisse — Texte
Défaut, Normal (300)<p>Défaut, <span class="tw-3">Normal</span></p>
Quatre-cents (400)
<p class="tw-4">Quatre cents</p>
Sept-cents, strong (700)<span class="tw-7">Sept-cents</span>, <strong>strong</strong>
Couleur quatre : défaut (500)
<p class="tg1-4">Couleur quatre : défaut (500)</p>
Couleur quatre : Sept-cents, strong (700)
<p class="tg1-4"><span class="tw-7">Couleur quatre : 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
La lien d'évitement est affiché au focus en absolute en haut à gauche
<a href="#">Lien primaire</a>
intermédiaire
<a href="" rel="external">Lien primaire externe</a>
<a class="lien-niveau2" href="#">Lien secondaire</a>
<a class="lien-niveau2" href="" 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>
<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>
-
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>
Positionné l'icône centré à droite
<div class="pr w-50"> <input type="search" class="search js--rechercheBtn" placeholder="Demo..." /> <svg class="pa-cr fill--mode" width="24px" height="24px"> <use xlink:href="#loupe"></use> </svg> </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
<p class="ts-xl">Tres grand</p>
Grand
<p class="ts-l">Grand</p>
Normal, Strong
<p>Normal, <strong>Strong</strong></p>
Petit
<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 - titre page
<p class="ts-xl tg1-1 tw-4">Niveau 1 - titre page</p>
Niveau 2
<p class="ts-l tg1-4 th-2 tw-4">Niveau 2</p>
{{ macro.h2("Niveau 2") }} {{ macro.h2("Niveau 2", "ancre", "16/08/2021") }} {{ macro.h2("Niveau 2", "", "16/08/2021") }}
Niveau 3
<p class="ts-l mb-s">Niveau 3</p>
{{ macro.h3("Niveau 3") }} {{ macro.h3("Niveau 3", "16/08/2021") }}
Texte courant
<p>Texte courant</p>
Niveau 4
<p class="ts-s tg1-2 tw-4">Niveau 4</p>
-
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)