Typographie
Textes
La font-size de base est à 1.2rem (la valeur 1rem correspond à 10px). Si vous utilisez l'unité rem pensez à faire précéder la déclaration par son équivalent
en pixels pour rester compatible avec Internet Explorer. L'interlignage courant est à 1.5.
La liste suivante est de class "nice". Elle est semblable aux listes ordinaires mais avec des puces carrées.
- Les textes courants sont en Arial, Helvetica ou sans-serif.
- Le code adopte la fonte Andale Mono, Courier New ou monospace.
- Les liens ont des aspects différents au focus et au survol. Il faut conserver cette distinction, nécessaire à l'accessibilité et l'ergonomie.
Titre h3
Le titre de niveau h1 est réservé au titre du site-admin. Le titre de niveau h2 est réservé au breadcrumb/titre de la page courante. On utilise les titres de niveau h3 en premier niveau de titre à l'intérieur des pages, comme sur la page Import/Export.
Il ne faut pas choisir un niveau de titre en fonction de son aspect mais respecter une hiérarchie cohérente. On peut obtenir visuellement l'aspect d'un titre h3 en donnant à l'élément la class "as_h3".
Titre de niveau h4
On peut obtenir visuellement l'aspect d'un titre h4 en donnant à l'élément la class "as_h4".
Titre de niveau h5
Le titre de niveau h5 est assez peu employé mais son style est prévu. Dans une admin de base, on utilise les niveaux h5 pour certains éléments du sidebar du billet, mais un style particulier leur est alors appliqué pour ressembler aux autres items de ce sidebar.
Titres des encadrés
Les titres de boîte encadrées (div de class "fieldset", comme ici) se présentent comme ci-dessus.
On peut utiliser, quel que soit le niveau hx de cet intertitre la class "pretty-title" pour obtenir l'effet ci-dessus.
Autre variante
On dispose également d'une class "smart-title" pour obtenir une présentation comme celle du titre de ce paragraphe.
Layouts
Onglets
Les descriptions des constructions en multi-colonnes ci-dessous présentent un exemple de répartition en onglets.
Multi-colonnage
Boîtes distribuées horizontalement
1 Toutes les boîtes de class "box" placées à l'intérieur d'une boîte de class "one-box" se distribuent horizontalement (imaginez que chaque boîte est un mot dans un paragraphe). Si les largeurs de ces boîtes ne sont pas spécifiquement définies dans la CSS, elle s'ajustent à leur contenu.
2 Voici une petite boîte.
3 Une autre petite boîte.
4 Par défaut les « lignes » de boîtes "box" sont justifiées au sein de la boîte "one-box" et l'espacement se répartit entre elles.
5 Si vous souhaitez un autre alignement des boîtes entre elles vous pouvez ajouter les class :
"txt-left","txt-right"- ou
"txt-center"
à la class "one-box".
6 Le cadre placé ici autour de chaque boîte ne fait pas partie des styles par défaut.
Boîtes distribuées deux par deux
1 Les boîtes de class "two-boxes" ont une règle CSS display:inline-block;. Elles se rangent alternativement à gauche et à droite. Pour plus de clarté, les blocs sont ici numérotés avec leur ordre dans le flux.
2 S'il n'y a que deux boîtes, une autre class n'est pas nécessaire. S'il y en a plusieurs, il est conseillé de leur attribuer alternativement les class "odd" et "even" pour que les marges se placent correctement.
3 Attention, il faut soit ne pas retourner à la ligne entre la fermeture d'une boîte "two-boxes" et l'ouverture de la suivante soit adopter la méthode de commentaire vide mise en place ici et expliquée chez Alsacréations (« Méthode 2 »).
4 Toutes les boîtes de class "box"
placées au sein d'une boîte "two-boxes"…
4 bis… se distribuent horizontalement comme dans
une boîte "one-box".
Boîtes distribuées trois par trois
Sur le même principe que les « two-boxes » on peut utiliser des boîtes de class "three-boxes" pour répartir les contenus sur trois colonnes de 30% chacune (le reste est occupé par les marges).
Comme pour les "two-boxes" il faut soit ne pas laisser d'espace ou de retour à la ligne entre les boîtes, soit adopter la méthode recommandée plus haut.
Dans les « two-boxes » comme dans les « three-boxes », on peut placer à l'intérieur plusieurs autres div de class="box" qui s'afficheront les unes à côté des autres ou l'une en dessous de l'autre selon la place dont elles disposent.
Deux colonnes flottantes de largeurs égales
La div englobante porte la class "two-cols", chacune de ses div porte la class "col".
Sans autre précision les deux colonnes sont d'égale largeur.
Attention : ces colonnes sont construites avec des flottants, il faut donc penser à mettre une class clear à l'élément suivant ou ajouter la class "clearfix" à la div class="two-cols".
Deux colonnes flottantes de largeurs inégales
col70 La div englobante porte la class "two-cols".
Pour obtenir des colonnes inégales, on dispose des classes "col70" et col30 à attribuer à l'une ou à l'autre de ses colonnes.
col30 Penser à mettre une class "clear" à l'élément suivant ou ajouter la class "clearfix" div class="two-cols".
Trois colonnes flottantes de largeurs égales
Deprecated. Ces règles sont conservées dans la 2.6 par souci de rétro-compatibilité mais il est recommandé d'utiliser désormais le colonnage three-boxes.
Colonne 1
La div englobante porte la class "three-cols", chacune de ses div porte la class "col". Les trois colonnes sont d'égale largeur.
Colonne 2
Voici une deuxième colonne. N'oubliez pas d'ajouter la class "clearfix" à la class "three-cols" ou un élément de class "clear" après cet élément.
Colonne 3
Voilà la troisième colonne.
Note : dans les exemples les valeurs et les numérotations sont placées dans un span class="step" (et ressortent donc dans un petit bloc à fond gris).
Interactions
Éléments de formulaire
Boutons
Messages
Messages système
Il existe quatre types de messages système auxquels correspondent des classes CSS : .error, .message, .success, .warning-msg. Ils s'affichent en haut de page, sous le titre/breadcrumb.
Message de succès. Le plus souvent horodaté dcPage::success
Message warning. Non horodaté dcPage::warning
Message d'erreur. Non horodaté dcPage::error
La classe .static-msg peut être utilisée directement pour affichage en haut de page :
Comme le message simple mais sans effets de transition.
Un type de message réservé à Dotclear peut s'afficher en haut de la page :
Dotclear 42 est disponible
Messages contextuels
Paragraphe de message d'alerte class warn ou warning.
Paragraphe de message de class info.
Ces messages sont en display:inline-block. Le fond s'adapte à la longueur du message.
Navigation
Selecteur d'accès direct
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.
Navigation contextuelle
Les tableaux
Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire ou un tableau dont on peut déplacer les lignes par glisser déposer (voir plus bas). Cependant certaines règles sont communes à tout les tableaux.
Règles communes
Largeur du tableau
Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires
à un plugin,les tableaux occupent toute la largeur de la page. Afin que les tableaux soient consultables
sur un mobile en navigant horizontalement, on englobe le tableau dans une div class="table-outer",
qui servira de « conteneur ».
Accessibilité
Les éléments caption, th, scope sont nécessaires à l'accessibilité. Ne les oubliez pas ! ».
On peut utiliser la class="hidden" sur l'élément caption (qui accueille
le titre du tableau) si vous ne souhaitez pas qu'il soit affiché sur la page.
Les classes
Des classes particulières peuvent être attribuées aux lignes :
line(systématique) : pour les traits horizontaux et le fond gris léger au survol ;offline: pour un noir estompé (gris quoi).
Des classes particulières peuvent être appliquées aux cellules :
nowrap: pas de retour à la ligne dans la cellule, quelle que soit la largeur de la page ;maximal: la cellule prendra toute la largeur restante disponible ;count: le contenu de la cellule sera aligné à droite avec un petit retrait.
Tableau classique
| Titre | Date | Catégorie | Auteur | Commentaires | Rétroliens | État | |
|---|---|---|---|---|---|---|---|
| Mon cher Franck | 06/08/2013 19:16 | Les aventures du clafoutis | kozlika | 4 | 0 |   |
|
| Dotclear 2.3.0 | 16/05/2011 22:29 | Les aventures du clafoutis | kozlika | 5 | 0 |  |
|
| Causons opéra au Tamm Bara | 24/11/2009 23:10 | Les aventures du clafoutis | kozlika | 4 | 1 | |
|
| Souffler six bougies | 14/08/2009 00:00 | Les aventures du clafoutis | kozlika | 4 | 2 | |
|
| Dotclear et grenadine, troisième édition | 15/06/2009 07:39 | Les aventures du clafoutis | kozlika | 9 | 1 | |
|
| L'abc dotclear est né | 19/03/2009 10:31 | Les aventures du clafoutis | kozlika | 1 | 0 | |
|
