ROYALFIT
Style
Riferimento visivo di font, colori, spacing, text-* e heading. Stesse scale del progetto.
Fonts
CSS: --font-title / --font-body · classi: font-title / font-body · Gutenberg: Anton / Outfit
Allenati con metodo, energia e professionisti.
Font size
Gutenberg Font size (XS–XXL) = utility .text-* = var(--text-*).
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Headings
Blocco Heading H1–H4 in Gutenberg, oppure classi .h1–.h4 su qualsiasi elemento.
Esempio titolo H1
Esempio titolo H2
Esempio titolo H3
Esempio titolo H4
Colors
Spacing scale
CSS var(--space-*) · Gutenberg preset --wp--preset--spacing--* · stessi valori.
--space-xs
XS · 8px
--space-s
S · 16px
--space-m
M · 24px
--space-l
L · 40px
--space-xl
XL · 80px
--space-xxl
XXL · 120px
Utility classes
Usale su WH Container / blocchi (Additional CSS class). Esempio: mt-m py-xl
mt-* — margin-top
mt-xs
mt-s
mt-m
mt-l
mt-xl
mt-xxl
mb-* — margin-bottom
mb-xs
mb-s
mb-m
mb-l
mb-xl
mb-xxl
my-* — margin-block (top+bottom)
my-xs
my-s
my-m
my-l
my-xl
my-xxl
mx-* — margin-inline (left+right)
mx-xs
mx-s
mx-m
mx-l
mx-xl
mx-xxl
pt-* — padding-top
pt-xs
pt-s
pt-m
pt-l
pt-xl
pt-xxl
pb-* — padding-bottom
pb-xs
pb-s
pb-m
pb-l
pb-xl
pb-xxl
py-* — padding-block
py-xs
py-s
py-m
py-l
py-xl
py-xxl
px-* — padding-inline
px-xs
px-s
px-m
px-l
px-xl
px-xxl
Gutenberg preset
Nel pannello Margin/Padding del blocco trovi gli stessi step (XS→XXL). Equivalgono alle utility.
--wp--preset--spacing--xs
= 8px--wp--preset--spacing--s
= 16px--wp--preset--spacing--m
= 24px--wp--preset--spacing--l
= 40px--wp--preset--spacing--xl
= 80px--wp--preset--spacing--xxl
= 120px