<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>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>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>no-bottom-margin</code></p></td>
  <td><p>Retire l'espace présent sous une cellule, permet de donner
  l'impression que des cellules consécutives font partie d'un unique
  bloc.</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>
</table>

</section>

<section>
  <title>Classes pour les champs des formulaires</title>
<table shade="rows">
 <tr>
  <td><p><code>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>hidden</code></p></td>
  <td><p>Cache le champ (applicable uniquement aux champs de type « Liste »).</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>
  </table>
</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.</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>
  </table>
</section>

</page>
