Modifiée par : Frédéric Péters, Pierre Cros

Cette page est tirée du dépôt publik-base-theme et mise à jour automatiquement.

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.
~~no-bottom-margin~~	~~Accolle la cellule suivante à la cellule concernée~~

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.

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.

Les classes pk-button et pk-big-button 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-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.