Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

        
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
    

Paragraphe de texte mis en forme

Lors des premiers essais hivernaux, Michael Schumacher pulvérise le record du tour à Imola dès février, au volant de la F2004. À Melbourne, Kuala Lumpur et Bahreïn, Michael Schumacher signe la pole position et remporte la course quand Williams et McLaren sont même débordés par Jenson Button et sa BAR 006. Jenson Button met fin à la série de pole position de Schumacher à Saint-Marin, avant de lui céder la première place sur le podium. Schumacher remporte ensuite le Grand Prix d'Espagne, signant sa cinquième victoire consécutive en cinq courses et sa quatrième pole, tandis que Barrichello permet à Ferrari de réussir trois doublés. L'Allemand et la Scuderia semblent en mesure de réaliser le Grand Chelem.

Mais ce rêve s'effondre à Monaco où Michael Schumacher est percuté par Juan-Pablo Montoya (pourtant à un tour) dans le tunnel sous le régime de la voiture de sécurité. Roue avant gauche cassée, l'Allemand abandonne et laisse filer la victoire à Jarno Trulli sur la Renault.

Mais au Grand-Prix d'Europe, Michael Schumacher montre que ce qui s'est passé à Monaco n'est qu'un accident et le remporte. Il remporte par la suite six victoires: Canada où il déjoue les pronostics et bat son frère Ralf finalement disqualifié, États-Unis où il bat son équipier Rubens Barrichello, France où il bat Fernando Alonso grâce à une stratégie à quatre arrêts (par ailleurs, Ferrari humilie Renault puisque Rubens Barrichello double Jarno Trulli dans l'avant-dernier virage dans le dernier tour pour monter sur le podium), Grande-Bretagne où il bat Kimi Raikkonen, Allemagne devant son public et Hongrie dont il en ressort avec 38 points d'avance sur Rubens Barrichello et qu'un écart de deux points en Belgique suffit à s'adjuger son septième titre mondial.

Texte du paragraphe…
Emphase…
Italique
Texte important
Gras
Lien
    

Mises en forme du texte

Cas du span

Ce texte est dans un span. Le seul style associé au span est le line-height à 1.42em.

Ce texte est dans un span.

Citations

Blockquote (citation longue, prévue sur plusieurs lignes)

Paris sera toujours Paris. Qu'est-ce que tu veux qu'il fasse d'autre ?

Frédéric Dard

q (citation courte en incise)

Et alors à ce moment-là, le mec est arrivé et a crié : Attention, une cigogne !.

    
Paris sera toujours Paris. Qu'est-ce que tu veux qu'il fasse d'autre ?
    
Frédéric Dard

Et alors à ce moment-là, le mec est arrivé et a crié : Attention, une cigogne !.

Graisses et taille du texte

Le khajiit surveille vos arrières.

Le khajiit surveille vos arrières.

Le khajiit surveille vos arrières.

Le khajiit surveille vos arrières.

Le khajiit surveille vos arrières.
Le khajiit surveille vos arrières.
Le khajiit surveille vos arrières.
Le khajiit surveille vos arrières.
    

Ce texte est dans une balise small.

Ce texte est dans un span.small-text.

.small-text ou <small> règle la taille de police à 0.8em.

Ce texte est dans un span.small-text. ou alors Ce texte est dans une balise small.

Justification

Ce paragraphe possède la classe .tal.

.tal aligne le texte à gauche.

Ce texte possède la classe .tal.

Ce paragraphe possède la classe .tar.

.tar aligne le texte à droite.

Ce texte possède la classe .tar.

Ce paragraphe possède la classe .tac.

.tac aligne le texte à droite.

Ce texte possède la classe .tac.

J'zargo is a Khajiit sorcerer and an apprentice at the College of Winterhold. He is one of several apprentices encountered soon after joining the College and plays a minor role in some quests in the main College questline. He can initially be found attending Tolfdir's lecture during First Lessons, then at Saarthal during its excavation. J'zargo at first comes across as very conceited or even arrogant, but he is not completely above asking for your help. Once you aid him, he is willing to follow you, and can also be recruited into the Blades. He knows a variety of spells from each school of magic, though as a follower he only uses some of them. As one of his primary skills is Destruction, he prefers to use shock damage spells when fighting. He can also summon a Ward to defend himself. If he has not been given any weapons by you, he will equip a bow and arrow when not in combat but will still use only spells in combat. Unlike his fellow students Brelyna Maryon and Onmund, J'zargo's level does not cap at 30; he will continue to level up with you beyond this.

.taj justifie le texte.

Ce texte possède la classe .taj.

Bastia a mis une énorme pression sur Nice en début de match et les Corses ont bien failli ouvrir le score dès les premières secondes par Gaël Danic, qui s'y est pourtant pris à deux fois. Le ballon a fini dans les airs après avoir été repoussé une première fois par Benitez, le remplaçant de Cardinale (2e). Un quart d'heure plus tard, une percée de ce même Danic a permis à Prince Oniangué de donner l'avantage aux hommes de Ciccolini d'un tir croisé. L'ancien joueur de Reims, qui est arrivé il y a quelques jours de Wolverhampton, n'a donc mis que 17 minutes pour se faire adopter (17e, 1-0). Peu après la demi-heure de jeu, Nice a égalisé sur un corner de Cyprien. Arnaud Souquet était à la réception au premier poteau et sa tête en mouvement a trompé Leca (33e). Celui qui a débuté sa carrière à 17 ans à Lille a pas mal galéré ces dernières saisons, passant notamment par Drancy (CFA) et Le Poiré-sur-Vie (National).

.hyphens permet d'utiliser les césures, couplées à text-align: justify.

Note : Il vaut mieux utiliser un attribut lang sur la balise html pour activer les césures.

Ce texte possède la classe .hyphens.

Couleurs prédéfinies

Couleurs de base

Couleurs secondaires

Couleur du texte

Ce texte est dans un span.main-color-text.

.main-color-text utilise la couleur principale comme couleur de texte.

Ce texte est dans un span.main-color-text.

Ce texte est dans un span.secondary-color-text.

.secondary-color-text utilise la couleur secondaire comme couleur de texte.

Ce texte est dans un span.secondary-color-text.

Ce texte est dans un span.valid-text.

.valid-text utilise la couleur indiquant la validité comme couleur de texte.

Ce texte est dans un span.valid-text.

Ce texte est dans un span.invalid-text.

.invalid-text utilise la couleur indiquant l'invalidité comme couleur de texte.

Ce texte est dans un span.invalid-text.

Ce texte est dans un span.warning-text.

.warning-text utilise la couleur indiquant la précaution comme couleur de texte.

Ce texte est dans un span.warning-text.

Couleur du fond et du texte

Ce paragraphe possède la classe .main-color.

.main-color utilise la couleur principale comme couleur de fond. La couleur du texte est la couleur par défaut.

Ce texte possède la classe .main-color.

Ce paragraphe possède la classe .secondary-color.

.secondary-color utilise la couleur secondaire comme couleur de fond. La couleur du texte est la couleur par défaut.

Ce texte possède la classe .secondary-color.

Ce paragraphe possède la classe .valid.

.valid utilise la couleur indiquant la validité comme couleur thème coloré.

Ce texte possède la classe .valid.

Ce paragraphe possède la classe .invalid.

.invalid utilise la couleur indiquant l'invalidité comme couleur thème coloré.

Ce texte possède la classe .invalid.

Ce paragraphe possède la classe .warning.

.warning utilise la couleur indiquant la précaution comme couleur thème coloré.

Ce texte possède la classe .warning.

Ce paragraphe possède la classe .info.

.info utilise la couleur indiquant une information à l'utilisateur.

Ce texte possède la classe .info.

Présentation

Le layout utilise flex, et est pensé mobile first. Des classes spécifiques correspondant à certains breakpoints permettent d'altérer le layout en fonction de la taille du viewport.

Grille

Le système de grille compte douze colonne possibles.

Un container doit être utilisé pour créer un contexte de layout flex. Les éléments à l'intérieur peuvent utiliser une série de classes pour être dimensionnées et positionnées :

.flex

applique un style CSS

flex: 1;

.flex-1, .flex-2, ..., .flex-12

applique un style CSS

flex:0 0 $largeur_de_la_colonne;

Par exemple, .flex-6 règle la largeur à 50%, .flex-8 la règle à 66.666%.

Grille Responsive

Plusieurs breakpoints existent :

• S : 479px

• M : 767px

• L : 1023px

• XL : 1199px

Utiliser .flex-s-3 fait en sorte que l'élément prenne une largeur de 25% au dessus de 479px.

Utiliser .flex-m-4 fait en sorte que l'élément prenne une largeur de 33.333% au dessus de 767px.

Utiliser .flex-l-6 fait en sorte que l'élément prenne une largeur de 50% au dessus de 1023px.

Utiliser .flex-xl-12 fait en sorte que l'élément prenne une largeur de 100% au dessus de 1199px.

Faire wrapper les éléments flex

Si on veut faire cohabiter des éléments flex pour une largeur supérieure à 12 colonnes, utiliser un élément avec la classe .flex-break-* (* représentant s, m, l ou xl) permet de faire passer les éléments flex à la ligne. La propriété flex-wrap le permet aussi.

Forcer les éléments à prendre toute la largeur

On peut utiliser une classe .extensible-* pour faire passer les éléments en flex-direction: row. * représente une taille (s, m, l, xl). On peut aussi utiliser flex-12 qui dimensionnera les élements à 100% de la largeur.

Containers

Plusieurs classes sont disponibles pour les containers.

Container principal

La classe .main-container force l'élément à occuper toute la hauteur disponible. Il est conçu pour être utilise sur <main>, par exemple.

.main-container{
    min-height: 100vh;
}
    

Container standard

La classe .container donne du padding à l'élément, l'équivalent d'une gouttière ($gutter). Il est conçu pour mettre des éléments sans padding dedans, par exemple des <p>

.container{
    padding: $gutter;
}
    

Container flex

La classe .flex-container crée un contexte flex. Il est nécessaire pour utiliser les classes de layout .flex-*.

.flex-container{
    display: flex;
    padding: $gutter / 2;
}
    

Exemples

Layout responsive à deux colonnes

    

        
Largeur de 3
        
Devient 100% de la largeur en dessous de 767px
    
    

        
Largeur de 9
        
Devient 100% de la largeur en dessous de 767px
    

    

Layout responsive à trois colonnes

    

        
Largeur de 3
        
Devient 100% de la largeur en dessous de 1023px
    
    

        
Largeur de 6
        
Devient 100% de la largeur en dessous de 1023px
    
    

        
Largeur de 3
        
Devient 100% de la largeur en dessous de 1023px
    

    

Layout responsive à trois colonnes avec flex-break responsive et sous-contexte flex

    

        
Devient 100% de la largeur en dessous de 1199px, sinon fait 25% de la largeur.
    
    
    

    

        
Devient 66% de la largeur en dessous de 1199px
        
Puis devient 100% de la largeur en dessous de 767px
        
        
    
    

        
Devient 33% de la largeur en dessous de 1199px
        
Puis devient 100% de la largeur en dessous de 767px
    

    

Classes et propriétés de layout flex

Flux - flex-flow

// flow of flex items
.flex-columns{
    flex-direction: column;
}
.flex-rows{
    flex-direction: row;
}
    

Retour à la ligne - flex-wrap

// wrap
.flex-wrap{
    flex-wrap:wrap;
}
.flex-nowrap{
    flex-wrap:nowrap;
}
.flex-wrap-reverse{
    flex-wrap:wrap-reverse;
}
    

Justification - justify-content

// justify-content : justification of items in the container
.flex-jc-start{
    justify-content: flex-start;
}
.flex-jc-end{
    justify-content: flex-end;
}
.flex-jc-center{
    justify-content: center;
}
.flex-jc-space-around{
    justify-content: space-around;
}
.flex-jc-space-between{
    justify-content: space-between;
}
    

Alignement vertical - align-items

// align-items : vertical alignment of items along a line
.flex-ai-center{
    align-items: center;
}
.flex-ai-stretch{
    align-items: stretch;
}
.flex-ai-baseline{
    align-items: baseline;
}
.flex-ai-start{
    align-items: flex-start;
}
.flex-ai-end{
    align-items: flex-end;
}
    

Justification verticale - align-items

// align-content : vertical alignment of items in the container
.flex-ac-center{
    align-content: center;
}
.flex-ac-stretch{
    align-content: stretch;
}
.flex-ac-start{
    align-content: flex-start;
}
.flex-ac-end{
    align-content: flex-end;
}
.flex-ac-space-around{
    align-content: space-around;
}
.flex-ac-space-between{
    align-content: space-between;
}
    

Justification verticale d'un élément - align-self

// align-self : vertical alignment of an item in the container
.flex-as-center{
    align-self: center;
}
.flex-as-stretch{
    align-self: stretch;
}
.flex-as-baseline{
    align-self: baseline;
}
.flex-as-start{
    align-self: flex-start;
}
.flex-as-end{
    align-self: flex-end;
}
    

Exemple de formulaire

    

        Texte
        
    
    

        Select
        
            À propos des pizzas
            Un canard dans la ville
            Ma voiture me regarde bizarrement
        
    
    

        Checkbox
        
        

            
        
    
    

        Radio
        
        Poulet
        

            
        
        Frites
        

            
        
    
    

        
    

    

Exemple de tableau

    

        

            
Artiste
            
Chanson
            
Album
        
        

            
Tupac Shakur
            
Skandalouz
            
All eyez on me
        
        

            
Frank Black
            
Superabound
            
Teenager of the year
        
        

            
Hüsker Dü
            
When pink turns to blue
            
Zen Arcade
        
    

    

Classes helpers

Ces classes permettent d'utiliser directement les propriétés les plus souvent utilisées.

/*************************
*         HELPERS        *
*************************/
.lh{
    line-height: $line_height;
}
.dib{
    display:inline-block !important;
}
.db{
    display:block !important;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.hidden{
    display: none !important;
}
.relative, .pr{
    position: relative;
}
.fixed, .pf{
    position: fixed;
}
.absolute, .pa{
    position: absolute;
}
    

Classes Margin

Ces classes permettent d'appliquer un margin-left pour créer un offset sur un élémént du layout.

.ml-1{
    margin-left: $grid1;
}
.ml-2{
    margin-left: $grid2;
}
/* il y en a autant que de colonnes dans la grille. */
    

Classes Hidden

Ces classes permettent de cacher un élément selon les media-queries. Il y en a une pour chaque taille s, m, l, xl.

.hidden-s{
    display: none !important;
}
.hidden-m{
    display: none !important;
}
.hidden-l{
    display: none !important;
}
.hidden-xl{
    display: none !important;
}
/* cache en dessous de 479px */
.hidden-under-s{
    display: none;
}
/* cache en dessous de 767px */
.hidden-under-m{
    display: none;
}
/* cache en dessous de 1023px */
.hidden-under-l{
    display: none;
}
/* cache en dessous de 1199px */
.hidden-under-xl{
    display: none;
}
    

Padding

Gestion du padding

/*************************
*         PADDING        *
*************************/
.padding, .pad, .pd{
    padding: $gutter;
}
.padding-left, .padl, .pdl{
    padding-left: $gutter;
}
.padding-right, .padr, .pdr{
    padding-right: $gutter;
}
.padding-top, .padt, .pdt{
    padding-top: $gutter;
}
.padding-bottom, .padb, .pdb{
    padding-bottom: $gutter;
}
.padding-left-right, .padlr, .pdlr{
    padding: 0 $gutter 0 $gutter;
}
.padding-top-bottom, .padtb, .pdtb{
    padding: $gutter 0 $gutter 0;
}
/*************************
*       HALF-PADDING     *
*************************/
.half-padding, .hpad, .hpd{
    padding: $gutter / 2;
}
.helf-padding-left, .hpadl, .hpdl{
    padding-left: $gutter / 2;
}
.helf-padding-right, .hpadr, .hpdr{
    padding-right: $gutter / 2;
}
.helf-padding-top, .hpadt, .hpdt{
    padding-top: $gutter / 2;
}
.helf-padding-bottom, .hpadb, .hpdb{
    padding-bottom: $gutter / 2;
}
.helf-padding-left-right, .hpadlr, .hpdlr{
    padding: 0 $gutter / 2 0 $gutter / 2;
}
.helf-padding-top-bottom, .hpadtb, .hpdtb{
    padding: $gutter / 2 0 $gutter / 2 0;
}
/*************************
*       NO PADDING       *
*************************/
.no-padding, .nopad, .npd, .np{
    padding: 0 !important;
}
.no-padding-top, .nopadt, .npdt{
    padding-top: 0 !important;
}
.no-padding-bottom, .nopadb, .npdb{
    padding-bottom: 0 !important;
}
.no-padding-left, .nopadl, .npdl{
    padding-left: 0 !important;
}
.no-padding-right, .nopadr, .npdr{
    padding-right: 0 !important;
}
    

Margin

Gestion des marges

/*************************
*         MARGIN         *
*************************/
.margin, .mar, .mg{
    margin: $gutter;
}
.margin-left, .marl, .mgl{
    margin-left: $gutter;
}
.margin-right, .marr, .mgr{
    margin-right: $gutter;
}
.margin-top, .mart, .mgt{
    margin-top: $gutter;
}
.margin-bottom, .marb, .mgb{
    margin-bottom: $gutter;
}
.margin-left-right, .marlr, .mglr{
    margin: 0 $gutter 0 $gutter;
}
.margin-top-bottom, .martb, .mgtb{
    margin: $gutter 0 $gutter 0;
}
/*************************
*       HALF-MARGIN      *
*************************/
.half-margin, .hmar, .hmg{
    margin: $gutter / 2;
}
.helf-margin-left, .hmarl, .hmgl{
    margin-left: $gutter / 2;
}
.helf-margin-right, .hmarr, .hmgr{
    margin-right: $gutter / 2;
}
.helf-margin-top, .hmart, .hmgt{
    margin-top: $gutter / 2;
}
.helf-margin-bottom, .hmarb, .hmgb{
    margin-bottom: $gutter / 2;
}
.helf-margin-left-right, .hmarlr, .hmglr{
    margin: 0 $gutter / 2 0 $gutter / 2;
}
.helf-margin-top-bottom, .hmartb, .hmgtb{
    margin: $gutter / 2 0 $gutter / 2 0;
}
/*************************
*        NO MARGIN       *
*************************/
.no-margin, .nomar, .nmg, .nm{
    margin: 0 !important;
}
.no-margin-top, .nomart, .nmgt{
    margin-top: 0 !important;
}
.no-margin-bottom, .nomarb, .nmgb{
    margin-bottom: 0 !important;
}
.no-margin-left, .nomarl, .nmgl{
    margin-left: 0 !important;
}
.no-margin-right, .nomarr, .nmgr{
    margin-right: 0 !important;
}