Timelined, fil chronologique vertical

Timelined permet d’afficher une chronologie verticale uniquement par CSS. Vous pouvez l’utiliser pour créer des chronologies statiques ou dynamiques.

Timelined est entièrement personnalisable

Pour l’utiliser, rien de bien complexe… la structure de base ressemble à ceci :

<div class="timeline gray-blue"> <!-- Main element container -->
    <div class="timeline-block">    <!-- Single block -->
        <div class="timeline-icon"></div> <!-- Icon on the timeline -->
        <div class="timeline-content"> 
            <p> Any content </p> <!-- Content -->
            <div class="timeline-date">Yesterday</div> <!-- Date -->
        </div>
    </div>
    ...
</div>

A cette structure de base, peuvent s’ajouter quelques personnalisations supplémentaires par l’ajout de classes à l’élément « conteneur » .timeline:

• .timeline-left – La ligne est sur la gauche tandis que le contenu est toujours sur la droite;
• .timeline-alternating – Les blocs sont en alternance entre la gauche et la droite de la ligne;
• .timeline-collapsing – La chronologie bascule automatiquement sur le mode « timeline-left » lorsque le conteneur est petit (800px, par défaut);
• .timeline-with-arrows – affiche une flèche vers la ligne (fonctionne avec « défaut » et « modes gauche »).

.timeline-icon Options d’éléments:

• .timeline-icon-hide-border – supprime la bordure de l’icône en forme de cercle.

Site Internet : Fil chronologique 100% CSS
Licence : MIT