136 lines
4.0 KiB
Plaintext
136 lines
4.0 KiB
Plaintext
<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-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
|
||
(<h2>) suivi d'une liste de liens (<ul>).</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-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>
|
||
</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>
|
||
|
||
<note><p>Les classes <code>pk-button</code> et <code>pk-big-button</code>
|
||
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.</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>
|