Guide de style web

Groupe BC2

par Mathieu Lajeunesse médias interactifs

Couleurs

Couleurs générales

$black #000000 .bg-black $gray #e0ddd3 .bg-gray $white #fcf9f4 .bg-white $yellow #d6e935 .bg-yellow $yellowpale #f0fc8e .bg-yellowpale $green #43625b .bg-green $orange #ff9d6e .bg-orange $peache #fcb796 .bg-peache

Typographie

Polices

Gellix (400)

.font-regular

Gellix italic (400)

.font-regular-italic

Gellix Medium (500)

.font-medium

Gellix Medium Italic (500)

.font-medium-italic

Gellix SemiBold (600)

.font-semibold

Gellix SemiBold Italic(600)

.font-semibold-italic

En-têtes principaux

Titre principal

.heading-main

Titre secondaire

.heading-medium

Titre haut de page

.heading-big

Paragraphes

Texte régulier lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida erat lacinia, iaculis justo vel, suscipit lacus. Pellentesque vestibulum euismod nunc, sit amet laoreet mauris bibendum vulputate. Integer ut lobortis odio. Nulla imperdiet, dui nec venenatis interdum, purus arcu auctor lectus, sit amet sollicitudin risus nibh id nisi.

.text-regular

Texte intro lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida erat lacinia, iaculis justo vel, suscipit lacus. Pellentesque vestibulum euismod nunc, sit amet laoreet mauris bibendum vulputate. Integer ut lobortis odio. Nulla imperdiet, dui nec venenatis interdum, purus arcu auctor lectus, sit amet sollicitudin risus nibh id nisi.

.text-intro

Texte citation lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida erat lacinia, iaculis justo vel, suscipit lacus. Pellentesque vestibulum euismod nunc, sit amet laoreet mauris bibendum vulputate. Integer ut lobortis odio. Nulla imperdiet, dui nec venenatis interdum, purus arcu auctor lectus, sit amet sollicitudin risus nibh id nisi.

.text-quote

Texte large

.text-large

Texte légende

.text-caption

Listes

Liste par défaut
Proin pulvinar erat sed imperdiet vestibulum.
Etiam sed ante eu ipsum aliquam porta.
Vestibulum rhoncus tortor sed cursus vehicula. Donec convallis orci et dolor efficitur, id consectetur nunc egestas. Donec convallis orci et dolor efficitur, id consectetur nunc egestas.

ul

Liste ordonnée par défaut
Proin pulvinar erat sed imperdiet vestibulum.
Etiam sed ante eu ipsum aliquam porta.
Vestibulum rhoncus tortor sed cursus vehicula. Donec convallis orci et dolor efficitur, id consectetur nunc egestas. Donec convallis orci et dolor efficitur, id consectetur nunc egestas.

ol

Liste sans points
Proin pulvinar erat sed imperdiet vestibulum.
Etiam sed ante eu ipsum aliquam porta.
Vestibulum rhoncus tortor sed cursus vehicula. Donec convallis orci et dolor efficitur, id consectetur nunc egestas. Donec convallis orci et dolor efficitur, id consectetur nunc egestas.

.list-plain

Liste espacée
Proin pulvinar erat sed imperdiet vestibulum.
Etiam sed ante eu ipsum aliquam porta.
Vestibulum rhoncus tortor sed cursus vehicula. Donec convallis orci et dolor efficitur, id consectetur nunc egestas. Donec convallis orci et dolor efficitur, id consectetur nunc egestas.

.list-spaced