Changeset 2495:dc8c7974ff0b for admin/_charte.php
- Timestamp:
- 10/27/13 09:46:02 (12 years ago)
- Branch:
- default
- File:
-
- 1 edited
-
admin/_charte.php (modified) (10 diffs)
Legend:
- Unmodified
- Added
- Removed
-
admin/_charte.php
r2308 r2495 31 31 <script type="text/javascript" src="js/jquery/jquery.js"></script> 32 32 <script type="text/javascript" src="js/jquery/jquery-ui.custom.js"></script> 33 <script type="text/javascript" src="js/jquery/jquery.ui.touch-punch.js"></script> 33 34 <script type="text/javascript" src="js/jquery/jquery.pageTabs.js"></script> 34 35 <script type="text/javascript" src="js/jquery/jquery.biscuit.js"></script> … … 85 86 <div class="info"> 86 87 <p>Cette page vise à présenter les règles graphiques et conventions utilisées dans les pages de l'administration 87 d'une installation Dotclear, à l'usage des contributeurs et développeurs d'extensions. Elle en est elle-même 88 d'une installation Dotclear, à l'usage des contributeurs et développeurs d'extensions. Elle en est elle-même 88 89 une illustration. L'observation de son code source peut donc servir de complément aux descriptions.</p> 89 90 </div> … … 91 92 <h2>Typographie</h2> 92 93 <h3 id="texte">Textes</h3> 93 <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 94 <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 94 95 en pixels pour rester compatible avec Internet Explorer. L'interlignage courant est à 1.5.</p> 95 96 <p>La liste suivante est de class <code>"nice"</code>. Elle est semblable aux listes ordinaires mais avec des puces carrées.</p> … … 142 143 <ul class="nice clear"> 143 144 <li><code>"txt-left"</code>,</li> 144 <li><code>"txt-right"</code></li> 145 <li><code>"txt-right"</code></li> 145 146 <li>ou <code>"txt-center"</code></li> 146 147 </ul> … … 317 318 <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> 318 319 <p class="anchor-nav"> 319 <label class="classic" for="lp_nav">Aller à : </label> 320 <label class="classic" for="lp_nav">Aller à : </label> 320 321 <select id="lp_nav" name="lp_nav"> 321 322 <option value="#l_accessibility">accessibility</option> … … 337 338 338 339 <h2>Tableaux</h2> 339 <p>Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire 340 <p>Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire 340 341 ou un tableau dont on peut déplacer les lignes par glisser déposer (voir plus bas). Cependant certaines règles 341 342 sont communes à tout les tableaux.</p> … … 343 344 <h3 id="communes">Règles communes</h3> 344 345 <h4>Largeur du tableau</h4> 345 <p>Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires 346 à un plugin,les tableaux occupent toute la largeur de la page. Afin que les tableaux soient consultables 347 sur un mobile en navigant horizontalement, on englobe le tableau dans une <code>div class="table-outer"</code>, 346 <p>Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires 347 à un plugin,les tableaux occupent toute la largeur de la page. Afin que les tableaux soient consultables 348 sur un mobile en navigant horizontalement, on englobe le tableau dans une <code>div class="table-outer"</code>, 348 349 qui servira de « conteneur ».</p> 349 350 <h4>Accessibilité</h4> 350 <p>Les éléments caption, th, scope sont nécessaires à l'accessibilité. Ne les oubliez pas ! ». 351 On peut utiliser la <code>class="hidden"</code> sur l'élément <code>caption</code> (qui accueille 351 <p>Les éléments caption, th, scope sont nécessaires à l'accessibilité. Ne les oubliez pas ! ». 352 On peut utiliser la <code>class="hidden"</code> sur l'élément <code>caption</code> (qui accueille 352 353 le titre du tableau) si vous ne souhaitez pas qu'il soit affiché sur la page.</p> 353 354 <h4>Les classes</h4> 354 355 <p>Des classes particulières peuvent être attribuées aux lignes :</p> 355 356 <ul> 356 <li><code>line</code> (systématique) : pour les traits horizontaux et le fond gris léger 357 <li><code>line</code> (systématique) : pour les traits horizontaux et le fond gris léger 357 358 au survol ;</li> 358 359 <li><code>offline</code> : pour un noir estompé (gris quoi).</li> … … 360 361 <p>Des classes particulières peuvent être appliquées aux cellules :</p> 361 362 <ul> 362 <li><code>nowrap</code> : pas de retour à la ligne dans la cellule, quelle que soit la 363 <li><code>nowrap</code> : pas de retour à la ligne dans la cellule, quelle que soit la 363 364 largeur de la page ;</li> 364 365 <li><code>maximal</code> : la cellule prendra toute la largeur restante disponible ;</li> … … 429 430 </tr> 430 431 </table> 431 </div> 432 432 </div> 433 433 434 <h3>Tableau avec ordonnancement</h3> 434 435 <p>Les tableaux permettant l'ordonnancement doivent offrir la possibilité d'effectuer le classement grâce à … … 578 579 <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> 579 580 </div><!-- /footer --> 580 <!-- 581 <!-- 581 582 . 582 583 ,;:'`'::
Note: See TracChangeset
for help on using the changeset viewer.