Guide de personnalisation des champs markdown
Autres classes très utiles
Cette rubrique regroupe plusieurs classes très utiles pour vous aider à améliorer vos mises en pages : les alignements verticaux et horizontaux, des tailles fixes de blocs, des classes d'affichage en fonction de la taille de l'écran, la troncature de texte et un effet de survol et de relief.
Hauteurs fixes de bloc
Les tailles prédéfinies sont : 50, 100, 200, 300, 400 et 500
Exemple
Taille 200
Code markdown
{{div.height-200.grey.lighten-3}}
Taille 200
{{end}}
Largeurs fixes de bloc
Les tailles prédéfinies sont : 10, 20, 30, 40, 50 et 100
Exemple
Taille 100
Code markdown
{{div.width-100.grey.lighten-3}}
Taille 100
{{end}}
Alignement vertical
Combinée à une taille de bloc fixe, cette classe permet un alignement vetical du texte.
Exemple
Alignement vertical
Code markdown
{{div.valign-wrapper.height-200.grey.lighten-3}}
{{div.valign}}
Alignement vertical
{{end}}
{{end}}
Alignement horizontal du texte
Trois alignements sont proposés : gauche (left), droite (right), centré (center)
Exemple
Texte centré
Code markdown
{{div.center-align.grey.lighten-3}}
Texte centré
{{end}}
Affichage en fonction de la taille de l'écran
Classes gérant le non affichage d'une rubrique en fonction de la taille de l'écran : .hidden (tout écran), .hide-on-small-only (mobile uniquement), .hide-on-med-only (tablette uniquement), .hide-on-med-and-down (tablette et tailles inférieures), .hide-on-med-and-up (tablette et tailles supérieures), .hide-on-large-only (ordinateur uniquement).
Exemple
Code markdown
{{div.hide-on-small-only.grey.lighten-3}}
Rubrique masquée sur mobile (.hide-on-small-only)
{{end}}
Troncature de texte
Tronque un texte trop long.
Exemple
Texte trop long à tronquer
Code markdown
{{div.truncate.width-100.grey.lighten-3}}
Texte trop long à tronquer
{{end}}