Pollen
GithubShare on Twitter
  • Introducing Pollen
  • Basics
    • Getting started
    • Configuration
      • Configuring Modules
      • Extending Pollen
      • Media & Supports
    • Javascript
  • Modules
    • Typography
    • Layout
    • UI
    • Grid
    • Colors
  • Utils
    • defineConfig
    • fluid
    • shimmie
  • Misc
    • Motivations
    • Contributing
  • Migration Guide
    • v4 -> v5
Powered by GitBook
On this page
  • Size Scale
  • Container Widths
  • Aspect Ratios

Was this helpful?

Edit on GitHub
  1. Modules

Layout

Structural consistency

PreviousTypographyNextUI

Last updated 10 months ago

Was this helpful?

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)

section {
  margin-top: var(--size-5);
}
Property
Value

--size-px

1px

--size-1

4px

--size-2

8px

--size-3

12px

--size-4

16px

--size-5

20px

--size-6

24px

--size-7

28px

--size-8

32px

--size-9

36px

--size-10

40px

--size-11

44px

--size-12

48px

--size-14

56px

--size-16

64px

--size-20

80px

--size-24

96px

--size-28

112px

--size-32

128px

--size-36

144px

--size-40

160px

--size-44

176px

--size-48

192px

--size-52

208px

--size-56

224px

--size-60

240px

--size-64

256px

--size-72

288px

--size-80

320px

--size-96

384px

--size-full

100%

--size-screen

100vw

--size-min

min-content

--size-max

max-content

Container Widths

Encourage consistent max-widths for containers throughout an interface, based roughly on common device breakpoints

Property group
Applies to

--width-*

max-width

.page-container {
  max-width: var(--width-md);
  margin: 0 auto;
}
Property
Value

--width-xs

480px

--width-sm

640px

--width-md

768px

--width-lg

1024px

--width-xl

1280px

Aspect Ratios

Simple aspect ratios for common formats

Property group
Applies to

--ratio-*

aspect-ratio

.image {
  aspect-ratio: var(--ratio-portrait);
}
Property
Value

--ratio-square

1/1

--ratio-portrait

3/4

--ratio-landscape

4/3

--ratio-tall

2/3

--ratio-wide

3/2

--ratio-widescreen

16/9

--ratio-golden

1.618/1