Styleguide du site

Affichage — Bloc

<div class="hide">Caché</div>

<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-between

item

<div class="d-flex jc-sb">
    <div>space-between</div>
    <div>item</div>
</div>

space-center

item

<div class="d-flex jc-c">
    <div>space-center</div>
    <div>item</div>
</div>

align-items:
center

item

<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;

<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-m

Colonne 1

Colonne 2

<div class="d-flex">
    <div class="w-">Largeur du contenu</div>
    <div class="w-">Largeur du contenu</div>
</div>

Colonne 1

Colonne 2

<div class="d-flex">
    <div class="w-50">Colonne 1</div>
    <div class="w-50">Colonne 2</div>
</div>

Colonne 1

Colonne 2

<div class="d-flex">
    <div class="w-70">Colonne 1</div>
    <div class="w-30">Colonne 2</div>
</div>

Colonne 1

Colonne 2

Colonne 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

Lien primaire
Lien primaire externe

Lien secondaire
Lien secondaire externe

<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>

Sommaire

<ul class="ul-sommaire">
    <li><a class="lien-niveau2" href="#">Sommaire</a></li>
</ul>

Lien de couleur "une"

<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

Lien évitement

<a href="#contenu" class="lien-evitement">Lien évitement</a>

Menu header niveau 1
Menu header niveau 2
Menu footer

<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>

Retour en haut

<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

1

2

3

<div class="d-flex mr-m__enfant">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

1

2

3

<div class="d-flex ml-s__enfant">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Markdown

Ajouté la classe CSS markdown à la balise du conteneur

ou

Sur la page utilisant le layout-standard.njk ajouté markdown: "true"

Pagination — Texte

Pagination pour la recherche : utilise listjs.com
Cette recherche impose les classe CSS page, active, disabled et interdit l'utilisation de pagination sinon plus rien ne fonctionne !

1
...
4
5
6
7
8
...
10

<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

Fond

Texte

var(--gamme2__fond)
var(--gamme2__texte1)

Gamme 3 — Démo de code simple et Formulaire

Fond

Bordure

Texte

Placeholder formulaire

var(--gamme3__fond)
var(--gamme3__bordure)
var(--gamme3__texte1)
var(--gamme3__texte2)