appostle-installer 0.0.21 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,9 +6,39 @@ variables:
6
6
  label: Base Unit
7
7
  value: ""
8
8
  section: spacing
9
+ - key: spacing.max-width-sm
10
+ type: number
11
+ label: Max Width — Small
12
+ value: ""
13
+ section: spacing
14
+ - key: spacing.max-width-md
15
+ type: number
16
+ label: Max Width — Medium
17
+ value: ""
18
+ section: spacing
9
19
  - key: spacing.max-width
10
20
  type: number
11
- label: Max Content Width
21
+ label: Max Width — Standard
22
+ value: ""
23
+ section: spacing
24
+ - key: spacing.max-width-lg
25
+ type: number
26
+ label: Max Width — Large
27
+ value: ""
28
+ section: spacing
29
+ - key: spacing.max-width-xl
30
+ type: number
31
+ label: Max Width — Extra Large
32
+ value: ""
33
+ section: spacing
34
+ - key: spacing.max-width-2xl
35
+ type: number
36
+ label: Max Width — Breakout
37
+ value: ""
38
+ section: spacing
39
+ - key: spacing.max-width-full
40
+ type: number
41
+ label: Max Width — Full
12
42
  value: ""
13
43
  section: spacing
14
44
  - key: spacing.section-gap.mobile
@@ -56,3 +86,17 @@ variables:
56
86
  # Spacing
57
87
 
58
88
  Responsive whitespace tokens. Each gap has a mobile and desktop value — the builder picks the right one based on viewport.
89
+
90
+ ## Width tiers
91
+
92
+ Most sites use multiple content widths to create visual rhythm. The four tiers:
93
+
94
+ - `max-width-sm` (640px) — single-column reading, forms, narrow modals
95
+ - `max-width-md` (800px) — focused CTA blocks, centered forms
96
+ - `max-width` (960px) — standard body text container, lists, FAQs
97
+ - `max-width-lg` (1120px) — feature grids, wide two-column sections
98
+ - `max-width-xl` (1280px) — image-heavy editorial, card compositions
99
+ - `max-width-2xl` (1440px) — breakout zones, full radial layouts, portfolio grids
100
+ - `max-width-full` (1920px) — full-bleed ceiling; fills normal screens, constrains on ultrawides
101
+
102
+ Steps are ~160px each. If the site uses fewer distinct widths, set adjacent tiers to the same value. The builder maps each zone to its tier based on the layout role doc's Content Width Strategy.