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