Vertical Rhythm
The problem
Templates are cloned, edited, cloned again, and every clone picks up a little ad-hoc padding. Six months later the spacing between sections varies from 8 to 42 pixels, and the design reads as subtly sloppy without anyone being able to say why.
Fixing it by hand means clicking into every row, every column, and every block, checking four padding values on each, across the whole template. Almost nobody does that more than once.
How it works
In a Bee design, top and bottom padding lives at three levels: the row’s content area, each column, and each block inside a column. Vertical Rhythm lets you define a target for each level once, as a ruleset, then rewrites the whole template to match:
- Dry run first. Preview shows a diff of exactly what would change (which elements, from what value, to what value) before anything is touched.
- Apply rewrites the padding on a copy of the design, re-flows the canvas, and stages the result in Blueshift. Nothing persists until you click Blueshift’s own Save, so backing out is always one refresh away.
- Your ruleset is remembered (synced with your Chrome profile), so cleanup on the next template is one click.
The ruleset
| Level | Default | Notes |
|---|---|---|
| Blocks | 10 px top / 10 px bottom | The workhorse level; most spacing drift lives here. |
| Columns | 0 / 0 | Columns usually shouldn’t carry their own vertical padding. |
| Row content area | Off by default | Row-level padding is usually a deliberate design choice, so it is opt-in. |
| Per-block-type overrides | spacer: ignore |
Exempt block types from the rule or give them their own targets. Spacers are ignored out of the box, since their entire job is spacing. |
Using it
- Enable Vertical Rhythm in the Nitro popup.
- Open a template in Email Template Studio and click the Vertical Rhythm launcher; a floating, draggable panel opens.
- Set your per-level targets and any block-type overrides.
- Click Preview and read the diff: every change is listed before it happens.
- Click Apply, eyeball the canvas, and press Blueshift’s Save to persist (or refresh to discard).
What it never touches
Rhythm cleanup is deliberately conservative. The current version:
- Rewrites desktop padding only. Mobile-specific overrides are deliberate work, so they are detected and reported, never modified.
- Never changes left or right padding; horizontal layout is out of scope.
- Never reaches inside a block’s inner styles, like the padding within a button. Only the block’s outer spacing is normalized.
- Never saves on your behalf. The final Save is always yours.