Périple Modèles CSS

Modèles CSS personnalisables pour la mise en page des itinéraires

Un modèle CSS d'itinéraire inclut la couche visuelle de la mise en page : style des cartes, règles d'espacement et une échelle typographique adaptée aux noms de lieux longs. Les classes d'état sont généralement incluses afin que l'étape actuelle se distingue des douze précédentes. Les cartes de destination et les étapes de l'itinéraire partagent les mêmes classes, ce qui donne l'impression d'un design unique pour un voyage de deux semaines.

Cartes, badges et étiquettes de date stylisés

La mise en page manuelle des blocs répétés peut s'avérer coûteuse. Il est nécessaire que dix cartes de destination aient une même marge intérieure, un même rayon d'angle et un même format d'image ; un modèle permet de gérer cela automatiquement.

Voici quelques exemples de style pris en charge par un modèle d'itinéraire :

• Classes partagées pour les cartes d'itinéraire et les blocs d'étapes

• Espacement optimal pour une lisibilité optimale d'un programme détaillé

• Style des badges : arrière-plan, bordure et épaisseur du texte

• Étiquettes de date avec la même échelle typographique que les titres

De nombreux modèles ajoutent des classes d'état pour indiquer une étape terminée ou l'étape actuelle. Vérifiez si la démo les affiche, car les cartes de même importance visuelle sont plus lentes à parcourir.

Quand une règle personnalisée est préférable à une modification globale

Le style partagé cesse d'être utile dès qu'un élément sort de l'ordinaire. Un départ complet est une exception dans un ensemble de cartes uniformes, et modifier la classe partagée affecterait toutes les cartes.

La solution habituelle consiste à ajouter une seconde classe par-dessus la classe de base. Ainsi, la carte conserve ses règles partagées et bénéficie d'une modification ciblée pour la couleur ou l'épaisseur.

Nicepage utilise le code CSS personnalisé précisément pour cela. La documentation CSS personnalisée explique comment écrire et appliquer une règle à un seul élément. Les couleurs, les polices et l'espacement nécessitent rarement cette étape, car les contrôles visuels les atteignent déjà ; un marqueur sur l'étape du jour, en revanche, en nécessite une.

Les écrans étroits modifient l'affichage

Ouvrez une démo sur un téléphone et accédez directement à l'itinéraire. Les noms de destination longs passent à la ligne en premier, et la date à côté est coupée. Les règles de point de rupture permettent de réduire la taille de la police dans la colonne des horaires, de resserrer les espacements et de limiter la largeur de la carte. Les sections de grille gèrent le repliement des colonnes, et les substitutions ciblées gèrent les cartes avec des étiquettes longues.

Trois vérifications suffisent généralement. Commencez par le style des lieux, car il est souvent omis dans les exemples par défaut. Ensuite, insérez le nom de lieu le plus long dans une carte et observez où il est coupé. Enfin, il faut se demander jusqu'où les contrôles visuels doivent aller avant qu'une règle personnalisée ne soit nécessaire.