Skip to main content

Spacing

Master TheDock's spacing system for consistent, harmonious layouts.

Overview​

TheDock uses a flexible spacing system based on your typography base size. This creates visual rhythm and ensures consistency across your entire theme.

All spacing values - padding, margins, gaps - work together with a 12-column grid system.

Spacing Scale​

TheDock defines spacing in a 4-step range:

LevelDescriptionTypical Use
SmallMinimal spacingTight layouts, compact sections
NormalStandard spacingDefault, balanced layouts
LargeGenerous spacingBreathing room, editorial feel
HugeMaximum spacingHero sections, luxury aesthetic

All values are relative to your Base Size (set in Typography). Change the base size, and spacing scales proportionally.

Spacing Categories​

Section Spacing​

The vertical space between sections in your templates.

  • Controls the gap between stacked sections
  • Larger values create more distinct visual separation
  • Smaller values create a continuous flow

Grid Width​

The maximum width of your content container:

SettingDescription
SmallNarrow content, lots of margin
NormalBalanced content width
LargeWide content area
HugeMaximum content width
Full100% width (edge to edge)

Grid Padding​

Horizontal padding inside the grid container:

  • Space between content and grid edges
  • Prevents content from touching screen edges on mobile
  • Creates visual margin around your content

Grid Spacing​

The gap between columns in your grid:

  • Controls gutter width
  • Larger values spread columns apart
  • Affects the feel of multi-column layouts

Area Padding​

Internal padding within areas (grid columns):

  • Space between area edge and its content
  • Affects how "padded" content blocks feel

Area Spacing​

Vertical gap between blocks within an area:

  • Controls spacing between stacked content blocks
  • Affects density of content within columns

Default Values​

TheDock has a default for each spacing category. In the template builder, elements set to "default" will use this value.

Setting Defaults​

  1. Go to Design > Spacing
  2. Click Advanced to expand detailed controls
  3. Click the label above any value to set it as default
  4. The default is indicated by a blue dot

Why Use Defaults?​

When elements use the default:

  • Changing the default updates all elements using it
  • One control adjusts spacing across your entire theme
  • Maintains consistency automatically

Page Width​

Each section in your layout has a width setting:

WidthBehavior
SmallNarrow centered content
NormalStandard content width
LargeWide content area
HugeVery wide content
FullEdge-to-edge (100% width)

Using Default Width​

Set a section's width to "Default" (blue dot) to use the global Grid Width setting. This makes it easy to adjust all sections at once.

Block Positioning​

The Blocks Position setting controls how blocks align within their areas:

PositionHorizontalVertical
Top LeftLeft alignedTop aligned
Top CenterCenteredTop aligned
Top RightRight alignedTop aligned
Center LeftLeft alignedVertically centered
Center CenterCenteredVertically centered
Center RightRight alignedVertically centered

This is a global default that can be overridden per section or area.

The 12-Column Grid​

TheDock uses a 12-column grid for responsive layouts.

Why 12 Columns?​

12 is divisible by 2, 3, 4, and 6, allowing for:

  • 2 equal columns (6 + 6)
  • 3 equal columns (4 + 4 + 4)
  • 4 equal columns (3 + 3 + 3 + 3)
  • Asymmetric layouts (4 + 8, 3 + 9, etc.)

Column Spans​

Areas within a grid are defined by their column span:

  • span 12 = Full width
  • span 6 = Half width
  • span 4 = One third
  • span 3 = One quarter

Grid Overlay​

When editing templates, toggle the Grid Overlay to visualize your column structure.

Responsive Spacing​

Spacing automatically adjusts for different screen sizes:

ScreenAdjustment
MobileReduced spacing, single columns
TabletModerate spacing, flexible columns
DesktopFull spacing, all columns

The grid collapses intelligently:

  • Multi-column layouts stack on mobile
  • Padding reduces proportionally
  • Gaps maintain visual rhythm

Using Spacing in Templates​

Section Level​

When editing a section:

  • Top/Bottom Padding - Internal vertical space
  • Width - Container width setting
  • Background - Visual boundaries

Grid Level​

When editing a grid:

  • Columns - Number of columns
  • Gap - Space between columns

Area Level​

When editing an area:

  • Column Span - How many columns to span
  • Padding - Internal spacing
  • Block Spacing - Gap between child blocks

Best Practices​

1. Use Consistent Spacing​

Pick 2-3 spacing sizes and use them throughout. Don't mix all four sizes randomly.

2. Let Defaults Do the Work​

Set thoughtful defaults and use them. Override sparingly.

3. More Space = More Premium​

Luxury and editorial sites benefit from generous spacing. Dense apps need less.

4. Consider Mobile First​

Generous desktop spacing might overwhelm mobile. Preview regularly.

5. Rhythm Over Precision​

Consistent rhythm (e.g., always "Large" between sections) beats pixel-perfect but inconsistent spacing.

6. White Space is Content​

Don't fill every gap. Spacing helps users focus.

Troubleshooting​

Spacing looks inconsistent​

  • Check if elements use "Default" vs fixed values
  • Ensure you haven't overridden spacing in individual sections

Content touches edges on mobile​

  • Increase Grid Padding
  • Check section padding settings

Columns don't align​

  • Verify column spans add up to 12
  • Check for inconsistent area padding

Too cramped / too sparse​

  • Start with Base Size adjustment
  • Then tweak spacing scale

← Back to Documentation