Changeset 2387:65b60acd1aca for admin
- Timestamp:
- 10/16/13 11:23:47 (12 years ago)
- Branch:
- 2.6
- File:
-
- 1 edited
-
admin/_charte.php (modified) (9 diffs)
Legend:
- Unmodified
- Added
- Removed
-
admin/_charte.php
r2351 r2387 85 85 <h2>Typographie</h2> 86 86 <h3 id="texte">Textes</h3> 87 <p>La font-size de base est à 1.2rem (la valeur <code>1rem</code> correspond à 10px). Si vous utilisez l'unité <code>rem</code> pensez à faire précéder la déclaration par son équivalent 87 <p>La font-size de base est à 1.2rem (la valeur <code>1rem</code> correspond à 10px). Si vous utilisez l'unité <code>rem</code> pensez à faire précéder la déclaration par son équivalent 88 88 en pixels pour rester compatible avec Internet Explorer. L'interlignage courant est à 1.5.</p> 89 89 <p>La liste suivante est de class <code>"nice"</code>. Elle est semblable aux listes ordinaires mais avec des puces carrées.</p> … … 136 136 <ul class="nice clear"> 137 137 <li><code>"txt-left"</code>,</li> 138 <li><code>"txt-right"</code></li> 138 <li><code>"txt-right"</code></li> 139 139 <li>ou <code>"txt-center"</code></li> 140 140 </ul> … … 309 309 <p>Sur des pages longues et denses comme les pages about:config ou about:preferences, on peut utiliser un sélecteur pour faciliter l'accès direct aux sections.</p> 310 310 <p class="anchor-nav"> 311 <label class="classic" for="lp_nav">Aller à : </label> 311 <label class="classic" for="lp_nav">Aller à : </label> 312 312 <select id="lp_nav" name="lp_nav"> 313 313 <option value="#l_accessibility">accessibility</option> … … 328 328 <p class="nav_prevnext"><a title="Titre de l'élément précédente" href="post.php?id=4145">« Élément précédent</a> | <a title="Titre de l'élément suivant" href="#">Élément suivant »</a></p> 329 329 330 <h2> Pseudo-onglets </h2> 331 <ul class="pseudo-tabs"> 332 <li><a href="#">Page 1</a></li> 333 <li><a href="#">Autre faux onglet</a></li> 334 <li><a href="#" class="active">Onglet actif</a></li> 335 <li><a href="#">Liste 4</a></li> 336 </ul> 337 <p>Les pseudo-onglets permettent d'ajouter des sous-pages qui sont des liens vers d'autres pages, par opposition aux onglets qui sont des sections internes à la page.</p> 338 <p>Les pseudo-onglets sont à positionner immédiatement après le breadcrumb.</p> 339 330 340 <h2 id="common">Tableaux</h2> 331 <p>Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire 341 <p>Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire 332 342 ou un tableau dont on peut déplacer les lignes par glisser déposer (voir plus bas). Cependant certaines règles 333 343 sont communes à tout les tableaux.</p> … … 335 345 <h3>Règles communes</h3> 336 346 <h4>Largeur du tableau</h4> 337 <p>Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires 338 à un plugin,les tableaux occupent toute la largeur de la page. Afin que les tableaux soient consultables 339 sur un mobile en navigant horizontalement, on englobe le tableau dans une <code>div class="table-outer"</code>, 347 <p>Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires 348 à un plugin,les tableaux occupent toute la largeur de la page. Afin que les tableaux soient consultables 349 sur un mobile en navigant horizontalement, on englobe le tableau dans une <code>div class="table-outer"</code>, 340 350 qui servira de « conteneur ».</p> 341 351 <h4>Accessibilité</h4> 342 <p>Les éléments caption, th, scope sont nécessaires à l'accessibilité. Ne les oubliez pas ! ». 343 On peut utiliser la <code>class="hidden"</code> sur l'élément <code>caption</code> (qui accueille 352 <p>Les éléments caption, th, scope sont nécessaires à l'accessibilité. Ne les oubliez pas ! ». 353 On peut utiliser la <code>class="hidden"</code> sur l'élément <code>caption</code> (qui accueille 344 354 le titre du tableau) si vous ne souhaitez pas qu'il soit affiché sur la page.</p> 345 355 <h4>Les classes</h4> 346 356 <p>Des classes particulières peuvent être attribuées aux lignes :</p> 347 357 <ul> 348 <li><code>line</code> (systématique) : pour les traits horizontaux et le fond gris léger 358 <li><code>line</code> (systématique) : pour les traits horizontaux et le fond gris léger 349 359 au survol ;</li> 350 360 <li><code>offline</code> : pour un noir estompé (gris quoi).</li> … … 352 362 <p>Des classes particulières peuvent être appliquées aux cellules :</p> 353 363 <ul> 354 <li><code>nowrap</code> : pas de retour à la ligne dans la cellule, quelle que soit la 364 <li><code>nowrap</code> : pas de retour à la ligne dans la cellule, quelle que soit la 355 365 largeur de la page ;</li> 356 366 <li><code>maximal</code> : la cellule prendra toute la largeur restante disponible ;</li> … … 421 431 </tr> 422 432 </table> 423 </div> 424 433 </div> 434 425 435 <h3 id="dragable">Tableau avec ordonnancement</h3> 426 436 <p>Les tableaux permettant l'ordonnancement doivent offrir la possibilité d'effectuer le classement grâce à … … 568 578 <div class="info vertical-separator"> 569 579 <p>Cette page vise à présenter les règles graphiques et conventions utilisées dans les pages de l'administration 570 d'une installation Dotclear, à l'usage des contributeurs et développeurs d'extensions. Elle en est elle-même 580 d'une installation Dotclear, à l'usage des contributeurs et développeurs d'extensions. Elle en est elle-même 571 581 une illustration. L'observation de son code source peut donc servir de complément aux descriptions.</p> 572 582 </div> … … 576 586 <a href="http://dotclear.org/" title="Merci de manger des clafoutis."><img src="style/dc_logos/w-dotclear90.png" alt="Merci d'utiliser Dotclear 2.6-dev." /></a> 577 587 </div><!-- /footer --> 578 <!-- 588 <!-- 579 589 . 580 590 ,;:'`'::
Note: See TracChangeset
for help on using the changeset viewer.