Bac à sable - Composants

Typographie

Titres

h1. Composants 1

h2. Composants 2

h3. Composants 3

h4. Composants 4

h5. Composants 5
h6. Composants 6
Tailles

Élément en très petit

Élément en plus petit

Élément en petit

Élément

Élément en grand

Élément en plus grand

Élément très grand

Voir le code source : 
<span class="smallest">Élément en très petit</span>
<span class="smaller">Élément en plus petit</span>
<span class="small">Élément en petit</span>
<span class="normal">Élément</span>
<span class="big">Élément en grand</span>
<span class="bigger">Élément en plus grand</span>
<span class="biggest">Élément très grand</span>
Styles

Élément en gras

Élément en italique

Élément souligné

Élément barré

Item de Liste

Élément tronqué - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure voluptatum incidunt illum consectetur officia id unde accusantium eaque est, ex!

Élément aligné à gauche

Élément aligné au centre

Élément aligné à droite

Élément flottant à gauche

Élément flottant à droite

Élémentsrépartissur la largeur

Élémentindexé

Élément épinglé

Voir le code source : 
<p class="text-strong">Élément en gras</p>
<p class="text-italic">Élément en italique</p>
<p class="text-underline">Élément souligné</p>
<p class="text-strike">Élément barré</p>
<p><a href="#">Item de Liste</a></p>
<p class="ellipsis">Élément tronqué - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure voluptatum incidunt illum consectetur officia id unde accusantium eaque est, ex!</p>
<p class="align-left">Élément aligné à gauche</p>
<p class="align-center">Élément aligné au centre</p>
<p class="align-right">Élément aligné à droite</p>
<p class="float-left">Élément flottant à gauche</p>
<p class="float-right">Élément flottant à droite</p>
<p class="flex-between"><span>Éléments</span><span>répartis</span><span>sur la largeur</span></p>
<p class="stacked"><span>Élément</span><span class="stack-event stack-right stack-sup stack-circle bgc member">indexé</span></p>
<p class="pinned bgc moderator">Élément épinglé</p>

Couleurs

Pour la démo, les classes de couleurs sont montrées avec la classe .pinned mais fonctionnent avec toute balise html.

La couleur des bordures est prise en compte seulement si l'élément en possède.

Couleur de texte
notice question success warning error administrator moderator member visitor custom-author link-color star logo-color

Couleur de fond transparente
notice question success warning error administrator moderator member visitor custom-author link-color star logo-color

Couleur de fond pleine
notice question success warning error administrator moderator member visitor custom-author link-color star logo-color

Voir le code source : 
<span class="... notice">lorem ipsum</span>
<span class="... bgc notice">lorem ipsum</span>
<span class="... bgc-full notice">lorem ipsum</span>

Media

Images
Images
Images
Image avec légende
Youtube
Vidéo
Audio
Voir le code source : 
// Image
<figure style="max-width:300px">
    <img src="path/to/picture.ext" alt="Images" />
</figure>
<figure style="max-width:300px">
    <img src="path/to/picture.ext" alt="Images" />
    <figcaption>Image avec légende</figcaption>
</figure>


// Lightbox
<a href="path/to/picture.ext" data-lightbox="formatter" data-rel="lightcase:collection" aria-label="Lorem ipsum">
    <img style="max-width: 150px" src="path/to/picture.ext" alt="Lorem ipsum" />
</a>
<a href="path/to/picture.ext" data-lightbox="formatter" data-rel="lightcase:collection" aria-label="Lorem ipsum">
    <img style="max-width: 150px" src="path/to/picture.ext" alt="Sit dolor amet" />
</a>


// Youtube
<div class="media-content" style="width: 800px; height: 450px">
    <iframe class="youtube-player" src="url/to/youtube/embeded/link" allowfullscreen=""> // Resize height="" to the right size
</div>


// Movie
<div class="media-content" style="width: 800px; height: 450px">
    <video class="video-player" controls>
        <source src="path/to/video/file.ext" type="video/mp4" />
    </video>
</div>


// Sound
<audio class="audio-player" controls>
    <source src="path/to/video/audio.ext" />
</audio>

Barre de progression

25%
25%
50%
50%
75%
75%
100%
100%
Voir le code source : 
<div class="progressbar-container" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progressbar-infos">25%</div>
    <div class="progressbar" style="width:25%;"></div>
</div>
Notation
Valeurs possibles

Exemple pour une note de 2.4 sur 5
Voir le code source : 
<div class="notation">
    <span class="stars">
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-100"></span></a>
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-100"></span></a>
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-25"></span></a>
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-0"></span></a>
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-0"></span></a>
    </span>
</div>

Modal

Combien y a-t-il de voyelles dans le mot ordinateur ?
Voir le code source : 
<div class="modal-container">
    <span data-modal="" data-target="target-panel">Élément</span>
    <div id="target-panel" class="modal modal-animation">
        <div class="close-modal" aria-label="Fermer"></div>
        <div class="content-panel">
            <div class="align-right"><a href="#" class="error big hide-modal" aria-label="Fermer"><i class="far fa-circle-xmark" aria-hidden="true"></i></a></div>
            ...
        </div>
    </div>
