Documentation en ligne

Classes CSS réutilisables

En complément du système de grille CSS, les thèmes Publik fournissent une série de classes CSS réutilisables.

Classes « responsive »

pk-mobile-only

Limite l’affichage à la vue « mobile » du site, c’est-à-dire quand la largeur de l’écran est faible, par défaut inférieure ou égale à 800 pixels.

pk-desktop-only

Limite l’affichage à la vue « ordinateur » du site, c’est-à-dire dans la situation inverse, quand la largeur de l’écran est par défaut supérieure à 800 pixels.

Classes pour les cellules

pk-no-border

Retire la bordure de la cellule.

pk-transparent

Assure un fond transparent à la cellule.

foldable

Rend le contenu d’une cellule pliable.

folded

Associée à la classe foldable, définit le contenu d’une cellule comme étant plié par défaut.

links-list

Permet de donner à une cellule de texte le style commun « titre et liens », pour cela le texte doit contenir un titre (<h2>) suivi d’une liste de liens (<ul>).

pk-information

Donne à la cellule le style de bloc d’information.

pk-attention

Donne à la cellule le style de bloc d’attention.

pk-error

Donne à la cellule le style de bloc d’erreur.

pk-success

Donne à la cellule le style de bloc de réussite.

pk-cell-bold-title

Met en gras le titre d’une cellule.

pk-cell-center-title

Place au centre le titre d’une cellule.

Classes pour les champs des formulaires

pk-budget-table

Met en forme un champ de type « tableau » pour la saisie d’informations budgétaires (libellés alignés à gauche, utilisation de toute la largeur, colonne de saisie des nombres poussée sur la droite).

pk-compact-file

Dispose les champs de type « Fichier » dans une version compacte, moins haute.

pk-hidden

Cache le champ (applicable uniquement aux champs de type « Liste »).

pk-important

Marque le champ comme étant particulièrement important, le rendu sera généralement un libellé mis en gras.

pk-information

Marque le champ commentaire avec le style de bloc d’information.

pk-attention

Marque le champ commentaire avec le style de bloc d’attention.

pk-error

Marque le champ commentaire avec le style de bloc d’erreur.

pk-blocks-zebra

Alterne les couleurs de fond des lignes des blocs de champs.

pk-horizontal-checkboxes

Aligne horizontalement les cases à cocher d’un champ « liste à choix multiple ».

pk-horizontal-radiobuttons

Aligne horizontalement les boutons radio d’un champ « liste ».

pk-vertical-items

Aligne verticalement les items des champs « liste à choix multiple » et « liste » affichés sous forme d’images.

Classes pour des éléments de texte

pk-button

Applique une apparence de bouton à un lien.

pk-big-button

Applique une apparence de bouton de grande taille à un lien.

pk-button-delete, pk-big-button-delete

Applique une apparence de bouton de type "supprimer" (si le style est défini pour votre thème)

pk-button-submit, pk-big-button-submit

Applique une apparence de bouton de type "valider" (si le style est défini pour votre thème)

pk-button-cancel, pk-big-button-cancel

Applique une apparence de bouton de type "annuler" (si le style est défini pour votre thème)

Les classes pk-button et pk-big-button listées ci-dessus peuvent également être appliquées aux cellules de type « Lien ».

Classes pour les tableaux

pk-data-table

Applique un style commun de présentation au tableau, obligatoire pour que les autres styles de tableau prennent effet. Cela concerne les balises <table>, la classe n’est pas nécessaire pour l’affichage de fiches sous forme de tableau.

pk-table-headers

Applique aux entêtes de colonne un style distinctif, par défaut proche de celui des titres de cellule.

pk-table-borders

Applique des bordures de tous les côtés des cellules du tableau.

pk-table-center

Centre par défaut le contenu de toutes les cellules.

pk-table-zebra

Alterne les couleurs de fond des lignes.

pk-table-fit-container

Donne au tableau la largeur du conteneur.

pk-table-wrapper

Permet aux usagers de mobiles de faire défiler le tableau horizontalement. Cette classe ne s’applique pas à la balise <table> elle-même, elle doit se poser sur une balise <div> englobant le tableau.

Classes pour l’impression

pk-print-only

Affiche ce contenu uniquement à l’impression, pas à l’écran.

pk-no-print

Affiche ce contenu uniquement à l’écran, pas à l’impression.

Dernière mise à jour le 9 mars 2024 22:19 — Éditer