Layout
Structural consistency
Size Scale
Encourage consistent spacing throughout an interface. Pollen's size scale is proportional, so
--size-16 is twice as much as --size-8 for example. One size unit is equal to 4px.Property group
Applies to
--size-*Any size-related property (
margin, padding, width,height, etc)
1
section {
2
margin-top: var(--size-5);
3
}
Copied!
Property
Value
--size-px1px--size-14px--size-28px--size-312px--size-416px--size-520px--size-624px--size-728px--size-832px--size-936px--size-1040px--size-1144px--size-1248px--size-1456px--size-1664px--size-2080px--size-2496px--size-28112px--size-32128px--size-36144pxContainer Widths
Encourage consistent max-widths for containers throughout an interface, based roughly on common device breakpoints
Property group
Applies to
--width-*max-width
1
.page-container {
2
max-width: var(--width-md);
3
margin: 0 auto;
4
}
Copied!
Property
Value
--width-xs480px--width-sm640px--width-md768px--width-lg1024px--width-xl1280pxLast modified 6mo ago
Copy link
Edit on GitHub