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 de pages, comme sur la page Inport/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.
Variante pour les titres
On peut utiliser une variante aux titres qui regroupent des actions (voir la page de la Médiathèque) ou servent de titre à une boîte encadrée, comme ici où les présentes explications sont placées dans une div de class fieldset.
On peut utiliser, quel que soit le niveau hx de cet intertitre la class smart-title pour obtenir l'effet ci-dessus.
Layouts
Onglets
La classe multi-part (qui doit obligatoirement être donnée à la div du contenu de chaque onglet afin que le script jQuery fonctionne) aligne son bord gauche avec celui premier onglet.
Multi-colonnage
Two-cols 50/50
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".
Two-cols 70/30
col70 La div englobante porte la class two-cols, chacune de ses div porte la class col.
Pour obtenir des colonnes inégales, on dispose des classes col70 et col30.
col30 Penser à mettre une class clear à l'élément suivant ou ajouter la class clearfix à la div class="two-cols".
Two-boxes
1 Les boîtes de class two-boxes ont une règle de display:inline-block;. Elles se rangent alternativement à gauche et à droite.
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 et l'ouverture de la suivante soit adopter la Méthode 2 mise en place ici expliquée chez Alsacréations.
Three-boxes
Sur le même principe 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.
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
Mettre à jour maintenant Me le rappeler plus tard information sur cette version
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.
