publik-base-theme/help/fr/misc-css-classes.page

<page xmlns="http://projectmallard.org/1.0/"
      type="topic" id="misc-css-classes" xml:lang="fr">

<info>
  <revision docversion="0.1" date="2017-05-24" status="draft"/>
  <credit type="author">
    <name>Frédéric Péters</name>
    <email>fpeters@entrouvert.com</email>
  </credit>

</info>

<title>Classes CSS réutilisables</title>

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

<section>
  <title>Classes « responsive »</title>

<table shade="rows">
 <tr>
  <td><p><code>pk-mobile-only</code></p></td>
  <td><p>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.
  </p></td>
 </tr>
 <tr>
  <td><p><code>pk-desktop-only</code></p></td>
  <td><p>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.
  </p></td>
 </tr>
</table>

</section>

<section>
  <title>Classes pour les cellules</title>

<table shade="rows">
 <tr>
  <td><p><code>pk-no-border</code></p></td>
  <td><p>Retire la bordure de la cellule.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-transparent</code></p></td>
  <td><p>Assure un fond transparent à la cellule.</p></td>
 </tr>
 <tr>
   <td><p><code>foldable</code></p></td>
   <td><p>Rend le contenu d’une cellule pliable.</p></td>
 </tr>
 <tr>
   <td><p><code>folded</code></p></td>
   <td><p>Associée à la classe foldable, définit le contenu
   d’une cellule comme étant plié par défaut.</p></td>
 </tr>
 <tr>
   <td><p><code>links-list</code></p></td>
   <td><p>Permet de donner à une cellule de texte le style commun
   « titre et liens », pour cela le texte doit contenir un titre
   (&lt;h2&gt;) suivi d’une liste de liens (&lt;ul&gt;).</p></td>
 </tr>
 <tr>
  <td><p><code>pk-information</code></p></td>
  <td><p>Donne à la cellule le style de bloc d’information.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-attention</code></p></td>
  <td><p>Donne à la cellule le style de bloc d’attention.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-error</code></p></td>
  <td><p>Donne à la cellule le style de bloc d’erreur.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-success</code></p></td>
  <td><p>Donne à la cellule le style de bloc de réussite.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-cell-bold-title</code></p></td>
  <td><p>Met en gras le titre d’une cellule.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-cell-center-title</code></p></td>
  <td><p>Place au centre le titre d’une cellule.</p></td>
 </tr>
</table>

</section>

<section>
  <title>Classes pour les champs des formulaires</title>
<table shade="rows">
 <tr>
  <td><p><code>pk-budget-table</code></p></td>
  <td><p>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).</p></td>
 </tr>
 <tr>
  <td><p><code>pk-compact-file</code></p></td>
  <td><p>Dispose les champs de type « Fichier » dans une version compacte,
  moins haute.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-hidden</code></p></td>
  <td><p>Cache le champ (applicable uniquement aux champs de type « Liste »).</p></td>
 </tr>
 <tr>
  <td><p><code>pk-important</code></p></td>
  <td><p>Marque le champ comme étant particulièrement important, le rendu sera
  généralement un libellé mis en gras.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-information</code></p></td>
  <td><p>Marque le champ commentaire avec le style de bloc d’information.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-attention</code></p></td>
  <td><p>Marque le champ commentaire avec le style de bloc d’attention.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-error</code></p></td>
  <td><p>Marque le champ commentaire avec le style de bloc d’erreur.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-blocks-zebra</code></p></td>
  <td><p>Alterne les couleurs de fond des lignes des blocs de champs.</p></td>
 </tr>
 <tr>
  <td><p><code>pk-horizontal-checkboxes</code></p></td>
  <td><p>Aligne horizontalement les cases à cocher d’un champ « liste à choix multiple ».</p></td>
 </tr>
 <tr>
  <td><p><code>pk-horizontal-radiobuttons</code></p></td>
  <td><p>Aligne horizontalement les boutons radio d’un champ « liste ».</p></td>
 </tr>
 <tr>
  <td><p><code>pk-vertical-items</code></p></td>
  <td><p>Aligne verticalement les items des champs « liste à choix multiple » et « liste » affichés sous forme d’images.</p></td>
 </tr>
</table>
</section>

<section>
  <title>Classes pour des éléments de texte</title>
  <table>
    <tr>
      <td><p><code>pk-button</code></p></td>
      <td><p>Applique une apparence de bouton à un lien.</p></td>
    </tr>
    <tr>
      <td><p><code>pk-big-button</code></p></td>
      <td><p>Applique une apparence de bouton de grande taille à un lien.</p></td>
    </tr>
    <tr>
      <td><p><code>pk-button-delete, pk-big-button-delete</code></p></td>
      <td><p>Applique une apparence de bouton de type "supprimer" (si le style est défini pour votre thème)</p></td>
    </tr>
    <tr>
      <td><p><code>pk-button-submit, pk-big-button-submit</code></p></td>
      <td><p>Applique une apparence de bouton de type "valider" (si le style est défini pour votre thème)</p></td>
    </tr>
    <tr>
      <td><p><code>pk-button-cancel, pk-big-button-cancel</code></p></td>
      <td><p>Applique une apparence de bouton de type "annuler" (si le style est défini pour votre thème)</p></td>
    </tr>
  </table>

  <note><p>Les classes <code>pk-button</code> et <code>pk-big-button</code> listées ci-dessus
  peuvent également être appliquées aux cellules de type « Lien ».</p></note>
</section>

<section>
  <title>Classes pour les tableaux</title>
  <table shade="rows">
    <tr>
      <td><p><code>pk-data-table</code></p></td>
      <td><p>Applique un style commun de présentation au tableau, obligatoire
      pour que les autres styles de tableau prennent effet. Cela concerne les
      balises &lt;table&gt;, la classe n’est pas nécessaire pour l’affichage de
      fiches sous forme de tableau.
      </p></td>
    </tr>
    <tr>
      <td><p><code>pk-table-headers</code></p></td>
      <td><p>Applique aux entêtes de colonne un style distinctif, par défaut
      proche de celui des titres de cellule.</p></td>
    </tr>
    <tr>
      <td><p><code>pk-table-borders</code></p></td>
      <td><p>Applique des bordures de tous les côtés des cellules du
      tableau.</p></td>
    </tr>
    <tr>
      <td><p><code>pk-table-center</code></p></td>
      <td><p>Centre par défaut le contenu de toutes les cellules.</p></td>
    </tr>
    <tr>
      <td><p><code>pk-table-zebra</code></p></td>
      <td><p>Alterne les couleurs de fond des lignes.</p></td>
    </tr>
    <tr>
      <td><p><code>pk-table-fit-container</code></p></td>
      <td><p>Donne au tableau la largeur du conteneur.</p></td>
    </tr>
    <tr>
      <td><p><code>pk-table-wrapper</code></p></td>
      <td><p>Permet aux usagers de mobiles de faire défiler le tableau
      horizontalement. Cette classe ne s’applique pas à la balise
      &lt;table&gt; elle-même, elle doit se poser sur une balise
      &lt;div&gt; englobant le tableau.</p></td>
    </tr>
  </table>
</section>

<section>
  <title>Classes pour l’impression</title>
  <table>
    <tr>
      <td><p><code>pk-print-only</code></p></td>
      <td><p>Affiche ce contenu uniquement à l’impression, pas à l’écran.</p></td>
    </tr>
    <tr>
      <td><p><code>pk-no-print</code></p></td>
      <td><p>Affiche ce contenu uniquement à l’écran, pas à l’impression.</p></td>
    </tr>
  </table>
</section>

</page>