rnb-css

Auteur: Nibau Rui
Date: 31 juillet 2011 (24 mars 2012)
Catégories: Web
Tags: css, rnb-css

Compilation des différents usages de classes et d'identifiants dans la mise ne forme et la caractérisation d'un document web.

Documentation en cours de rédaction.

Introduction

Le projet ne porte pas forcément bien son nom : pensé au départ comme une collection de règles CSS pour styliser des éléments récurrents dans divers travaux web, il s'est enrichit par la mise en place d'un « vocabulaire » d'identifiants et de classes destiné à caractériser du contenu, ce qui pourrait le rapprocher d'un projet comme les micro-formats.

rnb-css gère d'abord une collection de règles de bases, chargées à la fois d'aplanir les différences entre navigateurs, qui appliquent des règles css par défaut (« css reset »), et d'appliquer des règles par défaut pour harmoniser les rendus. Cela passe entre autre par la définition d'un inter-ligne, de marges associées, etc.

Détailler.

Un (tout petit) peu de maths

Nom: W
Description: Largeur du contenu

Nom: c
Description: Largeur d'une colonne
default: 60px

Nom: nc
Description: Nombre de colonnes
default: 6

Nom: g
Description: Largeur des gouttières entre les colonnes
default: 20px

W = nc \times c + (nc - 1) \times g

Calcul de la largeur totale en fonction de la taille des colonnes et des gouttières.

Nom: fs
Description: Taille de police du document (font-size).
default: 14px

Nom: lh
Description: Rythme vertical du document (line-height).
default: 1.5

Nom: mb
Description: Marge inférieure des éléments (margin-bottom).
default: 1.5em

Nom: fsf
Description: facteur de multiplication de la taille de police d'un élément

Nom: cfs
Description: Taille de police d'un élément.

Nom: clh
Description: Rythme vertical d'un élément.

Nom: cmb
Description: Marge inférieure d'un élément

cfs = fsf \times fs

clh = lh / cfs

cmb = lh / cfs

Calcul des proprotions d'un élement par rapport aux dimensions de base.

Classes de structures

Classes de template

Nom: hd
type: class
Description: Conteneur faisant office d'en-tête.

Nom: bd
type: class
Description: Conteneur faisant office dde corps.

Nom: hft
type: class
Description: Conteneur faisant office de pied.

Nom: lt
type: class
Description: Conteneur faisant office de colonne droite.

Nom: rt
type: class
Description: Conteneur faisant office de colonne gauche.

<div class="main">
    <div class="hd"></div>
    <div class="bd"></div>
    <div class="lt"></div>
    <div class="rt"></div>
    <div class="ft"></div>
</div>

Exemple d'utilisation.

Possible rendu des conteneurs de template.

Classes de position

Les classes de positions sont utilisées pour placer un élément dans son conteneur parent tout en le gardant dans le flux :

Nom: pos-left
type: class
Description: Position flottante à gauche

Nom: pos-right
type: class
Description: Position flottante à droite

Nom: pos-centre
type: class
Description: Position centrée

.pos-centre {
    margin-right: auto;
    margin-left: auto;
}
.pos-left {
    float: left;
    margin-right: 20px; /* g */
}
.pos-right {
    float: right;
    margin-left: 20px; /* g */
}
.pos-left + .pos-right {
    margin-left : 0;
}

Exemple d'implémentation des classes de position.

Classes de tailles

Les classes de tailles sont utilisées pour définir la largeur d'un élément dans son conteneur parent :

Nom: sz-unit
type: class
Description: Largeur de base
default: c

Nom: sz-third
type: class
Description: Tiers de la largeur totale.
default: $(W - 2 g) / 3$ $(nc / 3) c + ((nc / 3) - 1) g$

Nom: sz-half
type: class
Description: Moitié de la largeur totale.
default: $(W - g) / 2$ $(nc / 2) c + ((nc / 2) - 1) g$

Nom: sz-full
type: class
Description: Largeur totale.
default: W

sz-unit

sz-third

sz-half

sz-full

Exemple de rendu pour des classes de tailles prédéfinies.

On peut aussi envisager de définir la largeur de composants en fonction du nombre de colonnes occupées.

Nom: sz-[\d]
type: class
Description: Masque de classe pour une largeur de n colonnes.
default: $sz-x = W - (nc - x) c - (nc - x - 1) g$ $sz-x = x \times c + (x - 1) g$

sz-1

sz-2

sz-3

sz-2

sz-4

sz-1

sz-5

sz-6

Exemple de rendu pour des classes de tailles numériques.

Identifiants de contenu

Nom: main
type: ID
Description: Contenu principal.

Nom: toc
type: ID
Description: Table des matières.

Nom: fn
type: ID
Description: Notes de bas de page.

Nom: fn-[a-z0-9\-]+
type: ID
Description: Identifiant d'une note de bas de page.

Nom: h-[a-z0-9\-]+
type: ID
Description: Masque d'identifiant pour titraille.

Nom: ref-[a-z0-9\-]+
type: ID
Description: Masque d'identifiant pour référence.

Classes typographiques

Nom: ff-(serif|sans-serif)
type: class
Description: Familles de polices de caractères.

Nom: fs-(small|medium|large)
type: class
Description: Tailles de la police de caractères.

Classes d'états et d'actions

Les états

loading: Action en cours.
reload: Action à refaire
disable: Désactiver
hide: Cacher
invisible: Invisible
current: Courant / activer

La navigation

Nom: nav
type: class
Description: Classe générique pour un objet de navigation.

Nom: nav-first
type: class
Description: Classe pour un élément permettant d'aller à la première étape de navigation.

Nom: nav-prev
type: class
Description: Classe pour un élément permettant d'aller à l'étape précédente de navigation.

Nom: nav-next
type: class
Description: Classe pour un élément permettant d'aller à l'étape suivante de navigation.

Nom: nav-last
type: class
Description: Classe pour un élément permettant d'aller à la dernière étape de navigation.

Classes de contenus

Précision de contenus

Nom: ct-(thumb|detail)
type: class
Description: Précision du contenu affiché.

Type de contenus

Nom: meta
type: class
Description: Méta-données de la page courante.

Nom: ref
type: class
Description: Données référence (bibliographique).

Types de liens

int: Lien vers une autre page du site.
ext: Lien vers une page extérieur au site.

Contenus messages

Nom: msg
type: class
Description: Classe générique indiquant un message.

Nom: msg-info
type: class
Description: Classe pour un contenu indiquant une précision.

Nom: msg-warn
type: class
Description: Classe générique indiquant une mise en garde.

Nom: msg-error
type: class
Description: Classe pour un contenu indiquant une erreur.

Nom: msg-soluce
type: class
Description: Classe générique indiquant une solution.

<p class="msg msg-error">Erreur : Lorem ipsum sit amnet !</p>

Exemple de code HTML pour un message.

Message: Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Est risus.

Information : Lorem ipsum dolor sit amet, consecteteur adipiscing elit.

Attention : Lorem ipsum dolor sit amet, consecteteur adipiscing elit.

Erreur : Lorem ipsum dolor sit amet, consecteteur adipiscing elit.

Solution : Lorem ipsum dolor sit amet, consecteteur adipiscing elit.

Omacronides⁸

Code, science & musings