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-36144px--size-40160px--size-44176px--size-48192px--size-52208px--size-56224px--size-60240px--size-64256px--size-72288px--size-80320px--size-96384px--size-full100%--size-screen100vw--size-minmin-content--size-maxmax-contentContainer 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 1d ago
Copy link
Edit on GitHub