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

W

Largeur du contenu.

c

Largeur d'une colonne (60px)

nc

Nombre de colonnes (6)

g

Largeur des gouttières entre les colonnes (20px)

fs

Taille de police du document - font-size (14px).

lh

Rythme vertical du document - line-height (1.5).

mb

Marge inférieure des éléments - margin-bottom (1.5em).

fsf

facteur de multiplication de la taille de police d'un élément.

cfs

Taille de police d'un élément.

clh

Rythme vertical d'un élément.

cmb

Marge inférieure d'un élément

§Classes de structures

§Classes de template

Nom

hd

Description

Classe pour un conteneur faisant office d'en-tête.

Nom

bd

Description

Classe pour un conteneur faisant office de corps.

Nom

ft

Description

Classe pour un conteneur faisant office de pied.

Nom

lt

Description

Classe pour un conteneur faisant office de colonne droite.

Nom

rt

Description

Classe pour un 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>

§Classes de position

Nom

pos-(left|center|right)

Description

Série de classes pour marquer une position flottante à gauche, centrée et flottante à droite.

.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;
}

§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

Description

Largeur de base.

default

``c``

Nom

sz-third

Description

Tiers de la largeur totale.

default

#####RAW#3#####

Nom

sz-two-thirds

Description

Deux-tiers de la largeur totale.

Nom

sz-half

Description

Moitié de la largeur totale.

default

#####RAW#4#####

Nom

sz-full

Description

Largeur totale.

default

``W``

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

Nom

sz-[\d]

Description

Masque de classe pour une largeur de n colonnes.

default

#####RAW#6#####

§Identifiants de contenu

Nom

main

Description

identifiant pour le contenu principal.

Nom

toc

Description

identifiant pour la table des matières.

Nom

fn

Description

identifiant pour la liste des notes.

Nom

fn-[a-z0-9\-]+

Description

Masque pour l'identifiant d'une note de bas de page.

Nom

h-[a-z0-9\-]+

Description

Masque pour l'identifiant des titres.

Nom

ref-[a-z0-9\-]+

Description

Masque pour l'identifiant des références.

§Classes typographiques

Nom

ff-(serif|sans-serif)

Description

Familles de polices de caractères.

Nom

fs-(small|medium|large)

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

Description

Classe générique pour un objet de navigation.

type

class

Nom

nav-first

Description

Classe pour un élément permettant d'aller à la première étape de navigation.

type

class

Nom

nav-prev

Description

Classe pour un élément permettant d'aller à l'étape précédente de navigation.

type

class

Nom

nav-next

Description

Classe pour un élément permettant d'aller à l'étape suivante de navigation.

type

class

Nom

nav-last

Description

Classe pour un élément permettant d'aller à la dernière étape de navigation.

type

class

<ul class="nav">
    <li class="nav-first"> FIRST </li>
    <li class="nav-prev"> PREVIOUS </li>
    <li class="nav-next"> NEXT </li>
    <li class="nav-last"> LAST </li>
</ul>

§Classes de contenus

§Précision de contenus

Nom

ct-(thumb|detail)

Description

Précision du contenu affiché.

type

class

§Type de contenus

Nom

meta

Description

Méta-données de la page courante.

type

class

Nom

ref

Description

Données référence (bibliographique).

type

class

§Messages

Nom

msg

Description

Classe générique indiquant un message.

Nom

type-(error|info|soluce|warn)

Description

Série de classes pour un contenu indiquant une erreur, une précision, un solution ou une mise en garde.

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

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

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

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

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

§Marqueurs

Nom

bdg

Description

Classe générique indiquant un marqueur.

<p><span class="bdg bdg-error">Erreur</span> Lorem ipsum sit amnet !</p>

error Lorem ipsum dolor sit amet, consecteteur adipiscing elit.

info Lorem ipsum dolor sit amet, consecteteur adipiscing elit.

soluce Lorem ipsum dolor sit amet, consecteteur adipiscing elit.

warn Lorem ipsum dolor sit amet, consecteteur adipiscing elit.