Présentation du framework CSS

Reset css

Reset de propriété

Mise à 0 des margins, paddings, border et outline.
Reset de la taille et des types de polices.
Reset taile de ligne.
Alignement de chaque balise sur les lignes parent.

Correction bug vieux navigateurs

Correction du display des balises HTML5.
Suppression des bordures sur les balises IMG (présent par défaut sous IE/8/9/10).
Suppression du fond gris quand les liens sont actif sur IE10.

Modification de style par défaut

Suppression du style des listes ordonnées et désordonnées (suppression des puces).
Fusion par défaut des bordures de tableau.

Règles de grid.css

Les positions

Sans règle cssAvec règle css

Règle css de positionement, elles se mettent en (position:absolute) et dépendent donc de leurs premier parent ayant la propriété (position:relative). Noms des class:
  • L/LEFT = Met l'objet dans le coin gauche de son parent et se trouvant à 50% en dessous du top de ce même parrent.
  • R/RIGHT = Met l'objet dans le coin droit de son parent et se trouvant à 50% en dessous du top de ce même parrent.
  • T/TOP = Met l'objet dans la partie supérieur de son parent en étant centré avec un left:50%.
  • B/BOTTOM = Met l'objet dans la partie inférieur de son parent en étant centré avec un left:50%.
  • M/MIDDLE = Met l'objet au centre de son parent avec equidistance entre les deux pointd'un même axe Y ou X de son parent.
  • TL/TOPLEFT = Met l'objet dans le coin supérieur gauche de son parent.
  • TR/TOPRIGHT = Met l'objet dans le coin supérieur droit de son parent.
  • BL/BOTTOMLEFT = Met l'objet dans le coin inférieur gauche de son parent.
  • BR/BOTTOMRIGHT = Met l'objet dans le coin inférieur droit de son parent.
  • left
    right
    top
    bottom
    middle
    topleft
    topright
    bottomleft
    bottomright
    left
    right
    top
    bottom
    middle
    topleft
    topright
    bottomleft
    bottomright

    Le .RESIZEFROMUSER

    Sans règle cssAvec règle css

    .RESIZEFROMUSER/RFU, cette class permet de rendre l'objet au quel cete classe est atribué capable d'être modifié par l'utilisateur permettre entre autre de changer la taille d'une div, article, etc......
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Les .MAXCONTENTWIDTH

    MAXCONTENTWIDTH/MCW. Cette class rend l'objet affecté incapable de dépasser la largeur de son parent d'un facteur plus ou moins important en lui attribuant une max width.
    Je ne peut pas dépasser 10% de la largeur de mon parent.
    Je ne peut pas dépasser 20% de la largeur de mon parent.
    Je ne peut pas dépasser 30% de la largeur de mon parent.
    Je ne peut pas dépasser 40% de la largeur de mon parent.
    Je ne peut pas dépasser 50% de la largeur de mon parent.
    Je ne peut pas dépasser 60% de la largeur de mon parent.
    Je ne peut pas dépasser 70% de la largeur de mon parent.
    Je ne peut pas dépasser 80% de la largeur de mon parent.
    Je ne peut pas dépasser 90% de la largeur de mon parent.
    Je ne peut pas dépasser 100% de la largeur de mon parent.

    Les .MAXCONTENTHEIGHT

    MAXCONTENTHEIGHT/MCH. Cette class rend l'objet affecté incapable de dépasser la largeur de son parent d'un facteur plus ou moins important en lui attribuant une max height. Cela peut causer dans certain cas des problème d'affichage nottament comme montré dans l'exemple le texte vient à sortir de son conteneur (car devenu trop petit pour le contenir) pour régler ce problème l'attribut overflow vous sera bien utile ;).
    Je ne peut pas dépasser 10% de la hauteur de mon parent.
    Je ne peut pas dépasser 20% de la hauteur de mon parent.
    Je ne peut pas dépasser 30% de la hauteur de mon parent.
    Je ne peut pas dépasser 40% de la hauteur de mon parent.
    Je ne peut pas dépasser 50% de la hauteur de mon parent.
    Je ne peut pas dépasser 60% de la hauteur de mon parent.
    Je ne peut pas dépasser 70% de la hauteur de mon parent.
    Je ne peut pas dépasser 80% de la hauteur de mon parent.
    Je ne peut pas dépasser 90% de la hauteur de mon parent.
    Je ne peut pas dépasser 100% de la hauteur de mon parent.

    Le .FLEXTABLE

    FLEXTABLE/F. Cette class transforme l'objet et ses enfants direct de façon à ce que celà devienne un tableau avec X nombre de colonne (X étant égal au nombre d'enfant direct), il suffis ensuite de mettre d'autre div à l'intérieur des enfants de l'objet ayant la class .FLEXTABLE/.F.
    Colonne 1
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    Colonne 2
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    Colonne 3
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    Colonne 4
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm
    hmmmmm

    Les .CASESIZEx

    CASESIZEx/CSx .Cette class donne une taille en pourcent dépendante de la taille de son conteneur, contrairement au max width/height ici l'objet peut dépasser de son conteneur notamment lorsqu'il est à une taille supérieure à 100% de son conteneur. Cela peut causer dans certain cas des problème d'affichage nottament comme montré dans l'exemple le texte vient à sortir de son conteneur (car devenu trop petit pour le contenir) pour régler ce problème l'attribut overflow vous sera bien utile ;).
    Je fais 10% de la taille de mon conteneur.
    Je fais 20% de la taille de mon conteneur.
    Je fais 30% de la taille de mon conteneur.
    Je fais 40% de la taille de mon conteneur.
    Je fais 50% de la taille de mon conteneur.
    Je fais 60% de la taille de mon conteneur.
    Je fais 70% de la taille de mon conteneur.
    Je fais 80% de la taille de mon conteneur.
    Je fais 90% de la taille de mon conteneur.
    Je fais 100% de la taille de mon conteneur.

    Règles de nav.css

    Titre

    Titre

    Texte de remplissage servant à décrire, expliquer et présenter une fonctionnalité présentée dans la div à droite de celle-ci
    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Titre

    Titre

    Texte de remplissage servant à décrire, expliquer et présenter une fonctionnalité présentée dans la div à droite de celle-ci
    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Titre

    Titre

    Texte de remplissage servant à décrire, expliquer et présenter une fonctionnalité présentée dans la div à droite de celle-ci
    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Règles de utils.css

    Utilisation des règles de utils.css

    Ajouter la classe à l'élément désiré
    c'est tout
    (toutes les règles existent en version courte)

    Padding Top

    PADDINGTOP1
    PT1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGTOP2
    PT2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGTOP3
    PT3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGTOP4
    PT4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGTOP5
    PT5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGTOP10
    PT10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGTOP15
    PT15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGTOP20
    PT20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGTOP25
    PT25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Padding Right

    PADDINGRIGHT1
    PR1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGRIGHT2
    PR2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGRIGHT3
    PR3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGRIGHT4
    PR4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGRIGHT5
    PR5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGRIGHT10
    PR10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGRIGHT15
    PR15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGRIGHT20
    PR20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGRIGHT25
    PR25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Padding Bottom

    PADDINGBOTTOM1
    PB1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGBOTTOM2
    PB2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGBOTTOM3
    PB3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGBOTTOM4
    PB4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGBOTTOM5
    PB5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGBOTTOM10
    PB10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGBOTTOM15
    PB15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGBOTTOM20
    PB20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGBOTTOM25
    PB25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Padding Left

    PADDINGLEFT1
    PL1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGLEFT2
    PL2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGLEFT3
    PL3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGLEFT4
    PL4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGLEFT5
    PL5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGLEFT10
    PL10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGLEFT15
    PL15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGLEFT20
    PL20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGLEFT25
    PL25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Padding All

    PADDINGALL1
    PA1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGALL2
    PA2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGALL3
    PA3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGALL4
    PPA4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGALL5
    PA5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGALL10
    PA10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGALL15
    PA15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGALL20
    PA20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    PADDINGALL25
    PA25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Margin Top

    MARGINTOP1
    MT1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINTOP2
    MT2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINTOP3
    MT3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINTOP4
    MT4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINTOP5
    MT5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINTOP10
    MT10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINTOP15
    MT15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINTOP20
    MT20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINTOP25
    MT25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Margin Right

    MARGINRIGHT1
    MR1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINRIGHT2
    MR2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINRIGHT3
    MR3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINRIGHT4
    MR4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINRIGHT5
    MR5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINRIGHT10
    MR10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINRIGHT15
    MR15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINRIGHT20
    MT20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINRIGHT25
    MR25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Margin Bottom

    MARGINBOTTOM1
    MB1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINBOTTOM2
    MB2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINBOTTOM3
    MB3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINBOTTOM4
    MB4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINBOTTOM5
    MB5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINBOTTOM10
    MB10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINBOTTOM15
    MB15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINBOTTOM20
    MB20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINBOTTOM25
    MB25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Margin Left

    MARGINLEFT1
    ML1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINLEFT2
    ML2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINLEFT3
    ML3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINLEFT4
    ML4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINLEFT5
    ML5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINLEFT10
    ML10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINLEFT15
    ML15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINLEFT20
    ML20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINLEFT25
    ML25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Margin All

    MARGINALL1
    MA1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINALL2
    MA2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINALL3
    MA3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINALL4
    MA4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINALL5
    MA5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINALL10
    MA10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINALL15
    MA15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINALL20
    MA20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MARGINALL25
    MA25

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Simple Border Top

    BORDERTOP1
    BT1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERTOP2
    BT2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERTOP3
    BT3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERTOP4
    BT4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERTOP5
    BT5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Simple Border Right

    BORDERRIGHT1
    BR1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERRIGHT2
    BR2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERRIGHT3
    BR3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERRIGHT4
    BR4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERRIGHT5
    BR5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Simple Border Bottom

    BORDERBOTTOM1
    BB1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERBOTTOM2
    BB2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERBOTTOM3
    BB3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERBOTTOM4
    BB4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERBOTTOM5
    bB5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Simple Border Left

    BORDERLEFT1
    BL1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERLEFT2
    BL2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERLEFT3
    BL3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERLEFT4
    BL4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERLEFT5
    BL5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Simple Border All

    BORDERALL1
    BA1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERALL2
    BA2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERALL3
    BA3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERALL4
    BA4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BORDERALL5
    BA5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Autre règles pour les borders

    Il existe MOULT autres règles pour les bordures, suivant l'expression régulière suivante:
    BORDER[side][style][color][width]
    ou
    B[si][st][c][width]


    Avec [side] devant valoir, au choix:
    TOP
    RIGHT
    BOTTOM
    LEFT
    ALL

    Avec [s] devant valoir, au choix:
    T
    R
    B
    L
    A

    Avec [style] devant valoir, au choix:
    DASHED
    DOUBLE
    DOTTED
    SOLID

    Avec [st] devant valoir, au choix:
    DA
    DO
    DT
    SO

    Avec [color] devant valoir, au choix:
    RED
    GREEN
    BLUE
    YELLOW
    BLACK
    WHITE
    GREY1
    GREY2
    GREY3

    Avec [c] devant valoir, au choix:
    R
    G
    B
    Y
    0
    W
    G1
    G2
    G3

    Avec [width] devant valoir, au choix:
    1
    2
    3
    4
    5


    (les bordures simples présentées plus haut prennent pour valeur [style]=SOLID et [color]=BLACK en réduisant donc la syntaxe)

    Font Families

    SERIF
    FFS

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    SANSSERIF
    FFSS

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    MONOSPACE
    FFM

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Font Weights

    BOLD
    FWB

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BOLDER
    FWB2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    LIGHTER
    FWL

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Font Styles

    ITALIC
    FSI

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    OBLIQUE
    FSO

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Font Variant

    SMALLCAPS
    FVSC

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Font Colors

    FONTRED
    FCR

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    FONTGREEN
    FCG

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    FONTBLUE
    FCB

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    FONTYELLOW
    FCY

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    FONTBLACK
    FC0

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    FONTGREY25
    FCG1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    FONTGREY50
    FCG2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    FONTGREY75
    FCG3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    FONTWHITE
    FCW

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Background Colors

    BACKRED
    BCR

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BACKGREEN
    BCG

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BACKBLUE
    BCB

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BACKYELLOW
    BCY

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BACKBLACK
    BC0

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BACKGREY25
    BCG1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BACKGREY50
    BCG2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BACKGREY75
    BCG3

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    BACKWHITE
    BCW

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Font Sizes

    REM025
    FS1

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM050
    FS2

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM075
    F23

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM100
    FS4

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM125
    FS5

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM150
    FS6

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM175
    FS7

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM200
    FS8

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM225
    FS9

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM250
    FS10

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM275
    FS11

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM300
    FS12

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM325
    FS13

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM350
    FS14

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM375
    FS15

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM400
    FS16

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM425
    FS17

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM450
    FS18

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM475
    FS19

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    REM500
    FS20

    Lorem ipsum dolor sit amet, consectetuer adispicing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.