</div>

Listes

  • Élément
  • Élément
  • Élément
    • Élément
    • Élément
    • Élément
  • Élément
  1. Élément
  2. Élément
  3. Élément
    1. Élément
    2. Élément
    3. Élément
  4. Élément

Explorateur

Explorateur

Arborescence

Voir le code source : 
<div class="explorer">
    <div class="cats">
            <h2>Explorateur</h2>
        <div class="content">
            <ul>
                <li><a id="class_0" href="#"><i class="fa fa-fw fa-folder"></i> Racine</a>
                    <ul>
                        <li class="sub"><a id="class_1" href="#"><i class="fa fa-fw fa-folder"></i> Catégorie 1</a><span id="cat_1"></span></li>
                        <li class="sub">
                            <a class="parent" href="javascript:show_cat_contents(2, 0);">
                                <span class="fa fa-fw fa-minus-square" id="img2_2"></span><span class="fa fa-fw fa-folder-open" id ="img_2"></span>
                            </a>
                            <a class="selected" id="class_2" href="#">Catégorie 2</a>
                            <span id="cat_2">
                                <ul>
                                    <li class="sub"><a href="#"><i class="fa fa-fw fa-folder"></i> Catégorie 3</a></li>
                                    <li class="sub"><a href="#"><i class="fa fa-fw fa-folder"></i> Catégorie 4</a></li>
                                </ul>
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="files">
            <h2>Tree</h2>
        <div class="content" id="cat_contents">
            <ul>
                <li><a href="#"><i class="fa fa-fw fa-folder"></i> Catégorie 3</a></li>
                <li><a href="javascript:open_cat(2); show_cat_contents(0, 0);"><i class="fa fa-fw fa-folder"></i> Catégorie 4</a></li>
                <li><a href="#"><i class="fa fa-fw fa-file"></i> Fichier 1</a></li>
                <li><a href="#"><i class="fa fa-fw fa-file"></i> Fichier 2</a></li>
            </ul>
        </div>
    </div>
</div>
Pagination
Voir le code source : 
<nav class="pagination">
    <ul> // class="light-pagination"
        <li class="pagination-item">
            <a href="#" rel="prev" aria-label="Vers la première page" class="prev-page"><i class="fa fa-angle-left"></i></a>
        </li>
        <li class="pagination-item">
            <a href="#" aria-label="Vers la page 1">1</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="current-page" aria-label="Page courrante">2</a>
        </li>
        <li class="pagination-item">
            <a href="#" aria-label="Vers la page 3">3</a>
        </li>
        <li class="pagination-item">
            <a href="#" rel="next" aria-label="Vers la dernière page" class="next-page"><i class="fa fa-angle-right"></i></a>
        </li>
    </ul>
</nav>

Tableaux

Description du tableau
Nom Description Auteur
Test Description Auteur
Test Description Auteur
Test Description Auteur
Ceci est un tableau sans entête
Test Description Auteur
Test Description Auteur
Test Description Auteur
Voir le code source : 
// Tableau responsive avec entête
<table class="table">...</table>


// Tableau responsive sans entête
<table class="table-no-header">...</table>

Messages d'alerte

Ceci est un message d'information
Ceci est une question:
est-ce que l'affichage sur deux lignes fonctionne correctement ?
Ceci est un message de succès
Ceci est un message d'avertissement
Ceci est un message d'erreur
Ceci est un message dont l'affichage est limité aux membres
Ceci est un message dont l'affichage est limité aux modérateurs
Ceci est un message dont l'affichage est limité aux administrateurs
Voir le code source : 
<div id="msg-helper-" class="message-helper bgc success">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc notice">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc warning">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc error">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc question">Lorem ipsum<div>
<div id="msg-helper-" class="message-helper bgc member">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc moderator">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc administrator">Lorem ipsum</div>
Tooltip

Un "tooltip" est une description indexée à un élément qui est cachée par défaut et qui apparait au survol de l'élément (les exemples suivants sont montrés avec la classe .pinned).
Par défaut, dans PHPBoost le tooltip s'applique à toute balise possédant un attribut aria-label.

Lorem ipsum Au survol, la description déclarée dans l'attribut aria-label apparait.

Lorem ipsum Au survol un texte alternatif avec des options apparait à la place du contenu de l'aria-label

Options:
data-tooltip pour ajouter un texte alternatif
data-tooltip-pos pour forcer la position du tooltip (top|right|bottom|left)
data-tooltip-class pour ajouter des class de personnalisation ("display-none" pour ne pas afficher le tooltip mais laisser le aria-label)
Voir le code source : 
// Tooltip
<span aria-label="Lorem ipsum....">Tooltip</span>
 
// Tooltip personnalisé
<span data-tooltip="Texte alternatif avec des options" data-tooltip-class="bigger bgc-full error" aria-label="Lorem ipsum....">Tooltip</span>