Tout ce qu'il faut pour mettre en forme sobrement des contenus texte.
Styles de texte
Styles de base
Les éléments de base ont été stylés de façon la plus légre possible afin de premettre d'en faire une base solide et stable au reste du CSS, et de pouvoir être utilisé sans ajout de classe dans le corps des pages.
See the Pen base - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
p a h1, h2, h3, h4, h5, h6 ul, ol blockquote, cite
Mixins de texte
Elles permettent de faire de petite corrections de mise en forme ponctuelles sans toucher au CSS global et créer de nouvelles classes.
class="text_size"
See the Pen Text little - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
text_size x-small small large x-large
Text color
La classe a privilégier est text_color qui est plus résiliente.
Les autres classes sont mises à disposition au cas où il faudrait faire co-exister plusieurs couleurs (par exemple dans un tableau).
See the Pen Text colors by Margot Nadot (@MagNadAnn) on CodePen.
text_color text_green text_blue text_red text_yellow text_charcoal text_cream text_pearl text_white
Text align
Sur mobile, text_left et text_right sont annulées pour revenir à leur alignement hérité (souvent le centrage) pour s'adapter élégamment à la mise en une seule colonne.
See the Pen Text align - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
text_left text_center text_right
class="text_on-photo"
Mise en scène ici dans un hero.
See the Pen Text on photo - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
text_on-photo
Listes simples améliorées
Les puces sont tirées des pictogrammes de Font Awesome et sont prévues en teintes charcoal et white. Disponible en SVG, il est assez facile de les décliner en d'autres couleurs de la charte.
See the Pen list simple - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
list-simple_arrow list-simple_long-arrow list-simple_double-arrow
Texte en colonnes
Classes text_columns_2 ou text_columns_3 pour entourer le texte à répartir en colonnes sur les grands écrans
⚠️ Ne pas utiliser sur des sections de texte trop longue : il ne faut pas que l'internaute ait à re-scroller vers le haut pour remonter en haut de la deuxième colonne.
class="text_columns"
See the Pen text columns - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
text_columns_2 text_columns_3
Exergues
Classe à placer autour du passage que l'on souhaite mettre (très) en valeur.
La fonction d'une exergue est d'accrocher le regard et l'intérêt de l'internaute et de lui donner envie de se plonger dans le contenu.