Typographie

Caractéristiques des différents éléments de typographie

Caractéristiques des headlines

Classes et propriétés pour les headlines

Classe CSS	Taille minimale sur un écran de 375px	Taille maximale à partir de 1388px	Police	Graisse	Transformation	Couleur
.headline .is-level-1	32px	48px	Bouygues Speak	Bold	Normal	#00263c
.headline .is-level-2	28px	38px	Bouygues Speak	Bold	Normal	#00263c
.headline .is-level-3	24px	28px	Bouygues Speak	Bold	Normal	#00263c

Caractéristiques des titres

La typographie est dite fluide, ce qui implique une taille minimale sur la plus petite résolution supportée par Trilogy (soit 375px) et une taille maximale sur la plus haute résolution supportée (soit 1388px). Les résolutions intermédiaires n'ont pas de taille de police figée, celle-ci est calculée en fonction de la taille du viewport.

Classes et propriétés pour les titres

Classe CSS	Taille minimale sur un écran de 375px	Taille maximale à partir de 1388px	Police	Graisse	Transformation	Couleur
.title .is-level-1	22px	28px	Bouygues Read	Semibold	Normal	#00263c
.title .is-level-2	20px	24px	Bouygues Read	Semibold	Normal	#00263c
.title .is-level-3	18px	22px	Bouygues Read	Semibold	Normal	#00263c
.subtitle	15px	15px	Bouygues Read	Semibold	Normal	#109DB9
.suptitle	15px	15px	Bouygues Read	Semibold	Majuscule	#109DB9

Caractéristiques des textes

La taille des textes reste la même en mobile et en desktop

Classes et propriétés pour les textes hors titre

Classe CSS	Taille	Police	Graisse	Couleur
.text .is-level-1	16px	Bouygues Read	Normal	#00263c
.text .is-level-2	14px	Bouygues Read	Normal	#00263c
.text .is-level-3	12px	Bouygues Read	Medium, 500	#00263c
.text .is-level-4	10px	Bouygues Read	Medium, 500	#00263c

Helpers

Modifier la taille, la couleur et le style du texte

# Tailles de texte alternatives (tous viewports identiques)

Classes et propriétés de surcharge de taille pour les texte

Classe CSS	Taille
is-size-1	32px
is-size-2	28px
is-size-3	24px
is-size-4	20px
is-size-5	18px
is-size-6	15px
is-size-7	15px
is-size-8	11px

# Couleurs des textes

Couleurs de la marque

Classes et rendu de surcharge de couleur de marque pour les textes

Classe CSS	Rendu	Classe CSS	Rendu
has-text-primary has-text-primary-mobile has-text-primary-touch has-text-primary-tablet has-text-primary-desktop has-text-primary-widescreen has-text-primary-fullhd	Lorem ipsum dolor sit amet	has-text-primary-invert has-text-primary-invert-mobile has-text-primary-invert-touch has-text-primary-invert-tablet has-text-primary-invert-desktop has-text-primary-invert-widescreen has-text-primary-invert-fullhd	Lorem ipsum dolor sit amet
has-text-secondary has-text-secondary-mobile has-text-secondary-touch has-text-secondary-tablet has-text-secondary-desktop has-text-secondary-widescreen has-text-secondary-fullhd	Lorem ipsum dolor sit amet	has-text-secondary-invert has-text-secondary-invert-mobile has-text-secondary-invert-touch has-text-secondary-invert-tablet has-text-secondary-invert-desktop has-text-secondary-invert-widescreen has-text-secondary-invert-fullhd	Lorem ipsum dolor sit amet
has-text-tertiary has-text-tertiary-mobile has-text-tertiary-touch has-text-tertiary-tablet has-text-tertiary-desktop has-text-tertiary-widescreen has-text-tertiary-fullhd	Lorem ipsum dolor sit amet	has-text-tertiary-invert has-text-tertiary-invert-mobile has-text-tertiary-invert-touch has-text-tertiary-invert-tablet has-text-tertiary-invert-desktop has-text-tertiary-invert-widescreen has-text-tertiary-invert-fullhd	Lorem ipsum dolor sit amet

Couleurs sémantiques

Classes et rendu de surcharge de couleur sémantique pour les textes

Classe CSS	Rendu
has-text-info	Lorem ipsum dolor sit amet
has-text-success	Lorem ipsum dolor sit amet
has-text-warning	Lorem ipsum dolor sit amet
has-text-danger	Lorem ipsum dolor sit amet

Variantes de gris

Classes et rendu de surcharge de couleur en variantes de gris pour les textes

Classe CSS	Rendu
has-text-grey-dark	Nettement plus lisible une fois surligné !
has-text-grey	Nettement plus lisible une fois surligné !

# Transformation du texte

Classes et rendu de surcharge de transformation pour les textes

Classe CSS	Rendu
is-capitalized	Transforme le premier caractère de chaque mot en majuscule
is-lowercase	Transforme tous les caractères en minuscules
is-uppercase	Transforme tous les caractères en majuscules
is-italic	Met en italique tous les caractères de la chaîne

# Alignement du texte

Tous viewports confondus

Classes et rendu de surcharge d'alignement pour les textes

Classe CSS	Résultat
has-text-left	Ce texte est aligné à gauche
has-text-centered	Ce texte est centré
has-text-right	Ce texte est aligné à droite
has-text-justified	Irure officia mollit pariatur amet tempor in proident cillum. In est reprehenderit sint nostrud do ex tempor commodo aliquip aliqua esse velit. Incididunt ex sunt sit laborum pariatur eu exercitation. Sunt Lorem aliqua duis eiusmod reprehenderit tempor. Ullamco voluptate nostrud sunt cupidatat eu veniam cillum magna commodo. Aliquip minim esse duis proident ipsum consequat ullamco laboris dolor. Aliqua reprehenderit occaecat consequat velit minim non cupidatat duis sit tempor laborum quis. Nulla sit non labore mollit eiusmod adipisicing eiusmod eiusmod.

Déclinaisons responsive

Classes de déclinaisons responsives et validité sur différentes tailles de viewport

Classe CSS	Mobile	Tablet	Desktop	Widescreen	Full HD
has-text-left-mobile has-text-centered-mobile has-text-right-mobile has-text-justified-mobile	Oui	Non	Non	Non	Non
has-text-left-tablet has-text-centered-tablet has-text-right-tablet has-text-justified-tablet	Non	Oui	Oui	Oui	Oui
has-text-left-tablet-only has-text-centered-tablet-only has-text-right-tablet-only has-text-justified-tablet-only	Non	Oui	Non	Non	Non
has-text-left-touch has-text-centered-touch has-text-right-touch has-text-justified-touch	Oui	Oui	Non	Non	Non
has-text-left-desktop has-text-centered-desktop has-text-right-desktop has-text-justified-desktop	Non	Non	Oui	Oui	Oui
has-text-left-desktop-only has-text-centered-desktop-only has-text-right-desktop-only has-text-justified-desktop-only	Non	Non	Oui	Non	Non
has-text-left-widescreen has-text-centered-widescreen has-text-right-widescreen has-text-justified-widescreen	Non	Non	Non	Oui	Oui
has-text-left-widescreen-only has-text-centered-widescreen-only has-text-right-widescreen-only has-text-justified-widescreen-only	Non	Non	Non	Oui	Non
has-text-left-fullhd(-only) has-text-centered-fullhd(-only) has-text-right-fullhd(-only) has-text-justified-fullhd(-only)	Non	Non	Non	Non	Oui