markdown fields Customization Guide
Other useful classes
This section includes several useful classes to help you improve your layouts: the horizontal and vertical alignment, fixed block sizes, display classes depending on the screen size, text truncation and a rollover effect and relief.
''
Block fixed heights
The predefined sizes are: 50, 100, 200, 300, 400 and 500
Example
Taille 200
markdown code
{{div.height-200.grey.lighten-3}}
Taille 200
{{end}}
Block fixed widths
The predefined sizes: 10, 20, 30, 40, 50 and 100
Example
Taille 100
markdown code
{{div.width-100.grey.lighten-3}}
Taille 100
{{end}}
vertical alignment
Combined with a fixed block size, this class allows vetical text alignment.
Example
Alignement vertical
markdown code
{{div.valign-wrapper.height-200.grey.lighten-3}}
{{div.valign}}
Alignement vertical
{{end}}
{{end}}
horizontal text alignment
Three alignments are proposed: Left (left), right (right), center (center)
Example
Texte centré
markdown code
{{div.center-align.grey.lighten-3}}
Texte centré
{{end}}
Display depending on the screen size
Classes managing not display one field based on the size of the screen: .hidden (any screen), .hide-on-small-only (mobile only), .hide-on-med-only (tablet only), .hide-on-med-and-down (tablet and smaller sizes), .hide-on-med-and-up (tablet and bigger) .hide-on-off-only (computer only).
Example
markdown code
{{div.hide-on-small-only.grey.lighten-3}}
Rubrique masquée sur mobile (.hide-on-small-only)
{{end}}
Truncation of text
Truncates text too long.
Example
Texte trop long à tronquer
markdown code
{{div.truncate.width-100.grey.lighten-3}}
Texte trop long à tronquer
{{end}}