Styleguide du site

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

<div class="sr-only">Texte pour les screen reader uniquement</div>

A gauche par défaut

<p>A gauche par défaut</p>

texte centré

<p class="text-center">texte centré</p>

<span class="d-block">span en mode</span> block

<div class="bordure-h"></div>

<div class="bordure-b"></div>

<div class="bordure-l"></div>

<div class="bordure"></div>

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>

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

<div class="d-flex">Flexbox</div>

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

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

<div class="d-flex jc-c" style="border: 1px solid var(--gamme1__texte3);margin-bottom:10px">
    <div>space-center</div>
    <div>item</div>
</div>

<div class="d-flex fw-w">
    <div>flex-wrap: wrap;</div>
    <div>item</div>
</div>

<div class="d-flex fd-c">
    <div>flex-direction: column;</div>
    <div>flex-direction: column;</div>
</div>

<img src="" alt="" loading="lazy" class="fond-clair"/>

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

<p>Défaut, <span class="tw-3">Normal</span></p>

Quatre-cents (400)

<p class="tw-4">Quatre cents</p>

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

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

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

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

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

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>

<img src="" alt="" loading="lazy" class="pa"/>

<div class="w-100">largeur 100%</div>

<div class="w-70">largeur 70%</div>

<div class="w-50">largeur 50%</div>

<div class="w-33">largeur 33.333%</div>

<div class="w-30">largeur 30%</div>

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

• Sommaire

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

• un
• deux
• trois

<ul>
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
</ul>

• un
• deux
• trois

<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"]) }}

• un
• deux
• trois

<ul class="ul-reset">
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
</ul>

1. un
2. deux
3. trois

<ol>
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
</ol>

<div class="px-tranche">
    header ou footer
</div>

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

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

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

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

• 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 width="18px" height="18px" class="fill--mode">
    <use xlink:href="#darkMode"></use>
</svg>

<svg width="18px" height="18px" class="fill--mode var--lien">
    <use xlink:href="#darkMode"></use>
</svg>

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>

<span class="tg1-1 td-1">Menu actif</span>

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>

var(--gamme1__fond)
var(--gamme1__bordure)

var(--gamme1__texte1)
var(--gamme1__texte2)
var(--gamme1__texte3)
var(--gamme1__texte4)

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

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