Pour ajouter ponctuellement des modifications de mise en page.
Mixin de blocs
Backgrounds
Couleur
Les arrières plans sont issus du nuancier développé pour les sites Terre de Liens.
Pour des objets non-interactifs sans effets de survol ou de click, il est conseillé de n'utiliser que la teinte light de chaque couleur.
Les teintes dark sont en principe réservées aux états hover et focus.
Les teintes bright est en principe réservées à l'état active.
Trame
Les trames doivent être accompagnées d'une couleur de fond afin de déterminer la couleur de l'écriture par dessus.
Les trames doivent rester légères. C'est pourquoi les blanches sont destinées aux fonds clairs et les noires aux fonds foncés.
See the Pen Background color - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
Backgrounds bleu bg-d-blue_light bg-d-blue_dark bg-d-blue_bright Backgrounds vert bg-d-green_light bg-d-green_dark bg-d-green_bright Backgrounds rouge bg-d-red_light bg-d-red_dark bg-d-red_bright Backgrounds yellow bg-d-yellow_light bg-d-yellow_dark bg-d-yellow_bright Backgrounds autres couleurs bg-d-charcoal bg-l-white bg-l-pearl bg-l-cream Backgrounds tramés bg-trame_champs_light bg-trame_champs_dark + un fond de couleur
Listes
Une mixin qui transforme une liste en container flex horizontal sans puces.
Cette liste peut être ordonnée ou désordonnée, ça peut aussi être une <div> avec des <p>, ou toute autre structure de ce type.
La classe list_v permet de passer la liste en format vertical
⚠️ Cette mixin est très utilisée dans ces feuilles de style : menus, tuiles, tags...
class="list"
See the Pen list - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
list list_v* * facultatif
Forcer des modifications ponctuelles
Alignement vertical
à utiliser sur le container de ce qu'on veut positionner verticalement.
block_v-center block_v-bottom
Forcer la position relative
block_pos-relative
Modification du padding
On peut ajouter à cette classe un classe afin d'en modifier la couleur de fond, pour des notifications/instructions utilisateurices par exemple
block_no-padding block_padding neutral info warning success danger
Modification des margin
block_no-margin block_margin-big-screens_left block_margin-big-screens_right Les deux mixins ci-dessus servent à faire des espacements plus harmonieux sur les grands écrans lors de colonages un peu spéciaux, comme le paragraphe "Agriculture et biodiversite" sur la maquette de la page d'accueil du Centre de Ressources
Enlever les contours
block_no-border
Youtube wrap
Un composant pour entourer les iframe Youtube et les adapter à la largeur de l'espace disponible.
class="embed-youtube-resize"
See the Pen embed youtube - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
embed-youtube-resize