Spacing
The Spacing system provides utility classes for controlling margins and padding. It includes both fixed sizes and decimal values to handle precise spacing needs.
Available spacing sizes and their pixel values
Margin Utilities
Control element margins using these utility classes. Each class follows the pattern {property}--{size} and supports responsive modifiers for Size
Size
Size
Define exact width and height dimensions for elements
The Size system provides utility classes for controlling width and height dimensions. It includes both fixed sizes and responsive utilities to handle various layout needs.
, Orientation, and Size + Orientation
Responsive
Responsive
Adapt styles based on screen width using breakpoint prefixes
The Responsive system provides two complementary approaches for creating adaptive layouts: Size-based breakpoints that respond to screen dimensions, and Bit-depth variants that adapt to color capabilities. Together, they enable precise control over how your content appears across TRMNL's diverse range of devices.
.
m--{size}
All sides margin
mt--{size}
Top margin
mr--{size}
Right margin
mb--{size}
Bottom margin
ml--{size}
Left margin
mx--{size}
Horizontal margin
my--{size}
Vertical margin
md:my--{size}
Size-based example
portrait:mx--{size}
Orientation-based example
lg:portrait:mt--{size}
Size + Orientation example
Padding Utilities
Control element padding using these utility classes. Each class follows the pattern {property}--{size}. See
Size
Size
Define exact width and height dimensions for elements
The Size system provides utility classes for controlling width and height dimensions. It includes both fixed sizes and responsive utilities to handle various layout needs.
for sizing tokens.
p--{size}
All sides padding
pt--{size}
Top padding
pr--{size}
Right padding
pb--{size}
Bottom padding
pl--{size}
Left padding
px--{size}
Horizontal padding
py--{size}
Vertical padding
sm:px--{size}
Size-based example
portrait:pb--{size}
Orientation-based example
md:portrait:pt--{size}
Size + Orientation example
Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4/8/16-bit |
|---|---|---|---|---|
--gap-large
|
20px | — | — | — |
--gap-medium
|
16px | — | — | — |
--gap-small
|
7px | — | — | — |
--gap-xlarge
|
30px | — | — | — |
--gap-xsmall
|
5px | — | — | — |
--gap-xxlarge
|
40px | — | — | — |
--list-gap-large
|
16px | — | — | — |
--list-gap-small
|
8px | — | — | — |